信科网络 · 11 年只做 WordPress | 建站 / 主题 / 插件 / 商城 / 迁移 / 托管 | 累计服务 3000+ 企业 | 源码全交付
服务热线:13280692153 邮箱:web@wordpressx.com
工作日 08:30-18:0013280692153 免费诊断
首页/WordPress 教程/如何添加WordPress小工具?主题集成Widgets区域
BLOG

如何添加WordPress小工具?主题集成Widgets区域

分类 发布 2022-11-03

1 第一步、小工具注册

  • 2 第二步、小工具调用
  • 3 第三步、设置小工具
  • 4 如何在不同区域,添加多个WordPress小工具?
  • 5 WordPress主题集成小工具widget技巧

 

自定义菜单功能和侧边栏小工具,是WordPress主题中比较有特色的功能.

  • 制作一个主题,如果不包含这两个功能,就像鸡肋一样……

我们在之前的建站教程里,分享了如何给WordPress主题添加自定义菜单。

本文介绍一下制作主题的时候,如何添加自定义小工具功能。

和给主题一样添加自定义菜单一样,自定义添加小工具Widgets只需3个步骤。

第一步、小工具注册

要使用小工具,先要进行注册,打开WordPress主题下面的 functions.php 文件,

在functions.php文件里面,添加如下代码:

<?php

//侧边栏小工具
if ( function_exists('register_sidebar') ) {
    register_sidebar( array(
        'name' => __( 'Top Sidebar' ),
        'id' => 'top-sidebar',
        'description' => __( 'The top sidebar' ),
        'before_widget' => '<li>',
        'after_widget' => '</li>',
        'before_title' => '<h2>',
        'after_title' => '</h2>',
    ) );
}

?>

 

修改functions.php里的li、h2标签,使之对应sidebar.php里的标签:

‘before_widget’ 和 ‘after_widget’ 的li和模块h2标题,按实际情况修改代码。

(也可能不用修改)

        'before_widget' => '<li>',
        'after_widget' => '</li>',

        'before_title' => '<h2>',
        'after_title' => '</h2>',

以上代码注册了一个名为“top-sidebar”的小工具区域:

  • 显示的名称是“Top Sidebar”。
  • 标题加上 h2 标签。
  • 内容条目加上 li 标签。

登录WordPress后台仪表盘,依次进入 外观 → 小工具。

如果能看到下图中右边的Top Sidebar  小工具区域,说明注册成功了 ▼

wordpress-add-widgets_1

第二步、小工具调用

小工具注册之后就可以在主题模板文件中调用了,把下面的代码放到sidebar.php文件中就可以调用了。

1)在sidebar.php文件中,最大的li或div标签下方,插入 ▼

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(top-sidebar) ) : ?>

2)在sidebar.php文件中,最大的</li>或</div>上方,添加 ▼

<?php endif; ?>

第三步、设置小工具

1)小工具注册好了,显示位置也在主题文件中定义好了。

  • 就可以在WordPress后台对小工具组区域进行设置了 ▼

wordpress-add-widgets_2

2)保存之后,刷新前台页面。

  • 我们的网站侧边栏,就会变成下图这个样子 ▼

wordpress-add-widgets_3

能看到上图,说明我们的小工具已经制作完成,并如常运行了。

如何在不同区域,添加多个WordPress小工具?

重复第一步和第二步,就能让你的WordPress主题,支持不同位置中的widget小工具了。

假设你需要将一个小工具添加到主题的头部、侧边栏、和底部。

1)首先,你需要将以下代码复制到functions.php文件中 ▼

if (function_exists('register_sidebar')) {

register_sidebar(array(
'name' => 'Header',
'id' => 'header',
'description' => 'This is the widgetized header.',
'before_widget' => '<div id="%1$s">',
'after_widget' => '</div>',
'before_title' => '<h4>',
'after_title' => '</h4>'
));
register_sidebar(array(
'name' => 'Sidebar',
'id' => 'sidebar',
'description' => 'This is the widgetized sidebar.',
'before_widget' => '<div id="%1$s">',
'after_widget' => '</div>',
'before_title' => '<h4>',
'after_title' => '</h4>'
));
register_sidebar(array(
'name' => 'Footer',
'id' => 'footer',
'description' => 'This is the widgetized footer.',
'before_widget' => '<div id="%1$s">',
'after_widget' => '</div>',
'before_title' => '<h4>',
'after_title' => '</h4>'
));

}

2)接下来,将以下代码分别添加到header.php、sidebar.php和footer.php文件中。

header.php ▼

<div id="widgetized-header">

<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('header')) : else : ?>

<div>
<p><strong>Widgetized Header</strong></p>
<p>This panel is active and ready for you to add some widgets via the WP Admin</p>
</div>

<?php endif; ?>

</div>

sidebar.php ▼

<div id="widgetized-sidebar">

<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('sidebar')) : else : ?>

<div>
<p><strong>Widgetized Sidebar</strong></p>
<p>This panel is active and ready for you to add some widgets via the WP Admin</p>
</div>

<?php endif; ?>

</div>

footer.php ▼

<div id="widgetized-footer">

<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('footer')) : else : ?>

<div>
<p><strong>Widgetized Footer</strong></p>
<p>This panel is active and ready for you to add some widgets via the WP Admin</p>
</div>

<?php endif; ?>

</div>

到此成功!

  • 当然,你也可以根据需要修改代码里的各种细节 ^_^
  • 上面的2个步骤,允许主题的其余部分集成小工具的功能。

接下来,继续分享WordPress使用小工具widget的技巧。

WordPress主题集成小工具widget技巧

高效管理自定义widget小工具:

1)向主题添加widget小工具后,你可以创建一个单独的文件,并将其命名为widgets.php。

  • 以便将所有在第1步添加的自定义widget小工具代码,保存到此文件夹。

2)将代码添加到functions.php文件中:

if ($wp_version >= 2.8) require_once(TEMPLATEPATH.’/widgets.php’);

3)将所有在第1步添加的自定义widgets小工具代码,保存到widgets.php文件里。

此方法可确保所有widgets小工具顺畅加载,并在所有支持widgets小工具的WordPress版本上运行。

这样,你就可以更高效率地管理的WordPress主题文件。

希望我们网站( https://www.wordpressx.com/ ) 分享的《如何添加WordPress小工具?主题集成Widgets区域》,对您有帮助。

INDUSTRIAL BELT

扎根中国制造产业带
懂工厂,才懂出海

从胶东半岛到珠三角,从长三角到中原腹地,每一片产业集群都有自己的出口节奏与买家画像。信科网络长期扎根产业一线,把工厂的产品语言翻译成海外采购商听得懂的搜索语言,让每一分投入都对着真实的询盘去。

hengshui

衡水外贸网站建设

衡水市位于河北省东南部,东与沧州市和山东省德州市毗邻,西与石家庄市接壤,南与邢台市相连,北与保定市交界;南北长125.5公里,东西宽98.13公里,全市辖8县2市1区,总面积5815.4平方公里。衡…

jiangjin

江津外贸建站

重庆市江津区,是一个历史文化悠久的城市,以地处长江要津而得名。江津位于重庆西南长江之滨,距渝中区公路里程50公里;铁路里程65公里;水路里程72公里。江津城区气候特征与重庆相近,但综合…

yuanzhou

原州外贸建站

原州区,隶属于宁夏回族自治区固原市,地处宁夏南部,六盘山东北麓,黄土高原中西部,东邻彭阳县,南接泾源县,西连西吉县,北靠海原县、同心县,东北、西南分别与甘肃环县、隆德县毗壤,是固…

xianxian

献县WordPress建站

献县历史悠久,夏商时期属冀州,春秋时属燕国,战国时属燕、赵、秦。早在春秋战国时期。境内就形成了具有一定影响力的城市——乐成。汉高祖六年(公元前201年)置河间郡,汉文帝二年…

cangxian

沧县WordPress建站

沧县位于河北省东南部,冀中平原东部,北冀京津,东邻渤海,地理坐标在北纬38°5′至38°3′,东经116°27′至117°9′之间。县政府驻沧州市新华区,全县总面积1527平方公里,其中耕地面积129万亩,总…

anxin

安新Shopify建站

安新县位于河北省中部,县境东与雄县、任丘相连;南与高阳接壤;西与清苑、徐水交界;北与容城毗邻。总面积738.6平方公里。县人民政府所在地安新镇是安新县政治、经济、文化和交通中心,北距…

yuzhong

渝中Shopify建站

渝中区,位于长江上游地区、重庆大都市区,属重庆主城九区之一。地处在长江、嘉陵江交汇地带,由于两江环抱,形似半岛,又名渝中半岛。渝中区作为重庆市政治、经济、文化以及商贸流通中心,别…

yongning

永宁外贸推广

永宁县地处宁夏平原中部,东临黄河,西倚贺兰山,是宁夏回族自治区首府银川市的郊县。全县国土面积1020平方公里,辖五镇一乡一个街道办事处,总人口20.4万人,有汉、回、满等13个民族,其中回…

pengshui

彭水外贸推广

彭水苗族土家族自治县位于重庆直辖市东南部,处武陵山区,居乌江下游。北接湖北省,南连贵州省。全县辖10镇29乡,共274个村、26个居委,1785个村民小组、184个居民小组。2001年底,全县有17.55…

wushan

巫山Google SEO

巫山位于重庆市东北部,三峡库区腹心,素有“渝东门户”之称,地跨长江巫峡两岸。东邻湖北省巴东县,西接奉节县,南与湖北省建始县毗连,北与巫溪县及神农架林区接壤。县城位于大宁河与长江交汇…

beibei

北碚Google SEO

北碚区位于重庆市区西北郊的缙云山下,嘉陵江畔,幅员面积753平方公里,人口63万,是重庆的风景旅游区和智力型清洁工业基地。本世纪20年代末,由爱国实业家卢作孚先生开拓,抗战时期为陪都重庆…

nanchuan

南川GEO优化

南川地处四川盆地东南边缘与云贵高原过渡地带,位于重庆市南部,东南与贵州省道真、正安、桐梓县接壤,东北与武隆县为邻,北接涪陵区,西连巴南区、綦江县、万盛区。总面积2602平方千米。总人…

xiushan

秀山GEO优化

秀山土家族苗族自治县,位于重庆市东南部,武陵山脉中段,四川盆地东南缘的外侧,为川东南重门户。与湖南省、湖北省、贵州省毗邻,326国道和319国道贯穿全县。距长沙604公里、武汉656里、贵阳5…

fucheng

阜城谷歌SEM

阜城县是河北省衡水市下辖的一个县。面积698平方千米,人口32万。邮政编码053700。阜城县人文荟萃.历史上出现过不少的学者名流,北齐的刘昼,北周的熊安生,民国初期的京剧著名表演艺术家荀慧生,…

zhongwei

中卫谷歌SEM

中卫地处黄河前套之首,位于宁夏回族自治区中西部、宁、甘、内蒙古三省区交界点上,辖中宁、海原两县和中卫城区,总面积16986.1平方公里,其中川区面积3681.1平方公里,占21.67%,山区面积1330…

shenzhou

深州Facebook广告

深州市旧称深州,上古为冀州大陆之域。春秋时为晋地。战国属赵。秦属钜鹿郡。汉为下博县。隋开皇十六年(公元五九六年),于安平置深州,以城西故深池得名。尔后迭经废置,州城屡迁。唐徙州治…

fuling

涪陵Facebook广告

重庆市涪陵区,邑枕长、乌两江,素为乌江流域物资集散地,有渝东南门户之称,是闻名遐迩的中国“榨菜之乡”。全区幅员面积2946平方公里,辖1个经济技术开发区、1个私营经济示范区和44个乡镇、街…

fengjie

奉节Yandex推广

奉节县位于重庆市东部,地处四川盆地东端,地理坐标为东经109°1′17″—109°45′58″,北纬30°29′19″—31°22′33″。县境东邻巫山县,南界湖北省恩施土家族苗族自治州,西连云阳县,北接巫溪县。境内有…

jinfeng

金凤Yandex推广

金凤区于2002年11月1日成立,是宁夏回族自治区首府银川市的市辖区之一,位于市区中部,东到唐徕渠,西到包兰铁路,南接永宁县,北临贺兰县,辖良田、丰登2个镇,上海西路、北京中路、长城中路…

jizhou

冀州TikTok推广

冀州市隶属河北省衡水市,地处华北平原腹地,北距首都300公里,西距省会石家庄110公里,辖区总面积918平方公里,东与枣强县(衡水)为邻,南与南宫市、新河县(邢台)接壤,西与宁晋县(邢台)…

为什么一定要选懂产业带的出海服务商?建材丝网的欧洲建筑商看资质与交期,工业橡塑的中东工程商问耐温与工况,毛皮服饰的俄罗斯分销商算的是季节与毛利。买家不同,决策逻辑就不同;信科网络把这些差异拆进网站结构、关键词地图和投放策略里,用他们习惯的方式出现在他们搜索的地方。