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容器，這裡不需要，所以把下面這段程式碼刪除：
<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>
接著是摘要，同樣，我們使用模板來呼叫（自動呼叫文章的前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>
再往下面看看，這裡有對文章的分頁：
我們不需要分頁，直接刪除即可：
<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>
上下一篇功能
替換上下一篇為模板標籤：
<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>
這樣的內容頁面就比較漂亮了。
相關文章
- WordpressCMS主題開發06-分類頁面的文章呼叫和sidebar製作IDE
- WordpressCMS主題開發09-製作內容頁面sidebar和文章瀏覽量功能IDE
- WordpressCMS主題開發01-首頁製作
- WordpressCMS主題開發07-製作分頁和麵包屑導航
- WordpressCMS主題開發05-首頁sidebar製作和友情連結新增IDE
- WordpressCMS主題開發02-製作頂部header.php和footer.phpHeaderPHP
- WordpressCMS主題開發03-如何製作幻燈片和tab式新聞框
- WordpressCMS主題開發04-如何在首頁呼叫各個分類下的文章以及圖片欄目
- WordPress主題製作進階#10自定義主頁
- 文章內容分頁功能實現
- WordpressCMS主題開發10-新增搜尋框功能search.phpPHP
- 《打字編年史》(Epistory)內容製作開發過程回顧
- 織夢DedeCMS文章內容分頁頁數控制方法教程
- 直播平臺製作，登入頁面的切換
- 網站文章內容修改 如何修改網站文章內容網站
- 發表文章時提示有垃圾內容？
- jQuery寫的文章內容頁右側浮動滾動jQuery
- windows10主題製作怎麼操作_windows10電腦主題如何自己製作Windows
- (五) 文章編輯頁開發
- 直播帶貨原始碼，普通商城購物頁面的製作原始碼
- CSS自定義屬性與前端頁面的主題切換CSS前端
- css+js 設定網頁內容不可複製或可複製CSSJS網頁
- 簡單的Css控制bootstrap內容頁面的img寬度自適應CSSboot
- 直播平臺開發，解決蘋果手機裡面的網頁返回不重新整理頁面的問題蘋果網頁
- 製作自媒體短影片，這些內容不能忽略！
- Web前端開發入門之網頁製作三要素Web前端網頁
- Web前端開發入門之網頁製作三要素！Web前端網頁
- 直播原始碼開發，js 正規表示式獲取括號裡面的內容原始碼JS
- 大學生影視主題網頁製作 銀翼殺手2049電影網頁設計模板 學生靜態網頁作業成品 dreamweaver電影HTML網站製作網頁HTML網站
- 文章內容提取庫 goose 簡介Go
- 瀏覽器渲染頁面的主體流程瀏覽器
- 純CSS如何禁止使用者複製網頁的內容？CSS網頁
- 開發響應式web頁面的經驗Web
- 文章錯別字檢測，提升你的內容質量，幫你進行內容分發
- Dreamweaver製作網頁經典問題大整理網頁
- java 爬取網頁內容。 標題、圖片等Java網頁
- Winterberry Group：AI如何改變影片和內容製作報告AI
- 安卓開發——WebView+Recyclerview文章詳情頁，解決高度問題安卓WebView