Не пугайтесь, хоть нам и придётся поработать немного с кодом и php-ными файлами, но создание шаблона для страницы WordPress действительно простое занятие!
Что такое шаблон страницы и для чего он нужен
Ответ очень простой, все страницы блога идентичны друг другу: есть header (шапка), fotter (подвал), sidebar (боковая колонка) и основная часть контента. Так выглядят практически все блоги! Но что делать, если данный формат для определённой странице не подходит?
Менять и ещё раз менять! Блог — это огромный комплекс всевозможных медиафайлов, различного контента и творческого подхода к работе автором, а значит и каждая страничка должна быть как лакомый кусочек для эстета, как ограненный алмаз в дорогой оправе, ну как минимум яркой композиций одного целого произведения! Вот я загнул!
Когда же в действительности может понадобиться создание отдельной страницы на блоге wordpress? Примеров привести можно бесконечное множество!
Это может быть: отдельная страница landing page (сайт одностраничник) для рекламы собственных инфо-продуктов, новой книги, написанной вами или же видео, которое требует отдельного оформления
страница с отдельным оформлением или дизайном, если того требует контент. Такое оформление чаще всего используют на страницах с отдельным функционалом (различные сервисы, подключенные к сату: тесты, например)
страница с поиском, с которой мы и будем работать.
Мне пришлось создавать отдельную страницу, и причиной тому стала особенность Google поиска! Если вы читали предыдущую статью, как установить Google поиск на сайт, то обратили внимание на то, что поиск выставляет определённую ширину для страницы 800 px, уменьшить это значение можно, но до 795 px.
Теперь давайте посмотрим на любой блог на wordpress, какую рабочую зону для контента оставляют блоггеры? На моем сайте она равна 650 px — основная часть и 300 px — сайдбар, который так и хочется убрать. Именно это мы и будет делать на отдельной странице!
Итак, приступаем! Для начала открываем админку нашего блога, интересовать нас будет раздел «Внешний вид», далее «Редактор». Создавать страницу мы будем на основе уже готового файла php, а именно page.php. Копируем целиком и полностью содержание данной страницы и вставляем в заранее открытый новый файл редактора NotePad++!
Теперь нам придётся немного поработать с данным кодом. Для начала уберём сайдбар, для этого без промедлений удаляем строчку:
<?php get_sidebar(); ?>
Содержимое страница нам тоже не понадобиться, так что удаляем всё, начиная с
<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
и заканчивая, как показано на картинке.
<!-- .container -->
Вместо данного кода мы вставим предоставленный код Гуглом.
Но и это ещё не всё! Для того, чтобы ширина нашей страницы стала больше 800 px, заменяем блок <div id=»content» role=»main»> на свой, задать можно любой, я ввел content-search. Это необходимо, чтобы в файле style.css поменять стили, а точнее задать необходимую ширину.
В начало файла добавляем такую запись:
<?php
/*
Template Name: Search
*/
?>
Это необходимо для того, чтобы подключить к шаше странице определенный шаблон. Файл готов! Сохраняем его в формате php, называйте, как хотите, это не принципиально! Я назвал page-search.php. теперь осталось залить данный файл на хостинг в раздел, где находятся все основные файлы php (header.php, page.php, single.php и так далее). Обычно путь выглядит так: wp-content/themes/название_вашего_шаблона.
Дальше переходим в файл style.css и добавляем новый блок content-search:
#content-search {width:950px;}
Для каждого блога данные значения могут быть разными, в зависимости от вашего дизайна.
Вот и практически всё! Осталось только подключить данный шаблон и реализация Google поиска на сайте завершена.
Мы уже создали страницу в предыдущей статье, которую назвали search, осталось только подключить шаблон. В боковой правой колонке «Атрибуты страницы» выбираем название нашего шаблона. Для того, чтобы сделать «Атрибуты страницы» видимыми вверху страницы жмём «Настройки экрана» и в чекбоксе ставим галочку напротив необходимого блока. Всё! Контент страницы оставляем пустым, при желании можно заняться его дополнительным оформлением. Но так как, страницу search я закрыл от индексации, то и контент на ней не требуется.
На сим закончим, сегодня мы научились создавать уникальную страницу шаблона WordPress, которую можно использовать для различных целей!
Довольно просто и понятно, надеюсь пригодится в будущем
Заманчивое предложение, на досуге попробую
Я новичок! Статья полезная. Обязательно попробую
Урок действительно очень прост, а самое главное полезен!
Привет! Никак не могу найти ответ на вопрос — можно ли каждой странице задавать индивидуальный стиль? К примеру, я хочу, чтобы на каждой странице в виде фона были разные фото. Можно ли это сделать?
Вы имеете в виду «страницы» или «записи»? Если страницы, то способом, который я описал в данной статье, создавая в атрибутах страницы и задавая свои стили для блоков. Если же для записей, то можно через блоки (div) отдельной записи.
Как найти данный div? Открываем код страницы Ctrl+U и находим строчку после что-то вроде:
<div id="post-258" class=…
цифры вероятнее всего отличаются!
Теперь в файле css можно указать стиль для данного блока:
#post-258{background-color:#green;}
Готово!
Если я вношу изменения в документ custom-page, то это изменение будет касаться всех страниц, верно? А можно ли сделать, чтобы на странице, к примеру «фотографы» было изображение фотокамеры на фоне, а на странице наши люди был бы другой фон и т.д. ?
Вообще, это можно сделать везде. Возможно вы дадите мне конкретные примеры страниц (url), я подскажу вам, что нужно делать. А так на пальцах получается объясняю :)
Прошу прощения за тупость, но просто не могу разобраться, как найти в папках нужную мне страницу, в которую, я хочу внести изменения. eative56.ru/people/фотографы/
Что-то не так со ссылкой :)
Сорри, creative56.ru/people/фотографы/
Я понял вас, Николай. Вы хотите сделать на странице «Фотографы» один фон, а на странице «стилисты» другой? Если так, то рекомендую найти в css body и заменить строчку background-image: url(«http://creative56.ru/wp-content/uploads/2015/04/purty_wood.png»);
меняем на на background-color: #fff;
А для того, чтобы на странице «Фотографы» поставить фон древесный в css добавляем:
.page-id-26{background-image: url(«http://creative56.ru/wp-content/uploads/2015/04/purty_wood.png»);}
следовательно для страниц «стилисты»
.page-id-30{background-image: url(«http://creative56.ru/wp-content/uploads/2015/04/другая картинка.png»);}
не забудьте поменять другая картинка.png на нужный фон
Так разные страницы вашего шаблона будут с разным фоном.
Вообще начал понимать. Нашел объяснение в кодекс wp) Спасибо!