ersetzen Link Text für Handy

Question

Dieser Code erstellt meine zurück/nächsten Links für meine Wordpress-Website.

function.php "class =" ">

<?php if (is_single()) : // navigation links for single posts ?> 

    <?php next_post_link('<div class="nav-next">%link</div>', '<span class="fa fa-chevron-up icn"></span>' . _x(get_next_post()->post_title, 'Previous post link', 'bnNav')); ?> 
    <?php previous_post_link('<div class="nav-previous">%link</div>', _x(get_previous_post()->post_title, 'Next post link', 'bnNav'). '<span class="fa fa-chevron-up icn"></span>'); ?> 

... 

html (Ausgang)

<div class="navigation"> 
    <div class="nav-previous"> ... </div> 
    <div class="nav-next"> ... </div> 
</div> 

Dies schafft eine Verbindung sowohl für die nächste und vorherige Post. Es gibt den Titel der Link im div aswell mit 'get_next_post() -> post_title'

Wenn auf dem Handy möchte ich ändern, was die Links sagen, nur 'zurück' und 'nächste'

Answer 1

Wenn Ihre Designs mit Bootstrap ausgeführt werden, verwenden Sie am besten ihre helper classes für diese Art von Sache.

<?php next_post_link('<div class="nav-next">%link</div>', '<span class="fa fa-chevron-up icn"></span>' . _x(get_next_post()->post_title, '<span class="hidden-sm hidden-xs">Previous post link</span><span class="hidden-xl hidden-lg hidden-md">Prev</span>', 'bnNav')); ?> 
<?php previous_post_link('<div class="nav-previous">%link</div>', _x(get_previous_post()->post_title, '<span class="hidden-sm hidden-xs">Next post link</span><span class="hidden-xl hidden-lg hidden-md">Next</span>', 'bnNav'). '<span class="fa fa-chevron-up icn"></span>'); ?> 

Answer 2

Wissen Sie über CSS-Medienabfragen?

Eine einfache Möglichkeit, dies zu tun, ist die Verwendung von CSS-Medienabfragen. Sie können einige, wie dies tun:

<?php if (is_single()) : // navigation links for single posts ?> 

<?php next_post_link('<div class="nav-next">%link</div>', '<span class="fa fa-chevron-up icn"></span>' . _x(get_next_post()->post_title, '<span class="desktop">Previous post link</span><span class="mobile">back</span>', 'bnNav')); ?> 
<?php previous_post_link('<div class="nav-previous">%link</div>', _x(get_previous_post()->post_title, '<span class="desktop">Next post link</span><span class="mobile">next</span>', 'bnNav'). '<span class="fa fa-chevron-up icn"></span>'); ?> 

...

Und in Ihrem CSS, einige so:

@media screen and (min-width: 680px) { 
    .mobile { 
     display: none !important; 
    } 
    .desktop { 
     display: block !important; 
    } 
} 

@media screen and (max-width: 680px) { 
    .mobile { 
     display: block !important; 
    } 
    .desktop { 
     display: none !important; 
    } 
} 

Hinweis: Ich definiere 680px die min Breite berücksichtigt werden Ein Handy. Sie müssen diese Nummer nach Ihren Bedürfnissen definieren.