現(xiàn)在我們來看看單個帖子頁面,我們可以在單個帖子頁面發(fā)表評論或做點贊等事荠割。 假如我們有來自網(wǎng)站的一批帖子妹卿,但是現(xiàn)在我們還無法點擊它并跳轉(zhuǎn)到個人帖子旺矾。 讓我們繼續(xù)努力吧!
1夺克、打開index.php文件箕宙,為文章標題添加鏈接,使標題可單擊铺纽。我們轉(zhuǎn)到 h3標簽柬帕,如下面的代碼所示; 添加a標簽,并將其包裹在title標簽周圍
<h3>
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</h3>
保存代碼狡门,回到前端頁面刷新陷寝,你會看到標題變成了可點擊的鏈接,點擊標題會進入單個帖子頁面
2盼铁、讓我們?yōu)殒溄犹砑右恍邮健?為鏈接換個顏色; 將描述加粗,以使其脫穎而出尝偎。 將每個帖子包裝在自己的div中是很好的,我們將它放在article中鹏控,如下面的代碼所示:
<?php while(have_posts()): the_post(); ?>
<article class="post">
<h3>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</h3>
<div class="meta">
Created By <?php the_author(); ?> on<?php the_time('F j, Y g:i a'); ?>
</div>
<?php the_content(); ?>
</article>
<?php endwhile; ?>
然后在樣式表中加入如下代碼:
a{
color:#333;
}
article.post{
border-bottom:1px #ccc solid;
overflow:hidden;
}
保存代碼致扯,返回前端頁面刷新,會看到標題鏈接顏色變了当辐,文章下方出現(xiàn)了一條直線抖僵。
3、我們通常會看到某種Read More按鈕缘揪,所以讓我們繼續(xù)添加它耍群。 我們在article結(jié)束標簽下面添加如下代碼:
<br>
<a class="button" href="<?php the_permalink(); ?>"> Read More </a>
為Read More按鈕添加樣式,在樣式表里添加如下代碼:
a.button{
display:inline-block;
background:#333;
color:#fff;
padding:10px 5px;
margin-bottom: 10px;
text-decoration: none;
}
保存代碼返回前端頁面刷新看到如下圖所示:
創(chuàng)建single.php
4找筝、在單獨的帖子頁面蹈垢,我們不希望文章標題成為鏈接,這有點傻袖裕,所以我們需要改變它曹抬。 此外,還有其他我們想要的東西急鳄。 我們還需要一個評論表谤民,所以我們需要為單個帖子設(shè)置一個特殊頁面。
所以我們將在主題中創(chuàng)建一個新文件疾宏,我們將其命名為single.php张足,在文件中輸入TEST,保存代碼坎藐。
在瀏覽器前端刷新后看到頁面上只有TEST
當我們回到網(wǎng)站主頁为牍,它與以前相同,還是之前的帖子;但是如果我們點擊標題或read more按鈕跳轉(zhuǎn)到單獨的帖子頁面吵聪,我們只獲得TEST凌那,因為WordPress會自動向下查看single.php文件(如果沒有找到single.php組件文件,就會自動返回index.php吟逝,其他組件也是相同的道理)帽蝶,所以接下來我們要把index.php中代碼復制,然后粘貼在single.php中并保存块攒,它會向我們顯示相同的結(jié)果励稳。 現(xiàn)在我們可以在single.php文件中更改我們想要的內(nèi)容,它只會在單獨的帖子頁面上生效囱井。
我們來刪除single.php代碼中的標題鏈接和Read More; 并為單獨帖子頁添加一些樣式驹尼。 為此,我們將制作meta庞呕,代碼如下所示:
.meta{
background:#333;
color:#fff;
padding:5px;
}
我不是試圖用樣式來解決問題新翎,因為就像我說的那樣,我只是想讓你學習代碼而不是學習如何創(chuàng)造一個偉大的設(shè)計; 我們稍后會進入住练。