替換手機的鏈接文本文本

Question

此代碼爲我的Wordpress網站創建我的後/鏈接。

function.php 「類=」「>

<?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（輸出）

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

這產生了鏈接兩者的下一個和前柱，它輸出的標題鏈接在div以及'get_next_post（） - > post_title'。

當我在移動時，我想改變什麼鏈接說'回'和'下一個'

Answer 1

如果你的主題使用引導程序運行，那麼你最好使用它們的helper classes這種事情。

<?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

你知道css媒體查詢嗎？

一個簡單的方法就是使用CSS媒體查詢。你可以做一些這樣的：

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

...

而且在你的CSS，你把一些這樣的：

@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; 
    } 
} 

注：我定義680px最小寬度要考慮一部手機。你將不得不根據你的需要來定義這個數字。