wordpress外掛開發03-簡單的all in one seo 外掛開發

huangbangqing12發表於2018-07-08

這節課，我們來完成簡單的all in one seo 外掛開發，相信用過All in one 這個外掛的朋友，都應該知道這個外掛提供了什麼功能。

它可以幫助我們設定網站的描述和關鍵字。那麼，這節課我們會製作一個非常簡單的外掛，All in one simple。

先來演示外掛的最終效果：

來到網站的前臺，檢視原始碼：

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<title>WordPress主題製作 &#8211; 又一個WordPress站點</title>
<link rel='dns-prefetch' href='//s.w.org' />
<link rel="alternate" type="application/rss+xml" title="WordPress主題製作 &raquo; Feed" href="http://localhost/localwp.com/feed" />
<link rel="alternate" type="application/rss+xml" title="WordPress主題製作 &raquo; 評論Feed" href="http://localhost/localwp.com/comments/feed" />
<link rel='stylesheet' id='dashicons-css'  href='http://localhost/localwp.com/wp-includes/css/dashicons.min.css?ver=4.9.5' type='text/css' media='all' />
<link rel='stylesheet' id='admin-bar-css'  href='http://localhost/localwp.com/wp-includes/css/admin-bar.min.css?ver=4.9.5' type='text/css' media='all' />
<link rel='stylesheet' id='twentyseventeen-style-css'  href='http://localhost/localwp.com/wp-content/themes/twentyseventeen/style.css?ver=4.9.5' type='text/css' media='all' />
<!--[if lt IE 9]>
<link rel='stylesheet' id='twentyseventeen-ie8-css'  href='http://localhost/localwp.com/wp-content/themes/twentyseventeen/assets/css/ie8.css?ver=1.0' type='text/css' media='all' />
<![endif]-->
<!--[if lt IE 9]>
<script type='text/javascript' src='http://localhost/localwp.com/wp-content/themes/twentyseventeen/assets/js/html5.js?ver=3.7.3'></script>
<![endif]-->
<script type='text/javascript' src='http://localhost/localwp.com/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>
<script type='text/javascript' src='http://localhost/localwp.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>
<link rel='https://api.w.org/' href='http://localhost/localwp.com/wp-json/' />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost/localwp.com/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://localhost/localwp.com/wp-includes/wlwmanifest.xml" /> 
<meta name="generator" content="WordPress 4.9.5" />
        <style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>
        <style type="text/css" media="print">#wpadminbar { display:none; }</style>
<style type="text/css" media="screen">
    html { margin-top: 32px !important; }
    * html body { margin-top: 32px !important; }
    @media screen and ( max-width: 782px ) {
        html { margin-top: 46px !important; }
        * html body { margin-top: 46px !important; }
    }
</style>
</head>

可以看到，目前是沒有關鍵詞和描述的。

現在，我們來安裝All in one simple外掛：

下載地址：plugin_3

來到wordpress後臺，安裝並啟用：

會員觀看

啟用之後在設定選單下面，會多出一個“虛幻私塾SEO外掛”：

會員觀看

我們輸入關鍵詞和描述：

關鍵詞：虛幻私塾,wordpress,外掛

描述：一個人走，可以走得很快。一群人走，可以走得很遠。 願虛幻私塾能夠陪伴更多的站長成長！

8311587-ec2794b8d54560b7.png
image

輸入完成後，點選儲存設定。

來到網站前臺，檢視網頁原始碼：

<meta name="keywords" content="虛幻私塾,wordpress,外掛" /><meta name="description" content="一個人走，可以走得很快。一群人走，可以走得很遠。 願虛幻私塾能夠陪伴更多的站長成長！" />

你會發現，關鍵字和描述就成功的新增上去了，這就是這個外掛的功能。

外掛開發和實現的原理

開啟外掛資料夾，進來之後，有2個檔案，前面講過當外掛內容較多時，可以放到資料夾中，開啟plugin_all_in_one_simple.php

最上面的註釋是必備的，這是wordpress識別是否是外掛的基礎。

show_menu()：

function show_menu(){
    //在設定中新增一個選單
    add_options_page('虛幻私塾SEO外掛','虛幻私塾SEO外掛', 8, __FILE__, 'action_menu');
    /*
        *top menu:add_menu_page( $page_title, $menu_title, $capability, $menu_slug, $function, $icon_url, $position );
        *sub menu: add_submenu_page( $parent_slug, $page_title, $menu_title, $capability, $menu_slug, $function);
        */
}

函式的名稱叫做：show_menu()，顯示選單，裡面的實現很簡單，呼叫了一個標籤：add_options_page。

這個標籤是wordpress提供的，這個函式可以找到對應的官方介紹：https://codex.wordpress.org/Function_Reference/add_options_page

//各個引數釋義
$page_title //外掛在瀏覽器標籤中顯示的名稱
(string) (required) The text to be displayed in the title tags of the page when the menu is selected
Default: None
$menu_title //外掛在wordpress後臺選單中顯示的名稱
(string) (required) The text to be used for the menu
Default: None
$capability //選單顯示的許可權，一般都設定為8 官方解釋：https://codex.wordpress.org/Roles_and_Capabilities#Capabilities
(string) (required) The capability required for this menu to be displayed to the user.
Default: None
$menu_slug  //名稱標記
(string) (required) The slug name to refer to this menu by (should be unique for this menu).
Default: None
$function  //回撥函式，用於定製輸出的內容
(callback) (optional) The function to be called to output the content for this page.
Default: ' '

action_menu（）

function action_menu(){
   include('html.php');
}

這個函式包含了另一個檔案，它和做主題開發時，getheader()/getfooter()的原理一樣，都是呼叫外部檔案。這個檔案的效果其實就是這裡，顯示一個互動的介面：

[mem]

8311587-362cfb93bfaa26d2.png
image

[/mem]

新增Action

在往下是新增Action，也就是外掛最核心的部分，我們的外掛的動作就是放在這裡實現的：

//新增action 
if ( is_admin() ){ 
  add_action('admin_menu','show_menu');
  add_action('admin_init', 'register_mysettings' );
}
add_action('wp_head','showall');

首先，進行判斷，是否是wordpress後臺，如果是後臺，則開始啟用2個Action：

第一個是admin_menu，新增選單時呼叫show_menu，所以，當你登入後臺時，則就自動呼叫show_menu函式。

第二個是admin_init，一旦登陸了wordpress後臺，就會呼叫register_mysettings，這個函式我們稍後講解。

最外面的Action是wp_head，當我們開啟網站首頁，就會觸發wp_head的呼叫，所以，showall這個函式將被呼叫/

所以，接下來，我們看看後2個Action對應的函式分別又實現了什麼？

showall

function showall(){
   $keywords=get_option('keyword');
   $description = get_option('des');

    echo "<meta name=".'"keywords"'." content=".'"'.$keywords.'"'." />";
    echo "<meta name=".'"description"'." content=".'"'.$description.'"'." />";
}

它首先獲取到了關鍵詞和描述。獲取資料之後，它會將這段關鍵字和描述的資訊，輸出到首頁head標籤中。

register_mysettings

註冊資訊：

function register_mysettings() {
  //註冊之後就可以被options處理
    register_setting('myoption-group', 'keyword');
    register_setting('myoption-group', 'des');
}

只有這裡註冊了，showall中的get_option才能夠獲取到資料。

register_setting這個函式是非常重要的，它被用於資料的儲存，因為在這個外掛裡面，不同於前面的2個外掛（自動摘要和新增選單的資訊輸出），前面的外掛很簡單，沒有任何的資料的操作。

但是在這個外掛裡，我們通過程式碼獲取到使用者的輸入資料，然後將資料輸出到head中，這種資料的互動是很重要的。

這些資料存放在option表裡，wordpress有一張表格：option表：

這張表格就是用來處理資料的儲存和讀取的。所以首先我們要登錄檔格資料欄位：register_setting。

register_setting的第一個引數：myoption-group，它對應的是html.php中的：

<?php settings_fields( 'myoption-group'); ?>

這樣我們就實現了資料和表單介面的關聯。

所以，register_mysettings函式註冊了myoption-group表單下的keyword和des。實現了資料和表單介面的關聯。

html.php

在這個表單裡：

<div class="wrap">
<h2>虛幻私塾SEO外掛seo設定</h2>
<form method="post" action="options.php">
    <?php settings_fields( 'myoption-group'); ?>
    <table class="form-table">
        <tr valign="top">
        <th scope="row">關鍵字：</th>
        <td><input type="text" name="keyword" size="100" value="<?php echo get_option('keyword'); ?>" /></td>
        </tr>
          <tr valign="top">
        <th scope="row">描述：</th>
        <td><input type="text" name="des" size="100" value="<?php echo get_option('des'); ?>" /></td>
        </tr>
    </table>

    <p class="submit">
    <input type="submit" class="button-primary" value="<?php _e('儲存設定') ?>" />
    </p>

</form>
</div>

我們設定了關鍵詞：

name="keyword"

name="des"

這樣2個關鍵詞，對應的是register_mysettings中的2個引數：

    register_setting('myoption-group', 'keyword');
    register_setting('myoption-group', 'des');

在這個表單裡：

<form method="post" action="options.php">

這裡注意，表單的method必須是post。

在整個檔案中，我們只是做了一張表格，我們沒有對錶格做任何的處理，只是寫了2個關鍵詞和它的名字，但是為什麼wordpress做了這些動作呢？

就是因為這是wordpress內建的機制。這個機制使得我們不需要做程式碼的處理，直接進行簡單的設計就可以實現非常複雜的功能，所以這也是利用wordpress做外掛開發非常快的原因。

直接在這裡寫完一個表單，然後新增上關鍵詞就好了。

注意這樣一段程式碼：

<?php settings_fields( 'myoption-group'); ?>

上面一行程式碼作用很重要，它關聯了資料和介面。

那以上就是整個外掛開發的原理和解釋。

相關文章