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

简介: 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');

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

目录
相关文章
|
安全 数据安全/隐私保护
WordPress建站教程:默认WordPress登录入口和修改后台入口
​今天关注六翼开源的一个网友遇到一个问题没办法突破,他在安装WordPress之后不知道WordPress后台登录入口,无法进入后台管理网站和更新文章。下面北京六翼的开发工程师针对“默认WordPress登录入口和修改后台入口”的问题给大家做一下讲解。
WordPress建站教程:默认WordPress登录入口和修改后台入口
|
数据库
wordpress修改后台站点地址后无法打开的解决办法
wordpress修改后台站点地址后无法打开的解决办法
139 0
wordpress修改后台站点地址后无法打开的解决办法
CDN
|
缓存 网络协议 前端开发
全面加速Wordpress站点:从文章页到管理后台
使用阿里云服务和几个插件,提高wordpress站点每个环节的访问速度。
CDN
780 0
全面加速Wordpress站点:从文章页到管理后台
|
域名解析 前端开发 安全
阿里云服务器搭建WordPress网站完整步骤图文教程(附二级域名解析)
阿里云服务器搭建WordPress网站完整步骤图文教程(附二级域名解析)
|
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界面。
4389 0
|
PHP 容器 开发者
wordpress 如何移除管理后台仪表盘小工具
仪表盘的显示如下,如何禁用其中的仪表盘呢?   1.找到php文件: /wp-admin/includes/dashboard.php 2.在文件最后添加以下代码: // 创建一个动作钩子函数 function meetrice_remove_dashboard_widgets...
1218 0
|
1月前
|
安全
SiteGround如何设置WordPress网站自动更新
iteGround Autoupdate功能会自动帮我们更新在他们这里托管的所有WordPress网站,这样做是为了保证网站安全,并且让它们一直保持最新状态。他们会根据我们选择的设置自动更新不同版本的WordPress,包括主要版本和次要版本。在每次自动更新之前,他们都会为我们的网站做一个完整的备份,这样如果有什么问题,我们可以轻松地恢复到之前的状态。在本文中,我们将介绍如何在SiteGround中设置WordPress网站自动更新。
36 0
SiteGround如何设置WordPress网站自动更新
|
3月前
WordPress网站更换域名后如何重新激活elementor
本文讲解WordPress网站更换域名后如何重新激活elementor。首先你需要在WordPress后台elementor下点击Disconnect断开原elementor连接,然后登录elementor官网,在后台解除原网站授权;接着在WordPress后台重新连接并激活elementor。
64 2
WordPress网站更换域名后如何重新激活elementor
|
3月前
给WordPress网站增加一个带时间的led广告牌
给WordPress网站增加一个带时间的led广告牌
31 3
|
1月前
|
关系型数据库 MySQL Apache
怎么在树莓派上搭建WordPress博客网站,并发布到外网可访问?
怎么在树莓派上搭建WordPress博客网站,并发布到外网可访问?

推荐镜像

更多