Урок №7. Контент.

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

(Примечание: Прошлый урок очень и очень важен. Если вы не до конца разобрались в том, что я рассказывал, вам необходимо перечитать урок и задавать мне вопросы, пока все не станет понятно.)

Чтобы продолжить сегодняшний урок, включите Denwer, откройте папку “Tutorial”, откройте браузер и зайдите на http://wordpress/, а также, откройте файл index.php в редакторе.

Шаг 1:

Напечатайте <?php the_content(); ?> под кодом заголовка поста.

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

Что сейчас произошло и почему все выглядит именно так?

Мы использовали WordPress функцию the_content(), чтобы вызвать записи блога (контент). Сейчас ваш контент выглядит как одна сплошная линия текста, идущая вправо до конца области окна. Это так, потому что вы еще не отформатировали текст. Помните файл style.css? позже мы используем этот файл, чтобы управлять тем, как все выглядит.

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

Получилось? Тогда двигаемся дальше…

Вернитесь  в браузер, кликните на View и выберете Page Source или Source. Откроется окно с исходным кодом.

Заметили разницу между файлом index.php и исходным кодом? Весь текст, картинки и прочее, все в этом окне вызывается функцией the_content(). Полезно, да? Без специального обеспечения для создания блогов, в частности, шаблонной системы WordPress в этом уроке, пришлось бы кодить все эти тексты и картинки самим.

Также, обратите внимание на xhtml открывающие и закрывающие тэги P, которые я обвел красным.  Их нет в вашем файле index.php, но они присутствуют в окне или блокноте исходных кодов, которые вы только что открыли.

Тэги Р – как и зачем?

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

Как – просто! Система шаблонов WordPress создает Р тэги для вас.

Шаг 2:

Поместите невидимый блок (DIV) вокруг  the_content() и присвойте ему class=»entry», вот так:

<div class=»entry»>

</div>

У вас должно получиться следующее:

Сохраните все и обновите страницу в браузере. Если вы снова зайдете в View > Page Source, вы увидите, что тэги class=”entry” DIV появились вокруг каждого вашего поста.

Почему?

Первая причина: сейчас вы можете сказать, где заканчиваются заголовки постов и начинаются собственно записи.

Вторая причина: это сделано для стилизации с помощью файла style.css. Если вы захотите, вы сможете стилизовать запись, не влияя ни на что другое.

Какая разница между id и class?

До этого момента, чтобы назвать невидимый блок DIV, вы использовали id. Помните id=”header”? Так какая же разница? ID уникален, а class нет! Если вы посмотрите на исходный код, вы увидите, что есть только один id=”header” и один  id=”container”, но есть несколько class=”entry”.

Могут ли хедер и контейнер быть классами, а не id? Конечно.

Помните: ID НЕ должны повторяться на странице. Например, у вас не может быть двух id=”header” на одной странице. Когда вы хотите использовать что-то снова и снова, как например записи блога, используйте class.

Шаг 3:

Поместите DIV вокруг заголовков постов и самих записей. Назовите его class=”post”

<div class=»post»>

</div>

(Имена для классов и id могут быть любыми. Например, вы можете назвать DIV в честь любимой еды, но post и entry достаточно легко запомнить, не правда ли?)

Сейчас у вас должно быть:

Вот организованная версия:

Я использовал клавишу tab вместо пробелов, чтобы делать отступы в исходнике index.php. Зачем организовывать код? В отличие от моих скриншотов, в ваших кодах нет красных и зеленых подчеркиваний. А вам нужно отслеживать код. С отступами вам будет легче сказать, какой </div> закрывает тот или иной невидимый блок.

Сохраните и обновите окно браузера, чтобы увидеть изменения в исходном коде.

Зачем добавлять еще один DIV, окружающий заголовок поста и сам пост?

Вы добавили DIV class=”entry”, чтобы отделить заголовок поста от собственно записи. Данный тэг существует для разграничения одного от другого.

На этом все. Информации для осмысления довольно много, так что обязательно задавайте вопросы, если вы что-то не понимаете.

Если вы заметили какие-то ошибки или несоответствия в моих уроках, пожалуйста, сообщите мне, чтобы я сразу мог это исправить. Кстати, как вам мои уроки? Какие у вас есть замечания? Может мне стоит быть более детальным? Не слишком ли длинные «занятия»?

Жду ваших комментариев и не забудьте подписаться на RSS.

Урок №8. Мета-данные поста.

Сегодня мы рассмотрим понятие «мета-данные поста» или постметаданные: дата, категории, автор, количество комментариев, то есть любую информацию, прикрепленную к каждому посту.

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

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">   <head profile="http://gmpg.org/xfn/11">     <title><?php bloginfo('name'); ?><?php wp_title(); ?></title>       <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />     <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats please -->       <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />     <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />     <link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />     <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />     <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />       <?php wp_get_archives('type=monthly&format=link'); ?>     <?php //comments_popup_script(); // off by default ?>     <?php wp_head(); ?> </head>   <body>   <div id="header">     <h1><a href="?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>     <?php bloginfo('description'); ?> </div>   <div id="container">     <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>         <div class="post">         <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>             <div class="entry">                 <?php the_content(); ?>             </div>         </div>     <?php endwhile; ?>     <?php endif; ?>   </div>   </body> </html>

Скопируйте код из файла postmetadata.txt и вставьте под <?php the_content(); ?>. (Примечание: в этом случае вы можете копировать и вставлять. Когда я соединяю темы для WordPress, я тоже копирую и вставляю эту часть. Вам пока не нужно полностью понимать ее, достаточно просто знать, что делает каждый участок кода).

Сохраните файл и обновите браузер, вы должны увидеть примерно следующее:

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

Пояснения:

<p class=»postmetadata»> и </p> — вся информация о постметаданных находится внутри тэга параграфа под именем class=»postmetadata», потому что я хотел отделить постметаданные от контента. Без тэга параграфа, метаданные записи будет идти сразу после контента, без какого-либо разделяющего пространства.

<?php _e(‘Filedunder:’); ?> — : это код, который вызывает двоеточие “:”. Ставить <?php _e(’ ‘); ?> вокруг Категории: не обязательно. Вы можете просто напечатать Категории:

<?php the_category(‘, ‘); ?> — the_category(); это РНР функция, которая вызывает все категории, тэги на которые вы включили в пост. Если вы соедините Категории: и the_category(); вместе, вы получите «Категории: Имя категории 1, Имя категории 2″. Запятая внутри the_category(); – это способ разделить имена категорий. Снова взгляните на скриншот с постметаданными и обратите внимание на запятую между ссылками на категории.

<?php _e(‘by’); ?> — то же самое, что и Категории:. Если вы создаете тему для личного использования, ставить _e() вокруг слова Автор необязательно. Я думаю, функция _e() используется для приспособления тем к переводам, что важно, когда вашу тему просматривают сотни людей из разных стран. Если вы собираетесь создавать темы для широкого использования, лучше использовать _e(), в случае если вам могут понадобиться переводимые темы.

<?php the_author(); ?> — говорит само за себя. Эта функция просто пишет ваше имя (или имя того, кто написал пост).

<br /> — если вам нужна пустая строка, но вы не хотите использовать пустые области, которые дают тэги параграфа, используйте BR. Обратите внимание на слэш /. Это еще один самозакрывающийся тэг.

<?php comments_popup_link(‘NoComments »’, ’1 Comment »’, ‘% Comments »’); ?> — функция comments_popup_link() вызывает всплывающее окно комментариев, когда активирована опция всплывающих комментариев. Если такая опция не активирована, тогда comments_popup_link() просто приведет вас к списку комментариев.

No Comments » — это то, что будет отображаться, если у вас нет комментариев. 1 Comment » — когда у вас есть один комментарий. % Comments &187; — когда у вас более, чем один комментарий. Например, 8 комментариев. Знак процента % здесь означает количество. » — это код, который отображает двойную стрелку ».

<?php edit_post_link(‘Edit’, ‘ | ‘, »); ?> — Вы можете это видеть, только когда авторизованы как администратор. edit_post_link() просто отображает ссылку на редактирование, чтобы вы выбрали какой именно пост необходимо отредактировать. И вам не придется искать во всем списке постов на панели администрирования, чтобы найти нужный. edit_post_link() имеет три набора одинарных кавычек. Первый набор – для слова, которым вы назовете ссылку на редактирование. Если вы используете Edit post, то будет написано Edit post, но не Edit. Второй набор кавычек – для чего-либо, находящегося перед ссылкой. В данном случай для вертикальной линии |; вот для чего существует код &124;. Третья пара одинарных кавычек – для чего-либо, идущего после ссылки на редактирование. В данном случае, после ссылки ничего нет.

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

Продолжение в следующем уроке.

Урок №9. Использование Else, Post ID, Link Title.

Данный урок раскрывает понятия следующих опций, которые вы можете добавить к каждому посту вашего блога: else, ID поста, значение link title. Хотя они не обязательны, все три присутствуют почти в каждой из бесплатных тем, потому что никогда не знаешь, для каких целей люди будут эти темы использовать. Во-первых, не забудьте включить Denwer.

Шаг 1:

Напечатайте следующий код под <?php endwhile; ?>.

?

1 2 3 4

<?php else : ?> <div class="post"> <h2><?php _e('Not Found'); ?></h2> </div>

Вот так: (не забывайте про отступы для правильной организации кода)

Сохраните это, сразу вы не заметите каких-либо изменений — для того, чтобы понять, что вы только что напечатали, нам необходимо вернуться к уроку №6 – Цикл.

Вот цикл:

?

1 2 3

<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?> <?php endwhile; ?> <?php endif; ?>

Во-первых, if(have_posts()) проверяет, есть ли в вашем блоге какие-либо посты. Во-вторых, while(have_posts()) выполняет функцию the_post(), чтобы вызвать ваши посты до тех пор пока они есть. Опция else подразумевает альтернативные действия, которые будут совершаться, если в вашем блоге нет ни одной записи. Представьте, что вы поместили while() и endwhile; между if() и else :. Именно поэтому код <?php else : ?> должен следовать после <?php endwhile; ?>.

Теперь, когда вы знаете, что означает else, что вы скажете делать системе WordPress, когда у вас нет ни одной записи или когда она не может найти ни одной записи? Вы скажете системе отобразить сообщение Not Found. Это может быть любое сообщение — посмотрите на разные сайты в поисках примеров.

Само сообещние и код для Not Found окружены тэгами <h2> и </h2> . Это тоже необязательно. Вы можете просто использовать:

?

1 2 3

<div class="post"> Not Found </div>

Для чего же нужны <div class=»post»> и </div> ? Ну вы же не хотите, чтобы сообщение об ошибке зависло в пустоте, так ведь? Все введенные данные вы разграничивали тэгами <div class=”post”> и </div> . Здесь – то же самое – хотя сообщение об ошибке не является контентом по сути, это тоже текст, как и записи.

Шаг 2:

Добавьте id=»post-<?php the_ID(); ?>» к <div class=»post»>

Сохраните файл и обновите браузер. Сейчас зайдите на View > Page Source или Source. Вы увидите, что теперь у каждого поста есть номер, или ID. Функция the_ID() просто вызывает ID каждой записи.

Зачем это использовать? Чтобы в случае надобности переделать вид любого поста под свои нужды. Позже, когда вы будете использовать файл style.css для стилизации записей, все посты будут выглядеть одинаково. А с уникальным ID, присвоенным каждому посту, вы легко сможете выбрать отдельный пост и сделать так, чтобы он отличался от остальных. Без ID у вас не будет способа дифференциации постов в файле style.css.

Как же вы сможете присвоить и class и id к одному и тому же DIV или невидимому блоку? DIV – это тэг, class – это атрибут. id не является атрибутом. Каждый тэг может иметь несколько атрибутов, в том числе и тэг DIV может иметь и class и id. (Примечание: id –это атрибут xhtml. Тогда как the_ID() — это PHP функция. Не перепутайте — это разные понятия.)

Шаг 3:

Добавьте title=»<?php the_title(); ?>» к ссылке на заголовок поста.

Скриншот выше является частичным скриншотом, чтобы вы могли увидеть, куда поместить код. Сохраните это и обновите браузер. Снова посмотрите исходный код. Найдите все ссылки на заголовки постов. Если линк на заголовок поста Hello World, тогда слева от него должно стоять title=»Hello World».

title=»" – это еще один атрибут xhtml для тэга <a> (линк-тэг). Все, что в кавычках – это описание ссылки. В данном случае, заголовок каждого поста также является описанием ссылки. Вот почему вы снова использовали РНР функцию the_title().

Если вы не используете the_title() как значение для title=»", тогда все ссылки на заголовки будут иметь одинаковое описание. Например, вместо the_title(), вы используете title=»Click me», тогда каждая ссылка на заголовок будет иметь описание Click me.

Сейчас вернитесь на веб-страницу. Наведите курсор на заголовок поста – появится всплывающее окно с описанием. Это то, что вы сейчас сделали. Полезно будет добавить описание к ссылкам, если другие сайты будут сканировать ваш блог. Например,Technorati.com, каждый раз, как вы публикуете заметку, WordPress уведомляет Technorati и другие сайты об обновлениях в вашем блоге. После этого Technorati сканирует ваш блог, составляет резюме, которое включает описание ссылки на заголовок заметки.

В следующем уроке мы рассмотрим ссылки на Следующую и Предыдущую страницы.

Урок №10. Функция Post Nav Link.

Внизу большинства блогов WordPress находятся ссылки на Следующую и Предыдущую страницы. Эти ссылки вызываются функцией posts_nav_link(). В данном уроке будет всего один шаг!

Ну что, мне уже стоит напоминать включить Apache, открыть папку с темой, браузер и файл index.php? :-)

Шаг 1-й: (и единственный):

Добавьте следующий код между <?php endwhile; ?> и <?php else : ?>

?

1 2 3

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

<div class=»navigation»> — начало невидимого блока под именем navigation, разграничивающего области ссылок Следующей и Предыдущей страниц.

<?php — начало PHP posts_nav_link() – вызвать ссылки на Следующую и Предыдущую страницы. ; — прекратить вызов ссылок. ?> — конец PHP </div> — закрыть невидимый блок под именем navigation.

Вот как это выглядит:

Сохраните файл index.php, обновите браузер, чтобы увидеть ссылки Следующая и Предыдущая. По умолчанию, если у вас менее десяти постов, нчиего не появится. Если у вас нет 10-ти постов, но вы хотите видеть эти линки, авторизируйтесь в админ-панели, выберите Параметры > Чтение, затем установите количество, на единицу меньшее числа опубликованных постов на вашем блоге. Например, если у вас 6 постов, установите число 5.

Как кастомизировать функцию posts_nav_link(): как и нескольким другим функциям, которые мы рассматривали на уроке Мета-данные поста., вы можете присвоить функции posts_nav_link() три набора… чего-либо, что вы хотите видеть перед, между и после ссылок на Предыдущую и Следующую страницы. Это выглядит так:

<?php posts_nav_link(‘между’,'перед’,'после’); ?>

Первая пара одинарных кавычек служит для отделения того, что будет между ссылками Следующая и Предыдущая. Вторая пара – для того, что будет идти перед ними. Ну и, наконец, третья пара – для того, что будет идти после ссылок.

Вот простой пример оформления функции posts_nav_link():

Урок №11. Сайдбар (и категории).

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

Перед тем, как приступить к сайдбару, посмотрите как должен выглядеть ваш файл index.php.

Шаг 1

Сначала поместим блок с классом sidebar вокруг всего в сайдбаре. Вставьте этот код под блоком container и над тэгом </body>:

<div class=»sidebar»>

</div>

Шаг 2

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

<ul> — открыть ненумерованный список

</ul> — закрыть ненумерованный список

Шаг 3

Добавьте элемент списка (LI) в ненумерованный список (UL) и поставьте подзаголовок в этот элемент (LI).

<li><h2><?php _e(‘Categories’); ?></h2></li>

<li> — открыть элемент списка <h2> — открыть подзаголовок <?php _e(‘Categories’); ?> — напечатать слово Categories </h2> — закрыть подзаголовок </li> — закрыть элемент списка

Еще раз, вам не нужно ставить <?php e(‘ ‘); ?> вокруг слова Categories. Если вы делаете эту тему для себя, достаточно будет иметь подзаголовок <h2>Categories</h2>

Сохраните файл index.php и обновите браузер. Вы должны увидеть подзаголовок Categories.

Небольшая черная точка перед подзаголовком указывает, что он находится в элементе списка (LI). Если у вас два элемента в ненумерованном списке (UL), точек будет две. Как маркировка в обычном списке, помните?

Шаг 4

Добавьте следующий код в элемент списка:

<ul> <?php wp_list_categories(‘sort_column=name&optioncount=1&hierarchical=0′); ?> </ul>

Вот что это значит:

<ul> — открыть еще один ненумерованный список <?php wp_list_categories(); ?> — вызвать список ссылок на категории </ul> — закрыть ненумерованный список

Сохраните и обновите браузер. Вот как выглядят мои ссылки на категории:

У вас категорией по умолчанию будет Uncategorized. Если вы не создавали никаких категорий в блоге, то ваш список будет состоять только из одной ссылки — Uncategorized.

Дополнительные опции:

• sort_column=name – сортировать ссылки на категории по алфавиту

• optioncount=1 – отображать количество постов, созданных в каждой категории

• hierarchial=0 – не ставить подкатегории в отдельный подпункты списка, это объясняет, почему моя ссылка Суб-категория расположена на первом уровне списка.

• & — каждый раз, как вы добавляете новый атрибут, вы должны ставить знак & перед ним, чтобы разграничить его от остальных атрибутов. Например, & стоит между sort_column и optioncount.

Почему мы не ставили тэги <li> и </li> вокруг <?php wp_list_categories(); ?>:

Когда вы вызываете список категорий с помощью функции wp_list_categories(), тэги <li> и </li> автоматически прикрепляются к каждой ссылке. В браузере зайдите на View > Page Source или CTRL-U; когда появится всплывающее окно, наведите курсор вниз, чтобы увидеть код списка категорий; обратите внимание, что вокруг каждой ссылки есть тэги элементов списка.

Работая с сайдбаром, неупорядоченным списком и элементом списка, важно помнить правило #1: закрывайте все теги в том порядке, в каком открывали!