使 WordPress 主题支持 Widget 工具

发布于 2017-11-18 23:55:40 字数 3435 浏览 2746 评论 0

Web Widget 中文译名被称作是微件,是一小块可以在任意一个基于 HTML 的 Web 页面上执行的代码,它的表现形式可能是视频、地图、新闻、小游戏等等。它的根本思想来源于代码复用,通常情况下,Widget 的代码形式包含了 DHTML、JavaScript以及 Adobe Flash。

使 WordPress 主题支持 Widget 工具

WordPress 中的 Widget 可谓是很有趣的小工具,主题开发者可以预先开发很多种小工具,而真正的时候可以由站长自己选择,这样极大的提高了主题的使用灵活性。

单侧边栏

functions.php

if( function_exists('register_sidebar') ) {
    register_sidebar(array(
        'before_widget' => '<li>', // widget 的开始标签
        'after_widget' => '</li>', // widget 的结束标签
        'before_title' => '<h3>', // 标题的开始标签
        'after_title' => '</h3>' // 标题的结束标签
    ));
}

sidebar.php

<div id="sidebar">
    <ul>
<?php
// 如果没有使用 Widget 才显示以下内容, 否则会显示 Widget 定义的内容
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) :
?>
    <!-- widget 1 -->
    <li>
        <h3>标题 1</h3>
        <ul>
            <li>条目 1.1</li>
            <li>条目 1.2</li>
            <li>条目 1.3</li>
        </ul>
    </li>
    <!-- widget 2 -->
    <li>
        <h3>标题 2</h3>
        <ul>
            <li>条目 2.1</li>
            <li>条目 2.2</li>
            <li>条目 2.3</li>
        </ul>
    </li>
<?php endif; ?>
    </ul>
</div>

双侧边栏

functions.php

if( function_exists('register_sidebar') ) {
    register_sidebar(array(
        'name' => 'Sidebar_1', // 侧边栏 1 的名称
        'before_widget' => '<li>', // widget 的开始标签
        'after_widget' => '</li>', // widget 的结束标签
        'before_title' => '<h3>', // 标题的开始标签
        'after_title' => '</h3>' // 标题的结束标签

    ));

    register_sidebar(array(
        'name' => 'Sidebar_2', // 侧边栏 2 的名称
        'before_widget' => '<li>', // widget 的开始标签
        'after_widget' => '</li>', // widget 的结束标签
        'before_title' => '<h3>', // 标题的开始标签
        'after_title' => '</h3>' // 标题的结束标签

    ));
}

sidebar.php

<div id="sidebar_1">
    <ul>
<?php // 如果没有在侧边栏 1 中使用 Widget 才显示以下内容, 否则会显示 Widget 定义的内容
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar_1') ) :
?>
    <!-- widget 1 -->
    <li>
        <h3>标题 1</h3>
        <ul>
            <li>条目 1.1</li>
            <li>条目 1.2</li>
            <li>条目 1.3</li>
        </ul>
    </li>
<?php endif; ?>
    </ul>
</div>

<div id="sidebar_2">
    <ul>
<?php // 如果没有在侧边栏 2 中使用 Widget 才显示以下内容, 否则会显示 Widget 定义的内容
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar_2') ) :
?>
    <!-- widget 2 -->
    <li>
        <h3>标题 2</h3>
        <ul>
            <li>条目 2.1</li>
            <li>条目 2.2</li>
            <li>条目 2.3</li>
        </ul>
    </li>
<?php endif; ?>
    </ul>
</div>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84935 人气
更多

推荐作者

淹不死的鱼

文章 0 评论 0

zhangMack

文章 0 评论 0

爱的故事

文章 0 评论 0

linces

文章 0 评论 0

早乙女

文章 0 评论 0

鸵鸟症

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。