WordPress外掛開發例項教程 - 版權外掛

神馬和浮雲發表於2014-04-14

說明：本教程僅限學習，高手請繞道

開發程式：WordPress 3.9-RC1

使用主題：Twenty Fourteen

在開始之前，需要注意三件事情

I、給外掛取一個個性化的名字，越個性化越好，以防和其他外掛重名衝突。

II、程式碼裡面，一定要包含註釋，不為自己，也要為想修改你程式碼的別人想想。

III、儘量用最新版的 WordPress 進行開發和測試。

外掛名稱和外掛結構

一般來說，都是在 wp-content\plugins 目錄下建立一個資料夾，資料夾名就是外掛的名稱，我們外掛名字為"copyright_plugin"，檔案結構如下。

 

\wp-content\plugins\copyright_plugin下有copyright_plugin.php和readme.txt

這裡的 readme.txt 檔案中包含了一些外掛的介紹，使用說明等資訊，主要是提交到 WordPress 官方網站時候用到的，可以參考他們給的模板 http://wordpress.org/extend/plugins/about/readme.txt，另外還有外掛截圖預覽的功能，需要另外新增圖片，但是我們現在是練習，不需要提交到官網，所以暫時先不涉及這些。

外掛的核心

總的來說，外掛的核心是兩個 function，用來新增 Hooks（中文譯為鉤子）

add_action ($hookname, $callbackfunction)
add_filter ($hookname,$callbackfunction)

這兩個方法相當重要，幾乎所有的外掛都要用到他們。

Actions，我理解就是 wordpress 核心程式碼預留的一些特殊的切入點，或者說是在執行一些特定事件時候發生，例如文章釋出時，或者訪客留言時觸發。
Filters，應該就是 wordpress 執行時，對資料傳輸過程的一種過濾機制，例如當文章儲存到資料庫的過程，或者文章從事資料庫中取出，展現到瀏覽器中的這個過程。

我們今天要製作的外掛，應該是用 Filters，因為我們要在文章顯示在瀏覽器之前，在最後面加上一段字元竄，用來顯示版權資訊，後面新增選單項的時候，也要用到 Actions。

外掛概要資訊

用文字編輯器開啟 copyright-plugin.php 檔案，輸入如下資訊：

<?php  
/*
Plugin Name: Copyright plugin
Plugin URI: http://www.xxxx.com/plugins/
Description: 此外掛將在文章正文最下面，顯示一行版權資訊
Version: 1.0.0
Author: xcxc
Author URI: http://www.xxxx.com/
License: GPL
*/
?>

儲存好檔案，然後登入 WordPress 後臺，開啟外掛選單，應該就可以看到這個外掛，已經顯示在外掛列表裡面了，並且可以啟用這個外掛試試，不過沒有任何效果，因為到目前為止，這個外掛還沒有實現任何功能。

為外掛實現功能

修改copyright_plugin.php

<?php  
/*
Plugin Name: Copyright plugin
Plugin URI: http://www.xxxx.com/plugins/
Description: 此外掛將在文章正文最下面，顯示一行版權資訊
Version: 1.0.0
Author: xcxc
Author URI: http://www.xxxx.com/
License: GPL
*/
 
/* 此外掛將在文章正文最下面，顯示一行版權資訊 */ 
function display_copyright() {  
    return "<p style='color:red'>本站點所有文章均為原創，轉載請註明出處！</p>";  
}  
?>

儲存好這個檔案，然後開啟正在用的主題資料夾，開啟index.php 資料夾，找到 get_template_part( 'content', get_post_format() ); 並在下面新增如下程式碼

if(function_exists('display_copyright')) {  
    echo display_copyright();  
}

function_exists 是判斷 display_copyright 函式是否存在，因為當外掛停用的時候，主題程式碼裡面是找不到這個函式的，所以要判斷一下，防止出錯。

然後在 wordpress 後臺啟用該外掛，再開啟首頁看看效果吧！

至此，這段程式碼，應該可以勉強算是一個外掛了。之所以說勉強，是因為這個外掛存在一個問題，需要手工去修改主題程式碼，如果使用者換了主題的話，需要在新主題裡面再次修改程式碼，這個不好。

改良外掛

還記得我們前面說過的 Hooks （鉤子）嗎，我們要開始用 Filter 鉤子了！

程式碼修改copyright_plugin.php如下：

<?php  
/*
Plugin Name: Copyright plugin
Plugin URI: http://www.xxxx.com/plugins/
Description: 此外掛將在文章正文最下面，顯示一行版權資訊
Version: 1.0.0
Author: xcxc
Author URI: http://www.xxxx.com/
License: GPL
*/
add_filter( 'the_content',  'display_copyright' );  
 
/* 這個函式在日誌正文結尾處新增一段版權資訊，並且只在 首頁 頁面才新增 */ 
function display_copyright( $content ) {  
    if( is_home() )  
        $content = $content . "<p style='color:red'>本站點所有文章均為原創，轉載請指明出處！</p>";  
 
    return $content;  
}  
?>

參看以上程式碼，其中 the_content 是鉤子的名字，display_copyright 是回撥函式名稱。這樣一來，只要啟用外掛就可以實現功能，無需去修改主題了，請把剛才在index.php 檔案中新增的程式碼刪掉，然後啟用外掛，看看效果吧，顯示效果應該是一樣的，無論怎麼換主題，還是會自動顯示版權資訊。

is_home是判斷是不是主頁

更進一步

至此一個真正的外掛算是完成了。但是此外掛將版權資訊直接寫在程式碼裡，如果使用者想自定義版權資訊的話，需要修改外掛的原始碼，仍然不方便，所以此外掛仍需改進。其實，我們可以在 WordPress 後臺中為外掛單獨新增一個選單和頁面，使用者可以在這裡來自定義設定設定版權資訊，資訊可以儲存在資料庫裡面。

先附上完整程式碼，後面會做說明

<?php  
/*
Plugin Name: Copyright plugin
Plugin URI: http://www.xxxx.com/plugins/
Description: 此外掛將在文章正文最下面，顯示一行版權資訊
Version: 1.0.0
Author: xcxc
Author URI: http://www.xxxx.com/
License: GPL
*/

/* 註冊啟用外掛時要呼叫的函式 */ 
register_activation_hook( __FILE__, 'display_copyright_install');   

/* 註冊停用外掛時要呼叫的函式 */ 
register_deactivation_hook( __FILE__, 'display_copyright_remove' );  

function display_copyright_install() {  
    /* 在資料庫的 wp_options 表中新增一條記錄，第二個引數為預設值 */ 
    add_option("display_copyright_text", "<p style='color:red'>本站點所有文章均為原創，轉載請註明出處！</p>", '', 'yes');  
}

function display_copyright_remove() {  
    /* 刪除 wp_options 表中的對應記錄 */ 
    delete_option('display_copyright_text');  
}

if( is_admin() ) {
    /*  利用 admin_menu 鉤子，新增選單 */
    add_action('admin_menu', 'display_copyright_menu');
}

function display_copyright_menu() {
    /* add_options_page( $page_title, $menu_title, $capability, $menu_slug, $function);  */
    /* 頁名稱，選單名稱，訪問級別，選單別名，點選該選單時的回撥函式（用以顯示設定頁面） */
    add_options_page('Set Copyright', 'Copyright Menu', 'administrator','display_copyright', 'display_copyright_html_page');
}

function display_copyright_html_page() {
    ?>
    <div>  
        <h2>Set Copyright</h2>  
        <form method="post" action="options.php">  
            <?php /* 下面這行程式碼用來儲存表單中內容到資料庫 */ ?>  
            <?php wp_nonce_field('update-options'); ?>  
 
            <p>  
                <textarea  
                    name="display_copyright_text" 
                    id="display_copyright_text" 
                    cols="40" 
                    rows="6"><?php echo get_option('display_copyright_text'); ?></textarea>  
            </p>  
 
            <p>  
                <input type="hidden" name="action" value="update" />  
                <input type="hidden" name="page_options" value="display_copyright_text" />  
 
                <input type="submit" value="Save" class="button-primary" />  
            </p>  
        </form>  
    </div>  
<?php  
}  

add_filter( 'the_content',  'display_copyright' );  
 
/* 這個函式在日誌正文結尾處新增一段版權資訊，並且只在 首頁 頁面才新增 */ 
function display_copyright( $content ) {  
    if( is_home() )  
        $content = $content . get_option('display_copyright_text'); 
 
    return $content;  
}  
?>

說明：

以下程式碼自己要是在啟用外掛時和停用外掛時呼叫，註釋中已經寫得很詳細了。

/* 註冊啟用外掛時要呼叫的函式 */ 
register_activation_hook( __FILE__, 'display_copyright_install');   

/* 註冊停用外掛時要呼叫的函式 */ 
register_deactivation_hook( __FILE__, 'display_copyright_remove' );  

function display_copyright_install() {  
    /* 在資料庫的 wp_options 表中新增一條記錄，第二個引數為預設值 */ 
    add_option("display_copyright_text", "<p style='color:red'>本站點所有文章均為原創，轉載請註明出處！</p>", '', 'yes');  
}

function display_copyright_remove() {  
    /* 刪除 wp_options 表中的對應記錄 */ 
    delete_option('display_copyright_text');  
}

 

新增選單和頁面的程式碼如下：

if( is_admin() ) {
    /*  利用 admin_menu 鉤子，新增選單 */
    add_action('admin_menu', 'display_copyright_menu');
}

function display_copyright_menu() {
    /* add_options_page( $page_title, $menu_title, $capability, $menu_slug, $function);  */
    /* 頁名稱，選單名稱，訪問級別，選單別名，點選該選單時的回撥函式（用以顯示設定頁面） */
    add_options_page('Set Copyright', 'Copyright Menu', 'administrator','display_copyright', 'display_copyright_html_page');
}

至此，已經可以在後臺看到選單項了，但是點選的話，還會出錯，因為還沒有新增對應的頁面（如何自定義新增後臺選單位置）

下面開始新增頁面，主要程式碼如下：

function display_copyright_html_page() {
    ?>
    <div>  
        <h2>Set Copyright</h2>  
        <form method="post" action="options.php">  
            <?php /* 下面這行程式碼用來儲存表單中內容到資料庫 */ ?>  
            <?php wp_nonce_field('update-options'); ?>  
 
            <p>  
                <textarea  
                    name="display_copyright_text" 
                    id="display_copyright_text" 
                    cols="40" 
                    rows="6"><?php echo get_option('display_copyright_text'); ?></textarea>  
            </p>  
 
            <p>  
                <input type="hidden" name="action" value="update" />  
                <input type="hidden" name="page_options" value="display_copyright_text" />  
 
                <input type="submit" value="Save" class="button-primary" />  
            </p>  
        </form>  
    </div>  
<?php  
}

現在再去點選剛才新加的選單，可以顯示出來一個頁面了，我們可以在這裡設定版權資訊文字。

另外還有如下程式碼要修改

/* 這個函式在日誌正文結尾處新增一段版權資訊，並且只在 首頁 頁面才新增 */ 
function display_copyright( $content ) {  
    if( is_home() )  
        $content = $content . get_option('display_copyright_text'); 
 
    return $content;  
}

將原來的靜態化文字，改成動態的，之所以要這麼改，是因為我們已經將資料存到資料庫裡面了，這裡要從資料庫裡面取出資料。

 

相關文章