Создание шаблона WordPress: как сделать специальную (уникальную) страницу для сайта

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

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

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

Создание шаблона (файла с расширением php) для уникальной страницы WordPress

Итак, есть необходимость создания специальной страницы для вебсайта, управляемого движком WordPress. Для начала вы должны представить себе, как она будет выглядеть. Можно взять для простоты шаблон какой-либо стандартной страницы темы, например, отредактировать содержание файла page.php, который отвечает за отображение статических страниц ресурса.

Прежде чем начать, ознакомьтесь с соответствующей статьей, в которой я писал об иерархии шаблонов и о взаимодействии WordPress с файлами текущей темы. Если говорить о порядке обращения Вордпресс, то механизм CMS (Content Menegment System) поначалу осуществляет поиск уникальной (специальной) страницы и только в случае ее отсутствия обращается к файлу page.php, который определяет формирование стандартной для данной темы статической web-страницы.

Но за основу шаблона для новой страницы не обязательно брать файл page.php, можно создать ее на основе главной (index.php), шаблона страницы записей (single.php), шаблона архивов (archive.php) и т.д., тут вступает в силу ваше творческое начало.

Переходим к практическому выполнению поставленной задачи. Для начала сделаем шаблон для будущей вебстраницы. Как я уже сказал, буду описывать создание шаблона для пользовательского поиска Google. Я решил взять за основу шаблон page.php, поскольку он более всего подходил для моих целей, а именно: для поиска нужна была статическая web-страница, на которую не выводились бы WordPress комментарии.

Итак, открываем программу notepad plus plus, которая является идеальным средством для создания и редактирования текстовых файлов. Устанавливаем ftp соединение с сервером хостинга и в директории текущей темы создаем пустой файл с расширением php. Название можете дать любое (желательно, конечно, чтобы оно сочеталось с выбранной темой будущей вебстраницы). В моем случае вновь созданный шаблон назван poisk.php.

Для этого необходимо кликнуть по папке с названием текущей темы и из появившегося контекстного меню выбрать «Create new file», как показано на выше расположенном скриншоте. Далее появится диалоговое окно и в нем прописываете имя файла для создаваемого шаблона (не забудьте указать расширение php).

Нажимаете «ОК» и дело в шляпе. В результате этих действий в списке файлов вашей темы будет присутствовать только что созданный шаблон (poisk.php).

Однако этот файл пока пустой. Для его заполнения необходимо загрузить его на компьютер. Чтобы осуществить это, нужно кликнуть по нему левой кнопкой мышки, затем нажать зеленую стрелку, направленную вниз. Файл отразиться в левой части окна редактора notepad++.

HTML и PHP редактор notepad++ имеет множество полезных функций, в том числе способы отображать сразу несколько файлов в виде вкладок подобно тому, как мы открываем несколько вебстраниц в браузере. Поэтому тут же можно загрузить файл одного из шаблонов темы, который мы будем копировать (в данном случае page.php). Также выделяем его, кликнув левой кнопкой мыши и нажав на ставшую после этого активной зеленую стрелку.

В результате два файла шаблонов page.php и poisk.php окажутся на соседних вкладках в левой части окна. Теперь в файле шаблона вновь формируемой web-страницы (poisk.php) в самом верху прописываем такую строчку:

<?php /*Template Name: Poisk*/ ?>

Эта строка является кодом вызова шаблона для соответствующей специальной страницы WordPress. Вместо «Template Name: Poisk» вы можете подставить свое название.

Редактирование шаблона, созданного на основе одного из стандартных файлов текущей темы WordPress

Теперь открываем в том же notepad plus plus файл шаблона page.php (или любой другой, на основе которого вы хотите создать специальную страницу), копируем его содержание и вставляем во вновь созданный файл (poisk.php). У меня он приобрел следующий вид после всех выше описанных телодвижений:

<?php
/*
Template Name: Poisk
*/
?>
<?php get_header(); ?>
<?php get_sidebar(); ?>
<div id="main-block">
    <div id="content">
        <?php if (have_posts()) : ?>
          <?php while (have_posts()) : the_post(); ?>
            <div class="post page" id="post-<?php the_ID(); ?>">
                <div class="title">
                    <h2><a href="<?php the_permalink() ?>" rel="bookmark"
 title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
                </div>
                <div class="entry">
                    <?php the_content('Continue reading &raquo;'); ?>
                </div>
                <div class="link-pages">
                    <?php wp_link_pages() ?>
		</div>
            </div>
                <?php endwhile; ?>
            <p><?php next_posts_link('&laquo; Previous Entries') ?> 
<?php previous_posts_link('Next Entries &raquo;') ?></p>
        <?php else : ?>
            <h2 class="t-center">Not Found</h2>
            <p class="t-center">Sorry, but you are looking for something that
 isn't here.</p>
        <?php endif; ?>
    </div>
    <?php get_footer(); ?>

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

<?php get_sidebar(); ?>

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

<?php get_header(); ?>

функция вызова шапки

<?php get_footer(); ?>

функция вызова подвала

Идем дальше. Если в скопированном коде есть лишние элементы, заключенные в какие-либо теги и вы не хотите, чтобы эти элементы отображались на специальной вебстранице, то их тоже следует удалить из php-кода. Кстати, если вы не знакомы с премудростями языка php, ничего страшного в этом нет. Основные функции, касающиеся применения php в файлах темы WordPress, сосредоточены на соответствующей странице codex. Неудобство состоит в том, что еще не все материалы корректно переведены на русский язык, но, думаю, для тех, кто по-настоящему хочет разобраться, это не помеха. Эта информация очень поможет в дальнейшем, уверяю вас.

Но вернемся к теме публикации. Напомню, что при редактировании файла poisk.php мной была удалена функция вызова сайдбара, в дальнейшем я изменю еще некоторые участки кода, но сначала создадим страницу в админ панели WordPress, чтобы получить ссылку на нее.

Создание уникальной страницы в админ панели WordPress (на примере страницы пользовательского поиска Google)

Полностью шаблон для уникальной страницы пока не готов, мы только скопировали содержание page.php в пустой файл poisk.php и удалили функцию вызова сайдбара, который совершенно лишний на странице поиска. В качестве следующего шага создадим обычным образом статическую страницу, наполним ее контентом (содержанием) и свяжем с шаблоном, чтобы данная вебстраница правильно отображалась в браузере.

Для этого заходим в админку для управления сайтом WordPress в раздел «Страницы»→«Добавить новую». В поле заголовка можно вписать название будущей страницы, которое впоследствии будет появляться на ней и вписать нужные слова в изменяемую часть постоянной ссылки:

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

Еще раз напомню, что целью этой публикации является наглядная демонстрация по применению алгоритма формирования любой уникальной вебстраницы, страница пользовательского поиска Google служит просто примером. После выше описанных действий видим, что в правой части раздела создания статической страницы админ панели WordPress расположено выпадающее меню. Раскрыв его, находим название шаблона, который был сделан специально для этой web-страницы (в моем случае это poisk):

Выбираем нужное название шаблона, в результате при переходе по ссылке свежеиспеченной страницы (нажмите ссылку «Просмотреть страницу») мы получаем ее внешний вид, который определен соответствующим шаблоном. В случае примера со страницей поиска Google на моем блоге она будет иметь такой вид:

Как видите, это не совсем то, что нужно. Убрав сайдбар, я не достиг конечной цели, которая состояла в том, чтобы получить все пространство под шапкой сайта для отображения результатов поиска. Посмотрим, что можно сделать для решения этой задачи. Обычно я работаю с сайтом в Chrome (скачать бесплатно последнюю версию, установить и настроить Гугл Хром), поэтому воспользуюсь замечательным встроенным инструментом для редактирования HTML и CSS кода, который является аналогом инструмента Firebug (как установить, скачать и пользоваться этим расширением) для Мазила Фаерфокс (об этом браузере есть мануал).

Для вызова этого инструмента можно просто нажать F12, в результате чего внизу откроется окно, где слева расположен html код, а справа CSS стили.

Как видите, ширина полезной площади определяется контейнером div с идентификатором id=“main-block”. Ясно, что нужно увеличить значение свойства width, указав его равным ширине шапки сайта. Но для идентификатор «main-block» определяет ширину элемента всех страниц блога, поэтому простое механическое увеличение значения width ничего не даст, поскольку вызовет искажение других web-страниц в браузере.

Поэтому мы пойдем другим путем и создадим контейнер div с другим идентификатором только для данной специальной страницы поиска, назвав его, скажем «block-searh». Пропишем следующий набор свойств в файле style.css. Кстати, для пробы это можно сделать прямо онлайн в левой стороне окна редактирования, предварительно кликнув по ссылке на style.css в правой части.

Я добавил следующий набор свойств для идентификатора «block-searh», как видно из скриншота:

#block-search {
  width: 100%;
}

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

Теперь с легким сердцем можно вносить реальные изменения, открыв style.css в том же notepad++. Но у нас осталось еще одно незавершенное дело. В файле page.php фигурирует div контейнер с id=“main-block”, а так как мы скопировали его содержание в poisk.php, то значит, WordPress будет учитывать этот идентификатор. Поэтому в файле poisk.php меняем идентификатор «main-block» на «block-search». Ниже на скриншоте представлю все окончательные изменения, произведенные мной в файле poisk.php.

Теперь полностью адаптированный файл шаблона poisk.php после всех необходимых изменений выглядит следующим образом:

<?php
/*
Template Name: Poisk
*/
?>
<?php get_header(); ?>
<div id="block-search">
    <div id="content">
        <?php if (have_posts()) : ?>
	    <?php while (have_posts()) : the_post(); ?>
            <div class="post page" id="post-<?php the_ID(); ?>">
               <?php the_content('Continue reading &raquo;'); ?>
                 <?php wp_link_pages() ?>    
	    </div>
               <?php endwhile; ?>
            <p><?php next_posts_link('&laquo; Previous Entries') ?> 
<?php previous_posts_link('Next Entries &raquo;') ?></p>
        <?php else : ?>
            <h2 class="t-center">Not Found</h2>
            <p class="t-center">Sorry, but you are looking for something that 
isn't here.</p>
        <?php endif; ?>
    </div>
    <?php get_footer(); ?>

В принципе, этот вариант для страницы пользовательского поиска Google является универсальным и c небольшими изменениями может быть использован на любом блоге WordPress. Только, естественно, нужно применить свои идентификаторы для контейнеров div. Ну вот, пожалуй, на сегодня и все. Не побрезгуйте в конце поста нажать на какую-нибудь из социальных кнопок.