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,插件

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

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]

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

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

插件開發和實作的原理

show_menu()：

action_menu（）

添加Action

showall

register_mysettings

html.php

繼續閱讀

php寫一個簡潔的登入頁面

DOM下元素 offset client scroll 相關屬性簡介

Apache與PHP環境下配置本地虛拟主機

Testlink安裝部署之XAMPP

TestLink 圖表中文亂碼問題

IE8 CSS設定DIV居中，添加“margin:0 auto”

ecshop屬性排序

Ubuntu16.04安裝Apache+MySQL+PHP1. 安裝Apache2. 安裝MySQL3. 安裝PHP4. 安裝phpMyAdmin

版本号隐藏

Apache配置SSLApache配置SSL

配置apache支援PHP（win7）

Cloud Studio初體驗

詳解STM32單片機的堆棧

NOSQL安全攻擊

php 去掉字元串的最後一個字元及截取原字元串1,2,3,4,5,6,

php——水印