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

Question

我是初级网页设计师，目前正在研究基于WordPress的网站（修改当地房屋清关公司的主题）。

网站的所有者希望侧边栏被固定，所以即使用户向下滚动页面，右侧边栏（我们的服务菜单）也会始终保持在折叠状态。

我尝试了这么多的CSS解决方案，但没有任何工作。请在相关页面上输入have a look。

如果您能帮我修复此边栏，我将不胜感激，因为我绝望。

Answer 1

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

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');

3. 所有这些之后加上自己的脚本，像这样wp_enqueue_script('do-fixed-sidebar' get_template_directory_uri() . '/js/do-fixed-sidebar', array('jquery'), '1.0', true);

4. 它应该是这样的：

   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--> 
   

5. 你看wp_enqueue_script()/js/do-fixed-sidebar.js一部分？

这意味着你NEED到创建一个名为JS在你的主题（如果你的主题没有它）的空文件夹

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

• 的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%; 
} 

哇你做！ :)

Answer 2

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; ?>