如何安裝主題(Theme)?

WordPress安裝主題非常方便,只要在瀏覽器上進行操作就可以順利安裝大多數的主題。

如何安裝主題?
只要你想裝的外掛有存在WordPress.com官網的主題資料庫的話,都是可以直接在後台搜尋並進行安裝。

首先進入後台並在外觀選單中選擇 [ 佈景主題 ] 。

然後點選 [ 安裝佈景主題 ] 開始來尋找並安裝主題。

再來是在功能過濾中勾選自己想要的主題條件,從配色、欄位至功能都可以選,如果你知道特定主題的名稱也可以在搜尋框鍵入關鍵字來尋找。

根據我的搜尋條件共找到了兩個主題,可以先點擊 [ 預覽 ] 來觀看,感覺OK的話就按下 [ 安裝 ] 來進行安裝作業。

再來會跳出一個確認視窗,確定要安裝就按下 [ 立刻安裝 ] 來進行安裝。

根據你所存放的主機空間規格不同,以下這個畫面不是每個人都會遇到,當看到時請輸入FTP相關資訊後就可以開始安裝外掛了。
install-plugin

安裝完後再按下 [ 啟用 ] 就可以套用剛安裝的新佈景主題囉。

如何刪除外掛?
在可用佈景主題清單中先啟用其他主題後再對著想刪除的主題按下刪除連結。

再來會再一次確認你是不是真的要刪除這個主題,確定後按下按鈕。

根據你所存放的主機空間規格不同,以下這個畫面不是每個人都會遇到,當看到時請輸入FTP相關資訊後就可以開始刪除外掛了。
install-plugin

然後就會跳回到主題清單會看到一則訊息說已經成功刪除主題了。

如何安裝外掛(Plugin)?

WordPress安裝外掛非常方便,只要在瀏覽器上進行操作就可以順利安裝大多數的外掛。

如何安裝外掛?
只要你想裝的外掛有存在WordPress.com官網的外掛資料庫的話,都是可以直接在後台搜尋並進行安裝。

首先進入後台並在外掛選單中選擇 [ 新增外掛 ] 。
install-plugin

再來是在搜尋框中輸入想要安裝的外掛名稱,你也可以逛逛 [ 推薦 ]、[ 熱門 ]、[ 更新 ] 等項目來瀏覽外掛清單,不過這方面的都是英文界面,所以英文要好點囉… 不然就加減用常見的Google網路翻譯來翻看看。
這次我要安裝的是Wordpress.com Stats Helper,是可以在前台顯示Wordpress.com Stats統計資訊的外掛,所以在搜尋框輸入該外掛名稱後再按下 [ 搜尋外掛 ]按鈕。
install-plugin

再來會顯示出搜尋結果,第一個項目就是我要的外掛,你可以先按 [ 細節 ] 來了解外掛一些資訊,比如說外掛版本及如何安裝還有外掛截圖等等。
install-plugin

沒有問題的話就直接按下 [ 立刻安裝 ] 開始進行安裝作業。
install-plugin

你也可以在清單上直接按下 [ 立刻安裝 ] 後會跑出一個小視窗詢問是否真的要開始進行安裝,確定後就開始進行安裝作業。
install-plugin

根據你所存放的主機空間規格不同,以下這個畫面不是每個人都會遇到,當看到時請輸入FTP相關資訊後就可以開始安裝外掛了。
install-plugin

安裝完後再按下 [ 啟用外掛 ] 就完成該外掛的安裝作業囉。
install-plugin

根據外掛性質的不同,效果當然也不一樣,但大多有需要設定的外掛都可以在設定選單中看到該外掛名稱,點進去就可以開始進行設定並使用,也有的是啟用後就開始執行效果不用再改任何設定了。
install-plugin

如何刪除外掛?
在外掛清單中對著想刪除的外掛先按下停用之後就會出現刪除字樣,按下刪除開始進行刪除外掛作業。
install-plugin

再來會再一次確認你是不是真的要刪除這個外掛,確定後按下按鈕。
install-plugin

根據你所存放的主機空間規格不同,以下這個畫面不是每個人都會遇到,當看到時請輸入FTP相關資訊後就可以開始刪除外掛了。
install-plugin

然後就會跳回到外掛清單會看到一則訊息說已經成功刪除外掛了。
install-plugin

WordPress 3.0 Menus|自定義選單

這幾天WordPress 3.0正式推出了,增加了不少新功能其中一個便是今天要介紹的Custom Menus(自定義選單)功能,透過這項功能可以直接在後台靈活對導航選單進行編輯,但這款新功能要主題有支援才能對位於頁首的導航列進行後台編輯,不然就只能使用在widgets上,所幸整個程式碼改寫上並不會很傷大腦(除非你家使用的主題很特殊…),話不多說馬上開始改寫囉~~

首先開啟主題目錄下的functions.php
在裡面最後一行的?>之前一行加入以下程式碼:

// WordPress 3.0 Menus Support
register_nav_menus( array(
	'primary' => __( 'Primary Navigation'),
) );

 

然後開啟header.php
由於每個主題對於導航列的寫法不盡相同,所以建議模糊尋找,主要關鍵字是wp_list_pages
以我家arthemia為例,找到是像如下這樣:

		

 

然後替換為如下程式碼:

 'page-bar', 'menu_class' => 'left clearfloat', 'theme_location' => 'primary') ); ?>

 

但是在替換前先注意看wp_nav_menu這一行,menu_id 的數值跟原本的 ul 標籤的 id 數值是一樣的,menu_class則是要跟ul 標籤的 class 數值一樣,如果你的是 ul 標籤有其中一項沒設定的話可以直接拿掉沒有設定的部份。

這樣程式碼的改寫就完畢囉,再來是前往後台的 [ 外觀 ] -> [ 選單 ],開始進行導航選單的編輯。

選單名稱建議還是以英數字為主別帶有中文字,如果要某選單位於某主選單的下拉式清單之中的話,對該區塊往後拖移就可以了,設定完記得按儲存選單,然後在佈景主題位置選擇剛建立好的選單儲存就完成囉。

如果想更了解Menus的wp_nav_menu函數的話可以至官網的 Function Reference/wp nav menu 逛逛,因為本篇文章僅說明如何與現行的主題導航列相容~~

階層式迴響改寫成板主回覆

從我2.7版本之後開始的WordPresss就內建階層式迴響功能,雖然這功能也要主題有支援才能使用,不過已經對大多數使用者來說是一個好消息了,不用再額外安裝外掛來產生這效果,如果你目前使用的主題並沒有支援此功能的話請去參考這一篇文章來進行改寫。

目前是也有人把階層式迴響功能當做板主回覆來使用,不過只要有人搶先按下回覆按鈕來回文的話就囧了,以下教各位如何讓那個回覆按鈕改成只有管理員才看得到的寫法,很簡單只要兩行程式碼就解決了喔!!

首先開啟目前使用中主題目錄下的 functions.php 檔案,
如果你是使用Arras主題的話則是開啟 /library/template.php 檔案。
模糊尋找下列這段程式碼:

<?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>

然後這段程式碼用下面這兩行程式碼包起來:

<?php if ( current_user_can('level_10') ) { ?>

<?php } ?>

結果如下:

<?php if ( current_user_can('level_10') ) { ?>
	<?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
<?php } ?>

夫.玩樂學習記新主題

雖然說是新主題不過也是從原本的  Arthemia 主題修改而來的,因為我懶得全部自己寫啊 XD…
這次也趁著換新主題時拿掉了不外掛,讓網站可以更輕便簡單些。

跟以前最大的差別就是首頁最新文章的顯示方式了,採用了格裝排版方式,可以有效在同樣空間內顯示更多文章,另外在縮圖內顯示發表日期這招是從Arras主題偷來用的,不過有做點變化所以改放在上面並且做了圓角處理,不過由於縮圖跟以前用的縮圖大小有落差,所以也另外安裝了WP-Thumbnails來顯示沒特別去設定縮圖的文章。

首頁另一個改變點就是分類文章的部份了,這部份在改寫時也真讓我想了一陣子要怎做出來,幸好想到寫法還成功了!
雖然還有部份細節還沒修改好,不過也算是到可以見人的地步了….

網站:http://fu.play-learn.net/

CSS 圓角框: border-radius

在CSS3中有一項新語法可以簡單實現區塊邊角可以圓角化的效果,不過現行的Internet Explorer尚不支援此語法喔。
所以大家快點拋棄Internet Explorer走向其他瀏覽器的環抱吧!! XD 不然可是看不到美美的網頁喔!!!

在各瀏覽器中的圓角語法不是一樣的寫法,所以每個圓角語法在CSS檔上要寫上三種來對應各個瀏覽器 XD|||

  CSS3 (Opera) Mozilla (FireFox) WebKit (Safari、Google Chrome)
四邊圓角 border-radius -moz-border-radius -webkit-border-radius
左上圓角 border-top-left-radius -moz-border-radius-topleft -webkit-border-top-left-radius
右上圓角 border-top-right-radius -moz-border-radius-topright -webkit-border-top-right-radius
左下圓角 border-bottom-left-radius -moz-border-radius-bottomleft -webkit-border-bottom-left-radius
右下圓角 border-bottom-right-radius -moz-border-radius-bottomright -webkit-border-bottom-right-radius

基本的寫法:( 四邊圓角值15px )

 border-radius: 15px;
 -moz-border-radius: 15px;
 -webkit-border-radius: 15px;

 

除了可以用上表個別指定單一邊圓角值外也支援縮寫語法border-radius: [左上] [右上] [右下] [左下];

 左上5px、右上10px、右下15px、左下20px
 border-radius:5px 10px 15px 20px;
 -moz-border-radius:5px 10px 15px 20px;
 -webkit-border-radius:5px 10px 15px 20px;

 

透過這樣的CSS技術可以有效降低使用圖片量,增進讀取速度與節省網站空間。
雖然目前 Internet Explorer 8 尚未支援這個CSS語法,不過已經在下一個版本確定有支援此語法了,所以早點讓你的網站也活用此技術吧!

WP FB Like|Facebook 推薦按鈕

外掛名稱:WP FB Like(文章/分頁增加 Facebook 讚or推薦按鈕)
外掛版本:1.0.3 ( 相容性對應到 WordPress  2.9.2 )
下載網址:http://wordpress.org/extend/plugins/wp-fb-like/

隨著Facebook越來越流行並且離不開人的身邊後,與WordPress的相關外掛也越來越多,這次介紹的是一個小而實用的FB外掛,可以讓你文章/分頁簡單就有像FB的讚or推薦按鈕喔。

下載並完成安裝後再至後台的設定的Facebook Like去做參數設定。

Display ( 顯示設定 ):
Display the button on pages ( 顯示按鈕於分頁 )
Display the button on the front page (home)  ( 顯示按鈕於首頁 )

Position ( 按鈕位置 ):
Before(文章內容之前)
After(文章內容之後)
Before and After(文章內容之前和之後)
Shortcode [fblike](可以在文章內容輸入[fblike]來顯示按鈕)
Manual(在佈景主題的檔案插入以下程式碼來顯示)

 

Styling ( 樣式設定):可以輸入CSS數值,例如 margin: 10px 0;

Layout Style (按鈕風格):
standard(標準樣式)
button_count(僅顯示按鈕及數字)

Show Faces (顯示推薦者大頭貼)

Width (寬度)、Height (高度)

Verb to display (顯示類型):
like(讚)
recommend(推薦)

Font (字型)、Color Scheme (顏色)

自定義新增 widget(模組)

WordPress有很多方便且人性化的功能,像是後台的外觀 ► [ 模組 ] 功能就是可以很方便的自定義哪些功能區塊要顯示要如何排版等等,可以很人性化的直接拖移的方式來達成,如果嫌目前使用的主題的widget不夠用該怎辦? 再換一個主題? 到不如自己新增 widget 吧!! 還可以決定要顯示在哪個位置上,趕快來看教學讓自己的主題也有多個 widget 吧!!!

首先開啟主題目錄下的functions.php檔案並且在裡面最後一行的 ?> 之前一行加入以下程式碼:

if ( function_exists('register_sidebar') )
{
	register_sidebar(array('name' => 'widget1','before_widget' => '','after_widget' => '','before_title' => '','after_title' => ''));
}

程式碼解說:

'name' => 'widget1' // widget的名稱,用來識別後台的widget名稱,限英數字。
'before_widget' => '' // widget的內容前段HTML定義
'after_widget' => '' // widget的內容後段HTML定義
'before_title' => '' // widget的標題前段HTML定義
'after_title' => '' // widget的標題後段HTML定義

 

然後在index.php or sidebar.php這些檔案上加入以下程式碼:

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(1) ) : ?>
<?php endif; ?>

當然不是隨便插入就可以,要約略看一下檔案程式碼後再插入,一般來說都是插在div標籤內。 如果你是要新增多個widget的話,照下面這樣新增就可,name的數值部份記得別重覆了。

if ( function_exists('register_sidebar') )
{
	register_sidebar(array('name' => 'widget1','before_widget' => '','after_widget' => '','before_title' => '','after_title' => ''));
	register_sidebar(array('name' => 'widget2','before_widget' => '','after_widget' => '','before_title' => '','after_title' => ''));
	register_sidebar(array('name' => 'widget3','before_widget' => '','after_widget' => '','before_title' => '','after_title' => ''));
}

如果你嫌 Arras Theme 這主題的widget不夠多或是想增加新的位置的話,
functions.php要改開啟arras-theme / library / launcher.php才找得到它預設的widget程式碼喔~

首篇文章獨立格式

繼上次的 query_posts 可以讓你抓出特定範圍內文章的教學後,這次是在外觀做更特殊的變化,一般來說一頁多篇文章時每篇文章的css樣式都是一樣的,當然每篇文章顯示的資料如標題、內容、發表日期等都是一樣的,但是如何再加點小程式碼就可以讓第一篇文章顯示的樣式與之後的文章是不一樣的喔!!!

效果就像上圖那樣,可以第一篇顯示文章縮圖及標題,但是之後的文章都只顯示標題就像是清單顯示似的,其原理很簡單,簡單的說就是利用迴圈增加數值來判斷抓出最初的文章。

首先我以default這個主題做範例,在index.php尋找出以下類似迴圈程式碼


 

然後在那段程式碼上面加入下面這段程式碼


 

並且在迴圈程式碼下面加入下面這段程式碼


 

改完後的樣子就像這樣



	

 

再來是找出下面這段結束迴圈的程式碼


 

並且在其上面加入以下這段程式碼


			
id="post-">

 

if ( $post_number==1) { ... } 包住的內容就是第一篇文章的程式碼,而 else { ... } 的部份就是第二篇文章之後的程式碼啦,接下來就隨你改囉~~

Arras: 搜尋框移到導航列右側

因為很不習慣搜尋框是擺在頁首而不是在導航列裡,所以就花點時間把他改放在導航列囉~
順便將改寫過程寫出來供需要的Arras使用者們去改來玩玩。

首先開啟arras-theme/header.php,並且將以下的程式碼刪掉或是註解掉也可以。


 

然後將下面段程式碼加在< ul class="quick-nav clearfix" >的上面。


 

改完結果如下


 

再來開啟arras-theme/css/styles/default.css,隨便一行加入下列程式碼就打完收工。

#quick-nav_searchbar	{ float: right; margin: 0 8px 0 0; border: 3px solid #141212; background: #EFEFEF; padding: 0; height: 21px; }

Post Thumbnail Support

文章/分頁縮圖功能是從 WordPress 2.9 開始新增的內建功能,可以讓使用者不再須要安裝額外掛才能達成這個效果。但也不是每個主題都有支援這個新功能,本篇文章將說明如何讓主題啟用支援此功能。

首先我們要在佈景主題目錄下的functions.php加入一段程式碼告訴系統說這個主題開始支援文章縮圖功能了。
在裡面最後一行的?>之前一行加入以下程式碼:

// WordPress 2.9 Post Thumbnail Support
if ( function_exists('add_theme_support') )
{
	add_theme_support('post-thumbnails');
}

 

然後在首頁index.php加入文章縮圖:
模糊尋找以下程式碼,關鍵字是the_content為主。

 

然後在the_content上一行加入以下程式碼:


	

 

再來說明一下the_post_thumbnail()可以有哪些變化:

the_post_thumbnail():圖案大小顯示為縮圖大小
the_post_thumbnail('thumbnail'):圖案大小顯示為縮圖大小
the_post_thumbnail('medium'):圖案大小顯示為中等大小
the_post_thumbnail('large'):圖案大小顯示為大圖大小
the_post_thumbnail( array(120,80) ):自訂寬度及高度數值。

如果你想要設定圖案的Class屬性的話可以加入array( 'class' => 'css數值' ),寫法如下:


	 'postimage' ) ); ?>

 

如果你希望在未設定縮圖前有個預設圖案的話,寫法如下:


	

	<?php the_title(); ?>

 

接下來就可以去文章頁面設定縮圖來好好玩玩囉,如果想要在彙整/分類文章頁面也顯示的話就開啟archive.php去循上面的步驟來修改即可。雖然這功能很方便不過也有些小缺點,例如不能透過外連網址的方式加入縮圖,只能使用媒體裡的圖檔,真是有些不方便。另外提一下NextGEN Gallery這個外掛也支援可以被文章縮圖調用。

Theme Test Drive|主題測試修改

外掛名稱:Theme Test Drive(佈景主題測試模式)
外掛版本:2.7.4
下載網址:http://wordpress.org/extend/plugins/theme-test-drive/

對於習慣一邊改檔案上傳一邊檢查主題樣式的使用者來說,都不喜歡被網友正巧看到修改中的樣式,這個外掛就可以解決這個問題,可以設定選擇啟用那個主題為測試模式,然後再設定多少等級權限的使用者才能看到測試模式,低於權限的網友所看到的會是原本套用的主題,如果要設定只有管理員等級才可以看到的話就設為 10 吧!