代码片段 → WordPress → 为 next_posts_link 和 previous_posts_link 生成的链接添加类

为 next_posts_link 和 previous_posts_link 生成的链接添加类

Avatar of Chris Coyier
Chris Coyier 于

这两个函数创建锚链接，你可以自定义很多东西，但是仅通过使用它们的 parameter 无法添加类。必须添加一个函数到 functions.php 中。

add_filter('next_posts_link_attributes', 'posts_link_attributes');
add_filter('previous_posts_link_attributes', 'posts_link_attributes');

function posts_link_attributes() {
  return 'class="styled-button"';
}
Psst! 创建一个 DigitalOcean 帐户，即可获得 $200 的免费信贷 用于云托管和服务。

评论

  1. Chris Perryman
    评论永久链接#

    再次感谢！我稍微修改了一下这个代码，以适应 next/previous 不同的样式。以下是我所做的事情，以备其他用户需要为每个页面添加类的情况

    add_filter('next_posts_link_attributes', 'posts_link_attributes_1');
add_filter('previous_posts_link_attributes', 'posts_link_attributes_2');

function posts_link_attributes_1() {
    return 'class="prev-post"';
}
function posts_link_attributes_2() {
    return 'class="next-post"';
}
    回复
  2. Brent Lagerman
    评论永久链接#

    另一种方法是在每个链接周围添加一个 LI 类，无需使用函数。

    <!--BEGIN: Page Nav-->
		<?php if ( $wp_query->max_num_pages > 1 ) : // if there's more than one page turn on pagination ?>

	        <nav id="page-nav">
	        	<h1 class="hide">Page Navigation</h1>
		        <ul class="clear-fix">
			        <li class="prev-link"><?php next_posts_link('« Previous Page') ?></li>
			        <li class="next-link"><?php previous_posts_link('Next Page »') ?></li>
		        </ul>
	        </nav>

		<?php endif; ?>
		<!--END: Page Nav-->

    brent
    @
    mimoYmima.com

    查看我们的 wordpress shell – html5.mimoymima.com

    回复
  3. Edward
    评论永久链接#

    我喜欢 Brent 的方法，不过我使用 … 作为每个链接的包装器，而不是 标签。我懒得为列表项编写额外的 CSS，但效果一样。

    回复
  4. Edward
    评论永久链接#

    我喜欢 Brent 的方法，不过我使用 span 标签包装每个链接，而不是 li 标签。我懒得为列表项编写额外的 CSS，但效果一样。

    回复
  5. Chris
    评论永久链接#

    我无法使用 ul/li 方法。无论我做什么，样式都是固定的……有什么想法吗？我做错了什么？

    回复
  6. Rick de Jong
    评论永久链接#

    是否也可以生成一个“last_posts_link”？例如，如果您有 5 个结果页面，您将立即跳转到第 5 页。
    wp pagenavi 使用它，但我不想使用该插件。

    回复
  7. Robin Thebs
    评论永久链接#

    我喜欢 Brent 的方法。

    回复
  8. Martin Allien
    评论永久链接#

    您好，非常感谢！
    这解决了我的“问题”的一半……您知道如何为 next/previous_post_link 添加自定义样式吗？我尝试过添加 next_post_link_attributes 的明显方法，但它不起作用。

    感谢您的帮助：]

    回复
  9. Justin Klemm
    评论永久链接#

    Martin，我也有同样的问题。我追踪到了 WordPress 代码。事实证明 WordPress 对单个帖子链接的过滤器应用方式略有不同。我在下面添加了一些适用于这些链接的代码。它可以与上面的代码一起使用。

    add_filter('next_post_link', 'post_link_attributes');
add_filter('previous_post_link', 'post_link_attributes');

function post_link_attributes($output) {
    $injection = 'class="styled-button"';
    return str_replace('<a href=', '<a '.$injection.' href=', $output);
}
    回复
    • LebCit
      评论永久链接#

      你好 Justin，我只是想说，非常感谢你：）

    • LittleHoopoe
      评论永久链接#

      这对我在 WP 4.5 上有效。

      非常感谢您分享。

  10. Jason
    评论永久链接#

    如何在 wordpress 菜单中为“<a href”添加类，而不是为“”，因为您需要这样做才能实现 fancybox？

    回复
  11. Jon
    评论永久链接#

    我该怎么做才能将链接包围在

    <div> 中，这样我就可以将它放在自己的栏上，当我尝试将它放在 <div> 中时，它会将 div 放在页面的顶部，但导航本身会保留在所有帖子之后。

    回复
  12. Jack
    评论永久链接#

    非常感谢您对这方面的帮助。我已经成功地为 previous 和 next 链接添加了类。

    add_filter('next_posts_link_attributes', 'posts_link_attributes_1');
add_filter('previous_posts_link_attributes', 'posts_link_attributes_2');

function posts_link_attributes_1() {
    return 'class="prev_button" onclick="javascript:ajax_loadContent(\'box-right\',' . next_posts_link() . '");return false"';
}

function posts_link_attributes_2() {
    return 'class="next_button" onclick="javascript:ajax_loadContent(\'box-right\',' . previous_posts_link() . '");return false"';
}

    但是，正如您所见，我在使用 AJAX 将帖子加载到我的 box-right DIV 中时遇到了问题。我使用以下代码加载链接

    <a href="#" onclick="javascript:ajax_loadContent('box-right','page.php');return false">hello</a>

    我试图使用 previous_posts_link() 函数，并将其放在 page.php 所在的位置，在上面的代码中。但我无法使其工作？我对 PHP 还不太熟悉，所以这可能很简单？

    我希望修改 return '<a href="' . previous_posts( false ) . "\" $attr>". preg_replace( '/&([^#])(?![a-z]{1,8};)/i', '&$1', $label ) .'</a>'; link-template.php 文件中的代码，以便 href 为哈希值，href=#，并且 $attr 加载 onclick="javascript:ajax_loadContent('box-right','page.php');return false" – 其中 page.php 实际上使用一个函数来加载前一页和下一页。

    请帮我解决这个问题！
    谢谢！

    这是我采用的方法，它没有奏效……

        return 'class="prev_button" onclick="javascript:ajax_loadContent(\'box-right\',' . previous_posts_link() . '");return false"';
    回复
  13. Catherine Cerezuela
    评论永久链接#

    非常感谢您提供这些信息。Justin 提供的提示非常适合我的情况。

    回复
  14. Tony Mosley
    评论永久链接#

    我很难在页面的头部为这些链接添加过滤器

    我只是想添加一个“pref”和“next”的 ID 以便用简单的页面滑动进行定位，但不知何故，这些链接的文档很难找到，除非您想删除它们。

    有人可以推荐一篇帖子或代码片段来创建类似以下内容吗？

    回复
  15. Tony Mosley
    评论永久链接#

    这个 <link id="prev" rel='prev' title='Waiting' href='http://www.seventhsecond.com/waiting/' />

    回复
  16. Zeal Murapa
    评论永久链接#

    为什么要这样做呢？因为您已经拥有

    post link[rel="next"]{

}

    您只需要确保拥有的是页面/帖子类……

    回复
    • Johnson
      评论永久链接#

      因为您可能希望将现有类应用于链接。

  17. LebCit
    评论永久链接#

    您好，非常感谢您！
    Justin Klemm 的方法对我的 previous/next 帖子链接有效。
    如果有人想为 previous/next 评论链接添加特定类，请使用以下代码

    add_filter('next_comments_link_attributes', 'comments_link_attributes');
add_filter('previous_comments_link_attributes', 'comments_link_attributes');

function comments_link_attributes() {
    return 'class="button success radius"';
}

    这对我在 WP 4.1 上有效
    再次感谢 css-tricks！

    回复
  18. duki
    评论永久链接#

    嗨，大家好。您也可以看一下 get_adjacent_post 函数。它更灵活。
    效果很好！

    http://codex.wordpress.org/Function_Reference/get_adjacent_post

    回复
  19. Andre
    评论永久链接#

    正是我需要的，谢谢！

    回复
  20. Sean
    评论永久链接#

    对于一个页面上的下一个导航：http://justinklemm.com/add-class-to-wordpress-next_post_link-and-previous_post_link-links/

    add_filter('next_post_link', 'post_link_attributes');
add_filter('previous_post_link', 'post_link_attributes');

function post_link_attributes($output) {
    $code = 'class="styled-button"';
    return str_replace('<a href=', '<a '.$code.' href=', $output);
}
    回复

发表评论

您的电子邮件地址不会被公开。 必填字段标有 *

© 2024 . All rights reserved.