wordpress主题制作教程:网站文章页模板single.php

2017年12月13日15:22:29 发表评论 26

single.php看这个命名也知道是一个单页面文件,在wordpress中是一个文章页面模板,wordpress网站中所有的文章打开后都是在这个模板上渲染的,所以这个文件也是一个wordpress主题中必备的模板文件,这个模板文件中我们也是需要引入之前做的header.php,sidebar.php和footer.php的。

 

文章页模板前期准备

我们复制到wordpress主题目录下的single.php现在还是一个静态的页面,尽管命名为php了,我们还需要将里面的页头,页脚,侧栏删除,用php引入之前做好的header.php,footer.php和sidebar.php,引入的命令如下:

  1. <!-- 引入页头 -->
  2. <?php get_header() ?>

wordpress主题制作教程:网站文章页模板single.php

PS:图片不显示或者页面显示有问题,可以看看引入的图片或者文件是不是相对路径的,如果是则要用<?php echo get_template_directory_uri(); ?>获取当前目录,再加文件路径就可以变为绝对路径了,全部替换一下图片文件就可以正常显示了。

  1. <!-- 引入图片 -->
  2. <img src="<?php echo get_template_directory_uri(); ?>/img/acticle.png">

文章模板作者信息修改

要修改为动态的信息有:

  1. 文件标题
  2. 文章发布时间
  3. 文章标签
  4. 文章阅读数、评论数和点赞数
  5. 作者名称和作者头像
  1. <header class="card">
  2.     <div class="container">
  3.         <section class="article-info fl">
  4.             <h1 class="mb20"><?php the_title();?></h1>
  5.             <time><?php the_date('Y-m-d H:i l'); ?></time><br>
  6.             <span class="mr10"><?php the_tags(); ?></span>
  7.             <span class="module fr">
  8.                 <?php edit_post_link(); ?>
  9.                 <span><i class="iconfont icon-kanguo"></i>0</span>
  10.                 <span><i class="iconfont icon-pinglun"></i><?php comments_number() ?></span>
  11.                 <span><i class="iconfont icon-zan1"></i>0</span>
  12.             </span>
  13.         </section>
  14.         <section class="author fr">
  15.             <a class="pic" href=""><img src="<?php echo get_template_directory_uri(); ?>/img/author.jpg" alt=""></a>
  16.             <div class="box">
  17.                 <a class="name" href=""><?php the_author(); ?></a>
  18.                 <p>分享头脑,分享技术</p>
  19.                 <a class="btn get-money weaken" href="">打赏</a>
  20.                 <a class="btn share" href="">分享</a>
  21.             </div>
  22.         </section>
  23.     </div>
  24. </header>

文章基本信息修改

  1. 文章内容
  2. 版权声明,作者信息
  3. 上下篇文章
  4. 推荐文章和相关文章和热门文章

 

single.php全部的代码如下:

  1. <!-- 引入页头 -->
  2. <?php get_header() ?>
  3. <!-- 页面主体 -->
  4.     <div class="main">
  5.         <!-- 文章头部信息 -->
  6.         <!-- 文章循环 -->
  7.         <?php while (have_posts()) : the_post(); ?>
  8.         <header class="card">
  9.             <div class="container">
  10.                 <section class="article-info fl">
  11.                     <h1 class="mb20"><?php the_title();?></h1>
  12.                     <time><?php the_date('Y-m-d H:i l'); ?></time><br>
  13.                     <span class="mr10"><?php the_tags(); ?></span>
  14.                     <span class="module fr">
  15.                         <?php edit_post_link(); ?>
  16.                         <span><i class="iconfont icon-kanguo"></i>0</span>
  17.                         <span><i class="iconfont icon-pinglun"></i><?php comments_number() ?></span>
  18.                         <span><i class="iconfont icon-zan1"></i>0</span>
  19.                     </span>
  20.                 </section>
  21.                 <section class="author fr">
  22.                     <a class="pic" href=""><img src="<?php echo get_template_directory_uri(); ?>/img/author.jpg" alt=""></a>
  23.                     <div class="box">
  24.                         <a class="name" href=""><?php the_author(); ?></a>
  25.                         <p>分享头脑,分享技术</p>
  26.                         <a class="btn get-money weaken" href="">打赏</a>
  27.                         <a class="btn share" href="">分享</a>
  28.                     </div>
  29.                 </section>
  30.             </div>
  31.         </header>
  32.         <?php endwhile; ?>
  33.         <div class="container">
  34.             <div class="left-box">
  35.                 <!-- 文章内容 -->
  36.                 <?php while (have_posts()) : the_post(); ?>
  37.                 <div class="article-box card">
  38.                     <?php the_content(); ?>
  39.                     <!-- 点赞 -->
  40.                     <div class="like-btn">
  41.                         <a class="weaken" href=""><i class="iconfont icon-zan1"></i>666</a>
  42.                     </div>
  43.                     <!-- 分享和评论 -->
  44.                     <section class="">
  45.                         <a class="share btn" href="">分享</a>
  46.                         <a class="btn " href="">评论</a>
  47.                     </section>
  48.                 </div>
  49.                 <!-- 版权声明 -->
  50.                 <div class="copyright card">
  51.                     <a class="pic" href=""><img src="<?php echo get_template_directory_uri(); ?>/img/author.jpg" alt=""></a>
  52.                     <div class="box">
  53.                         <p><strong>版权声明:</strong>本站原创文章,于<?php the_date('Y-m-d H:i l'); ?>,由 <?php the_author(); ?> 发表,共 <?php echo count_words($post->post_content); ?>字</p>
  54.                         <a><strong>转载请注明:</strong><?php the_title();?>-<?php bloginfo('name');?></a>
  55.                     </div>
  56.                 </div>
  57.                 <?php endwhile; ?>
  58.                 <!-- 上下篇 -->
  59.                 <section class="card">
  60.                     <div class="prev-article fl">
  61.                         <strong><a href=""><上一篇</a></strong><br>
  62.                         <a href="<?php previous_post_link('%link') ?>"></a>
  63.                     </div>
  64.                     <div class="next-article">
  65.                         <strong><a href="">下一篇></a></strong><br>
  66.                         <a href="<?php next_post_link('%link') ?>"></a>
  67.                     </div>
  68.                 </section>
  69.                 <!-- 推荐文章 -->
  70.                 <div class="recommend card">
  71.                     <!-- 有图 -->
  72.                     <div class="pic-article">
  73.                         <?php query_posts('posts_per_page=4&caller_get_posts=1&orderby=comment_count'); ?>
  74.                         <?php while (have_posts()) : the_post(); ?>
  75.                         <div class="box">
  76.                             <a class="pic" href=""><img src="<?php echo catch_first_image() ?>" alt=""></a>
  77.                             <a class="title"><?php the_title(); ?></a>
  78.                         </div>
  79.                         <?php endwhile; ?>
  80.                         </div>
  81.                     </div>
  82.                     <!-- 相关文章 -->
  83.                     <?php query_posts('posts_per_page=5&caller_get_posts=1&orderby=comment_count'); ?>
  84.                     <div class="list-article card">
  85.                         <p class="title">相关文章</p>
  86.                         <?php while (have_posts()) : the_post(); ?>
  87.                         <a href=""> <?php the_title(); ?></a>
  88.                     <?php endwhile; ?>
  89.                     </div>
  90.                     <!-- 热门文章 -->
  91.                     <div class="list-article card">
  92.                         <p class="title">热门文章</p>
  93.                         <?php query_posts('posts_per_page=5&caller_get_posts=1&orderby=comment_count'); ?>
  94.                         <?php while (have_posts()) : the_post(); ?>
  95.                         <a href=""> <?php the_title(); ?></a>
  96.                         <?php endwhile; ?>
  97.                     </div>
  98.                         <!-- 评论 -->
  99.                     <div class="comment card">
  100.                         <!-- 文字编辑区域 -->
  101.                         <div>
  102.                             <input type="text">
  103.                             <div class="text-edit">
  104.                                 <a class="biaoqing" href=""><i class="iconfont icon-biaoqing2"></i>添加表情</a>
  105.                                 <a href="" class="comment-btn fr">评论</a>
  106.                             </div>
  107.                         </div>
  108.                         <!-- 评论展示区 -->
  109.                         <div class="box">
  110.                             <!-- 全部评论 -->
  111.                             <p class="title"><span>全部评论</span><a href="">99</a></p>
  112.                             <!-- 评论信息 -->
  113.                             <div class="comment-info">
  114.                                 <!-- 评论者 -->
  115.                                 <div class="people">
  116.                                     <a class="pic" href=""><img src="<?php echo get_template_directory_uri(); ?>/img/author.jpg" alt=""></a>
  117.                                     <div class="box">
  118.                                         <strong class="name">功夫熊猫</strong>
  119.                                         <span class="time">30分钟前</span><br>
  120.                                         <span class="content">向大佬递茶</span>
  121.                                     </div>
  122.                                 </div>
  123.                                 <!-- 回复者 -->
  124.                                 <div class="reply-no"></div>
  125.                                 <div class="reply">
  126.                                     <div class="name">猿梦</div>
  127.                                     <div class="content">没什么,就是随便做做</div>
  128.                                 </div>
  129.                                 <!-- 小组件 -->
  130.                                 <div class="module fr">
  131.                                     <span><i class="iconfont icon-pinglun"></i></span>
  132.                                     <span><i class="iconfont icon-zan1"></i>666</span>
  133.                                 </div>
  134.                             </div>
  135.                         </div>
  136.                         <!-- 更多评论 -->
  137.                         <div class="more">
  138.                             <a class="" href="">查看更多评论</a>
  139.                         </div>
  140.                     </div>
  141.                 </div>
  142.                 <!-- 引入侧栏 -->
  143.                 <?php get_sidebar() ?>
  144.             </div>
  145.         </div>
  146.     </div>
  147.     <!-- 页面主体END -->
  148. <!-- 引入页脚 -->
  149. <?php get_footer() ?>

总结:留言区域没有做动态的调用,还是静态的代码,想想还是比较麻烦,自己对wordpress也还是很精通,有些东西折腾了很久也得不到解决,师父功夫没有到家,所以也不敢瞎教,留言这块我个人网站是打算用畅言的,至于没有备案的网站,还是先引入默认的评论模板吧。

猿梦

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: