如何在wordpress网站上创建静态侧边栏

Question

我是初级网页设计师，目前在基于 wordpress 的网站上工作（为当地房屋清算公司修改主题）。

网站所有者希望侧边栏固定，这样即使用户向下滚动页面，右侧边栏（我们的服务菜单）也将始终位于首屏。

我尝试了很多 CSS 解决方案，但没有任何效果。请 have a look 在有问题的页面上。

如果你帮我修复这个侧边栏，我将不胜感激，因为我很绝望。

Answer 1

for create custom sidebar in wordpress, use "register_sidebar" hook in function.php

register_sidebar( array(
        'name' => __( 'Main Sidebar', 'wpb' ),
        'id' => 'sidebar-1',
        'description' => __( 'The main sidebar appears on the right on each page except the front page template', 'wpb' ),
        'before_widget' => '<aside id="%1$s" class="widget %2$s">',
        'after_widget' => '</aside>',
        'before_title' => '<h3 class="widget-title">',
        'after_title' => '</h3>',
    ) );

Now you can use this sidebar in any files of theme. you need to use this "dynamic_sidebar" for calling sidebar.

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

Answer 2

好的朋友，你需要在你的主题

functions.php

在你的 functions.php 中某处找到 wp_enqueue_script('somename') 可能会有不止一个， 'somename' 只是一个例子，它可能看起来像这个wp_enqueue_script( 'some-boring-name', get_template_directory_uri() . '/js/some-boring-name.js', array( 'jquery' ), '1.0', true' );
在所有这些之后添加你自己的脚本，就像这样wp_enqueue_script('do-fixed-sidebar' get_template_directory_uri() . '/js/do-fixed-sidebar', array('jquery'), '1.0', true );

它应该是这样的：

wp_enqueue_script( 'some-boring-name', get_template_directory_uri() . 'some-boring-name.js', array( 'jquery' ), '1.0' );
wp_enqueue_script( 'some-boring-name2', get_template_directory_uri() . 'some-boring-name2.js', array( 'jquery' ), '1.0' );
wp_enqueue_script( 'do-fixed-sidebar', get_template_directory_uri() . '/js/do-fixed-sidebar.js', array( 'jquery' ), '1.0' );<--this will be your included do-fixed-sidebar.js file-->

您在 wp_enqueue_script() 中看到 /js/do-fixed-sidebar.js 部分了吗？

这意味着您需要 创建一个名为 js[=80 的空文件夹 =] 在你的主题中（如果你的主题没有）

为了安全起见，现在您的主题文件夹结构应该看起来像这样（这显然只是一个例子）：

index.php

style.css

single.php

author.php

所有其他-files.php

js <--this your empty folder -->

打开文本编辑器并创建一个新文件并将其命名为do-fixed-sidebar.js

将以下代码添加到您的 do-fixed-sidebar.js 并保存。

$(document).ready(function(){ var stickySidebar = $('.wpb_content_element').offset().top; $(window).scroll(function() { if ($(window).scrollTop() > stickySidebar) { $('.wpb_content_element').addClass('fixed'); } else { $('.wpb_content_element').removeClass('fixed'); } }); });

将此文件上传到主题中的 js 文件夹。

我们还没有完成...在您的主题中找到 style.css 并添加此代码：

.fixed{ position:fixed; top:0; right:0;<--this will probably need some adjusting maybe 45px...--> overflow-y:scroll; height:100%; }

哇，大功告成！！ :)

如何在wordpress网站上创建静态侧边栏

How to create static sidebar on wordpress website

wordpress

sidebar

fixed