当前位置:网站首页>wordpress插件开发03-简单的all in one seo 插件开发

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

2022-08-11 08:52:00 51CTO


这节课,我们来完成简单的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>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.

可以看到,目前是没有关键词和描述的。

现在,我们来安装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="一个人走,可以走得很快。一群人走,可以走得很远。 愿虚幻私塾能够陪伴更多的站长成长!" />
  • 1.

你会发现,关键字和描述就成功的添加上去了,这就是这个插件的功能。

插件开发和实现的原理

打开插件文件夹,进来之后,有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);
*/
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.

函数的名称叫做: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: ' '
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.

action_menu()

      
      
function action_menu(){
include('html.php');
}
  • 1.
  • 2.
  • 3.

这个函数包含了另一个文件,它和做主题开发时,getheader()/getfooter()的原理一样,都是调用外部文件。这个文件的效果其实就是这里,显示一个交互的界面:

[mem]




wordpress插件开发03-简单的all in one seo 插件开发_数据_02



 ​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');
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.

首先,进行判断,是否是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.'"'." />";
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.

它首先获取到了关键词和描述。获取数据之后,它会将这段关键字和描述的信息,输出到首页head标签中。

register_mysettings

注册信息:

      
      
function register_mysettings() {
//注册之后就可以被options处理
register_setting('myoption-group', 'keyword');
register_setting('myoption-group', 'des');
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.

只有这里注册了,showall中的get_option才能够获取到数据。

register_setting这个函数是非常重要的,它被用于数据的存储,因为在这个插件里面,不同于前面的2个插件(自动摘要和添加菜单的信息输出),前面的插件很简单,没有任何的数据的操作。

但是在这个插件里,我们通过代码获取到用户的输入数据,然后将数据输出到head中,这种数据的交互是很重要的。

这些数据存放在option表里,wordpress有一张表格:option表:

这张表格就是用来处理数据的存储和读取的。所以首先我们要注册表格数据字段:register_setting。

register_setting的第一个参数:myoption-group,它对应的是html.php中的:

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

这样我们就实现了数据和表单界面的关联。

所以,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>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.

我们设置了关键词:

      
      
name="keyword"
  • 1.
      
      
name="des"
  • 1.

这样2个关键词,对应的是register_mysettings中的2个参数:

      
      
register_setting('myoption-group', 'keyword');
register_setting('myoption-group', 'des');
  • 1.
  • 2.

在这个表单里:

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

这里注意,表单的method必须是post。

在整个文件中,我们只是做了一张表格,我们没有对表格做任何的处理,只是写了2个关键词和它的名字,但是为什么wordpress做了这些动作呢?

就是因为这是wordpress内置的机制。这个机制使得我们不需要做代码的处理,直接进行简单的设计就可以实现非常复杂的功能,所以这也是利用wordpress做插件开发非常快的原因。

直接在这里写完一个表单,然后添加上关键词就好了。

注意这样一段代码:

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

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

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

原网站

版权声明
本文为[51CTO]所创,转载请带上原文链接,感谢
https://blog.51cto.com/u_11408356/5565584