1. 程式人生 > >WordPress 管理 Header 或 Footer, 加入程式碼的外掛

WordPress 管理 Header 或 Footer, 加入程式碼的外掛

做了個站點,一下想隨時瞭解站點被訪問的情況,或者進行 SEO。比如用 Google-Analytics, 也可能用了其他的站點統計服務,那就要求在頁面中植入一段 JS 程式碼,如果每次有新需求都開啟主題的 footer.php 檔案來改就有點麻煩些。也存在往 header.php 中加入些資訊的情況,比如 meta, css, js 等, 如果有個外掛統一來管理有容易得多,省得直接改檔案。

去 WordPress 中搜索 Footer 就能看到一些解決此問題的外掛,有好幾個。類似的東西多了也好讓人眼花的,就像商場裡買東西,太多的選擇反而使人猶豫不決。我找了下,有以下幾個外掛:

1. wp-hefo | WordPress header & footer

 (v0.2, Last Updated: 2009-3-25)
2. Header-Footer (v1.1.1, Last Updated: 2010-8-3)
3. General Headers & Footers (v0.5, Last Updated: 2010-5-22)
4. Custom Headers and Footers (v1.1.5, Last Updated: 2010-7-28)
5. Add to Footer (v1.0.1, Last Updated: 2009-3-9)
6. WP Footer HTML (v0.2, Last Updated: 2010-4-27)

接下來大概介紹下其中幾個外掛的特性,

wp-hefo | WordPress header & footer,安裝後在 Appearance 中出現 Header & Footer 選單,大概是看到 Settings 中選項太多了,放這裡倒好找。開啟它就是兩個輸入框,一個是 Header,另一就是 Footer,分別輸入往這兩處插入的 HTML 程式碼,各自加到所有前臺頁面的 </head> 前和 </body> 前。好像也沒什麼特別的。

它是通過 add_action('wp_head', array('hefo', 'wp_head')); 和 add_action('wp_footer', array('hefo', 'wp_footer'));  實現相應位置植入 HTML 程式碼的。

Header-Footer,安裝後在 Settings 下出現 Header and Footer,它提供三個配置框,想多加介紹下它,它提供有三個輸入框,看截圖:

有三個框,分別是插入 HTML 到首頁面的 </head> 前,插入 HTML 到所有頁面的 </head> 前,和插入 HTML 到所有頁面的 </body> 前。所以它除了可以區別出 Home 頁面外,還有就是編輯的時候點選輸入框時當前輸入框會變為原來的 6 倍高,方便編輯。可就是儲存成功之後頁面上沒有任何提示資訊。

通過 add_action('wp_head', 'hefo_wp_head'); 和 add_action('wp_footer', 'hefo_wp_footer'); 實現向 Header 和 Footer 植入 HTML 程式碼,這裡也出現了 hefo 字樣,看起來這個外掛是參照前一個外掛來寫的。

General Headers & Footers, 雖然叫做 General Header & Footers,但出現在 Settings 中的選單卻是 General Header,好在配置頁頁還叫回了 General Header & Footers。它的配置和功能與 wp-hefo | WordPress header & footer 是一樣的,就兩個固定大小輸入框 Header 和 Footer。實現程式碼是:

add_filter('wp_head', 'genhdr_header');
add_action('wp_footer', 'genhdr_footer',99);

add_filter 和 add_action 倒差不多,關鍵是這裡的 add_action('wp_footer','genhdr_footer',99) 第三個引數 99 所表明的優先順序數,用較大的 99 可使得它在較後執行,也就是切入的 HTML 程式碼更接近 </body>,這對於放置網站統計程式碼有利,因為它之前最好放些頁面顯示邏輯的程式碼。如果沒有這個優先順序引數,和其他也要向 </body> 前加入插程式碼的外掛比,插入程式碼的順序就不定的。

 Custom Headers and Footers,安裝之後在 Settings 下有 Custom Headers and Footers 進入配置介面,有四個框可以輸入內容。分別是 Meta Headers、Header、Footer、Blog Footer,第一和第四項輸入的東西好理解,會放到每個頁面的 Header(</head>) 和 Footer(</body>) 前。而 Header 和 Footer 這兩輸入框本意是要分別放到日誌頁面的前後,或是單頁時內容的前後,但實際上在單頁時有可能顯示有誤,看:

custom header footer

wordpress plugin custom header footer

也來看下它的實現方式,中間那兩塊是在 loop_start 和 loop_end 加入的:

  add_action( 'wp_head', array( &$this, 'wp_head' ) );
  add_action( 'loop_start', array( &$this, 'loop_start' ) );
  add_action( 'loop_end', array( &$this, 'loop_end' ) );
  add_action( 'wp_footer', array( &$this, 'wp_footer' ) );

 Add to Footer, 它不僅提供往 Footer 中加手工加入 HTML 程式碼的,而且可根據你介面輸入的 StatCounter 的 Project ID/Partition ID/Security String、Google Analytics 的 Web Property ID、Revinvigorate 的 Tracking ID 或 Apture 的 SiteToken 幫你生成相應的程式碼放置到 Footer 中。也還是帶來些方便,但對國內使用者未必好用,其次就是不處理 Header。不過一般我們也是隻需向 Footer 加些東西。

WP Footer HTML 的功能簡單就是前面的一部分功能,只能向 Footer 加入 HTML 程式碼,而且二選一的就是要麼只向 Home 頁加,要麼向全部頁面。

注意,不管是前面哪個外掛都只能向 Header 或 Footer 位置加入 HTML 程式碼,包括 <script>...</script> 程式碼,就是放在 </head> 或 </body> 前的部分,不能嵌入 php 程式,但你硬要放也沒誰會說你,只是仍然以原樣出現在頁面原始檔中。

綜上,我覺得對我來說比較合適的還是第二款 Header-Footer,你可以對它做些小改,比如想讓它的優先順序較低使得輸出的程式碼靠後,就改它的 plugin.php 檔案,給

add_action('wp_footer', 'hefo_wp_footer');

加個優先順序引數,比如 99,就寫成

add_action('wp_footer', 'hefo_wp_footer', 99);

如果願意動手的話也可以使得該外掛在儲存成功後顯示提示資訊來,其實作者是有這個想法的,如 <?php wp_nonce_field('save') ?>,但有些小 Bug。

當然,如果你確實在用 Add to Footer 外掛選項中的那些外掛,欲省卻貼較多程式碼時也可用 Add to Footer 外掛。