如何为 wordpress 主题制作右侧边栏

Posted

技术标签:

【中文标题】如何为 wordpress 主题制作右侧边栏【英文标题】:How to make a right sidebar for a wordpress theme 【发布时间】:2016-01-13 22:42:46 【问题描述】:

并与高级搜索集成,如下面的概念:

sidebar.php

    <?php
/**
 * The sidebar containing the main widget area.
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package custom
 */

if ( ! is_active_sidebar( 'sidebar-1' ) ) 
    return;

?>

<div id="secondary" class="widget-area" role="complementary">
    <?php dynamic_sidebar( 'sidebar-1' ); ?>
</div><!-- #secondary -->
<?php if ( is_active_sidebar( 'sidebar-2' ) ) : ?>

     <div id="tertiary" class="widget-area" role="supplementary">
      <?php dynamic_sidebar( 'sidebar-2' ); ?>
     </div><!-- #secondary .widget-area -->

<?php endif; ?>

侧边栏的style.css

#secondary  /* left Sidebar */
width: 18rem;
margin-left: -67rem;
float: left;
position: relative;


#tertiary  /* right Sidebar */
width: 18rem;
margin-right: -23rem;
float: right;
position: relative;

我怎样才能以简单的方式实现它?

【问题讨论】:

【参考方案1】:

如果您已经在您想要的模板文件中设置了sidebar.php;可能是index.php,single.php,page.php 或其他任何东西

我看到了两种方法

1 - 安装一些精美的搜索插件,并使用 仪表板 - 外观 - 小部件区域

将其添加到您的侧边栏

2 - 在您的 Widget 区域,您可以添加 Html 内容,您可以在其中添加搜索表单或将其硬编码到您的 sidebar.php 或创建 search-form.php(其中您将获得您的表单)并将其包含在您的 sibedar.php 中或使用 get_template_part() 直接添加到模板文件中

这里有一些有用的链接:

https://codex.wordpress.org/Function_Reference/get_search_form https://codex.wordpress.org/Function_Reference/get_template_part

【讨论】:

你能举一个关于一些花哨的搜索插件的例子吗? 我之前没有使用任何搜索插件。试试这个列表中的一些东西 - wordpress.org/plugins/search.php?q=search【参考方案2】:

查看 WordPress Codex 以获取有关自定义侧边栏的信息。这个页面上有很多关于侧边栏的信息:https://codex.wordpress.org/Customizing_Your_Sidebar

如果你问如何让菜单从屏幕一侧展开,有许多不同的 CSS/javascript 实现,但也许像这个 jQuery Slick 插件这样的东西可能会有所帮助:http://www.designchemical.com/lab/jquery-slick-plugin/examples/

如果您询问如何创建自定义搜索功能,那么这将非常依赖于您正在使用的插件以及您正在搜索的内容。本文确实很好地概述了如何开始使用 WordPress 中的自定义搜索功能和自定义搜索表单:https://premium.wpmudev.org/blog/build-your-own-custom-wordpress-search/

【讨论】:

我已经找了很多次了,都没有回答我想要的 我什至不确定您是在询问从屏幕边缘扩展菜单还是在询问 PHP 方面的问题,但我会添加一些内容到答案。问题不够具体。

以上是关于如何为 wordpress 主题制作右侧边栏的主要内容,如果未能解决你的问题,请参考以下文章

如何为wordpress主题添加自定义页眉和页脚

html 最小的主题collection.liquid与右侧边栏 - 每行3个产品。

Wordpress 主题在链接上阻止 target="_blank"。如何为某些外部链接重新激活它?

如何为WordPress主题添加一个返回顶部按钮

具有动态右侧内容的 100% 高度左侧边栏 - Bootstrap + Wordpress

下划线 Wordpress 主题 - 添加第二个侧边栏