Шаг 5. Файл стилей.
Скопируйте все в файле style.txt в ваш файл style.css. Cохраните и закройте его.
Шаг 6. Установка вашей темы.
Откройте браузер. Наберитете в адресной строке: http://wordpress/wp-login.php. пройдите по этому адресу и авторизируйтесь в админзоне WordPress (у вас появится доступ в странице авторизации).
В админке кликните на Presentation, далее кликните на теме под названием Tutorial, чтобы активировать её.
Обратите внимание, маленького скриншота к вашей теме пока нет. Область пуста. Когда вы активируете тему, вверху вы увидите сообщение, что тема активирована.
Теперь откройте новое окно браузера или вкладку (если ваш браузер позволяет открывать вкладки). Зайдите на http://wordpress/ должна открыться пустая страница. Она должна быть совершенно пустой, если это не так, вы зашли не на ту страницу.
Ваша тема установлена. На этом пока все. В следующий раз мы начнем работать над шаблоном хедера.
Не забудьте выключить Denwer. Дважды кликните на ярлык Stop Denwer на рабочем столе. Сервер остановит работу.
Если у вас возникают вопросы, не стесняйтесь задавайть их в комментариях.
Урок №4. Шаблон хедера.
Если вы здесь впервые, советую начать курс «Создание тем для WordPress» сначала. На прошлом занятии я показал вам, как установить локальный сервер Apache и MySQL базу данных, установить WordPress и вашу новую тему, и ознакомил вас с РНР. Сегодня мы продолжим рассматривать РНР и научимся вызывать заголовок вашего сайта или блога.
Я советую набирать код вручную. Если будете копировать и вставлять коды, которые я вам даю − не запомните как это делать самостоятельно. А ведь главное, чтобы вы запоминали то, что учите − в этом суть любого учебного курса. Готовы?
Шаг 1.
Включите Denwer. Затем откройте папку с вашей темой. Напоминаю, она находится в home/wordpress/www/wp-content/themes/tutorial. Там вы должны увидеть два файла, которые вы создали на прошлом уроке: index.php и style.css.
Содержимое данных файлов должно совпадать с файлами index.txt и style.txt соответственно.
Шаг 2.
- откройте новое окно браузера. Зайдите на http://wordpress/. вы должны увидеть пустую страницу, потому что вчера вы установили пустую тему;
- снова зайдите в папку с темой и откройте файл index.php в редакторе;
Сейчас у вас должны быть открыты папка с темой, браузер и файл index.php (открытый в редакторе).
Шаг 3.
В файле index.php, открытом в редакторе напечатайте:
<?php bloginfo(‘name’); ?> между тэгами <body> и </body>. Сохраните файл.
Обновите окно вашего браузера. Вы должны увидеть заголовок вашего блога. Заголовок моего − «Разработка тестовой темы».
Что произошло?
Вы добавили строку РНР кода в ваш файл index.php в области <body> вашей страницы. Эта строка вызвала информацию о вашем блоге, так называемую bloginfo(). В частности, строка вызвала заголовок вашего блога. Название, которое вы задали как заголовок на странице настроек.
<?php — начало PHP bloginfo(‘name’) – вызвать информацию о блоге, в частности его заголовок ; - конец оператора bloginfo ?> — конец PHP кода
Каждый раз, когда вы что-то изменяете в файле index.php, сохраняйте его, а потом обновляйте веб-страницу, чтобы изменения отобразились.
Шаг 4.
Чтобы преобразовать заголовок блока в текстовую ссылку потребуется XHTML тэг. Снова зайдите в файл index.php.
Добавьте <a href=»#»> и </a> в ту же линию. Вновь созданная линия кода будет выглядеть так:
<a href=»#»><?php bloginfo(‘name’); ?></a>
Вернитесь в браузер, обновите окно и вы увидите, что заголовок вашего блога стал ссылкой.
Сейчас это ссылка, но она никуда не приведет. Так как это заголовок вашего блога, думаю, вы хотели бы, чтобы он ссылался на первую страницу, ведь так? Чтобы сделать так, вставьте:
<?php bloginfo(‘url’); ?> в кавычках после href=
Сохраните файл, это должно выглядеть так: <a href=»<?php bloginfo(‘url’); ?>»><?php bloginfo(‘name’); ?></a>
Снова вернитесь браузер и обновите страницу. Теперь, когда вы наведете курсор на линк, в строке статуса будет указано http://wordpress/:
Сейчас, когда вы кликните на этой ссылке, вы попадете на первую страницу вашего блога. Пока вы увидите ту же самую страницу, но разница в том, какой адрес ссылки будет указан — # или http://wordpress/ — очевидна :)
Что сейчас произошло?
Вы преобразовали заголовок вашего сайта в ссылку на первую страницу вашего блога, или так называемую, домашнюю страницу.
bloginfo(‘url’) — вызвать блогинфо, в частности адрес, или URL, первой страницы блога. <a> — это XHTML тэг для открытия ссылки. </a> — это закрывающий тэг для ссылки. Если этого тэга нет, ваша веб-страница не будет знать, где заканчивается линк, и остальная часть веб-страницы будет одним сплошным линком. Помните правило №1? Зыкрывайте все, что вы открываете. href — это сокращенние от «hypertext reference /гипертекстовая ссылка». Все, что находится между значками «» атрибута href=»" — это значение параметра.
Выражаясь словами, код:
<a href=»<?php bloginfo(‘url’); ?>»><?php bloginfo(‘name’); ?></a>
означает: я начинаю ссылку, значение ссылки — это URL моего блога; я использую РНР функцию bloginfo(‘url’), чтобы вызвать его адрес; название(анкор) ссылки — это заголовок моего блога; я использую РНР функцию bloginfo(‘name’), чтобы вызвать заголовок моего блога; закрыть ссылку.
Сегодня я вводно ознакомил вас с функиональностью шаблона хедера, на этом я заканчиваю свой урок. Этого достаточно, чтобы вы не перегружали себя информацией.
Если у вас возникли вопросы, не стесняйтесь задавать их в комментариях.
Урок №5. Еще о шаблоне хедера.
Итак, это уже пятый урок курса «Создание тем для WordPress». Наверное, это уже не стоит говорить, но все же в последний раз напомню — не забудьте прочесть предыдущие уроки перед тем, как рассматривать следующий. Иначе, вы ничего не поймете. Сегодня на этом кратком уроке мы подытожим все, что узнали о шаблоне хедера и ознакомимся с блоковой версткой.
Шаг 1:
запустите сервер Apache
откройте папку с вашей темой, под именем Tutorial
откройте браузер, зайдите на http://wordpress/
вернитесь в папку с темой, откройте файл index.php в редакторе
Шаг 2:
На данном этапе вы должны увидеть:
?
1 |
<a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a> |
Добавьте <h1> и </h1> в начале и в конце строки. Тэг <H1> означает заглавие №1. Вообще, существует 6 заглавий: Н1, Н2, Н3, Н4, Н5 и Н6. По умолчанию, Н1 — самый большой по размеру тэг, а Н6 — самый маленький. Теперь строка кода выглядит так:
?
1 |
<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1> |
Сохраните файл, вернитесь в браузер и обновите окно.
Шаг 3:
Вызовите описание вашего блога, напечатайте <?php bloginfo(‘description’); ?> сразу под кодом ссылки на заголовок. Должно получиться так:
?
1 2 |
<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1> <?php bloginfo('description'); ?> |
Сохраните это, обновите браузер, чтобы описание вашего блога отобразилось под ссылкой на заголовок. Позже вы сможете поменять описание блога в админ панели.
<?php — начало PHP; bloginfo(‘description’) — вызвать информацию о моем блоге, в частности описание; ; — прекратить вызов описания; ?> конец PHP.
Шаг 4:
этот шаг ознакомит вас с новым тэгом — DIV. Напечатайте <div> и </div> в начале и в конце всего, что уже есть в файле. Вот так:
?
1 2 3 4 |
<div> <h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1> <?php bloginfo('description'); ?> </div> |
Сохраните это, обновите окно браузера. Вы не должны увидеть каких-либо изменений.
Представьте, что DIV — это невидимый блок. Он существует для того, чтобы отделить ссылку на заголовок блога и описание блога от всего остального. Если вы не оформляете его, он не исполняет никаких функций, кроме разделения контента. Позже, вы научитесь использовать файл style.css для придания невидимому блоку собственного стиля. DIV можно оформить границами, текстурами, полями, фоновыми цветами, картинками и прочим.
Шаг 5:
Добавьте id=»header» к тэгу DIV, вот так:
?
1 |
<div id="header"> |
Сохраните файл, обновите окно браузера.
Это изменение также пока ни к чему не приведет. Мы присвоили ID тэгу DIV, потому что тот тэг не будет единственным — появятся еще такие же невидимые блоки. А ведь нужен способ, чтобы как-то их разграничить, так? Об этом в следующих уроках.
Урок №6. Цикл — The Loop
Цикл вызывает записи в вашем блоге. Это самый важный набор РНР кодов. К этому времени вы уже знаете, что нужно сделать перед тем, как начать этот урок. Приступайте. Сначала сделайте это, а потом мы сделаем краткий обзор того, что вы выучили к этому моменту.
Итак, вы уже знаете:
правила, структуру и иерархию тем WordPress
из чего состоит каждая страница
как установить тему
как вызвать заголовок блога и сделать его ссылкой
как вызвать описание блога и отделить хедер от всего остального
А теперь, собственно, урок №6:
К этому моменту, у вас должен быть открыт Denwer, папка Tutorial, страница http://wordpress/ и файл index.php в редакторе.
То, что должно быть у вас в файле index.php:
Помните, чтобы хорошо запомнить коды, печатайте все, не используйте «копи-паст»!
Шаг 1:
Добавьте DIV (невидимый блок) под зону хедера. Присвойте ему «контейнер» для ID, вот так:
<div id=»container»>
</div>
Для чего этот DIV тэг? Для того, чтобы отделить ваш контент от всего, что идет после него, например от сайдбара или футера.
Шаг 2:
Добавьте следующие коды между DIV тэгами. Постарайтесь напечатать все в точности, как сейчас видите на экране. Если будут ошибки, напечатайте снова.
?
1 2 3 4 |
<?php if(have_posts()) : ?> <?php while(have_posts()) : the_post(); ?> <?php endwhile; ?> <?php endif; ?> |
С этого момента вы будете узнавать код, вместо того, чтобы разбираться в каждом отдельном коде. То, что вы сейчас напечатали в WordPress называется циклом. Перед тем, как я объясню словами, что это значит, вы должны получить следующее:
Обратите внимание, я сделал отступы каждой строки внутри контент-бокса. Это делается для правильной организации кода, чтобы облегчить его «читаемость». Недостаточно просто напечатать код, его нужно уметь организовать, чтобы позже вы могли сразу знать, что где находится и к чему относится каждый из наборов кодов. Для отступов используйте клавишу Tab вместо пробелов.
Что сейчас произошло?
if(have_posts()) — проверить есть ли у вас пост;
while(have_posts()) — выполнять функцию the_post(), пока у вас есть какой-либо пост в стеке;
the_post() — отобразить пост;
endwhile; — вспоминая правило №1, это значит закрыть while();
endif; — закрыть if();
На заметку: не все наборы кодов требуют две части, чтобы открываться и закрываться. Некоторые могут закрываться сами, что объясняет have_posts() и the_post();. Из-за того, что код the_post(); находится за пределами if() и while(), ему необходимы собственные точка с запятой, чтобы закрыться.
Шаг 3:
На предыдущих уроках вы узнали, как вызвать заголовок блога, используя bloginfo(‘name’). Сейчас вы научитесь, как вызвать заголовки постов в пределах Цикла.
Наберите <?php the_title(); ?> после the_post(); ?> и перед <?php endwhile; ?>
Сохраните файл index.php, обновите окно браузера. Вы должны увидеть Hello World под описанием блога. По умолчанию в вашем блоге всего один пост. У меня, например, в тестовом блоге есть несколько постов, так что у меня и несколько заголовков. Из-за того, что заголовки, которые я использовал одинаковы, и на этом этапе еще не организованы, это выглядит как одна сплошная строка из слов Hello World.
Шаг 4:
превращаем заголовки постов в ссылки на заголовки. Помните, как вы превращали заголовок блога в линк? Здесь то же самое — добавьте <a href=»#»> и </a> вокруг <?php the_title(); ?>
Сохраните файл index.php и обновите браузер. Сейчас ваши заголовки стали ссылками, но они никуда не приведут. Чтобы привязать каждый пост-линк к нужному посту, вам нужно заменить знак # на the_permalink().
?
1 |
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> |
the_permalink() - это РНР функция, которая вызывает адрес, или расположение, каждого поста. Сохраните и обновите окно. Если у вас остался только один заголовок Hello World, наведите курсор на этот линк, посмотрите в строку статуса внизу браузера, там уже не написаноhttp://wordpress/#.
Если у вас больше, чем один линк, вы увидите, что каждая ссылка привязана к разным постам или веб-страницам. Но ссылки на наши заголовки все еще в одной линии. Чтобы разделить их, добавьте тэги <h2> и </h2> вокруг кодов ссылки.
?
1 |
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> |
Помните Н1, который мы использовали для заголовка блога? Это название вашей веб-страницы. Н2 используется для подзаголовков. Теперь, когда каждая из ваших ссылок на заголовки постов стали подзаголовками, они получили собственную линию. Сохраните файл index.php и обновите окно браузера, чтобы увидеть изменения.
Это конец урока. Сейчас у вас должно быть примерно следующее:
Примечание: попробуйте сделать несколько пробных постов, чтобы протестировать вашу тему. Зайдите на http://wordpress/wp-login.php, авторизируйтесь, кликните на вкладке Write, сделайте пост, потом сделайте это еще несколько раз. Вы можете называть их Hello World, как это делал я, а можете давать собственные названия.