從0到1制作WordPress主題#8單個帖子頁single.php

現(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;
}

保存代碼返回前端頁面刷新看到如下圖所示:


read more按鈕

創(chuàng)建single.php

4找筝、在單獨的帖子頁面蹈垢,我們不希望文章標題成為鏈接,這有點傻袖裕,所以我們需要改變它曹抬。 此外,還有其他我們想要的東西急鳄。 我們還需要一個評論表谤民,所以我們需要為單個帖子設(shè)置一個特殊頁面。
所以我們將在主題中創(chuàng)建一個新文件疾宏,我們將其命名為single.php张足,在文件中輸入TEST,保存代碼坎藐。
在瀏覽器前端刷新后看到頁面上只有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;
} 
single頁的變化

我不是試圖用樣式來解決問題新翎,因為就像我說的那樣,我只是想讓你學習代碼而不是學習如何創(chuàng)造一個偉大的設(shè)計; 我們稍后會進入住练。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末地啰,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子讲逛,更是在濱河造成了極大的恐慌亏吝,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件盏混,死亡現(xiàn)場離奇詭異蔚鸥,居然都是意外死亡,警方通過查閱死者的電腦和手機许赃,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進店門止喷,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人图焰,你說我怎么就攤上這事启盛。” “怎么了技羔?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵僵闯,是天一觀的道長。 經(jīng)常有香客問我藤滥,道長鳖粟,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任拙绊,我火速辦了婚禮向图,結(jié)果婚禮上泳秀,老公的妹妹穿的比我還像新娘。我一直安慰自己榄攀,他們只是感情好嗜傅,可當我...
    茶點故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著檩赢,像睡著了一般吕嘀。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上贞瞒,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天偶房,我揣著相機與錄音,去河邊找鬼军浆。 笑死棕洋,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的乒融。 我是一名探鬼主播掰盘,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼簇抵!你這毒婦竟也來了庆杜?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤碟摆,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后叨橱,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體典蜕,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年罗洗,在試婚紗的時候發(fā)現(xiàn)自己被綠了愉舔。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,865評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡伙菜,死狀恐怖轩缤,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情贩绕,我是刑警寧澤火的,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站淑倾,受9級特大地震影響馏鹤,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜娇哆,卻給世界環(huán)境...
    茶點故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一湃累、第九天 我趴在偏房一處隱蔽的房頂上張望勃救。 院中可真熱鬧,春花似錦治力、人聲如沸蒙秒。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽晕讲。三九已至,卻和暖如春榜田,著一層夾襖步出監(jiān)牢的瞬間益兄,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工箭券, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留净捅,地道東北人。 一個月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓辩块,卻偏偏與公主長得像蛔六,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子废亭,可洞房花燭夜當晚...
    茶點故事閱讀 45,870評論 2 361

推薦閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理国章,服務發(fā)現(xiàn),斷路器豆村,智...
    卡卡羅2017閱讀 134,716評論 18 139
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,328評論 25 707
  • 用兩張圖告訴你液兽,為什么你的 App 會卡頓? - Android - 掘金 Cover 有什么料? 從這篇文章中你...
    hw1212閱讀 12,754評論 2 59
  • 微信內(nèi)容寫作的6個誤區(qū)之一: 只追求量而忽視了質(zhì) 文章寫作是一種低成本的推行方法掌动,后續(xù)產(chǎn)生的結(jié)果越來越大四啰,文章一經(jīng)...
    崇立鑫閱讀 1,004評論 2 50
  • iOS常見鎖對象: 1.互斥鎖NSLock NSLock* lock = [[NSLock alloc] init...
    戀家的人走不丟閱讀 284評論 0 0