WordPress主題製作進階#5創建單個帖子頁並添加縮略圖

接下來將學習如何創建一個單獨的帖子頁。當我們點擊“閱讀更多”,它會將我們帶到單獨帖子頁,另外我們還會學習爲帖子添加縮略圖。

1、添加縮略圖

打開functions.php文件,我們需要讓主題啓用縮略圖支持,我們找到adv_theme_support()函數,將以下內容添加到函數內部,代碼如下所示:

// Theme Support
function adv_theme_support(){
	// Featured Image Support
	add_theme_support('post-thumbnails'); 

保存代碼,返回站點後臺刷新頁面會看到特色圖片功能
特色圖片
我們給這篇文章加個圖,更新一下;我們需要有一個名爲_images的文件夾,用來放了一些圖片。
設置圖片
我們回到前端頁面刷新是看不到圖片的,因爲我們在模板中沒有放置縮略圖顯示的位置。
打開index.php文件,在 the_excerpt()上一行添加以下代碼:

<?php if(has_post_thumbnail()) : ?>
	<div class="post-thumbnail">
		<?php the_post_thumbnail(); ?> 
	</div>
<?php endif; ?>
<?php the_excerpt(); ?> 

現在去前端頁面刷新就能看到縮略圖了,但是圖片已經超出了邊框
縮略圖
我們到style.css文件中給縮略圖設置一些樣式,代碼如下:

article .post-thumbnail img{
width:100%;
height:auto;
} 

2、創建單獨帖子頁模板

現在我們想要跳轉到單個帖子頁面。 爲此,我們將新建一個文件並將其另存爲single.php。 我們只需輸入單詞TEST即可。 現在,如果我們回到我們的單個帖子並重新加載,你會看到我們得到TEST:
test

拆分index.php

接下來我們將index.php拆分爲header和footer文件,新建兩個文件footer.php和header.php。找到nav,將從nav結束標籤開始向上所有的代碼,從index文件中剪切並粘貼到header文件中;同樣找到footer標籤,將從其開始向下的所有代碼剪切並粘貼到footer.php文件中。

然後在index.php文件頭部添加以下代碼:

<?php get_header(); ?> 

在index.php文件尾部添加以下代碼:

<?php get_footer(); ?>

修改single.php

然後把index文件中剩下的所有代碼複製,粘貼到single.php文件中,然後將single文件中的the_excerpt() 修改爲 the_content()

<?php the_content(); ?> 

在單獨的文章詳情頁裏不應該有Read More按鈕,我們刪掉single.php中的Read More button。保存代碼,回到前端頁面刷新:
在這裏插入圖片描述

現在存檔頁面(archive pages)應該可以工作。 如果我們點擊“IT”,它會向我們展示所有IT帖子; 如果我們點擊admin,它會向我們顯示admin創建的所有帖子; 同樣,搜索也應該有效。 如果我們搜索“從0到1”,那麼之前的文章就應該出現了。

現在,所有的東西,如搜索,類別和用戶歸檔頁面,都可以實際定製,我們可以使它們與主要的帖子風格不同。 這就是我們下一節要做的。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章