FavoriteLoading
0

WordPress 小工具( Widget ) 增加自定义模组区块( OceanWP)

WordPress 小工具( Widget ) 增加自定义模组区块( OceanWP) 教学目的:

1. WordPress 外观主题编辑器中新增小工具区域, PHP 语法操作方式

欢迎回到— WordPress 网页设计超详细攻略– WordPress 小工具( Widget ) 增加自定义模组区块( OceanWP),WordPress 后台在外观选单中有一个WordPress 小工具区块,主要功能是制作网站侧边栏( sidebar )以及网站页尾底部( footer )的内容,当网站改版或者想要加入更多相关资讯时,主题所支援的WordPres 小工具栏位却太少,让整体网站发展性受到限制,此时该怎么办呢?

在经过范例网站测试后,为各位提供以PHP 新增WordPress 小工具区域的语法,并且在任何支援WordPress 小工具所定义的范围中都可以正常显示WordPress 小工具内容,当然在本篇教学中会提供例网站中所使用的主题( OceanWP ),让各位站长可以去比对自家网站的WordPress 小工具模组是否适用,接下来跟着的脚步,让我们开始学习吧!

(小提醒:本篇教学是以?OceanWP 作为范例网站主题,在PHP 语法上会与其他网站主题有所不同!)

• 新增PHP 语法增加小工具可用区域

第一步:在WordPress网站后台进入到外观→小工具的选项,可以看到图二中标示的位置就是范例网站主题OceanWP所支援的两个小工具区块,分别是Default Sidebar及Left Sidebar,也就是说在笔者所架设的范例网站中,WordPress小工具侧边栏用的区块只有两个。

WordPress 小工具
WordPress 小工具

第二步:接者示范如何新增WordPress小工具区域,在外观中点选子项目主题编辑器

WordPress 小工具

第三步:选中当前使用的主题,此步骤先不要选取子主题,在右侧档案清单中选择布景主题函式库 funtion.php

WordPress 小工具

第四步:在funtion.php左上角的search中输入footer,找到OceanWP主题中WordPress小工具区域PHP写法,如下所示:

/** 
* Registers sidebars 
* 
* @since 1.0.0 
*/
public static function register_sidebars() {

// Footer 1
register_sidebar( array(
'name' => esc_html__( ' Footer 1 ', ' oceanwp ' ),
'id' => ' footer-one ',
'description' => esc_html__( ' Widgets in this area are used in the first footer region. ', ' oceanwp ' ),
'before_widget' => '<div id="%1$s" class="footer-widget %2$s clr">',
'after_widget' => '</div>',
'before_title' => '<h4 class="widget-title">',
'after_title' => '</h4>',
) );

}

其中绿色的位置是必须或可以变动的文字,footer 1是定义为此小工具区域的名称,因此要更改,id属性在HTML中具有唯一识别的特性,如果不更改将无法识别此元素,所以也必须要做更动,Widgets in this area are used in the first footer region.则是对此小工具的说明,可以不用做变更,不会影响到功能。// Footer 1 是这一段语法的注解,简单而言是给网站开发者辨识程式码所代表的功能,因此将其改成与小工具区域名称同样即可。

红色的文字是网站使用的主题名称,如果你的网站主题WordPress 小工具PHP 写法与OceanWP 相同,那么红色文字应该是你当前使用的主题名称。

WordPress 小工具

第五步:将  // Footer 1 以下的程式码都复制起来,右上角主题选项切换到子主题,一样点选布景主题函式库funtion.php

WordPress 小工具

第六步:会在子主题的funtion.php最下方空白处加入以下语法,笔者的WordPress小工具footer区域总共有四个,因此以footer 5来示范:

//新增footer 5小工具区域 function side_widgets_init() { register_sidebar(array( 'name' => esc_html__( ' Footer 5 ', 'oceanwp' ), 'id' => ' footer-five ', 'description' = > esc_html__( 'Widgets in this area are used in the fifth footer region.', 'oceanwp' ), 'before_widget' => '<div id="%1$s" class="footer-widget %2$s clr ">', 'after_widget' => '</div>', 'before_title' => '<h4 class="widgettitle">', 'after_title' => '</h4>', ));


add_action( 'widgets_init', 'side_widgets_init' );

加入位置大致上如下图所示。

WordPress 小工具

第七步:回到小工具选项中查看,Footer 5区域已成功建立。

WordPress 小工具

第八步:如果说是想要在WordPress小工具新增侧边栏区域,则可以加入以下语法:

/// 新增right sidebar 栏位 register_sidebar( array( 'name' => esc_html__( ' Right Sidebar ', 'oceanwp' ), 'id' => ' sidebar-3 ', 'description' => esc_html__( 'Widgets in this area are used in the right sidebar region.', 'oceanwp' ), 'before_widget' => '<div id="%1$s" class="sidebar-box %2$s clr">', 'after_widget' => '</div>', 'before_title' => '<h4 class="widget-title">', 'after_title' => '</h4>', )); } add_action( 'widgets_init', 'side_widgets_init' );

与Footer 5 一样的方式修改及新增。

WordPress 小工具

第九步:会同样回到小工具项目中,可以看到Right Sidebar区域以建立。

WordPress 小工具


第十步:在Right Sidebar中加入想要显示的网站元素,测试是否功能正常,可以看到图二中文章的右侧边栏正确显示网页元素,表示新增成功。

WordPress 小工具
WordPress 小工具

结语:

不同网站所使用的WordPress 主题,新增小工具的方式也有所不同,在本次教学示范的以PHP 语法新增WordPress 小工具区域只是其中的一种方法,如果说以笔者分享的操作模式无法在你的网站新增WordPress 小工具区块,建议可以到当初购买主题的网站寻找论坛资源,如果购买的主题服务很完善,也有很多人在讨论,相信很快就会找到增加WordPress 小工具位置的方法。

尼尼博客,关注网上兼职赚钱和互联网创业。博客地址:www.imnini.com,扫描下面二维码添加微信:网上赚钱项目和经验分享,电子书、网赚视频,各种付费视频分享
网络兼职赚钱