利用function,直接在WordPress的head或footer加上代碼

Wordpress

若常使用外部服務來讓自己的部落格更完善的話,想必須要將一些代碼加入網站中,但往往很多使用者都搞不太清楚代碼該加入在哪邊?如果你使用的是自架WordPress部落格系統又是一位剛入門的初心者,很可能一個頭兩個大。現在你可以不用頭大了,未來只要有語法要加入在網頁頭部或是底部,我們只要統一在functions.php內加入就可以了!

自從WordPress的佈景主題中開放了一個叫做functions.php的檔案之後,很多本來要透過外掛或者是改系統檔程式的動作,大多都可以直接在這個檔案內改了,未來若遇到版本升級也不用全部重新來過,實在是很方便。若要將語法加入在head或是footer,現在大可不必開header.php或是footer.php,修改functions.php直接完成。

有些外部服務需要我們將追蹤代碼放在header或者是網頁的footer部分,這時候我們都要去翻佈景主題的header.php或是footer.php檔案。但對於使用者來講,可能常常要把代碼通常會需要將追蹤代碼一下放上面、一下放下面,感覺非常不好管理,未來如果換了佈景主題,這些代碼又要重新找位置擺放,頗不方便的。

加入代碼要翻一堆佈景檔案,為什麼不統合在一塊呢?想要達成這需求,現在我們可透過佈景的functions.php來達做到。運作原理是透過WordPress系統本身的「add_action」函式,並搭配wp_head和wp_footer所達成的效果,我們只要自訂functions,然後把語法丟進去,接著使用add_action去做function整合,就可以啦!

在head加入代碼

透過以下方法加入代碼的話,代碼會出現在html標籤「</head>」之前。一般來講,目前新版的Gooogle Analytics或者是Google Webmaster、Bing、Google Apps、FB留言板等等,需要透過meta標籤進行驗證的服務,都可以將語法加入在此地方。或者是你要加入favicon的圖示語法,也可以透過這個function來加入。

請您開啟當前使用的佈景主題中,functions.php檔案,在適當的位置加上以下的語法,記得不要破壞原本結構。紅色部分請您修改成您要加上的代碼。改好後請儲存並上傳。

function wp_blog_head() {
echo ‘語法在此,前面有使用echo才可輸出 ‘;
} add_action(‘wp_head’, ‘wp_blog_head’);
接著,你必須確認您當前使用的佈景主題中,header.php這檔案在「</head>」標籤之前是否有呼叫「wp_head();」這個函式,如果沒有呼叫,那麼這語法是會失敗的。但通常佈景都會加上它,大家其實可以放心了!

wp_head

在footer加入代碼

那有哪些代碼會加入在footer呢?通常也是一些追蹤語法,像是增加流量的SiteTag和Sitebro,以及網站人氣統計的Yahoo站長工具或是要載入的JS等等,都習慣加入在網頁末端,這樣的作法主要是不讓這些東西去拖垮網頁的讀取速度。舊版的Gooogle Analytics也是需要加在末端,但是現在新版追蹤碼採用非同步Javascript,官方建議大家可以加在head之中,讓追蹤更精準。

加在末端的語法,會顯示在哪邊呢?它會顯示在網頁標籤「</body>」之前,但並非每一種語法都適合加入在此,通常服務官方有提到他們追蹤語法可以加入頁尾,才建議加入,因為那些追蹤碼通常是沒有任何樣式的,但若用這語法,加入了一張圖片或找是一個用眼睛可以看到的東西,那很可能會破壞網頁整體版面。

想要在網頁尾端footer的部分加入代碼,一樣需透過當前使用的佈景之中functions.php檔案來進行,將以下語法加入即可,記得別破壞檔案內原始的架構,否則網站會出問題,您要加入的語法請修改語法中紅色的部分,改完後儲存並上傳即可。

function wp_blog_footer() {
echo ‘語法在此,前面有使用echo才可輸出 ‘;
} add_action(‘wp_footer’, ‘wp_blog_footer’);
這時,我們同樣要確認您當前使用的佈景主題中,footer.php這檔案在「</body>」標籤之前是否有呼叫「wp_footer();」這個函式,如果沒有呼叫,那麼這個額外添加的語法則無法正確顯示,但一般佈景主題都會有,如果沒有在自己加入在「</body>」之前即可。

wp_footer

如果覺得語法擠成一排,其實可以在語法後面加上「\n」來進行斷行,千萬別用成一般網頁斷行「<br />」,否則會出問題的!語法片段範例:「echo “要顯示的文字“.”\n” 」。

(轉自香腸炒魷魚)

Post a comment

 

Loading...