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

Сегодня мы будем адаптировать шаблон для вывода одиночной записи или страницы, а также настроим вывод сообщения 404, и форму поиска.

Приступим.

Сделаем шаблон для вывода страницы записи single.php

Просто скопируем файл index.php, и немного его адаптируем.

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

 <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> 

Станет

 <h2><?php the_title(); ?></h2> 

Теперь, чтобы немного изменить вид шаблона single.php, давайте добавим под заголовком автора и дату публикации.

Нужно вставить следующий небольшой код.

<div class="postedby"> Posted by <?php the_author_posts_link(); ?> on <?php the_time(); ?></div> 

<?php the_author_posts_link(); ?> — выводит имя автора с ссылкой на все его публикации

<?php the_time(); ?> — выводит дату, можно задавать формат, по умолчанию берет его из настроек

Вот как вывелась наша запись

kak-natyanut-html-shablon-na-wordpress-single.png

Получилось нормально. Просто нужно немного выровнять расположение блока с помощью следующего правила CSS

.postedby {padding-left: 15px;}

.

Не хватает на этой странице навигации на предыдущую и следующую записи. Нужно это также сделать и для главной.

Постраничная навигация для шаблона single.php

<div class="pagenavi"><?php previous_post_link(); ?> | <?php next_post_link(); ?></div>

Функции

<?php previous_post_link(); ?>

и

<?php next_post_link(); ?>

по умолчанию без задаваемых аргументов возвращают название (title) для предыдущей и следующей записи.

Постраничная навигация для главной страницы. Вставьте в index.php

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

Вот как выглядит результат. Я специально добавил еще записи через админку, чтобы образовались несколько страниц.

kak-natyanut-html-shablon-na-wordpress-index-pagenavi.png

Как финальный шаг, я бы выровнял эти ссылки по правому краю, с небольшим отступом:

.pagenavi {float: right; padding-right: 15px;}

к содержанию ↑

Сделаем шаблон для страниц — page.php

Во многом он будет совпадать с выводом записи, поэтому просто копируем single.php.

Давайте уберем автора, дату, и постраничную навигацию, потому что это неважно для вывода записей типа страницы.

Думаю, вы знаете как это сделать. Если сомневаетесь, прочтите предыдущие абзацы, и/или посмотрите на скриншоте как выглядит готовый файл page.php.

к содержанию ↑

Сделаем шаблон для страницы ошибки 404

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

Вместо динамического вывода записи, выводим сообщение об ошибке, что запрашиваемая страница не найдена.

<h3>Ошибка 404!</h3> <p>Нет такой страницы, уважаемый. Вернитесь на <a href="<?php bloginfo('home'); ?>">Главную</a>.</p>

Можно задать отдельный класс (page404) в основной блок, чтобы выровнять сообщение по центру.

к содержанию ↑

Теперь давайте настроим работу формы поиска

Добавим форму поиска через встроенный в WordPress виджет. Если есть файл searchform.php, виджет использует форму из него.

Создадим данный файл, и внесем в него код.

<div class="searchbar"> <form name="search" method="get" action="<?php bloginfo('url'); ?>"> <input type="text" name="s" value="Search&#x2026;" /> <input type="submit" name="submit" value="Search!" /> </form> </div>

Обратите внимание на функцию

<?php bloginfo('url'); ?>

, — иначе поиск может не сработать.

к содержанию ↑

Подведение итогов

Итак, у нас есть вот такой шаблончик, который мы конвертировали в рабочую тему WordPress.

kak-natyanut-html-shablon-na-wordpress-tema-simplefactorial.png

Мы видим, что виджет поиска нуждается в доработке стилей. Но сейчас мы этого не будем делать. На самом деле, я рекомендую подключить другой поиск, от Яндекс или Google, для которых есть подробные руководства.

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

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

Пишите ваши комментарии, буду рад их прочитать и ответить.

Оставить комментарий

avatar
  Подписаться  
Уведомление о