天天看點

wordpress插件開發03-簡單的all in one seo 插件開發

這節課,我們來完成簡單的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主題制作 – 又一個WordPress站點</title>
<link rel='dns-prefetch' href='//s.w.org' />
<link rel="alternate" type="application/rss+xml" title="WordPress主題制作 » Feed" href="http://localhost/localwp.com/feed" />
<link rel="alternate" type="application/rss+xml" title="WordPress主題制作 » 評論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,插件

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

wordpress插件開發03-簡單的all in one seo 插件開發

​​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]

wordpress插件開發03-簡單的all in one seo 插件開發

​​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'); ?>