Как создать статическую боковую панель на сайте WordPress

Question

Я младший веб-дизайнер и в настоящее время работаю над сайтом на основе WordPress (модифицирую тему для местной компании по уборке домов).

Владельцы веб-сайта хотят, чтобы боковая панель была исправлена, поэтому даже когда пользователь прокручивает страницу вниз, правая боковая панель (меню "Наши услуги") всегда будет оставаться над сгибом.

Я пробовал так много CSS-решений, но ничего не работает. Пожалуйста , посмотрите на страницу, о которой идет речь.

Я буду очень признателен, если вы поможете мне исправить эту боковую панель, потому что я в отчаянии.

Answer 1

1. Хорошо, друг, вам нужно открыть файл functions.php в вашей теме

2. Где-то в вашем 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. Ты видишь /js/do-fixed-sidebar.js участие в wp_enqueue_script()?

Это означает, что вам НУЖНО создать пустую папку с именем js в вашей теме (если в вашей теме ее нет)

6. Чтобы быть в безопасности, теперь ваша тематическая структура FOLDER должна выглядеть следующим образом (это просто пример):

   • index.php
   • style.css
   • single.php
   • author.php
   • все другие-files.php
   • JS <--this your empty folder -->

7. Откройте текстовый редактор, создайте новый файл и назовите его do-fixed-sidebar.js

8. Добавьте следующий код к вашему 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');
    }  
    });
   
    });
   

9. Загрузите этот файл в папку js вашей темы.

10. Мы еще не закончили... Найти style.css в вашей теме и добавьте этот код:

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

    11. Вау, вы сделали!!:)

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