WordPress建站教程:如何设置文章置顶效果?(超详细)

2023-11-23 415 0

继续分享wordpress建站教程。之前的一个wordpress建站项目中遇到一个文章置顶的需求,虽然wordpress默认是有置顶的,但不同的主题和插件显示效果会不一样,还有一些主题可能会屏蔽置顶文章。所以在实际的wordpress建站项目中置顶功能往往困扰着很多用户。要么置顶不生效,要么置顶效果不明显

如上图所示,如果你想在网站的首页或分类目录让置顶文章显示在最前面,同时显示置顶的标签,这要如何实现呢?接下来悦然wordpress建站就给大家分享方法。

步骤一:让置顶文章显示在最前面

首选我们需要让置顶文章显示在最前面,大家可以先看看你的主题是不是已经有这样的效果了,如果已经有的,那就这一步就不用看了。如果没有那就接着下面的操作。

要让置顶文章显示在最前面,主要有两种方法,一种是插件,另一种是代码。

使用代码

大家可以直接把下面的代码添加到当前wordpress建站主题的functions.php文件中保存,它会自动在当前分类显示本分类的置顶文章。【代码来自露兜即刻博客】

add_filter('the_posts',  'putStickyOnTop' );
function putStickyOnTop( $posts ) {
  if(is_home() || !is_main_query() || !is_archive())
    return $posts;
    
  global $wp_query;

  // 获取所有置顶文章
  $sticky_posts = get_option('sticky_posts');
  
  if ( $wp_query->query_vars['paged'] <= 1 && !empty($sticky_posts) && is_array($sticky_posts) && !get_query_var('ignore_sticky_posts') ) {
    $stickies1 = get_posts( array( 'post__in' => $sticky_posts ) );
    foreach ( $stickies1 as $sticky_post1 ) {
      // 判断当前是否分类页 
      if($wp_query->is_category == 1 && !has_category($wp_query->query_vars['cat'], $sticky_post1->ID)) {
        // 去除不属于本分类的置顶文章
        $offset1 = array_search($sticky_post1->ID, $sticky_posts);
        unset( $sticky_posts[$offset1] );
      }
      if($wp_query->is_tag == 1 && !has_tag($wp_query->query_vars['tag'], $sticky_post1->ID)) {
        // 去除不属于本标签的文章
        $offset1 = array_search($sticky_post1->ID, $sticky_posts);
        unset( $sticky_posts[$offset1] );
      }
      if($wp_query->is_year == 1 && date_i18n('Y', strtotime($sticky_post1->post_date))!=$wp_query->query['m']) {
        // 去除不属于本年份的文章
        $offset1 = array_search($sticky_post1->ID, $sticky_posts);
        unset( $sticky_posts[$offset1] );
      }
      if($wp_query->is_month == 1 && date_i18n('Ym', strtotime($sticky_post1->post_date))!=$wp_query->query['m']) {
        // 去除不属于本月份的文章
        $offset1 = array_search($sticky_post1->ID, $sticky_posts);
        unset( $sticky_posts[$offset1] );
      }
      if($wp_query->is_day == 1 && date_i18n('Ymd', strtotime($sticky_post1->post_date))!=$wp_query->query['m']) {
        // 去除不属于本日期的文章
        $offset1 = array_search($sticky_post1->ID, $sticky_posts);
        unset( $sticky_posts[$offset1] );
      }
      if($wp_query->is_author == 1 && $sticky_post1->post_author != $wp_query->query_vars['author']) {
        // 去除不属于本作者的文章
        $offset1 = array_search($sticky_post1->ID, $sticky_posts);
        unset( $sticky_posts[$offset1] );
      }
    }
  
    $num_posts = count($posts);
    $sticky_offset = 0;
    // Loop over posts and relocate stickies to the front.
    for ( $i = 0; $i < $num_posts; $i++ ) {
      if ( in_array($posts[$i]->ID, $sticky_posts) ) {
        $sticky_post = $posts[$i];
        // Remove sticky from current position
        array_splice($posts, $i, 1);
        // Move to front, after other stickies
        array_splice($posts, $sticky_offset, 0, array($sticky_post));
        // Increment the sticky offset. The next sticky will be placed at this offset.
        $sticky_offset++;
        // Remove post from sticky posts array
        $offset = array_search($sticky_post->ID, $sticky_posts);
        unset( $sticky_posts[$offset] );
      }
    }

    // If any posts have been excluded specifically, Ignore those that are sticky.
    if ( !empty($sticky_posts) && !empty($wp_query->query_vars['post__not_in'] ) )
      $sticky_posts = array_diff($sticky_posts, $wp_query->query_vars['post__not_in']);

    // Fetch sticky posts that weren't in the query results
    if ( !empty($sticky_posts) ) {
      $stickies = get_posts( array(
        'post__in' => $sticky_posts,
        'post_type' => $wp_query->query_vars['post_type'],
        'post_status' => 'publish',
        'nopaging' => true
      ) );

      foreach ( $stickies as $sticky_post ) {
        array_splice( $posts, $sticky_offset, 0, array( $sticky_post ) );
        $sticky_offset++;
      }
    }
  }
  
  return $posts;
}

 

以上方法任选一种即可,如果你发现不起效果,那就有可能是你主题的模板文件屏蔽了置顶文章,可以用文件编辑器检查一下主题的列表模板或首页模板有没有如下代码或类似的代码,然后删除试试。

'ignore_sticky_posts' => 1,

步骤二:添加置顶标签

设置好了置顶,接下来我们就需要给置顶文章添加一个比较显示的标记,比如上图2那种样式,就是一个置顶的文字+一个背景色。接下来开始操作。

修改模板文件

找到需要显示置顶的标记的主题模板文件,一般是分类、列表页模板,或者是首页模块模板。找到之后用文本编辑器打开,然后找到【the_title】这样的代码。

然后把下面的代码添加到【the_title】这段的前面或后面即可(文字内容可以修改)。不同的主题可能添加的位置不同,所以你可能需要多试试,直到标题前后能够显示【置顶】为止。

<?php if( is_sticky() ) echo '<span class="sticky_sign">置顶</span>'; ?>

现在光显示一个置顶的文字还不是太明显,所以接下来我们再使用CSS给置顶文字添加一个背景,代码参考如下:

<style> .sticky_sign { color: #fff; background: #ff5722; padding: 3px; } </style>

 

最后的效果如上图所示。

总结

以上就是今天分享的内容。文章置顶一般在博客资源类型的网站中使用比较多,不过这类网站都是专门的主题,所以大家也可以直接用这类主题来建站,一般置顶功能都是开发好的,就不需要我们再折腾了。

    相关文章

    wordpress制作一个简洁的tags聚合页面
    如何制作一个WordPress采集插件并将其添加到后台
    如何制作一个对接腾讯COS云存储的WordPress插件
    WordPress怎么获取TAG随机标签
    WordPress分类页面或文章页面获取当前分类ID
    WordPress判断文章内容为空时显示不同的样式

    发布评论