这节课,我们来制作内容页面
制作内容页面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容器,这里不需要,所以把下面这段代码删除:
<pre class="pure-highlightjs" style="margin: 0px; padding: 0px; font-weight: 400; font-family: inherit; background-color: transparent; border: none; color: rgb(69, 69, 69); font-size: 18px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">
</pre><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">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">————————————————————————————————</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>
再往下面看看,这里有对文章的分页:
wordpress文章分页 - WordpressCMS主题开发08-CMS文章内容页面的制作
我们不需要分页,直接删除即可:
<pre class="pure-highlightjs" style="margin: 0px; padding: 0px; font-weight: 400; font-family: inherit; background-color: transparent; border: none; color: rgb(69, 69, 69); font-size: 18px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">
</pre><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>
来到前台刷新下:
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>
这样的内容页面就比较漂亮了。
标签:调用,posts,08,WordpressCMS,cat,文章,post,CMS,页面 From: https://blog.51cto.com/u_11408356/5875485