• wordpress CMS主题:ssmay主题 wordpress CMS主题:ssmay主题
  • 首页 > wordpress CMS主题制作 > WP主题开发15:如何创建wordpress主题trans的文章页模板?

    WP主题开发15:如何创建wordpress主题trans的文章页模板?

    作者: 分类:wordpress CMS主题制作 点击: 1,367 次
    wordpress CMS主题:ssmay主题

      扫描下面的二维码,“关注”我的百家号。

      通过上一章“怎样添加wordpress主题trans的文章列表页模板”的介绍,我们知道了,怎样快速创建wordpress主题的模板文件了,公共模板的使用,让我们节省了不少的时间。本节,我们用同样的方法,来创建trans主题的文章详情页模板。废话不多说,我们直接动手操作。

      第一步:创建一个single.php文件。

      在trans主题目录下创建一个single.php,这是wordpress默认的文章详情页模板,名字不能变。然后,把trans主题的静态模板single.html中的代码复制到这个single.php文件中。

      第二步:替换头部代码。

      在single.php代码中找到< !doctype html>与</header>之间的代码,全部删除掉。然后,在同样的位置上添加如下代码:

      < ?php get_header(); //调用header.php公共头部模板 ?>

      第三步:替换右侧边栏代码。

      在single.php文件的代码中找到< div class="c_right">标签,把它所包含的所有代码全部删除掉,然后,在同样的位置上,添加如下代码:

      <!-- 侧边栏 -->
      < ?php get_sidebar(); //调用公共侧边栏模板sidebar.php ?>

      第四步:替换底部代码。

      在single.php这个文章页模板中找到< footer>标签,把它后面的所有代码全部删除掉,然后,在这个位置上,添加底部模板的调用代码:

      < ?php get_footer(); //调用底部公共模板footer.php ?>

      第五步:修改文章页模板的左侧主体部分。

      single.php模板的左侧主体部分的修改,才是本节所讲的重点。它包括文章页的面包屑导航、文章标题、文章内容、相关文章、评论等等。

      1、添加循环体。

      跟列表页模板一样,文章详情页模板,如果想要获取当前文章的信息,就必须使用wordpress提供的循环体。找到< div class="c_left">标签,在它的前面添加如下代码:

      < ?php
      if( have_posts() ):
      while( have_posts()):
      the_post();
      ?>

      在它的结束标签</div>的后面,添加循环的结束代码:

      < ?php
      endwhile;
      endif;
      ?>

      2、修改面包屑导航。

      文章页的面包屑导航跟文章列表页的差不多,只是要添加一个文章的标题在上面。如下图:

      这里我们直接把代码放出来吧:

      < div class="left_post_menu">
      < li>
      < a href="< ?php bloginfo("siteurl"); ?>">< span class="dashicons-before dashicons-admin-home"></span>首页</a> >
      < ?php the_category(","); echo " > "; the_title(); ?>
      </li>
      < li>
      < span class="dashicons-before dashicons-admin-users">< a href="javascript:;">< ?php the_author(); ?></a></span>
      < span class="dashicons-before dashicons-calendar">< ?php the_time("m-d"); ?></span>
      < span class="dashicons-before dashicons-visibility">
      < ?php echo get_post_meta($post->ID,"views",true); ?>
      </span>
      </li>
      </div>

      这段代码中,我们用到了几个函数:

      the_title() => 获取当前文章的标题
      the_time("m-d") => 获取当前文章发表时间的月分和日期。
      get_post_meta($post->ID,"views",true) => 获取浏览量

      3、修改文章标题的调用。

      一个页面只能有一个< h1>标签,这个< h1>标签就是用来放置文章标题的,代码如下:

      < h1>< ?php the_title(); ?></h1>

      4、调用文章的内容。

      在single.php模板中找到< ul class="post_content">标签,把它里面的所有标签代码字符全部删除,然后,在< ul class="post_content"></ul>标签内部添加发下代码:

      < ?php the_content(); //调用文章的全部内容 ?>

      5、修改版权声明及上一篇下一篇的代码。

      < ul class="post_bottom">
      < li>< b>版权声明:如非注明,此文章为本站原创文章,转载请注明:</b>转载自< ?php bloginfo("name"); ?></li>
      < li>< b>本文链接地址:</b>< ?php the_permalink(); ?></li>
      < li>
      < ?php echo get_option("share"); ?>
      </li>
      < li>上一篇:< ?php previous_post_link("%link"); //调用上一篇文章 ?></li>
      < li>下一篇:< ?php next_post_link("%link");//调用下一篇文章 ?></li>

      </ul>

      6、修改相关文章列表。

      在single.php找到< div class="post_rel_list">标签,反它内部的所有代码删除掉了,然后在< div class="post_rel_list"></div>的内部添加如下代码:

      < ?php
      //按分类目录来调用相关文章
      $cats = wp_get_post_categories($post->ID); //获取当前文章分类ID信息
      if($cats){ //如果不为空
      $catid = $cats[0]; //分类ID
      $args = array(
      'category__in' => array($catid), //允许 的分类ID ,可以多个
      'post__not_in' => array($post->ID), //不允许的文章ID,这里排除当前文章
      'showposts' => 6, //显示6篇
      );
      query_posts($args); //查询
      if(have_posts()): //如果有文章
      while (have_posts()) : the_post(); //就循环显示出来
      ?>
      < ul>
      < li>
      < a href="< ?php the_permalink(); ?>">
      < ?php
      if(has_post_thumbnail()) { //如果有特色图片,就调用特色图片
      the_post_thumbnail(
      'thumbnail' ,
      array(
      'alt' => trim(strip_tags( $post->post_title )),
      'title' => trim(strip_tags( $post->post_title )),
      'class' => 'home-thumb'
      )
      );
      }else { //否则调用文章第一张图片
      echo '< img src="'.catch_first_image().'" alt="'.$post->post_title.'" width="150" height="150" />';
      }
      ?>
      </a>
      </li>
      < li>< a href="< ?php the_permalink(); ?>">< ?php the_title(); ?></a></li>
      < li>
      < span class="dashicons-before dashicons-admin-users">< ?php the_author(); ?></span>
      < span class="dashicons-before dashicons-calendar">< ?php the_time("m-d"); ?></span>
      </li>
      </ul>
      < ?php
      endwhile; wp_reset_query();
      endif;
      }
      ?>

      7、修改评论代码。

      在文章模板文件中,找到< div class="comment_list">标签,把它里面的所有内容全部删除,然后,在< div class="comment_list"></div>这个标签里面添加评论调用代码,如下:

      <?php comments_template(); //调用wordpress默认的评论模板 ?>

      因为,trans主题的静态模板没有写wordpress默认评论模板的CSS样式,所以,我们在这里还要为这个评论模板添加CSS样式,代码如下:

      / *自带评论表单*/
      .comment-respond{ float:left; width:100%; padding:0 15px; box-sizing: border-box; margin-top:15px; }
      .comment-respond h3{ float:left; color:#444; font-weight: 400; margin:10px 0; }
      .comment-respond h3:before {
      font-family: 'dashicons'; /*因为是字体图标,所以当然要指定字体,这是必须的代码*/
      content: "\f125";
      vertical-align: -2px;
      margin-right: 10px;
      color:#aaa;
      }
      .comment-respond form p{ padding-bottom:10px; float:left; width:100%; }
      .comment-respond form p textarea{ width:100%;margin-top:5px; }
      .comment-respond form p:nth-child(3),.comment-respond form p:nth-child(4){ width:48%; display:inline-block; box-sizing: border-box; }
      .comment-respond form p:nth-child(4) { float:right; }
      .comment-respond form p input{ width:100%; margin-top:5px; line-height: 24px; }
      .comment-respond form p input[type=submit]{ width:90px; background:#3571CC; color:#fff; }
      .comment-respond form p.comment-form-cookies-consent{ display:none; }
      /*评论列表*/
      .post_comment .comment_list{ width:100%; float:left; font-size:14px; }
      .post_comment .comment_list h3#comments { display:none; }
      .post_comment .comment_list ol { width:100%; }
      .post_comment .comment_list ol.commentlist>li{ border-bottom:1px solid #ccc; padding-bottom: 20px; margin-top:15px; }
      .post_comment .comment_list ol li { width:100%; position:relative; float:left;padding:0 15px; box-sizing: border-box; }
      .post_comment .comment_list ol li .comment-author .fn{ vertical-align: top; font-weight: 800; margin-right:15px; }
      .post_comment .comment_list ol li .comment-author .says{ display:none; }
      .post_comment .comment_list ol li .comment-author img{ width:45px; height:auto; }
      .post_comment .comment_list ol li .comment-author{ float:left; }
      .post_comment .comment_list ol li .commentmetadata{ float:left; }
      .post_comment .comment_list ol li p{ position:absolute; top:20px; left:65px; }
      .post_comment .comment_list ol li .reply{ float:left; color:#3571CC; margin-left:15px; }
      .post_comment .comment_list ol li .reply a{ color:#3571CC; }
      .comment-body{ float:left; width:100%; }
      .post_comment .comment_list .children{ float:left; margin-left:30px; margin-top:10px; }

      我们再看一下评论模板显示的效果,如下图:

      WP主题开发15:如何创建wordpress主题trans的文章页模板?

      好了,通过上面的步骤,我们全方位地修改了wordpress主题trans的文章详情页模板的代码。相对于文章列表页,详情页模板的修改稍微要麻烦一些。尤其是评论模板的CSS样式的修改,因为wordpress评论是可以嵌套的,所以,评论列表中可能会有“子孙级评论”,这样一来,CSS样式写起来,还是有点麻烦的。嗯,本节就介绍到这里,如有疑问,欢迎点评或关注我。



      欢迎“关注”我的百家号。

      头条二维码
      加入我的QQ群
      头条二维码
      关注我的百家号

    文章作者:码不停蹄
    本文地址:http://wanlimm.com/77202006238673.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    您的电子邮箱地址不会被公开。 必填项已用*标注

    此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据