Twenty Eleven: вывод сайдбара для отдельных записей и страниц

Новая тема Twenty Eleven всем бы была хороша, если бы не отсутствие сайдбара на некоторых страницах. Как я понял, многие хотят вернуть сайдбар, причем быстро и без особых усилий. В поисках необходимой информации я наткнулся на одно хорошее руководство, которое описывает процесс установки сайдбара для отдельных записей и страниц. Учитывая, как много пользователей желают сделать это, в ближайшее время стоит ожидать плагина, который выполнял бы все действия в автоматическом режиме. Однако пока такого плагина нет, пользователям приходится проводить необходимые изменения вручную.

Вернуть сайдбар довольно сложно, поскольку файл style.css с каждой новой версией все больше и больше разрастается. Разобраться во всех этих стилях можно лишь после длительного и скрупулезного изучения WordPress, на что требуется время и желание. Ни того, ни другого у людей обычно нет, особенно если их блог связан с каким-либо бизнесом. Поэтому давайте пошагово рассмотрим процесс возвращения сайдбара.

Способ первый: лобовая атака

Шаг первый

Переходим в редактор темы, открываем файл 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;
}

Все готово. Просто и быстро.

Способ второй: тщательное планирование

Шаг первый

На первом шаге нам понадобится создать дочернюю тему. Для этого мы создадим подпапку в папке /wp-content/themes и назовем ее, к примеру, twentyelevenchild. В эту папку нужно будет поместить файл style.css, который должен содержать следующий код:

/*
Theme Name: Twenty Eleven Child
Author: alchymyth
Description: a child theme, based on the 2011 theme for WordPress
Author URI: http://wordpress.org/
Template: twentyeleven
*/

@import url(../twentyeleven/style.css);

Затем в эту же папку нужно добавить файл functions.php; мы вернемся к нему позже.

Шаг второй

Возвращаем сайдбар. Для этого нам понадобится открыть файл single.php и/или page.php и добавить в него следующую строку:

<?php get_sidebar(); ?>

перед строкой

<?php get_footer(); ?> 

Шаг третий

Подавляем действие .singular body_class для отдельных записей и страниц. Чтобы достичь этого, необходимо добавить следующий фильтр в файл functions.php, находящийся в папке с нашей дочерней темой:

add_filter('body_class', 'blacklist_body_class', 20, 2);
function blacklist_body_class($wp_classes, $extra_classes) {
if( is_single() || is_page() ) :
// List of the classes to remove from the WP generated classes
$blacklist = array('singular');
// Filter the body classes
  foreach( $blacklist as $val ) {
    if (!in_array($val, $wp_classes)) : continue;
    else:
	  foreach($wp_classes as $key => $value) {
	  if ($value == $val) unset($wp_classes[$key]);
	  }
    endif;
  }
endif;   // Add the extra classes back untouched
return array_merge($wp_classes, (array) $extra_classes);
}
 

Шаг четвертый

Настраиваем style.css дочерней темы. К примеру, стили могут быть следующими:

.single #author-info {
	background: #f9f9f9;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	margin: 2.2em 0% 0 0%;
	padding: 20px 35.4%;
}

С помощью стилей дочерней темы можно изменить представление и других элементов. Все зависит от требований автора.

Источники: http://dev-tips.com/featured/remove-an-item-from-an-array-by-value
http://wordpress.stackexchange.com/questions/15850/remove-classes-from-body-class

Twenty Eleven – Sidebar on Single Posts and Pages

Add Sidebar in Single Post Pages of Twenty Eleven WordPress Theme

Блог про WordPress
Комментарии: 65
  1. TihiySap

    Спасибо за статью, помогло! На досуге подумаю, как ширину сайдбара увеличить…

  2. Дмитрий (автор)

    Они не пропали, они скорее всего просто сместились в раздел Неактивные виджеты на странице с Виджетами. Или они вообще исчезли?

  3. Дмитрий (автор)

    Akismet по умолчанию доступен в Twenty Eleven. Странно, пока что с такой проблемой никто не отписывался на форуме WordPress. Посмотрим, может кто что посоветует.

  4. TihiySap

    Не успел обрадоваться вернувшемуся сайдбару, как обновился до WordPress 3.2.1 и пропали виджеты:(

  5. TihiySap

    Вообще исчезли. В доступных только Akismet (если не ошибаюсь, появился после временной активации BuddyPress), в неактивных пусто.

  6. TihiySap

    Хотел как лучше… Удалил сайт и последовательно заливал версии 3.1.4, 3.2, 3.2.1

    Итог: виджеты не появились, загружается только главная страница, вместо остальных error 404 (в БД вроде все записи целы, uploads скопировал старый).

  7. TihiySap

    Создал .htaccess — сработало.

  8. Дмитрий (автор)

    Можно попробовать связаться с вашим хостингом и попросить сделать откат на ту дату, когда сайт еще нормально работал и виджеты были.

  9. TihiySap

    Виджеты пропадают, если заменить файлы из корня сайта (там, где index.php и пр.). Теперь всё отображается.

  10. iLLmano

    Добрый день.

    А не знаете как в этом шаблоне сделать так, что бы название блога, его описание и поиск выводились на картинке? Я пробовал перемещать код в хеддере, но ничего не вышло.

  11. Дмитрий (автор)

    Первое решение, которое пришло в голову, это создать блок div с абсолютным позиционированием, а потом уже настроить его с помощью отступов.

  12. Алексей

    Здравствуйте. Я воспользовался первым способом — всё получилось. Но как сделать вывод сайдбаров на главной странице? Никто не подскажет? Очень надо.

  13. Дмитрий (автор)

    А разве они не выводятся там по умолчанию? В настройках темы можно поставить вывод сайдбара для главной страницы.

  14. Алексей

    По умолчанию не выводятся. У меня во вкладке "настройка темы" нет того что вы сказали

    1. Дмитрий (автор)

      Appearance (внешний вид) — Theme Options, и там выбирается макет для Twenty Eleven.

      Вот скрин:

  15. Алексей

    Да, это всё есть, но ничего не меняется. Да, забыл сказать — у меня главная страница это одна из статических страниц. Может из-за этого?

  16. Дмитрий (автор)

    Скорее всего, из-за этого. Код из примера действует только для отдельных страниц с классом .singular.

  17. Алексей

    Всё, разобрался, надо было в файл page.php вставить код

  18. bersy

    один из плагинов http://wordpress.org/extend/plugins/twenty-eleven

  19. Артур

    Не помогло. Все, как было, так и осталось. сайдбар под комментами

  20. Дмитрий

    Большое спасибо за статью. Воспользовался первым способом и всего за три минуты привел блог в желаемый вид. Очень помогло :)

  21. Аноним

    Отлично написано Скопировал и поставил в тему Всё получилось Спасибо

  22. Марина

    Делаю все указания по установке сайдбара по первому методу — и ничего не получается, он по прежнему есть только на главной странице….

  23. Slavik

    Ох спасибочки . Сделал все , сайдбар появился на страницах с записями. Респект , Помогаете)

  24. WordPress уроки

    Хороший урок спасибки

  25. Anna

    Ребята, подскажите а относительно темы Twenty Twelve это сработает? В частности первый способ.

    1. Дмитрий (автор)

      Неизвестно, нужно тестировать.

  26. Александр

    Подскажите как сделать 2 сайдбар все пишут только про один а мне нужно два
    помогите пожалуйста если можете

    1. Дмитрий (автор)

      Попробуйте следующий плагин:

      http://wordpress.org/extend/plugins/twenty-eleven-theme-extensions/

      Возможно, поможет решить проблему.

  27. Александр

    Architect Of Ruin
    вы знаете ни чего не изменилось как было все с одной левой стороны так и осталось
    может как то еще можно

    1. Дмитрий (автор)

      Сделать-то можно, только придется влезать в код, регистрировать отдельную зону виджетов.

      Если вам интересно, посмотрите в блоге по поиску статьи про регистрацию областей виджетов.

      Сам, к сожалению, помочь не могу, поскольку загружен работой. Максимум, что могу, это подтолкнуть к решению советом.

  28. Александр

    взял тему с 3 колонками
    но в ней такая проблема
    при открытии рубрики она не открывается полностью а открывается только немного текста и чтобы открыть полностью надо в конце текста еще раз нажать что бы открылась вся рубрика это очень не удобно
    подскажите ПОЖАЛУЙСТА как исправить чтобы при нажатии открывалась целиком вся рубрика

    1. Дмитрий (автор)

      Как я могу помочь, если вы даже не сказали, что это за тема. Как она называется? А то не совсем понятно, о чем идет речь.

  29. Александр

    Тема называется Sliding Door
    там когда нажимаешь на рубрику появляется только заглавие поста и пишет continue reading что бы открыть далее, а мне надо что бы сразу весь пост открывался
    как я понял оно прописано в это куске а как изменить я не знаю
    /**
    * Returns a «Continue Reading» link for excerpts
    *
    * @since Sliding Door 1.0
    * @return string «Continue Reading» link
    */
    function slidingdoor_continue_reading_link() {
    return ‘ ‘ . __( ‘Continue reading →’, ‘slidingdoor’ ) . »;
    }

    /**
    * Replaces «[…]» (appended to automatically generated excerpts) with an ellipsis and slidingdoor_continue_reading_link().
    *
    * To override this in a child theme, remove the filter and add your own
    * function tied to the excerpt_more filter hook.
    *
    * @since Sliding Door 1.0
    * @return string An ellipsis
    */
    function slidingdoor_auto_excerpt_more( $more ) {
    return ‘ …’ . slidingdoor_continue_reading_link();
    }
    add_filter( ‘excerpt_more’, ‘slidingdoor_auto_excerpt_more’ );

    /**
    * Adds a pretty «Continue Reading» link to custom post excerpts.
    *
    * To override this link in a child theme, remove the filter and add your own
    * function tied to the get_the_excerpt filter hook.
    *
    * @since Sliding Door 1.0
    * @return string Excerpt with a pretty «Continue Reading» link
    */
    function slidingdoor_custom_excerpt_more( $output ) {
    if ( has_excerpt() && ! is_attachment() ) {
    $output .= slidingdoor_continue_reading_link();
    }
    return $output;
    }

    1. Дмитрий (автор)

      То, что вам требуется, делается в файле loop.php.

      Открываете файл loop.php.

      В нем ищете следующую строку:

      <?php /* How to display all other posts. */ ?>

      Она стоит ближе к концу файла.

      В этом разделе ищете следующий код:

      <?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?>
      			<div class="entry-summary">
      				<?php the_excerpt(); ?>
      			</div><!-- .entry-summary -->
      
      

      и меняете его на:

      <?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?>
      			<div class="entry-summary">
      				<?php the_content(); ?>
      			</div><!-- .entry-summary -->

      В итоге для рубрик (и всех других архивных страниц, а также для результатов поиска) будут выводиться полные формы записей.

  30. Александр

    Здравствуйте у меня появилось 2 проблемы вот первая подскажите пожалуйста в моей теме Sliding Door, там стоит 2 цвета черные и белый, а я бы хотел что бы сайтбары были одним цветом, а сам пост другим, а шапку вообще сделать прозрачной
    или все сделать прозрачным, что бы виден был задний фон вместо цвета
    подскажите пожалуйста

    1. Дмитрий (автор)

      Чтобы все сделать прозрачным, поставьте фоновое изображение в настройках темы, после чего в стили style.css темы добавьте следующий код:

      div#wrapper {
      background:transparent;
      }
  31. Александр

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

    1. Дмитрий (автор)

      Через панель администратора открываете внешний вид — редактор. Там ищете файл style.css.
      В самый его конец добавляете новый стиль (стили в конце файла переопределяют стили, заданные в начале).

  32. Александр

    Вы не подумайте что я такой тупой я сразу так и понял
    просто решил переспросить большое спасибо получилось
    и вторая проблемка я не могу найти где поменять размер шрифта рубрик сам шрифт изменил, а как изменить размеры в шапке, в рубрике, и в меню не могу найти

    1. Дмитрий (автор)

      Не волнуйтесь, лучше еще раз переспросить, чем не понять)

      Заголовки в сайдбаре:
      h3.widget-title

      Пункты меню в сайдбаре:
      ul.xoxo li

      (либо li.widget_categories)

      В шапке:
      #site-title a

      Для меню
      .menu
      (либо div.menu ul)

      Везде пишете нужные стили (к примеру, font:15px arial,sans-serif;)

      Вот как будет выглядеть для шапки:

      #site-title a {
      font:15px arial,sans-serif;
      }
      

      С остальными стилями уже экспериментируйте.

  33. Александр

    Здравствуйте Дмитрий подскажите мне еще пару вопросов пожалуйста
    как сделать на фоне не много много маленьких картинок которые можно поставить в админке а большую фотографию
    напомню тема Sliding Door

    с уважением Александр

    1. Дмитрий (автор)

      В админке есть такие настройки в разделе Фон. Вы выбрали просто «замостить фон», а там его можно зафиксировать, и он будет один на всю страницу.

  34. Александр

    Спасибо разобрался я раньше ставил так но по ходу ставил маленький размер
    Дмитрий вы мне тогда писали код
    div#wrapper {
    background:transparent;
    }
    это для прозрачного фона, а как сделать его мутным, размытым

    1. Дмитрий (автор)

      Для этого есть правило opacity из CSS3.

      Правда оно может не работать в некоторых браузерах. Задается примерно так:

      div 
      {opacity:0.5;
      }
      

      Цифру корректируйте, пока не будет достигнут нужный эффект.

  35. Александр

    этот код надо вставить вместо
    div#wrapper {
    background:transparent;
    }
    или после него

  36. Дмитрий (автор)

    Вместо

    background:transparent;

    вставить

    opacity:0.5;

  37. Александр

    не работает, во всех браузерах просто белый цвет как не изменял

    1. Дмитрий (автор)

      В CSS3 есть еще вот такое правило:

      background: rgba( 255, 0, 0, 0.5);

      Здесь последняя цифра — как раз полупрозрачность (меняется от 0 до 1).

      0.5 — половина прозрачности.

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

      Т.е. будет:

      div#wrapper {
       background: rgba(255, 0, 0, 0.5);
       }
  38. Александр

    ООООООООООООО Дмитрий ни чего не получается даже хуже я и обратно не могу вернуть
    теперь фон стал белым и ни как его не изменить
    может я вам дам логин и пароль и вы сможете исправить

    1. Дмитрий (автор)

      Отправьте мне на почту kmph70@gmail.com данные, если не получается самостоятельно поправить. Адрес сайта и логин с паролем.
      p.s. в ближайшее время буду занят, но если время освободится, то посмотрю.

      1. Дмитрий (автор)

        Сделал вам вот с помощью этого:

        div#wrapper {
         background: rgba(255,255,255,0.2);
         }
        

        Если нужна большая/меньшая прозрачность, то советую вам подкорректировать последний параметр — сделать его 0.3 или 0.4 (или вообще 0.1, если сильнее нужно).

  39. Александр

    Дмитрий Спасибо Огромное то что я и хотел

    1. Дмитрий (автор)

      Пожалуйста, если будут еще вопросы, обращайтесь! Но советую вам на будущее тестировать все не на живом сайте, а на локальном компьютере. Поставить WAMP и там уже пробовать, чтобы случайно не сломать живой сайт на сервере)

  40. Светлана

    Дмитрий, спасибо за урок, но у меня не отражаются виджеты в месте, отведённом для сайдбара. Я внесла изменения первым способом, как вы описали.
    И действительно, на отдельных страницах весь текст теперь сместился в сторону, давая место сайдбару. Но он пуст((( Правильно отражается только на главной странице. Помогите пожалуйста — я считаю эту тему самой удобной.

    1. Дмитрий (автор)

      Приведите адреса страниц, чтобы посмотреть, в чем дело.

  41. Светлана

    Я поняла в чем дело — аналогично нужно сделать тоже самое с файлом Шаблон страницы (page.php), если хотим видеть боковую колонку на страницах также.
    Но теперь у меня другая проблема — после того, как я полностью закончу работу с настройкой сайдбара и закрою сайт … он вновь загружается, а там все настройки «слетели» — сайдбар есть, но текст записи или страницы остается посередине и никуда не сдвигается(((

    1. Дмитрий (автор)

      Возможно, что дело в кэшировании — посмотрите, стоят ли плагины кэширования, если стоят, попробуйте очистить кэш страницы в браузере.

  42. Светлана

    Пасииииб! Вы правы — дело в кэше! Почистила и все сразу отразилось как надо! Зря только на много раз переделывала.(( Спасибо бооольшущеее!

    1. Дмитрий (автор)

      Всегда пожалуйста)

  43. Роман

    Спасибо, и мне помогло

  44. Роман

    Добавил Вас сайт в закладки

  45. Алексей

    Спасибо огромное за информацию. Как раз столкнулся с этой проблемой. Повезло нарваться на вашу статью. Все получилось. Еще раз спасибо!!!

  46. Кирилл

    Интересная статья, и полезная. Мне помогло, спасибо!

  47. Павел

    Спасибо, помог первый способ! Только еще и в page.php пришлось вставить код!

Добавить комментарий для WordPress уроки Отменить ответ

Получать новые комментарии по электронной почте.