Question

此代码为我的Wordpress网站创建我的后/下一个链接。

function.php ＆＃34;类=＆＃34;＆＃34;＆GT;

<?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中链接的标题以及＆＃39; get_next_post（） - ＆gt; post_title＆＃39;。

在移动设备上，我想改变链接所说的内容，而不是“回复”。和＆＃39; next＆＃39;

Answer 1

你知道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定义为移动设备。您必须根据需要定义此编号。

Answer 2

如果你的主题使用bootstrap运行，那么你最好使用他们的helper classes来做这类事情。

data.AvailableLeft==2

替换移动链接文本文本

2 个答案: