首页 > 其他分享 >WordpressCMS主题开发08-CMS文章内容页面的制作

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

时间:2022-11-21 23:32:09浏览次数:77  
标签:调用 posts 08 WordpressCMS cat 文章 post 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容器,这里不需要,所以把下面这段代码删除:

<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;">​<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>​</pre>

接着是摘要,同样,我们使用模板来调用(自动调用文章的前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>

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





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



​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;"> ​<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>​</pre>

上下一篇功能

替换上下一篇为模板标签:

<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

相关文章

  • WordpressCMS主题开发03-如何制作幻灯片和tab式新闻框
    这一讲中,我们将学习:如何制作幻灯片和tab式新闻框幻灯片很容易理解,tab式新闻框指的是这块区域:​​tab新闻框-WordpressCMS主题开发03-如何制作幻灯片和tab式新闻......
  • WordpressCMS主题开发06-分类页面的文章调用和sidebar制作
    这节课,我们来学习cms制作的第6课程,制作分类页面category.php以及分类页面的sidebar。我们先来查看静态页面list.html,如果我们要做这个页面,其实已经做好了header以及footer。......
  • 808. 分汤
    808.分汤题解:先对n进行优化,除以25上取整分析A和B汤AB概率<=0<=00.5>0<=00<=0>01>0>0f[i][j]=(f[i-4][j]+f[i-3][j-1]+f[i-2][j......
  • 【408】模拟4
    t6RR的意思是左单旋转!!重点是“左”和“单”,转一次就好啦RL或LR才是转两次t13t14float类型比int类型要高低级转向高级t15浮点数基数越大,精度越低......
  • 【Jmeter】21天打卡 08之取样器之http请求方法get/delete/put之间的请求
    1.新建测试计划-线程组-取样器(http请求三个,分别为get请求,put请求,delete请求)-添加监听器(查看结果树)2.在get请求中输入www.httpbin.org,接口为get,请求方法为:get请求内容:ge......
  • 108:super()获得父类的定义
    在子类中,如果想要获得父类的方法时,我们可以通过super()来做。super()代表父类的定义,不是父类对象。#super()classA:defsay(self):print("A:",self)......
  • 强化学习代码实战-08 DDPG 算法
    PPO算法是离线学习法,样本效率利用率低,且对连续动作空间情况处理能力弱,无法精细控制DDPG-深度确定性策略梯度算法,离线学习、处理连续动作空间DDPG构造一个确定性策略,采用......
  • 108. Convert Sorted Array to Binary Search Tree
    Givenanarraywhereelementsaresortedinascendingorder,convertittoaheightbalancedBST. classSolution{    publicTreeNodesortedArrayToBST(......
  • 【408】模拟3
    t9判断是否相等也是一种比较操作t11t14浮点数运算中,最简单的舍入方法是直接截断;常见的有舍0入1或者恒置1。尾数的最高位与符号位不同,就是规格化形式尾数溢......
  • 100008 求圆环面积已知大小圆直径
    <?phpheader('Content-Type:text/html;charset=utf-8');define('ROOT',$_SERVER['DOCUMENT_ROOT']);includeROOT.'/assets/php/head.php';/***求圆环面积已知......