Innerhalb von Posts mit CSS-basierten Pfeilen navigieren

    Ich habe einen Custom Post Type erstellt. Zwischen den einzelnen Beiträgen soll über Pfeile navigiert werden. Die Pfeile habe ich mit CSS erstellt:

    .arrow_left {
    position:absolute;
    left:[COLOR=#800000]10px[/COLOR];
    top:[COLOR=#800000]5px[/COLOR];
    width: [COLOR=#800000]0[/COLOR];
    height: [COLOR=#800000]0[/COLOR];
    border-top: [COLOR=#800000]10px[/COLOR] solid transparent;
    border-bottom: [COLOR=#800000]10px[/COLOR] solid transparent;
    border-right:[COLOR=#800000]10px[/COLOR] solid lightgrey;
    }

    .arrow_right {
    position:absolute;
    right:[COLOR=#800000]10px[/COLOR];
    top:[COLOR=#800000]5px[/COLOR];
    width: [COLOR=#800000]0[/COLOR];
    height: [COLOR=#800000]0[/COLOR];
    border-top: [COLOR=#800000]10px[/COLOR] solid transparent;
    border-bottom: [COLOR=#800000]10px[/COLOR] solid transparent;
    border-left:[COLOR=#800000]10px[/COLOR] solid lightgrey;
    }

    In der single-customposttype.php habe ich versucht, folgenden Code für die Navigations-Funktionalität dieser Pfeile zu nutzen:

    <?php previous_post_link([COLOR=#800000]'%link'[/COLOR],[COLOR=#800000]'<div class="arrow_left"></div>'[/COLOR]); ?>
    <?php next_post_link([COLOR=#800000]'%link'[/COLOR],[COLOR=#800000]'<div class="arrow_right"></div>'[/COLOR]); ?>

    Aber erfolglos. Die Pfeile werden nicht angezeigt. Was ist falsch an diesem Code?

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    Mal so ganz dumm gefragt: haben die Pfeile mit position:absolute denn etwas, woran sie sich orientieren können? Also z.b. einen Container mit position:relative drumherum? Ansonsten wird man sie wohl irgendwo anders wiederfinden - eben an dem nächsthöheren, woran sie sich orientieren können.

    Man kann die Realität ignorieren - aber nicht die Folgen der ignorierten Realität.

    Die Pfeile werden perfekt angezeigt, wenn ich sie regulär über div-boxen im html einbinde. Sobald ich den WP-PHP-Code integriere, verschwinden sie.

    Gibt es einen Navigations-Code, den man in einen <a>-Tag packen kann? Z. Bsp.:

    <a href="CODE, UM ZUM NÄCHSTEN POST ZU GELANGEN???"><div class="arrow_right"></div></a>

    Das ist... eigenartig. Aber nachdem Du den Link dazu gepostet hast kann ich da wohl nicht wiedersprechen :D

    Man kann die Realität ignorieren - aber nicht die Folgen der ignorierten Realität.

    Am besten ist es zuweilen sich die Funktion anzuschauen und die beginnt mit $format = '&laquo; %link', vor dem ersten Komma.

    PHP
    function get_previous_post_link( $format = '&laquo; %link', $link = '%title', $in_same_cat = false, $excluded_terms = '', $taxonomy = 'category' )

    Dafür solltest Du nun auch beim Funktionsaufruf übergeben können (larr für Linkspfeil):

    PHP
    <?php previous_post_link('&larr; %link'); ?>

    Sieht für mich jetzt etwas merkwürdig von der Syntax aus, doch einen ersten Test würde ich so machen, nur um mal zu schauen, ob kein Error kommt. Alles andere ist ohnehin optional, doch wenn Du weitere Argumente hinzufügen möchtest, musst Du die Reihenfolge von der Funktion einhalten 'Linktext', boolean, '', 'Argument'.

    Jedenfalls an zweiter Stelle dann $link einen leeren Div_bereich andrehen zu wollen, kann wohl nicht funktionieren.

    [COLOR=#800000]'<div class="arrow_left"></div>'[/COLOR]

    Einmal editiert, zuletzt von Melewo (28. März 2014 um 13:11)

    Merke gerade, hatte die get_previous_post_link am Wickel, doch die previous_post_link ist nicht anders aufgebaut, nur mit echo, wobei die get_previous_post_link mit return ist, was den Vorteil hat, dass Du vor der Ausgabe mit echo die Ausgabe beeinflussen kannst.

    Anschauen kannst Du Dir beide in der link-template.php:

    https://core.trac.wordpress.org/browser/tags/3…nk-template.php

    Nicht getestet, nur wie ich es einmal mit der get_... probieren würde.

    PHP
    <?php echo "&larr; ".get_previous_post_link(); ?>

    Einmal editiert, zuletzt von Melewo (28. März 2014 um 13:29)

    Doch noch getestet, so funktioniert es in der single.php:


    [COLOR=#000000][COLOR=#DD0000]larr [/COLOR][/COLOR]gehört mit in die Klammer, sonst wird es ja doppelt ausgegeben.[COLOR=#000000][COLOR=#DD0000]
    [/COLOR][/COLOR]

    Noch einen kleinen Test, wobei ich mir mal wieder zu viel Zeit verspiele. So wird das schon einmal etwas mit der Formatierung:

    PHP
    <?php echo get_previous_post_link('<span class="arrow_left">&larr;</span> %link', 'Test-Titel'); 


/* Ausgabe:
<span class="arrow_left">&larr;</span> <a href="http://localhost/beitragsname/" rel="prev">Test-Titel</a>
*/
?>


    Nur wie das jetzt in einer single-customposttype.php aussieht, ob da die letzten Beiträge genauso erreichbar sind, weiß ich nicht, habe ich auch nicht vor heute noch zu testen.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden