Янв 05 Ковыряем тему Twenty Eleven 1.3

Одна из самых популярных тем для wordpress, если не самая популярная, это Twenty Eleven 1.3.
Обусловлено это тем, что в свежеустановленном сайте на wordpress Twenty Eleven ставится темой по умолчанию.
Основная масса блоггеров мало знакома с движком wordpress, не говоря уже о темах для вордпресса, поэтому устанавливаемая тема Twenty Eleven так и используется как основная на большинстве блогов на вордперссе.
Кстати, использование не стандартного, уникального шаблона на сайте – это один из основных признаков качества сайта (так что мы сейчас и займемся косметическим ремонтом этого шаблона!).

Но не будем забегать вперед – нам потребуется путевка в профессиональные, качественные сайты, заработанная на знаниях, полученных от ковыряния стандартных шаблонов.
Итак, вордперсс установлен, название сайту дано, прописаны тэги – title, description и keywords.
Установлены и настроены критически важные и необходимые плагины для wordpress - All in One SEO Pack, WP-PageNavi, WP Super Cache и другие.
Возможно, даже написано несколько качественных, уникальных, тематических статей от 3к символов, которые очень любят поисковые системы.
Теперь, надо все это дело облагородить и привести к более лицеприятному, человеческому виду, хотя, надо признаться, что создатели вордпресса сделали все, чтобы установленный из коробки вордпресс смог удовлетворить все чаянья начинающего блоггера.
И как только вы, Создатель своего Блога, почувствуете, что вам чего-то не хватает, пора, что-то добавить или убрать, значит, вы перешли на следующую ступень познания wordpress и стандартного шаблона Twenty Eleven в частности.

Итак, что можно сделать со стандартным шаблоном:

1)    Добавить на все страницы сайдбар.

Боковая колонка (она же сайдбар) есть по умолчанию только на главной странице, чтобы сайдбар был и на внутренних надо проделать следующие манипуляции в теме «Twenty Eleven 1.3».
1.    Заходим в админку. В разделе Дизайн → щелкаем на Редактор в правом столбце щелкаем на файл Одна запись (single.php),
2.    находим в коде строку <?php get_footer(); ?> (поможет комбинация клавиш Ctrl+F), добавляем перед ней <?php get_sidebar(); ?>, получаем в результате такой код:

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Сохранямся!

3. Щелкаем на Список стилей (style.css) и смело удаляем строки:

/* Singular */
.singular #primary {
margin: 0;
}
.singular #content,
.left-sidebar.singular #content {
margin: 0 7.6%;
position: relative;
width: auto;
}
.singular .entry-header,
.singular .entry-content,
.singular footer.entry-meta,
.singular #comments-title {
margin: 0 auto;
width: 68.9%;
}

2) Добавляем внизу каждой записи и страницы – короткую ссылку и кнопку «вверх».

1. Заходим Дизайн → Редактор в правой колонке кликаем на файл Одиночная запись (single.php), находим строку 
<?php comments_template( ”, true ); ?>
 Перед ней вставляем код, получаем:
<div style="padding:30px 0 10px">короткая ссылка: <a href="http://здесь-укажите-ваш-сайт/?p=">http://здесь-укажите-ваш-сайт/?p=</a></div>
<div style="text-align:right; padding:0px 0 20px"><a href="#">вверх</a></div>

Делаем тоже самое с файлом Шаблон страницы (page.php).

3) Добавляем свой стиль для тега h4.
Заходим Дизайн → Редактор в правой колонке кликаем на файл Список стилей (style.css), находим строку h1,h2,h3,h4,h5,h6, делаем как показано в ниже приведённом примере, здесь используется пример и в зависимости от Ваших пожеланий можете менять стиль как угодно, получаем:
h1,h2,h3,h4,h5,h6 {
clear: both;
}
h4 {
font-size: 30px;
font-weight: bold;
margin: 0 0 .8125em;
}
Теперь при написании блога выделяем текст и выбираем Заголовок 4, к сожалению в редакторе он не меняется, но на самом сайт результат получается, тот что нужен, если кто знает как сделать, чтобы в Визуальном редакторе он показывал реальный стиль, отпишитесь, буду признателен.

4) Добавляем жирности текста при наведении курсора мыши на меню.
Заходим Дизайн → Редактор в правой колонке кликаем на файл Список стилей (style.css), находим строку #access ul ul :hover, делаем как показано в ниже приведённом примере, здесь используется пример и в зависимости от Ваших пожеланий можете менять стиль как угодно, получаем:
#access li:hover > a,
#access ul ul :hover > a,
#access a:focus {
background: #efefef;
font-weight: bold;
}
5) Удаляем лишнее пространство у заголовка сайта (Важный пункт!).
Заходим Дизайн → Редактор в правой колонке кликаем на файл Список стилей (style.css), находим строку #site-title, #site-description и /* Search Form */, делаем как показано в ниже приведённом примере, здесь используется пример и в зависимости от Ваших пожеланий можете менять стиль как угодно, получаем:
/* Search Form */
#branding #searchform {
position: absolute;
top: 2em;
right: 7.6%;
text-align: right;
}
#site-title {
margin-right: 270px;
padding: 1em 0 0;
}
#site-description {
color: #7a7a7a;
font-size: 14px;
margin: 0 270px 1em 0;
}
6) Удаляем лишнее пространство между меню и заголовком текста.
Заходим Дизайн → Редактор в правой колонке кликаем на файл Список стилей (style.css), находим строку .singular .hentry и .singular.page .hentry, делаем как показано в ниже приведённом примере, здесь используется пример и в зависимости от Ваших пожеланий можете менять стиль как угодно, получаем:
.singular .hentry {
border-bottom: none;
padding: 1px 0 0;
position: relative;
}
.singular.page .hentry {
padding: 1px 0 0;
}
7) Добавляем к дате поста ещё и время.
Заходим Настройки → Общие в параметре Формат даты выбираем Свой формат и вписываем Y.m.d, G:i пожеланию отображение даты и времени можно менять, для ознакомления справка.

8)Увеличиваем ширину комментариев и уменьшаем размер шрифта:
Заходим Дизайн → Редактор в правой колонке кликаем на файл Список стилей (style.css), находим строку /* =Comments, делаем как показано в ниже приведённом примере, здесь используется пример и в зависимости от Ваших пожеланий можете менять стиль как угодно, получаем:
/* =Comments
----------------------------------------------- */
.page-template-sidebar-page-php .commentlist,
.single  .commentlist { width: auto;  font-size: 12px;
}
.page-template-sidebar-page-php .commentlist > li.comment,
.singular  .commentlist > li.comment,
.single  .commentlist > li.comment {
margin-left: 102px;
width: auto;
}
9) Ставим логотип в шапку и предотвращаем растягивание на полный экран:
Заходим Дизайн → Редактор в правой колонке кликаем на файл Список стилей (style.css), находим строку /* =Menu, делаем как показано в ниже приведённом примере, здесь используется пример и в зависимости от Ваших пожеланий можете менять стиль как угодно, получаем:
#branding img {
margin-bottom: -7px;
}
/* =Menu
Вставляйте в корень Вашего сайта файл logo.png (или logo.jpg и т.д.).
Теперь заходим Дизайн → Редактор в правой колонке кликаем на файл Заголовок (header.php), находим строку <header id=”branding” role=”banner”>, делаем как показано в ниже приведённом примере, здесь используется пример и в зависимости от Ваших пожеланий можете менять стиль как угодно, получаем:
<header id="branding" role="banner">
<a href="http://здесь-укажите-ваш-сайт"><img src="http://здесь-укажите-ваш-сайт/logo.png" style='border: 0; left:5px; position:absolute; '></a>