文章目录
显示
这节课，我们来制作内容页面
制作内容页面single.php
首先，我们来看看静态的内容页面，下面，我们就开始制作这样的内容页面，打开主题文件夹，复制article.html，然后粘贴，重命名为single.php，
首先修改头部调用为wordpress的标签：
<?php get_header();?>
<!--搜索栏End--><!--主体下Begin-->
<div class="page_row">紧接着，文章页面的底部调用footer.php：并把一些多余的代码删除掉：
<!--主体下End--><!--友情链接Begin--><!--友情链接End--><!--页脚Begin-->
<?php get_footer();?>
<!--页脚End-->
</body>
</html>然后，把这个文件的编码转为utf-8：
保存，来到网站前台查看下：
我们依次往下修改，接下来，修改面包屑导航，找到面包屑导航的位置，替换为上节课的函数调用：
<div class="list_bar">
<?php wheatv_breadcrumbs(); ?>
</div>接着，依次来修改相关的调用：
首先替换标题为模板标签的调用：
<div class="ctitle ctitle1"><?php the_title_attribute(); ?></div>下面是作者-发布日期-查看次数（用到插件wp-postviews）：
一一用模板替换：
<div class="ctitleinfo">
作者:<?php the_author_posts_link(); ?>;发布日期：<?php the_date_xml(); ?>;查看次数：<?php the_views();?> 次
</div>在文章和摘要的中间，多出了一个div容器，这里不需要，所以把下面这段代码删除：
<div style="text-align: center"><a target="_blank" href="../download/index.html"><img alt="" style="width: 672px; height: 83px" src="../res_base/jeecms_com_www/default/article/img/1111111.jpg" /></a></div>
接着是摘要，同样，我们使用模板来调用（自动调用文章的前200个字符）：
<div class="intr"><span class="intr_front">摘 要：</span>
<?php echo mb_strimwidth(strip_tags(apply_filters('the_content', $post->post_content)), 0, 200,"……"); ?>
</div>然后是文章内容的调用（文章内容在p标签里就可以，不需要font标签的限定）：
对文章内容进行循环调用即可：
<div class="pbox">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<p>
<?php the_content("Read More..."); ?>
</p>
<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>再到首页刷新一下效果，这样就正常的出现了文章的内容。
再往下面看看，这里有版权的信息，直接删除：
<p><font size="3"><font face="宋体"><span lang="EN-US"> </span></font></font><span lang="EN-US" style="font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt; mso-bidi-font-family: 宋体; mso-bidi-font-weight: bold"><o:p><font size="3"> </font></o:p></span></p>
<p class="MsoNormal" style="background: white; margin: 0cm 0cm 0pt; text-indent: 21pt"><span lang="EN-US"><o:p><font face="Times New Roman" size="3"> </font></o:p></span></p>
<p class="MsoNormal" style="background: white; margin: 0cm 0cm 0pt"><span style="font-size: 9pt; color: #42515a; font-family: 宋体; mso-ascii-font-family: Verdana; mso-hansi-font-family: Verdana">本文地址：</span><span lang="EN-US" style="font-size: 9pt; color: #42515a; font-family: Verdana">https://www.xuhss.com/theme-dev/cms/01-cms-css<o:p></o:p></span></p>
<p class="MsoNormal" style="background: white; margin: 0cm 0cm 0pt"><span style="font-size: 9pt; color: #42515a; font-family: 宋体; mso-ascii-font-family: Verdana; mso-hansi-font-family: Verdana">相关文章：</span><span lang="EN-US" style="font-size: 9pt; color: #42515a; font-family: Verdana"><o:p></o:p></span></p>
<p class="MsoNormal" align="left" style="margin: 0cm 0cm 0pt; text-align: left"><span lang="EN-US" style="font-size: 9pt; color: #42515a; font-family: Verdana"><a href="125.htm"><span lang="EN-US" style="font-family: 宋体; mso-ascii-font-family: Verdana; mso-hansi-font-family: Verdana"><span lang="EN-US"><font color="#800080">百度收录问题</font></span></span></a><o:p></o:p></span></p>
<p class="MsoNormal" style="background: white; margin: 0cm 0cm 0pt"><span lang="EN-US" style="font-size: 9pt; color: #42515a; font-family: Verdana"><a href="78.htm"><span lang="EN-US" style="font-family: 宋体; mso-ascii-font-family: Verdana; mso-hansi-font-family: Verdana"><span lang="EN-US"><font color="#800080">网站内容优化</font></span></span></a><o:p></o:p></span></p>
<p class="MsoNormal" align="left" style="margin: 0cm 0cm 0pt; text-align: left"><span lang="EN-US" style="font-size: 9pt; color: #42515a; font-family: Verdana"><a href="66.htm"><font color="#800080">SEO<span lang="EN-US" style="font-family: 宋体; mso-ascii-font-family: Verdana; mso-hansi-font-family: Verdana"><span lang="EN-US">发展前景</span></span></font></a><o:p></o:p></span></p>
<p class="MsoNormal" align="left" style="background: white; margin: 0cm 0cm 0pt; text-align: left; mso-pagination: widow-orphan"><font face="Times New Roman"><span lang="EN-US" style="font-size: 12pt; mso-font-kerning: 0pt">————————————————————————————————</span><span lang="EN-US" style="font-size: 12pt; font-family: 宋体; mso-font-kerning: 0pt; mso-bidi-font-family: 宋体"><o:p></o:p></span></font></p>
<p class="MsoNormal" align="left" style="background: white; margin: 0cm 0cm 0pt; line-height: 16.5pt; text-align: left; mso-pagination: widow-orphan; mso-margin-top-alt: auto; mso-margin-bottom-alt: auto"><font size="3"><u><span style="color: purple; font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt; mso-bidi-font-family: Arial">快乐网赚</span></u><span lang="EN-US" style="color: #42515a; font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt; mso-bidi-font-family: Arial">-</span><span lang="EN-US" style="color: #42515a; font-family: Verdana; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt; mso-bidi-font-family: Arial"><a href="../index.html"><span lang="EN-US" style="color: purple; font-family: 宋体; mso-bidi-font-size: 12.0pt"><span lang="EN-US">网上如何赚钱</span></span></a></span><span lang="EN-US" style="color: #42515a; font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt; mso-bidi-font-family: Arial">-</span><span lang="EN-US" style="color: #42515a; font-family: Verdana; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt; mso-bidi-font-family: Arial"><a href="../index.html"><span lang="EN-US" style="color: purple; font-family: 宋体; mso-bidi-font-size: 12.0pt"><span lang="EN-US">网络兼职赚钱</span></span></a></span><span lang="EN-US" style="color: #42515a; font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt; mso-bidi-font-family: Arial"> </span><span style="color: #42515a; font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt; mso-bidi-font-family: Arial">编辑<span lang="EN-US">,</span></span><span style="color: #42515a; font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt; mso-bidi-font-family: Arial; mso-ascii-font-family: Verdana; mso-hansi-font-family: Verdana">如本网文章稿涉及版权等问题</span><span lang="EN-US" style="color: #42515a; font-family: Verdana; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt; mso-bidi-font-family: Arial">,</span><span style="color: #42515a; font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt; mso-bidi-font-family: Arial">请作者在两周内速与本网站联系。</span><span lang="EN-US" style="font-size: 9pt; font-family: Arial; mso-font-kerning: 0pt"><o:p></o:p></span></font></p>
<p class="MsoNormal" align="left" style="background: white; margin: 0cm 0cm 0pt; line-height: 16.5pt; text-align: left; mso-pagination: widow-orphan; mso-margin-top-alt: auto; mso-margin-bottom-alt: auto"><span lang="EN-US" style="color: #42515a; font-family: 宋体; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt; mso-bidi-font-family: Arial"><font size="3">————————————————————————————————</font></span><span lang="EN-US" style="font-size: 9pt; font-family: Arial; mso-font-kerning: 0pt"><o:p></o:p></span></p>
再往下面看看，这里有对文章的分页：
我们不需要分页，直接删除即可：
<div class="page_no"><div class="pg-3"> <span class="total">共1页</span> <span class="disabled"> |< 首页</span><span class="disabled"> < 上一页</span> <span class="current">1</span> <span class="disabled"> 下一页 ></span><span class="disabled"> 尾页 >|</span> </div></div>
上下一篇功能
替换上下一篇为模板标签：
<div class="arti_ref">【上一篇】: <?php previous_post_link('%link'); ?>
【下一篇】: <?php next_post_link('%link'); ?>
</div>测试点击下上一篇。
添加相关文章
再往下，我们实际上可以做一个相关文章的调用：
可以参考“摘要”的div的形式，做一个相关文章，我们复制摘要所在的div，粘贴到对应的“下一篇”下面的位置：
<div class="intr"><span class="intr_front">摘 要：</span>
<?php echo mb_strimwidth(strip_tags(apply_filters('the_content', $post->post_content)), 0, 200,"……"); ?>
</div>
然后，修改为“相关文章”的调用代码：
</div>
<div class="intr">
相关文章：
<?php
$cats = wp_get_post_categories($post->ID);
if ($cats) {
$cat = get_category( $cats[0] );
$first_cat = $cat->cat_ID;
$args = array(
'category__in' => array($first_cat),
'post__not_in' => array($post->ID),
'showposts' => 5,
'caller_get_posts' => 1
);
query_posts($args);
if (have_posts()) :
while (have_posts()) : the_post(); update_post_caches($posts); ?>
<li>* <a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></li>
<?php endwhile; else : ?>
<li>* 暂无相关文章</li>
<?php endif; wp_reset_query(); } ?>
</div>
来到前台刷新下：
评论
通常，文章都是可以评论的，所以我们想删除静态的评论代码（table/form/script），改成wordpress的评论调用标签：
<div class="comment_list">
<?php comments_template(); ?>
</div>
为了让样式好看一点，我也把它放在和“相关文章”一样的div容器里面：
<div class="comment_list">
<div class="intr">
<?php comments_template(); ?>
</div>
</div>这样的内容页面就比较漂亮了。
转载请注明：虚坏叔叔 » WordpressCMS主题开发08-CMS文章内容页面的制作