替换移动设备的链接文本 - replacing link text text for mobile

replacing link text text for mobile

本文关键字：链接文本移动替换 | 更新日期: 2023-09-27

这段代码为Wordpress网站创建了我的上一个/下一个链接。

函数.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（输出）

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

这将为下一篇和上一篇文章创建一个链接。它还使用"get_next_post（）->post_title"输出div中链接的标题。

当在移动设备上时，我想将链接上的内容更改为"后退"answers"下一步"

如果你的主题是用bootstrap运行的，那么你最好使用它们的助手类来做这类事情。

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

你知道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;
    }
}