首页 > 主题开发 > wordpress插件开发 > wordpress插件开发03-简单的all in one seo 插件开发
2018
07-25

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主题制作 &#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后台,安装并启用:

You must be logged in to view the hidden contents.

启用之后在设置菜单下面,会多出一个“虚幻私塾SEO插件”:

You must be logged in to view the hidden contents.

我们输入关键词和描述:

关键词:虚幻私塾,wordpress,插件

描述:一个人走,可以走得很快。一群人走,可以走得很远。 愿虚幻私塾能够陪伴更多的站长成长!

SEO插件seo设置 - wordpress插件开发03-简单的all in one seo 插件开发

输入完成后,点击保存设置。

来到网站前台,查看网页源代码:

<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()的原理一样,都是调用外部文件。这个文件的效果其实就是这里,显示一个交互的界面:

You must be logged in to view the hidden contents.

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

上面一行代码作用很重要,它关联了数据和界面。

那以上就是整个插件开发的原理和解释。

最后编辑:
作者:MrBang
WordPress迷

留下一个回复