WordPress侧边栏(sidebar)的使用

相关内容分为两个部分:

  • 小工具(widgets)的制作
  • 侧边栏的使用

这里主要是说明侧边栏的使用,小工具(widgets)的制作见《WordPress小工具(widget)制作》

注册小工具区域

register_sidebar(
  array(
    ‘name‘ => __( ‘Footer‘, ‘twentynineteen‘ ),
    ‘id‘ => ‘sidebar-1‘,
    ‘description‘ => __( ‘Add widgets here to appear in your footer.‘, ‘twentynineteen‘ ),
    ‘before_widget‘ => ‘<section id="%1$s" class="widget %2$s">‘,
    ‘after_widget‘ => ‘</section>‘,
    ‘before_title‘ => ‘<h2 class="widget-title">‘,
    ‘after_title‘ => ‘</h2>‘,
  )
);

备注:案例来自二〇一九(2019)主题

部分样式通过register_sidebar()设置,剩下样式通过模板文件设置。

判断

is_active_sidebar(‘sidebar-1‘ )

显示:

相关函数

dynamic_sidebar( ‘sidebar-1‘ )

<?php
if ( is_active_sidebar( ‘sidebar-1‘ ) ) {
?>
    <div class="widget-column footer-widget-1">
    <?php dynamic_sidebar( ‘sidebar-1‘ ); ?>
    </div>
<?php
    }
?>

备注:案例来自二〇一九(2019)主题

说明:“sidebar-1”是在主题文件中通过注册侧边栏:register_sidebar()定义的小工具区域(widgets area),通过is_active_sidebar()函数判断是否激活(后台激活)。

3、构建模板文件sidebar.php(或sidebar-xxx.php)及使用

除了把相关代码直接放到相关模板文件中,也可以构建模板文件sidebar.php,在需要使用的模板文件中调用sidebar.php。

<?php get_sidebar(); ?>或
<?php get_sidebar(‘xxx’); ?>

激活(配置小工具和侧边栏的关系)

1)后台设置

2)通过主题程序配置

以上在构建侧边栏时,要为生成搜索框新建一个 searchform.php 文件,其内容如下:
代码从第三行开始,分别通过包含 searchform.php 显示搜索表单;
调用 get_calendar() 函数显示日历;
调用 wp_list_pages() 函数显示页面导航;
调用 wp_list_cats() 函数显示分类导航;
调用 wp_get_archives() 函数显示存档导航;
调用 get_links() 函数显示链接导航。

get_search_form()
wp_list_categories( ‘title_li‘ )
wp_get_archives( ‘type=monthly‘ )

widget_title()
wp_get_archives

模板文件
小工具制作(另外)

相关函数

注册侧边栏:register_sidebar()

https://developer.wordpress.org/reference/functions/register_sidebar/

原文地址:https://www.cnblogs.com/zhaoweidong/p/10289182.html

时间: 2024-10-19 09:38:13

WordPress侧边栏(sidebar)的使用的相关文章

Wordpress在侧边栏sidebar实现微博挂件方法[图]

我们使用Wordpress搭建博客的时候,有些人可能希望在博客中挂上自己的新浪微博,实现这个方法很简单. 打开http://app.weibo.com/tool/weiboshow,复制微博秀代码,添加小工具“文本”,在内容添加微博秀代码即可. 我的博客地址:http://taoweiji.duapp.com 可以查看效果. 添加代码: 效果图如下:

Wordpress制作sidebar.php

调用 在主页以下方法可以调用模板中sidebar.php的内容 <?php get_sidebar(); ?> 判断是否自定义sidebar侧边栏: <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('First_sidebar') ) : ?> ..... <?php endif; ?> 分类目录,使用wp_list_categories>>获得分类所有信息,或使用get_

wordpress主题开发:给标签云增加七彩背景色

本篇文章不是标签而是标签的背景色是七彩的,有点绕口令,还是看图说话,本篇要实现的七彩标签云背景色如图所示:要实现七彩标签云背景色代码也很简单,代码如下: <aside class="tags"><?php wp_tag_cloud('smallest=12&largest=12&number=45&order=DESC'); ?></aside> 把这段代码放在侧边栏sidebar.php即可(smallest,largest

WordPress 标签Tags页面制作方法

Wordpress自带着wp_tag_cloud()函数,但只在页面侧边显示往往就不够了.需要一个单页来放所有的Tags p.s.在搜索引擎优化SEO上,百度似乎对关键词TAGS更为偏爱 其实就是撰写一个新页面,它要应用一个名为tags.php的自定义模板. tags.php的内容如下 复制代码 代码如下: <?php /* Template Name: Tags */ ?> <?php get_header(); ?> <?php get_sidebar(); ?>

wordpress教程之函数讲解

wordpress函数收集 is_home() : 是否为主页is_single() : 是否为内容页(Post),   是否是单篇文章  is_page() : 是否为内容页(Page),   是否是 页面文章 is_category() : 是否为Category/Archive页,  是否是 标签页  is_tag() : 是否为Tag存档页is_date() : 是否为指定日期存档页is_year() : 是否为指定年份存档页is_month() : 是否为指定月份存档页is_day()

贵阳SEO 教你建站中让wordpress最新评论列表更美观的代码及添加方法

贵阳SEO请添加链接描述 教你建站中让wordpress最新评论列表更美观的代码及添加方法 在我们的网站建设过程中,使用wordpress默认的最新评论,大家是不是觉得太单调了,也不是很美观,并且也 不能按照我们的需求列表显示最新评论的内容,贵阳SEO今天分享给大家一段修改方便的带有头像的最新评论列 表代码,添加方法如下:1.打开需要显示最新评论列表的文件(一般在网站的侧边栏sidebar.php中):2.在合适的位置添加以下代码:<?php$show_comments = 8; //评论数量$

第2天:HTML常用标签

今天学完主要对所学知识点进行了整理. 一.超链接ahref:www.baidu.com(跳转页面):id名(锚点跳到相应div位置):01.rar(压缩包) target:_blank(新窗口打开):_self(当前窗口打开)二.文件路径绝对路径:(1)线上:线上绝对路径(2)线下:完整路径 相对路径:src=../img/bg.jpg(../是上一级目录) 三.HTML常用标签section :版块 用于划分页面上的不同区域,或者划分文章里不同的节 header :页面头部或者版块(secti

前端学习

TOP:前端学习==20%知识+80%能力 1.好教材 JS CSS javascript高级程序设计 精通CSS                                                    DOM编程艺术 CSS权威指南         2.练习 (1)教材代码*3 (2)FreeCodeCamp (3)计蒜客 (4)在线编程online--{MDN,W3Cschool} 3.工具栈 (1)Sublime Text插件--{1.Emmet--chart;  2.侧边栏

css013 构建基于浮动的布局

css013 构建基于浮动的布局 基于浮动的布局时利用float属性是网页上的元素并排,并创建列 float有三个值:left .right .none 1.假设要把一张图片浮动到网页的左侧 .float-left{ float:eft; } 假如要把一个装满内容的<div>浮动到一边,形成一个侧边栏 .sidebar{ float:left; width:150px; } 2.设计一个简单的两列布局需要的几个步骤 a. 把每列都包在一个带有ID或class属性的<div>标签里面