想實現鳥類網這樣美麗的效果嗎?—— 下面我就手把手的教你如何使用WordPress模板文件創建一個漂亮的縮略圖頁面。
目前來說,在后臺“添加新頁面”,在頁面內容編輯框中加入代碼是錯誤的,不管是放在“可視化”還是“HTML”都是錯誤的,插件代碼必須放置在模板文件中!當然,我在插件下一版會考慮直接通過“添加新頁面”的方式使插件生效。—— 新版(3.2.0版)已經改進了。也就是說,你既可以按我下面的方法,在模板文件中添加WP-Thumbnails的代碼;也可以不改動模板文件,直接“新添加頁面”,在頁面內容中放置短代碼。短代碼的放置參考
插件用法第10部分。
http://niaolei.org.cn/top自定義頁面縮略圖
WP-Thumbnails的縮略圖分為兩種:頁面縮略圖和文章縮略圖。這兩種縮略圖分別又有許多分類,我在
插件首頁已經詳細介紹過了。
像首頁頁面縮略圖、分類頁面縮略圖、搜索頁面縮略圖、標簽頁面縮略圖都是頁面縮略圖。那么這些頁面縮略圖是如何實現的呢?WordPress通過模板文件控制頁面的顯示,什么是模板文件呢?
點擊“后臺-外觀-編輯”,展現在你面前的就是模板文件,看到下面的圖沒,那些中文名稱的模板文件都是WordPress自帶的(當然,你的主題包含的文件不一定相同),如category.php文件控制分類頁面的顯示,所以category.php就是“分類頁面模板”,index.php控制首頁的顯示,index.php就是“首頁模板”,等等。
主題文件(模板文件)
如果你要創建一個自定義風格的頁面,怎么辦?—— 自己弄一個頁面模板就行了。
這些步驟有點麻煩,你得一步一步來,
不要想當然的跳過某些步驟或敷衍過去!
第一步、打開你的FTP,打開wp-content/themes/,theme的意思是“主題”,這里是你使用的主題所在的文件夾,看下你后臺當前使用的是哪個主題,就打開哪個主題的文件夾,如我的網站使用的是dilectio主題,那我就打開dilectio文件夾,看到了嗎,所有的模板文件都在這。
使用FTP上傳自定義的頁面模板文件
第二步、把page.php這個文件下載下來(也就是復制到本地),隨便改個名字,比如改成video.php,然后再把video.php上傳到剛才同一個目錄。這是干嘛呢——我們要在page.php這個默認模板內容的基礎上進行修改。好了,關閉FTP吧。
當然也可以在本地把video.php完全編輯好再上傳,但是請使用能識別utf-8編碼的文字編輯器進行編輯(如Ultraedit),千萬不能使用記事本、Word進行編輯。
第三步、點擊“后臺-外觀-編輯”,看到沒,剛上傳的video.php已經展現在你面前了,點擊video.php就可以編輯了。
編輯模板文件
這里有兩個工作:
首先,給自己的模板文件起個名字,即在文件開頭加上以下內容(一般開頭都會有這些內容,你只需要改下Template Name后面的名字):
<?php
/*
Template Name: 視頻模板
*/
?>
然后,放置我的插件代碼。代碼怎么放呢,我在插件用法中已經詳細說明了代碼使用方法,請參考:
http://niaolei.org.cn/wp-thumbnails/usage代碼放在包含了the_content的那句話下面(前面也可以,不過可能顯示出來的效果稍有不同),比如你要顯示20篇最新文章,并且每篇文章的尺寸為75像素寬,75像素高,那么在the_content那句話下面放置如下代碼:
<?php if(function_exists('wp_thumbnails_for_recent_posts')) { wp_thumbnails_for_recent_posts('num=20&width=75&height=75'); } ?>
其他種類的縮略圖在上面給出的鏈接中都有詳細的介紹,不再贅敘了。
現在你明白了,插件代碼一定要放在模板文件中,php代碼當然放置在php文件中嘛。
第四步、點擊“后臺-添加新頁面”,看到了吧,點擊模板列表,里面有個“視頻模板”,正是我們通過FTP上傳的,選中它,隨便在新頁面內容中寫點文字,發布,查看,縮略圖效果出來了!
新的模板產生了!
可見,你寫的文字內容要想以什么外觀出現,完全是模板文件決定的,你在模板文件中放置了縮略圖代碼,那么基于該模板的頁面就會顯示縮略圖效果。
剩下最后一個問題:
我想要的就是鳥類網
《精華文章:鳥類網最受歡迎的100篇文章》的效果,怎么辦?這個嘛,說起來就有點復雜了,如果你完全看不懂php代碼,我還真不好教你。說句實話,其實我也不懂php代碼,哈哈,一個不懂php代碼的人寫出一個插件了。沒錯,確實是這樣,靠的就是模仿加反復試驗,就會發現php代碼其實也很簡單。
回到正題,一般模板文件控制頁面顯示為兩欄或者三欄,通常在模板文件中,the_content附近的代碼都是控制顯示主體內容,剩下siderbar附近的內容控制顯示側邊欄,你要做的就是,刪掉siderbar附近的代碼(也就是去掉側邊欄),然后在the_content最外層的div中加一個
style="width:960px;"
意思是讓主題內容寬度顯示為960像素,這樣正好鋪滿頁面,具體寬度數值請根據自己的網站調整。
我把《鳥類網最受歡迎的100篇文章》這個頁面的模板文件內容貼出來,你可以模仿參考下:
<?php
/*
Template Name: 精華模板
*/
?>
<?php get_header(); ?>
<!-- Container -->
<div class="CON" style="width: 980px;">
<!-- Start SC -->
<div class="SC" style="width: 960px;">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="Post" id="post-<?php the_ID(); ?>">
<h2 class="pagetitle"><?php the_title(); ?></h2>
<?php the_content('<p class="serif">閱讀全部 »</p>'); ?>
<?php if(function_exists('wp_thumbnails_for_popular_posts')) { wp_thumbnails_for_popular_posts('num=100'); } ?>
</div>
<?php if ( comments_open() ) comments_template(); ?>
<?php endwhile; endif; ?>
<?php edit_post_link('編輯本文.', '<p>', '</p>'); ?>
</div>
<!-- End SC -->
</div>
<!-- End CON -->
<?php get_footer(); ?>
好了,以上就是WordPress中利用模板文件創建自定義頁面的全過程。如有錯誤,望指正!