Сегодня мы рассмотрим понятие «мета-данные поста» или постметаданные: дата, категории, автор, количество комментариев, то есть любую информацию, прикрепленную к каждому посту.
Мы уже на восьмом уроке, так что смею надеяться, вы уже разобрались в основных принципах работы с темами WordPress. Вы заметите, что мои инструкции будут сгруппированы в более крупные блоки (меньше шагов). Перед тем как мы начнем, включите Denwer, откройте папку с темой, браузер, и файл index.php.
Вот, что должно быть в вашем файле index.php на данном этапе:
<!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».
Продолжение в следующем уроке.
“% Comments &187″ – тут (в конце поста) пропустил “#”.
“…для чего существует код &124″ – тоже самое :)
Отличные уроки, браво!
Столкнулся со следующей проблемой.
После вставки данных из файла postmetadata.txt понял, что у меня не все гладко с кодировкой. Страница отображает постметаданные в виде абракадабры. Поставил кодировку windows-1251 вместо utf-8 постметаданные стали отображаться правильно, но теперь в виде абракадабры весь блок header. Как можно исправить кодировку?
Для Дмитрия – Файл, который редактируешь нужно сохранить в UTF-8.
К сожалению упустил вопрос Дмитрия.. Евгений прав – нужно сохранить header.php в UTF-8 без BOM и всё заработает. Ни в коем случае не нужно менять кодировку темы на любую другую.
По-моему я что-то упустил?! Откуда взялся header.php?
имеется ввиду index.php
А мне не помогло с перекодировкой(( переставляю в редакторе(notepad++) на UTF-8(Без ВОМ) у меня не только на страничке у меня в самом редакторе весь русский шрифт поплыл, только с ANSI в редакторе все хорошо, а в броузере значки вопросов.
Также жду ответа на вопрос по 6-му уроку(там и находится).
Спасибо, очень позновательно!
Артем, Дмитрий, нужно не просто изменить кодировку редактора, а конвертировать её в соответствующую.
Артем, на ваш вопрос ответил там-же =)
Аналогично, с кодировкой проблема.
Сохранение index.php в UTF-8 не помогает(
Дмитрий, я изменил кодировку в Word. Открываете свой style.css или index.php в Word. Дальше – Файл, Сохранить как, Сохранить. Всплывает окошко Преобразование файла. Там выбираете кодировку UTF-8. Это окошко может всплыть и при открытии файла, если кодировка не стандартная.
Павел, всё-же я настойчиво рекоммендую использовать специализированные HTML-редакторы.
Спасибо.
У меня не получилось! Кодировка не меняется все также! Сохраняю файл в Dreamweave и все равно абракадабра! Не нашел в комментариях решения проблемы!
ОЙ… Теперь все решил! Получилось!
<meta http-equiv="Content-Type" content="; charset=” />
<meta name="generator" content="WordPress ” />
<link rel="stylesheet" href="” type=”text/css” media=”screen” />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="” />
<link rel="alternate" type="text/xml" title="RSS .92" href="” />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="” />
<link rel="pingback" href="” />
“>
<a href="”>
Вылазит за контейнер с содержимым урока.
Парень я тебе очень благодарен :) Уже читал на англиском )) а ты порадовал меня ппц :))
Очень просто, мне придельно все понятно )
ничего не выходит(( когда я копировала исходный текст, обнаружила, что он нормально просматривается в кодировке windows, а в юникоде выглядит как раз вопросиками. может в этом суть? может поэтому изменение кодировки в дримвивере ни к чему не приводит?
короче, я просто вручную ввела те данные, вместо которых были вопросики))
Спасибо за уроки! Но столкнулся с проблемами.
При копировании содержимого ссылок index.txt в предидущих уроках. Оно просто не отобразилось пришлось через браузер смотреть содержимое HTML и его копировать.
При копировании же postmetadata.txt
столкнулся с проблемой что отображается
.
вот такой код и дальнейшее объяснение становится непонятным потому что после вставки кода страница говорит об ошибке. Видимо где то не закрыт тег.
А вообще спасибо за уроки!
Были бы полезны скриншоты кода который должен получиться тогда можно будет самостоятельно посмотреть….
Извините теги все закрываются просто у меня гугл панель автоматически переводила код на русский язык))
но кодировка тоже подвела…
Очепятка:
Продолжение в слУдующем уроке.
Уроки ОТЛИЧНЫЕ! Большое Спасибо Автору!
Спасибо большое, стараюсь. Опечатку поправил.
Урок пройден.
Уроки отличные. Спасибо большое. Но как вставлять дату в данном уроке не увидел (=
“% Comments &187; – когда у вас более, чем один комментарий. Например, 8″, решетку пропустил, мелочь, но запутать может.