首页 > 主题开发 > cms主题开发 > WordpressCMS主题开发08-CMS文章内容页面的制作
2018
06-10

WordpressCMS主题开发08-CMS文章内容页面的制作

这节课,我们来制作内容页面

制作内容页面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:

保存,来到网站前台查看下:

You must be logged in to view the hidden contents.

我们依次往下修改,接下来,修改面包屑导航,找到面包屑导航的位置,替换为上节课的函数调用:

    <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">&nbsp;&nbsp;</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">&nbsp;</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">&nbsp;</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">http://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">&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;</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">&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;</font></span><span lang="EN-US" style="font-size: 9pt; font-family: Arial; mso-font-kerning: 0pt"><o:p></o:p></span></p>

再往下面看看,这里有对文章的分页:

wordpress文章分页 - WordpressCMS主题开发08-CMS文章内容页面的制作

我们不需要分页,直接删除即可:

    <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'); ?>
 &nbsp;&nbsp; 【下一篇】: <?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>

 

来到前台刷新下:

You must be logged in to view the hidden contents.

评论

通常,文章都是可以评论的,所以我们想删除静态的评论代码(table/form/script),改成wordpress的评论调用标签:

    <div class="comment_list">
		<?php comments_template(); ?>
	</div>
You must be logged in to view the hidden contents.

为了让样式好看一点,我也把它放在和“相关文章”一样的div容器里面:

    <div class="comment_list">
	<div class="intr">
		<?php comments_template(); ?>
	</div>
	</div>

这样的内容页面就比较漂亮了。

最后编辑:
作者:MrBang
WordPress迷

留下一个回复