WordPress增加上下篇代码及样式

WordPress

WordPress增加上下篇代码及样式
增加的样式如上图所示:the_post_navigation是 4.1 版新增加的函数,用来返回当前文章的前/后导航。标准用法为:

while ( have_posts() ) : the_post();
 get_template_part( 'content', get_post_format() );
 the_post_navigation();
 endwhile;

single.php,即文章页增加:

<h3 class="relatedPost-title">Related Posts</h3>
                <?php the_post_navigation( array(
                    'next_text' => '<span class="meta-nav">Next</span><span class="post-title">%title</span>',
                    'prev_text' => '<span class="meta-nav">Previous</span><span class="post-title">%title</span>',
                ) );?>

function.php 中增加:

/上下篇文章样式增加
/********************/
function puma_post_nav_background() {
wp_enqueue_style('Sierra', '//域名/build/css/app.css' , array(), PURE_VERSION, 'screen');  //设置 CSS 主题 HANDLE 名
  if ( ! is_single() ) {return;}
  $previous = ( is_attachment() ) ? get_post( get_post()->post_parent ) : get_adjacent_post( false, '', true );
  $next     = get_adjacent_post( false, '', false );
  $css      = '';
  if ( is_attachment() && 'attachment' == $previous->post_type ) {return;}
  if ( $previous &&  has_post_thumbnail( $previous->ID ) ) {
    $prevthumb = wp_get_attachment_image_src( get_post_thumbnail_id( $previous->ID ), 'post-thumbnail' );
    $css .= '
      .post-navigation .nav-previous { background-image: url(' . esc_url( $prevthumb[0] ) . ');}
      .post-navigation .nav-previous .post-title {color: #fff;display: block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
      .post-navigation .nav-previous .meta-nav {color: rgba(255,255,255,.9)}
      .post-navigation .nav-previous:before{
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: rgba(0,0,0,0.4);
    }
    ';
  }
  if ( $next && has_post_thumbnail( $next->ID ) ) {
    $nextthumb = wp_get_attachment_image_src( get_post_thumbnail_id( $next->ID ), 'post-thumbnail' );
    $css .= '
      .post-navigation .nav-next { background-image: url(' . esc_url( $nextthumb[0] ) . ');}
      .post-navigation .nav-next .post-title {color: #fff;display: block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
      .post-navigation .nav-next .meta-nav {color: rgba(255,255,255,.9)}
      .post-navigation .nav-next:before{
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: rgba(0,0,0,0.4);
    }
    ';
  }
  //echo $css;
  wp_add_inline_style( 'Sierra', $css );
}
add_action( 'wp_enqueue_scripts', 'puma_post_nav_background' );
/********************/
//上下篇文章样式增加

CSS 样式如下:

/* 文章底部上下篇样式 */
.post-navigation{overflow:hidden;padding:25px 0}
.post-navigation .meta-nav{display:block;color:rgba(0,0,0,.44);text-transform:uppercase;font-size:9pt}
.post-navigation .nav-next,.post-navigation .nav-previous{position:relative;box-sizing:border-box;padding:20px;width:50%;background-position:center;background-size:cover}
.post-navigation .nav-next:only-child,.post-navigation .nav-previous:only-child{width:100%;text-align:center}
.post-navigation .nav-next a,.post-navigation .nav-previous a{position:relative;display:block;-webkit-transition:opacity .2s ease 0s;transition:opacity .2s ease 0s}
.post-navigation .nav-previous{float:left;border-right:1px solid #fff}
.post-navigation .nav-next{float:right;border-left:1px solid #fff;text-align:right}
/* 文章底部上下篇样式 */

需要注意的是,如果主题在其它的文件中已经使用了

wp_enqueue_style('Sierra',get_template_directory_uri() . '/build/css/app.css');//设置 CSS 主题 HANDLE 名

要将其删除。比如在 static.php 中定义了

wp_enqueue_style('app', get_template_directory_uri() . '/build/css/app.css' , array(), PURE_VERSION, 'screen');

全文完。

© 声明:本站原创文章采用BY-NC-SA创作共用协议,转载时请标明本文地址;非原创(转载)文章版权归原作者所有。

RECENT POSTS

Stay Hungry. Stay Foolish.

数据库查询次数:10次,页面生成时间:0.030秒。