如何在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; ?>