Как добавить сайдбар в шаблон вордпресс Twenty Eleven

Этот вопрос задают многие, кто использует данный шаблон вордпресс. По умолчанию в Twenty Eleven для одиночных записей сайдбар не выводится, зачастую это не очень удобно. Пропадают виджеты, элементы навигации и все остальное, что вы туда помещали. Так как же добавить сайдбар в шаблоне Twenty Eleven?Процесс не займет у вас много времени, не потребует специальных знаний и стороннего програмного обеспечения. Вопсчем — как 2 пальца…

Заходим в админку, ищем там пункт в меню «внешний вид», а в нем подпункт «редактор». Справа у вас появляется список файлов темы. Нам нужен файл  single.php — открываем его в редакторе. В окошке у вас появился код, в который вносим правки. Проскроливаем вниз, ищем строчку

<?php get_footer(); ?>

вставляем пустую строку над ней и добавляем туда этот код:

<?php get_sidebar(); ?> 

Нажимаем, сохраняем файл, но сам сайт не смотрим — далее идет второй этап. Теперь в том же редакторе ищем справа в списке файлов style.css и открываем его для редактирования. Проскроливаем до самого конца, и в самом низу добавляем следующие строки:

.singular #primary {
margin: 0 -26.4% 0 0;
}

#nav-single {
display: none;
}

.singular .entry-header .entry-meta {
position: relative;
}

.singular .hentry {
padding: 0;
}

.singular .entry-header, .singular .entry-content, .singular footer.entry-meta, .singular #comments-title {
width: 100%;
}

.singular #content, .left-sidebar.singular #content {
margin: 0 34% 0 7.6%;
}

.singular article .entry-title {
padding-top: 0;
}

.singular .entry-meta .edit-link a {
right: 0;
top: 0;
left: auto;
}

 Опять же не забываем сохранить изменения. Теперь можно заходить на сайт, выбрать одиночную запись и убедиться, что сайдбар в теме вордпресс Twenty Eleven стоит на своем месте. Шаблон состоит из подключаемых модулей. В файле  single.php мы вставили код, который подгружает сайдбар, а в файл  style.css добавили стиль для отображения информации в сайдбаре. Таким образом мы можем добавлять и убирать сайдбар в шаблоне wordpress Twenty Eleven на статичных страницах, в одиночных записях. Причем в админке, когда вы создаете статичную страницу, с права в настройках можно выбрать шаблон страницы, там есть значение «с сайдбаром» — это автоматически добавит код сайдбара на вашу страницу.

Зачем все эти телодвижения нужны?  На некоторых сайтах в сайдбаре содержится важная информация или дублируется навигация по сайту, поэтому отображение сайдбара на всех страницах, архивных выборках, категориях и тегах — полезно для пользователя. Иногда сайдбар важен в этетическом плане — он является важным элементом дизайна. В любом случае, лишняя функциональность шаблону не помешает, а зная все его «болевые точки» можно научиться управлять и настраивать шаблоны вордпресс под свои нужды.

Comments

  • Спасибо, помогло +

    Сергей26.03.2012
  • Спасибо за совет. В WordPress могли бы и позаботиться о том, чтобы пользователь сам выбирал — быть сайдбару или нет. Ещё раз спасибо.

    E-R03.05.2012
  • Сделал всё как и сказано. Сайдбар появился, но уехал вниз и оказался между подвалом и коментами. Что делать?

    Beriya12.06.2012
    • или код затронут там где не надо… или место вставки не то. так сложно сказать… могу посоветовать отменить изменения — переустановить тему, сделать все заново.

      saitbesplat13.06.2012
      • Спасибо за ответ. Но я уже нашел хороший плагин, который это всё делает. )

        Beriya13.06.2012
        • отлично. ну тогда ссылочку тут можно запостить — чтоб другим во благо.

          saitbesplat13.06.2012
  • Прошу прощения за задержку, был чутка занят. Я пока новичек в этом деле, но кое-что уже умею. ) Краткое описание этого плагина можно найти по адресу: alexlavrentev.ru

    Beriya15.06.2012
    • ссылку только отрелактировал я — вела нетуда… просто ошибка в написании, не нужно # ставить, ссылка на страницу html должна вести.
      Спасибо за материал.

      saitbesplat18.06.2012
  • Супер! Помогло! Спсибоооо!

    Максим20.10.2012
  • Спасибо, помогло!

    Димыч04.11.2012
  • Все получилось, спасибо

    Виктор27.11.2012
  • Ссылка не работает
    Сайдбар уходит вниз и появляются записи

    http://ru.forums.wordpress.org/topic/%D1%88%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD-%D0%B8-%D1%81%D0%B0%D0%B9%D0%B4-%D0%B1%D0%B0%D1%80

    Не смогли помочь

    PS пишите мне на личку: sannikov1987@rambler.ru

    Евгений02.12.2012
    • непонял ничего )) ссылка с латиницей + кирилица в конце — ад какой-то…

      admin06.12.2012
  • нет там такого
    вот код

    <article id="post-» >

    » . __( ‘Pages:’, ‘twentyeleven’ ) . », ‘after’ => » ) ); ?>

    <?php
    /* translators: used between list items, there is a space after the comma */
    $categories_list = get_the_category_list( __( ', ', 'twentyeleven' ) );

    /* translators: used between list items, there is a space after the comma */
    $tag_list = get_the_tag_list( '', __( ', ', 'twentyeleven' ) );
    if ( '' != $tag_list ) {
    $utility_text = __( 'This entry was posted in %1$s and tagged %2$s by %5$s. Bookmark the permalink.’, ‘twentyeleven’ );
    } elseif ( » != $categories_list ) {
    $utility_text = __( ‘This entry was posted in %1$s by %5$s. Bookmark the permalink.’, ‘twentyeleven’ );
    } else {
    $utility_text = __( ‘This entry was posted by %5$s. Bookmark the permalink.’, ‘twentyeleven’ );
    }

    printf(
    $utility_text,
    $categories_list,
    $tag_list,
    esc_url( get_permalink() ),
    the_title_attribute( ‘echo=0’ ),
    get_the_author(),
    esc_url( get_author_posts_url( get_the_author_meta( ‘ID’ ) ) )
    );
    ?>
    <?php edit_post_link( __( 'Edit', 'twentyeleven' ), '’, » ); ?>

    <a href="» rel=»author»>
    <?php printf( __( 'View all posts by %s →’, ‘twentyeleven’ ), get_the_author() ); ?>




    <!— #post- —>

    Liises09.04.2013
    • темы ВП, как и сам движек, постоянно обновляются. Разработчики вносят правки в код, улучшают его и перелопачивают. В том числе и эти дефолтные темы изменяются. Со временем все рецепты устаревают…

      admin09.04.2013
  • Спасибо автору, все работает!

    nesh25.04.2013
  • Спасибо. За совет. Быстро и оперативно сделал изменения.

    Артем08.07.2013
  • single.php все прописал точнее уже было.
    но почему сайдбар по центру экрана
    в стилях не могу найти как сдвинуть в права

    @import url(reset.cs);
    #fon {
    margin:0;
    padding:0;
    background:#FFFAE6 url(./images/fon.png) center top no-repeat;
    }
    .add_comment {
    display:block;
    width:30px;
    height:150px;
    position:fixed;
    left:0;
    top:200px;
    z-index: 99999;
    }
    .spoiler_links{color:#685508;
    text-decoration: none;text-align: center;}
    #Kn{text-align: center;}
    #blok{margin:0 auto;
    width:1100px;}
    #menu{margin:0 auto;
    text-align: center;
    width:700px;
    height:25px;
    margin-top:410px;}
    #global_blok{width:1100px;
    height:auto;
    margin-top:50px;}
    #razdel{
    width:250px;}
    #blotex{
    width:600px;}
    #novosti{
    width:250px;}
    #pn{float: right; width:92px;height:18px;background-image:url(./images/pr.png);}
    #zagol{font-size: 15pt;color:#685508;}
    #terazd {
    height: 196px;
    overflow: hidden;
    text-overflow: ellipsis;
    }
    #nk{width:1000px;
    margin:0 auto;
    height:104px;
    background-image:url(./images/nk.png);
    margin-top:100px;}
    #nk a{ padding-top:20px;
    text-decoration:none;
    color:#685508;
    font-size: 15pt;}
    #te{ padding-top:35px; padding-left:580px;}
    #nk3{width:1000px;
    margin:0 auto;
    height:95px;
    background-image:url(./images/nk3.png);}
    #nk2{width:1000px;
    margin:0 auto;
    height:35px;
    background-image:url(./images/nk2.png);}

    #k1{width:125px; height:89px;
    margin-left:73px;
    margin-top:1px;}
    #k2{width:125px; height:89px;
    margin-left:13px;
    margin-top:1px;}
    #k3{width:125px; height:89px;
    margin-left:12px;
    margin-top:1px;}
    #k4{width:125px; height:89px;
    margin-left:27px;
    margin-top:1px;}
    #k5{width:125px; height:89px;
    margin-left:13px;
    margin-top:1px;}
    #k6{width:125px; height:89px;
    margin-left:12px;
    margin-top:1px;}
    #niz{width:auto;
    height:50px;
    text-align: right;
    background: url(./images/niz.png) center top no-repeat;}

    #navig li:hover {}
    #navig li {
    list-style:none;
    text-align: center;
    box-shadow: #333 0 0 0px;
    float:left;
    margin-right: 0px;
    border-radius: 0px;
    padding-top:6px;
    }
    #navig a {
    text-decoration:none;
    color:#685508;
    font-size: 15pt;

    }

    div.sdmenu {
    width: 220px;
    font-family: Arial, sans-serif;
    font-size: 15px;
    color:#685508;
    }
    div.sdmenu div {
    overflow: hidden;
    }

    div.sdmenu div.collapsed {
    height: 25px;
    }
    div.sdmenu div span {
    display: block;
    padding: 5px 25px;
    font-weight: bold;
    color:#685508;
    cursor: default;
    padding-left:10px;
    background-image:url(./images/k4.png); background-repeat:no-repeat; padding-left:15px;

    }

    div.sdmenu div a {
    padding: 5px 10px;
    display: block;
    color:#685508;
    text-decoration: none;
    }

    div.sdmenu div a:hover {
    color:#685508;
    text-decoration: none;
    }

    /* Images */
    .alignleft {
    float: left;
    }
    .alignright {
    float: right;
    }
    .aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }
    .entry-content img,
    .comment-content img,
    .widget img,
    img.header-image,
    .author-avatar img,
    img.wp-post-image {
    /* Add fancy borders to all WordPress-added images but not things like badges and icons and the like */
    border-radius: 3px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    }
    .wp-caption {
    max-width: 100%; /* Keep wide captions from overflowing their container. */
    padding: 4px;
    }
    .wp-caption .wp-caption-text,
    .gallery-caption,
    .entry-caption {
    font-style: italic;
    font-size: 12px;
    font-size: 0.857142857rem;
    line-height: 2;
    color: #757575;
    }
    img.wp-smiley,
    .rsswidget img {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 0;
    margin-top: 0;
    padding: 0;
    }
    .entry-content dl.gallery-item {
    margin: 0;
    }
    .gallery-item a,
    .gallery-caption {
    width: 90%;
    }
    .gallery-item a {
    display: block;
    }
    .gallery-caption a {
    display: inline;
    }
    .gallery-columns-1 .gallery-item a {
    max-width: 100%;
    width: auto;
    }
    .gallery .gallery-icon img {
    height: auto;
    max-width: 90%;
    padding: 5%;
    }
    .gallery-columns-1 .gallery-icon img {
    padding: 3%;
    }

    /* Navigation */
    .site-content nav {
    clear: both;
    line-height: 2;
    overflow: hidden;
    }
    #nav-above {
    padding: 24px 0;
    padding: 1.714285714rem 0;
    }
    #nav-above {
    display: none;
    }
    .paged #nav-above {
    display: block;
    }
    .nav-previous,
    .previous-image {
    float: left;
    width: 50%;
    }
    .nav-next,
    .next-image {
    float: right;
    text-align: right;
    width: 50%;
    }
    .nav-single + .comments-area,
    #comment-nav-above {
    margin: 48px 0;
    margin: 3.428571429rem 0;
    }

    img.alignleft,
    .wp-caption.alignleft {
    margin: 0px 10px 5px 0;
    }
    img.alignright,
    .wp-caption.alignright {
    margin: 10px 0px 0px 0px;

    }

    .alignright {width:189px; height: 126px;}

    #koments{width:500px; box-shadow:#44281A 0 0 3px;background-color:#44281A; border-radius: 10px; padding-left:15px;}
    #kn {width:502px;}
    #kt {width:502px;}
    #vk {margin-left:65px; width:40px;height:40px;}
    #fb {margin-left:115px; margin-top:-40px; width:40px;height:40px;}

    .add_comment {
    display:block;
    width:30px;
    height:150px;
    position:fixed;
    left:0;
    top:400px;
    z-index: 99999;
    }

    Сергей13.02.2014
    • конечно так по коду я не подскажу… все может быть оформлено в таком многослойном пироге… единственное дам совет на будущее, как можно менять и пробовать в реальном времени что и как:
      в фаерфоксе есть такой очень полезный плагин Firebug , можно на любом месте сайта кликнуть правой мышкой — инспектировать элемент с помощью Firebag — внизу всплывает окошко — там много всего, в том числе и css код
      Вы можете попробовать какие-то свойства отключить/изменить и сразу увидите что куда здвинется на вашем сайте.
      Этим методом вы легко нащупаете почему сайдбар уползает.
      Не забудте потом внести изменения в стили css на сайте, так как Firebag меняет только для просмотра, сам код он не правит, и после обновления страницы все ваши эксперименты исчезнут.

      admin25.02.2014
  • Спасибо друг

    Proshkolublog.ru23.10.2014

Добавить комментарий

семнадцать − пятнадцать =

Тиц и pr сайта Яндекс.Метрика

Каталог организаций