<转>wordpress小工具制作前台后台全解析

本文涉及的产品
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: wordpress主题制作中对边栏的处理一直是我们比较烦恼的,我们希望边栏的变化更多更复杂,今天我们就来具体讲解下wordpress边栏小工具的制作。 一、让你的主题显示小工具 有些相当简单的主题你会发现后台小工具功能竟然没有打开,边栏自然无法自己定义了。

wordpress主题制作中对边栏的处理一直是我们比较烦恼的,我们希望边栏的变化更多更复杂,今天我们就来具体讲解下wordpress边栏小工具的制作。

一、让你的主题显示小工具

有些相当简单的主题你会发现后台小工具功能竟然没有打开,边栏自然无法自己定义了。那么怎么让自己的主题支持小工具功能,前台又如何调用后台拖拽的小工具呢?如何让你的小工具多几个,可以自由安排小工具的位置呢?

1、让你的主题支持小工具功能

在新制作的主题文件functions.php中加入下面这段代码(注意,下文的代码均加入到该文件中,后文不提):

if(function_exists('register_sidebar')){
register_sidebar(array(
'name'=>'首页边栏',
'id' => 'home-sidebar',
'description' => '',
'before_widget' => '<div id="%1$s">',
'after_widget' => '<div></div></div>',
'before_title' => '<div><h3>',
'after_title' => '</h3></div>',
));
}

这样,你进入后台小工具页面的时候就会看到一个名称叫“首页边栏”的小工具挂件区,在这个区域内你可以放置多个小工具,同时在前台可以调用这个小工具区。(说明:前台调用的只能是工具区,而不是某个特定的小工具。)

这些字段我想你应该很容易从其英文名称中得知其用途,name指小工具挂件区的名称,id是等下在前台调用时要用到的挂件区标志,description是该挂件区的描述,后台中可以看到。before_widget/after_widget是前台显示每个小工具时放置在每一个小工具前后的html代码,before_title/after_title则是小工具标题前后的html代码。

到这里,在后台拖拽几个小工具到这个挂件区吧。

2、前台把小工具显示出来

我们用下面的代码再前台调用后台设置好的挂件区:

<?php if(is_active_sidebar('home-sidebar'))dynamic_sidebar('home-sidebar'); ?>

前文已经说到,我们将前文定义的挂件区id作为参数给dynamic_sidebar(),如果在前面你定义了多个id不同的挂件区,那么可以在前台修改这些参数,从而调用不同的挂件区,例如在首页调用id=home-sidebar的挂件区,在内容页调用id=post-sidebar挂件区。当然,为了让主题更完整,你应该考虑当挂件区没有放小工具的时候的情况,只需要加入else的情况即可。

通过上文,你的主题已经可以很完美的实现挂件的调用、显示,在不同的位置,不同的页面显示不同的挂件了。

二、自己制作一个小工具实现特定用途

wordpress默认的小工具虽然已经够用,但我们还是希望能增加一些新的小工具,例如调用随机文章的小工具,让我可以在首页边栏中间位置显示出来。虽然我们很多主题将自己编制的函数放置到主题文件中,但这样会使该区域的内容固定,不能让这个随机文章区域实现自我安排,还是不爽的,因此我们进行下面的工作,让我的随机文章功能成为一个小工具,可以在后台拖拽放置到特定位置。下文以我制作一个带头像评论列表为例,但中间缺失了文章数等,这部分请参看这篇文章

1、所有代码提前一览

我们将所有代码先列出来,放置到functions.php中,读者可以在读代码过程中自然领会怎么设计自己的小工具。

//添加最新评论小工具,需要插件wp-recentcomments支持,显示的内容在插件设置中设置,下面的函数只负责将评论插件转化为挂件,可以在小工具中自由放置
class RecentCommentsWidget extends WP_Widget
{
/*
** 构造函数
** 声明一个数组$widget_ops,用来保存类名和描述,以便在控制面板正确显示工具信息
** $control_ops 是可选参数,用来定义小工具在控制面板显示的宽度和高度
** 最后是关键的一步,调用WP_Widget来初始化我们的小工具
*/
function RecentCommentsWidget(){
$widget_ops = array('classname'=>'recent-comments','description'=>'显示带头像评论列表');
$control_ops = array('width'=>250,'height'=>300);
$this->WP_Widget(false,'最新评论',$widget_ops,$control_ops);
}

function form($instance){
$instance = wp_parse_args((array)$instance,array('title'=>'最新评论'));
$title = htmlspecialchars($instance['title']);
echo '<p style="text-align:left;"><label for="'.$this->get_field_name('title').'">标题:<input style="width:200px;" id="'.$this->get_field_id('title').'" name="'.$this->get_field_name('title').'" type="text" value="'.$title.'" /></label></p>';
echo '<p>最新评论小工具,需要插件wp-recentcomments支持,显示的内容在插件设置中设置,下面的函数只负责将评论插件转化为挂件,可以在小工具中自由放置</p>';
}

function update($new_instance,$old_instance){
$instance = $old_instance;
$instance['title'] = strip_tags(stripslashes($new_instance['title']));
return $instance;
}

function widget($args,$instance){
extract($args);
$title = apply_filters('widget_title',empty($instance['title']) ? '&nbsp;' : $instance['title']);
echo $before_widget;
echo $before_title . $title . $after_title;
?>
<div><?php wp_recentcomments(); ?></div>
<?php
echo $after_widget;
}
}//评论列表小工具类结束
function RecentCommentsInit(){
register_widget('RecentCommentsWidget');
}
add_action('widgets_init','RecentCommentsInit');
//评论列表小工具结束

从上面的代码中你大致能分析出小工具制作的所有要素,接下来详细讲解下。(上面的这个挂件需要你安装插件wp-recentcomments,你将<div><?php wp_recentcomments(); ?></div>修改为你自己的内容,则前台显示为你修改的内容。)

2、构造小工具

构造一个小工具用到上面的类构造class RecentCommentsWidget extends WP_Widget{},类名可自定。

在该类中,总共有4个函数:RecentCommentsWidget()、form($instance)、update($new_instance,$old_instance)、widget($args,$instance)。

RecentCommentsWidget()

函数名可自定义,是用以对该小工具的名称、样式、描述进行定义的。如我的这个小工具名称“最新评论”描述“显示带头像评论列表”。你只需将这些抄过去即可,修改名称和描述。

form($instance)

在后台将该小工具拖拽到挂件区展开后你会看到该函数中规定的内容。我的这个小工具只是显示一个标题设置框和一段文字。

$instance = wp_parse_args((array)$instance,array('title'=>'随机文章','showPosts'=>10,'cat'=>0,'class'=>'randomPosts'));
$title = htmlspecialchars($instance['title']);
$showPosts = htmlspecialchars($instance['showPosts']);
$cat = htmlspecialchars($instance['cat']);
$class = htmlspecialchars($instance['class']);

如上,可以增加标题、显示数量、显示那些分类下的、显示的时候用什么样式名这些文本框,当然你可以增加自己的内容。总之你要理解这个函数是后台小工具展开时看到的内容即可。

update($new_instance,$old_instance)

更新form()设置的参数值,小工具展开后右下角有个保存按钮,就是用这个函数进行保存啦。照葫芦画瓢修改该函数吧。

widget($args,$instance)

前台显示,前台怎么显示form()中设置的这些值呢?就是用这个函数来控制啦。照葫芦画瓢,修改那几个echo 的内容就可以了,甚至你可以让一个小工具显示一句话,在这里自己编写就可以了。

3、注册小工具,最终完成小工具制作

虽然上面的过程让你已经了解小工具的前后台,但你会发现即使这样做了却得不到任何效果,因为你的小工具还没有注册呢。

function RecentCommentsInit(){
register_widget('RecentCommentsWidget');
}
add_action('widgets_init','RecentCommentsInit');

修改上面这几个参数为你自己的类和函数名,赶快到后台看看吧,是不是已经显示了该小工具,并可以拖拽了?自己慢慢消化,可以制作自己完美的边栏挂件啦。

相关文章
|
5月前
|
前端开发 JavaScript C++
WordPress 非常漂亮滴动态时间小工具
这是一段关于WordPress动态时间小工具的分享。作者提供了小工具的JavaScript代码和使用教程。用户需要将JS文件放入网站根目录,并在WP后台的自定义HTML小工具中添加指定代码以显示动态时间效果。教程包括了CSS和HTML部分,代码实现了一个时钟动画。
25 0
|
6月前
【ripro美化】全站美化包WordPress RiPro主题二开美化版sucaihu-childV1.9(功能集成到后台)
1、【宝塔】删除ripro文件,上传最新ripro版本,然后上传压缩包内的ripro里面的对应文件到ripro主题对应内覆盖(找到对应路径单个文件去覆盖)。 2、然后上传ripro-chlid子主题美化包到/wp-content/themes路径下 3、注意顺序 原版–>美化包–>后台启用子主题(已启用请忽略)。
164 0
【ripro美化】全站美化包WordPress RiPro主题二开美化版sucaihu-childV1.9(功能集成到后台)
|
安全 数据安全/隐私保护
WordPress建站教程:默认WordPress登录入口和修改后台入口
​今天关注六翼开源的一个网友遇到一个问题没办法突破,他在安装WordPress之后不知道WordPress后台登录入口,无法进入后台管理网站和更新文章。下面北京六翼的开发工程师针对“默认WordPress登录入口和修改后台入口”的问题给大家做一下讲解。
WordPress建站教程:默认WordPress登录入口和修改后台入口
CDN
|
缓存 网络协议 前端开发
全面加速Wordpress站点:从文章页到管理后台
使用阿里云服务和几个插件,提高wordpress站点每个环节的访问速度。
CDN
958 0
全面加速Wordpress站点:从文章页到管理后台
|
数据库
wordpress修改后台站点地址后无法打开的解决办法
wordpress修改后台站点地址后无法打开的解决办法
181 0
wordpress修改后台站点地址后无法打开的解决办法
|
域名解析 前端开发 安全
阿里云服务器搭建WordPress网站完整步骤图文教程(附二级域名解析)
阿里云服务器搭建WordPress网站完整步骤图文教程(附二级域名解析)
|
存储 数据采集 弹性计算
案例解析|浙江省厅交通数据中台,为“车路协同”提供后台支撑
阿里云与浙江省交通运输厅达成战略合作,共同推进智能高速公路建设。依托综合交通智慧云平台,建设智慧高速中心系统,充分利用交通中台为未来自由流收费、车道级精准管控、基于高精位置的信息服务、事故多发区安全预警服务和交通安全精准管控等应用场景提供后台支撑。
案例解析|浙江省厅交通数据中台,为“车路协同”提供后台支撑
|
Java Spring
第5章—构建Spring Web应用程序—关于spring中的validate注解后台校验的解析
关于spring中的validate注解后台校验的解析 在后台开发过程中,对参数的校验成为开发环境不可缺少的一个环节。比如参数不能为null,email那么必须符合email的格式,如果手动进行if判断或者写正则表达式判断无意开发效率太慢,在时间、成本、质量的博弈中必然会落后。
1215 0
|
Java Spring
关于spring中的validate注解后台校验的解析
在后台开发过程中,对参数的校验成为开发环境不可缺少的一个环节。比如参数不能为null,email那么必须符合email的格式,如果手动进行if判断或者写正则表达式判断无意开发效率太慢,在时间、成本、质量的博弈中必然会落后。
1223 0
|
Web App开发 应用服务中间件 PHP
Wordpress中wp-admim管理后台(404)无法进入,无限循环跳出解决方法
两天没登博客,今天突然无法进入管理员界面了,通常都是在网站后缀加上/wp-admin进去,今天竟然出现了进不去的情况,具体网页上面显示: oldpan.me/login__trashed?redirect_to=https%3A%2F%2Foldpan.me%2Fwp-admin%2Findex.php 也就是无法找到该页面,通常来说就是404界面。
4563 0

推荐镜像

更多