Всё получилось и работает?

Тогда на сегодня все. Если у вас есть вопросы, не стесняйтесь – задавайте. Мы здесь еще и чтобы помогать, а не только писать уроки.

Урок №21 Форматирование поста

Сегодня я расскажу вам как форматировать все элементы поста, для этого вам понадобится только файл style.css. Откройте его в редакторе и приступим.

Шаг 1

Избавьтесь от большинства марджинов и паддингов — введите следующий код над body{} в style.css:

?

1 2 3 4

body, h1, h2, h3, h4, h5, h6, blockquote, p { margin: 0; padding: 0; }

• Обратите внимание, мы поставиили margin: 0; вместо margin: 0 0 0 0;. Когда все параметры одинаковы, ставьте одно число. Тоже самое и для padding.

• Сохраните файл. Обновите браузер. Не волнуйтесь, сейчас вы сможете добавить марджины и паддинги именно там, где вы хотите чтобы они отобразились, а не там, где браузеры разместят их по умолчанию.

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

Шаг 2

Придаем стиль H1-заголовку, вставьте эти строки под body{}:

?

1 2 3 4 5

h1 { font-family: Georgia, Sans-serif; font-size: 24px; padding: 0 0 10px; }

• font-family: Georgia, Sans-serif; меняет шрифт H1-заголовка с Arial (доставшемуся ему от body) на Georgia. Если в системе не установлен Georgia, браузер будет отображать Sans-serif;

• font-size: 24px; ну здесь все понятно без обьяснений. Хотя обратите внимание на то, что когда вы устанавливаете размер шрифта 12px внутри body{}, тэги H1 и H2 не следуют этому изменению. Дело в том, что для тэгов заголовка есть свои собственные правила. Чтобы производить изменения над ними, нужно устанавливать отдельные параметры их стилизации.

• padding: 0 0 10px; означает 10-пикселевый нижний паддинг. Это добавит промежуток между заголовком блога и его описанием. Сохраните, обновите браузеры, вот результат:

Шаг 3

Вставьте следующий код под #container{} (сохраняйте изменения и обновляете браузеры после введения каждого блока кода, чтобы видеть изменения шаг за шагом):

?

1 2 3

.post { padding: 10px 0 10px 0; }

Вы добавили 10-пикселевые отступы сверху и снизу к каждому DIV-у с классом post.

?

1 2 3 4

.post h2 { font-family: Georgia, Sans-serif; font-size: 18px; }

.post h2 — это не общее правило. Оно направленно специально на H2-подзаголовки внутри post DIV. На H2-подзаголовки в сайдбаре это не влияет. Это называется наследование стилей.

?

1 2 3

.entry { line-height: 18px; }

Мы увеличили междустрочный интервал внутри блока поста.

Шаг 4

Вставьте эти строки под a:hover {}:

?

1 2 3

p { padding: 10px 0 0 0; }

10-пикселевый верхний отступ для каждого тэга параграфа.

Шаг 5

Вставьте под .entry {}:

?

1 2 3 4

p.postmetadata { border-top: 1px solid #ccc; margin: 10px 0 0 0; }

Помните тэг параграфа с классом postmetadata? Стилизовать отдельный тэг параграфа и DIV — это почти одно и то же. Вы можете назначить рамку (border), отступы (margin и padding) и фон (background) к любому из тегов.

К тэгу параграфа postmetadata вы добавили серую рамку и 10-рх верхний отступ к нему.

border-top означает только верхнюю часть рамки. border-left означает только левую часть рамки и т.д. Только border, без -top, -right, -bottom или -left означает рамку со всех сторон. Например, border: 1px solid #ccc; значит, что всем четрым сторонам рамки вы применили серый цвет и ширину 1 пиксель.

Шаг 6

Вставьте этот код под p.postmetadata {}:

?

1 2 3 4 5 6

.navigation { padding: 10px 0 0 0; font-size: 14px; font-weight: bold; line-height: 18px; }

Контрольный пример: для DIV-а navigation, который включает ссылки Следующая страница и Предыдущая страница, мы только что:

• добавили 10-пиксельный верхний отступ

• изменили размер его шрифта до 14 пикселей

• выделили шрифт жирным

• увеличили междустрочный интервал до 18 пикселей

На сегодня все. Если что-то не понятно или я плохо объяснил — пишите в комментариях.

Урок №22 Стилизуем сайдбар

После стилизации сайдбара, мы выйдем на финишную прямую нашего курса. Уже? Да, но не волнуйтесь. Я продолжу публиковать учебные материалы по WordPress. Ведь всегда есть что-то новое, чему можно научиться. Да и сам курс можно расширить и улучшить, чем я и займусь.

Сегодня вам не понадобится ничего, кроме файла стилей — откройте style.css в вашем редакторе.

Шаг 1

Введите эти строки под .sidebar{}:

?

1 2 3 4 5

.sidebar ul{ list-style-type: none; margin: 0; padding: 0 10px 0 10px; }

Тем самым мы придали стиль тэгу базового ненумерованного списка <ul> сайдбара, и теперь все вложенные UL-списки будут оформлены тем же стилем. В данном случае, это: никакого буллета, нулевые внешние margin и 10-пиксельные padding.

Например:

Стиль первого UL-списка будет присвоен списку второго порядка (вложенному списку). Если вы присваиваете границу первому списку, второй тоже будет иметь границу (border).

Cохраните и обновите браузер. Теперь элементы списка уже не маркированы с помощью буллетов.

Обратите внимание на то, как нужно добавлять padding сверху и снизу в шаге 2.

Шаг 2

Введите следующий код под .sidebar ul{}:

?

1 2 3

.sidebar ul li{ padding: 10px 0 10px 0; }

Вот что вышло с padding:

Почему мы не добавили 10-pх padding  UL-списку в первый раз. Вам необходимо отделить один элемент списка от другого. Перед тем как мы добавили padding к .sidebar ul li{}, между полем поиска и календарем не было промежутка, также его не было между Календарем и Страницами. Так вот, эти 10-пиксельные паддинги сверху и снизу от .sidebar ul li{} нужны для разбивки блоков. Если бы UL-тэг имел паддинг для всех четырех сторон, вместо всего лишь слева и справа (0 10px 0 10px), в итоге у вас бы вышел 20-рх паддинг сверху или 20-рх паддинг снизу, если бы вы старались разграничить элементы списка после применения паддинга к UL. Понимаете, о чем я говорю?

Если нет, ничего страшного, просто добавьте паддинг для .sidebar ul{} сверху и снизу и сами всё увидите.

Шаг 3

Введите данный код под .sidebar ul li{}:

?

1 2 3 4

.sidebar ul li h2{ font-family: Georgia, Sans-serif; font-size: 14px; }

Не забудьте, что стилизация подзаголовка под .post{} не имеет значения, потому что вы отметили подзаголовки только под .post{}. Сейчас же, вы придаете стиль незатронутым подзаголовкам в сайдбаре. Вот результат:

Вот как выглядит мой список ссылок Страницы. Наверное у вас всего одна ссылка, О себе (About). Я добавил несколько ссылок и вложенных уровней страниц в мою локальную версию WordPress, чтобы посмотреть, как будут выглядеть ссылки нижних уровней. Обратите внимание на ненужный дополнительный padding внизу, я подчеркнул его красным. Это иллюстрация механизма присваивания стилей. 10 пикселей приплюсовались и получилось 20.

Из-за того что вы добавили паддинг к .sidebar ul li{}, элементы списка низших уровней получили тот же паддинг. Чтобы исправить это, смотрите шаг 4.

Шаг 4

Добавьте эти строки под .sidebar ul li h2{}:

?

1 2 3

.sidebar ul ul li{  padding: 0;  }

Упорядоченные UL-списки в .sidebar ul ul li{} определяют, что цель – элементы списка нижних уровней. Напомню, что когда все параметры равны 0, вам не нужно ставить суффикс рх.

Вот результат:

Строки находятся слишком близко друг от друга, так что давайте зададим строкам высоту в 24px.

Добавьте line-height: 24px; к .sidebar ul ul li{}.

Пока это не смотрится очень хорошо, но вы только учитесь, и со временем все получится, если только захотите. Также, если хотите, позже я смогу рассказать как управлять стилями для такого уже непопулярного элемента как календарь.

На сегодня все. Урок окончен :)

Урок №23 Футер. Делим индекс на зоны.

Сегодня мы подводим итог в стилизации и затронем важный вопрос — как правильно разделить файл index.php на несколько небольших файлов. В начале урока вам понадобится файл style.css. Далее, вы будете работать с index.php, а также создадите несколько новых файлов. Наверное думаете “ну неужели скоро финал?” =) Именно, мы почти закончили базовый курс!

Откройте всё что потребуется и начинаем.

Шаг 1

Добавьте padding: 10рх к DIV тэгу футера. Надеюсь, вы помните, как добавлять padding? В этот раз, я уже не пишу код, надеясь на вашу память ;-)

Шаг 2

Присвойте всем тэгам <p> футера высоту строки 18px через #footer p{}.

На сегодня мы закончили с style.css.

Шаг 3

• создайте новый файл, назовите его header.php. Если вы работаете не в сцециальном редакторе, а в текстовом, например в блокноте — убедитесь, что это РНР файл, а не текстовый документ

• в файле index.php выделите все сначала и до конца DIV-а header. Вырежте это и вставьте в файл header.php

Шаг 4

В файле index.php выделенный код, который вы скопировали, замените следующим:

?

1	<?php get_header(); ?>

Это специальная функция WordPress, которая отвечает за включение файла header.php, вместо использования <?php include (TEMPLATEPATH . ‘/header.php’); ?>.

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

Шаг 4

Шаг 4 почти ничем не отличается от предыдущего. В этот раз:

• создайте файл sidebar.php

• выделите все от начала DIV тэга Sidebar до его конца, скопируйте и вставьте в файл sidebar.php

• затем, в файле index.php замените выделенное кодом <?php get_sidebar(); ?>

• сохраните и обновите браузеры.

И опять вы не должны увидеть изменений.

Шаг 5

Повторите проделанные выше операции с <div id=»footer»> для файла footer.php.

Это нужно делать с каждой новой темой WordPress для обеспечения оптимальной и правильной структуры темы.

Краткий обзор урока

• Вы создали три новых файла: header.php, sidebar.php и footer.php.

• Вы выучили три новых функции: get_header(), get_sidebar() и get_footer().

Урок №24 Файлы суб-шаблонов

Сегодня мы продолжаем тему суб-шаблонов, отрытую на прошлом уроке примерами создания файлов header.php, sidebar.php и footer.php.

Теперь, когда файл index.php разделен на зоны, все будет намного проще.

Шаг 1

Перед тем, как сделать следующую операцию, посмотрите на ваш сайдбар, кликните на ссылку Архив. Открывшаяся страница ничем не отличается от вашей главной страницы, так? Теперь:

• создайте новый файл: archive.php

• скопируйте все из файла index.php и вставьте archive.php

• сохраните archive.php

• в файле archive.php, замените the_content на the_excerpt

• снова сохраните файл archive.php

Мы создали файл archive.php, и сделали так, чтобы он отличался от index.php, тем самым мы кастомизировали вид всех страниц Архива.

Теперь, когда вы обновите страницу архива, отобразятся только резюме, а не полный текст постов.

Зачем это нужно? Во первых, чтобы разнообразить дизайн и иметь возможность изменять внешний вид страниц в зависимости от её функций, а также чтобы предотвратить наказание от Google и других поисковиков за дублирование контента. Если две страницы абсолютно одинаковы - это дублированный контент.

Что если у вас приватный блог? Тогда, необязательно создавать различия между архивными и главной страницами. Но это не значит, что выдержки не полезны для приватных блогов.

Также – по умолчанию, ваши страницы категорий будут искать указания как отображать контент из файла archive.php. Если у вас нет archive.php, страницы категорий будут искать в файле index.php.

Если вы хотите, чтобы страницы категорий выглядели иначе, чем главная страница и архивные страницы, создайте файл category.php и задайте ему необходимые параметры.

Шаг 2

• создайте новый файл search.php

• скопируйте все из файла archive.php и вставьте в search.php

• сохраните изменения

Теперь все результаты поиска будут отображаться в виде резюме. Без файла search.php, функция поиска будет обращаться к файлу index.php для отображения результатов поиска.

По мере необходимости, чтобы вспомнить иерархию файлов WordPress, вы можете вернуться к уроку №1.

Шаг 3

• создайте 2 новых файла: page.php и single.php. Скопируйте все из файла index.php и вставьте в файлы page.php и single.php (пока шаблон страницы и шаблон поста должны выглядеть одинаково)

• сохраните все страницы

Шаг 4

Надеюсь, вы помните, что существует разница между Страницей и страницей. Название чувствительно к регистру. Шаблон page.php определяет свойства тех самых, особых Страниц.

Во-первых, в файле page.php введите следующий код сразу под <?php the_content(); ?>:

 

?

1	<?php link_pages('<p><strong>Страницы:</strong> ', '</p>', 'number'); ?>

и

?

1	<?php edit_post_link('Редактировать', '<p>', '</p>'); ?>

Во-вторых, удалите код postmetadata из page.php. Вот что у вас должно получиться без postmetadata.

?

1 2 3 4 5

<div class="entry">     <?php the_content(); ?>     <?php link_pages('<p><strong>Страницы:</strong> ', '</p>', 'number'); ?>     <?php edit_post_link('Редактировать', '<p>', '</p>'); ?> </div>

В-третьих, удалите posts_nav_link() или блок навигации из page.php.

?

1 2 3 4 5

<?php endwhile; ?>     <div class="navigation">         <?php posts_nav_link(); ?>     </div> <?php else : ?>

Что же произошло?

Первая линия кода отвечала за отображение ссылок на суб-страницы.

Например, отредактируйте страницу О себе. Добавьте на страницу код <!—nextpage—> несколько раз через абзац и посмотрите что произойдет. Это полезно, когда вам нужно разбить действительно длинную страницу на несколько страниц поменьше.

Что касается второй строки кода — это ссылка редактирования поста, которая видна только администратору.

Страницы блога нельзя включить в категории, и так как они статичны, нет необходимости выводить на экран дату их создания, именно поэтому вы удалили postmetadata. Также, стоит убрать posts_nav_link() потому что это также работает только для постов, где отображаются ссылки на предыдующую и следующую страницы.

Сохраните и закройте файл page.php.

Шаг 5

Когда вы кликаете на названии поста, чтобы увидеть весь материал, вы переходите в режим просмотра отдельного поста. Шаблон single.php отвечает за вид страницы содержащей пост.

В файле single.php введите следующий код под <?php the_content() ?>:

?

1	<?php link_pages('<p><strong>Страницы:</strong> ', '</p>', 'number'); ?>

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

После этого, замените <?php posts_nav_link(); ?> на:

?

1	<?php previous_post_link('« %link') ?> <?php next_post_link(' %link »') ?>

На главной странице, а также на страницах архива, категорий и поиска, вы используете функцию posts_nav_link() для вызова ссылок на предыдущую и следующую страницы. Для страницы, где отображается пост, таких ссылок нет. Используете функции previous_post_link() и next_post_link(), чтобы вызывать ссылки на предыдущий и следующий пост.

Сохраните файл single.php. Зайдите на страницу просмотра каждого отдельного поста чтобы увидеть разницу в области навигации между ними.

Краткий обзор пройденного урока

• мы создали 4 новых файла, или суб-шаблона: archive.php, search.php, page.php и single.php.

• Файлы archive.php и search.php одинаковы.

• Страницы (другими словами, обьекты не являющиеся постами) нельзя обьединить в категории. Также они не имеют ссылок на следующую и предыдущую страницы.

• Шаблон single.php не может отображать ссылку на количество комментариев (вызываемую функцией comments_popup_link()) и не использует функцию posts_nav_link() для вызова ссылок навигации.

На сегодня всё, а совсем скоро мы опубликуем последний урок курса «Создание тем для WordPress» и посмотрим что делать дальше :-) А пока задавайте вопросы и высказывайте пожелания и предложения в комментариях!

Урок №25 Шаблон комментариев. Последний урок курса.

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

Обратите внимание:

• нет единственно верного способа создать шаблон “Комментарии” в comments.php

• большинство WP-дизайнеров используют предустановленный шаблон “комментарии”, из темы по умолчанию Kubrick

• некоторые дизайнеры модифицируют предустановленный шаблон в соответствии со своими нуждами

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

Шаг 1

Создайте новый файл: comments.php, скопируйте содержимое файла comments.txt в ваш comments.php и сохраните его.

Шаг 2

Скопируйте содержимое файла comments-template-css.txt в ваш файл style.css, поместив его в конец style.css, или прямо над #footer.

Шаг 3

Введите следующее под DIV с id «entry», в файле single.php:

?

1 2 3

<div class="comments-template"> <?php comments_template(); ?> </div>

Функция comments_template() вызывает шаблон комментариев из файла comments.php. Далее, файл comments.php отрабатывает свой код, чтобы отобразить список комментариев. Каждый элемент списка – это комментарий.

Вы также можете использовать функцию comments_template() в файле page.php, чтобы позволить посетителям оставлять комментарии на любой странице. Делать это, или нет – решать вам. Если вам это подходит, повторите шаг 3 в файле page.php.

На заметку: вы можете легко отделить внешний вид комментариев для страниц и записей, достаточно в файле page.php указать следующий параметр comments_template(‘/page-comments.php’); .

Продолжаем. Небольшое пояснение: в файле single.php вы охватили comments_template() DIV-тэгом comments-template. Теперь, ваш шаблон комментариев является нумерованным списком внутри DIV.

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

Измененная версия шаблона комментариев, которую вы используете, включает Н2-подзаголовок, который гласит: Защищено паролем. В предустановленном шаблоне этого нет. Функция comment_text() вызывает текст каждого комментария.

Я не буду обьяснять, что значит СSS код для шаблона комментариев. В отличие от файла comments.php, вы легко можете поэкспериментировать с CSS-кодом, не нарушая при этом шаблон комментариев. Практика работы с CSS-кодом принесет вам гораздо больше пользы, чем чтение моих пояснений.

На этом все.. Да-да, сегодня не будет краткого обзора урока, ведь этот урок был последним =) Теперь сохраните всё и насладитесь вашей первой темой, собранной своими руками! =)

Поздравляю, вы закончили базовый курс по созданию темы для WordPress!

Вы довольны? Или может быть разочарованы? Чего-то не хватило и что-то осталось без внимания? Пишите обо всем этом в комментариях и мы постараемся максимально быстро доработать учебный материал, заполнив все белые пятна.

Что будет дальше?

Не волнуйтесь, это не конец! Ведь всегда есть куда расти и совершенствоваться. У нас уже есть куча материала и идей как для новых уроков, так и масса доработок и улучшений в существующий курс, к слову сказать благодаря вашим комментариям и замечаниям. Также в дальнейшем мы рассмотрим техники WP-дизайна и верстки более высокого уровня и введем совсем новые разделы.

Как говорится, to be continued… оставайтесь с нами!