替换移动链接文本文本

Question

This code creates my back/next links for my 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 (output)

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

This creates a link for both the next and previous post. It outputs the title of the link in the div aswell with 'get_next_post()->post_title'.

When on mobile I want to change what the links say to just 'back' and 'next'

Answer 1

If your themes running with bootstrap, then you're best to use their helper classes for this sort of thing.

<?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>'); ?>