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后台，安装并启用：

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

我们输入关键词和描述：

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

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

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

来到网站前台，查看网页源代码：

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

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

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

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

转载请注明：xuhss » wordpress插件开发03-简单的all in one seo 插件开发

xuhss 简单、充实的学习

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

插件开发和实现的原理

show_menu()：

action_menu（）

添加Action

showall

register_mysettings

html.php

您必须登录才能发表评论！

插件开发和实现的原理

show_menu()：

action_menu（）

添加Action

showall

register_mysettings

html.php

您必须 登录 才能发表评论！

您必须登录才能发表评论！