В данной статье я расскажу вам о том, что такое индивидуальный шаблон, для чего он нужен и как его создать.
Скачать исходники для статьи можно ниже
Для чего нужны индивидуальные шаблоны?
С помощью индивидуального шаблона можно придать той или иной отдельной странице, категории, записи свою индивидуальность, изменить ее внешний вид, добавить что-то новое или наоборот убрать лишнее, в частности можно:
– убрать или добавить сайдбар, подвал, шапку;
– изменить дизайн шапки, подвала, сайдбара (в том числе создание для каждой странички, записи, категории новой оригинальной шапки);
– создать страницу регистрации, встроенную в дизайн;
– создание формы связи на отдельной странице;
– возможно реализовать какой-нибудь скрипт (JavaScript и другие);
– оригинальное оформление контента;
– создание оригинальной личной страницы;
и другое.
Примеры некоторых шаблонов страницы можете посмотреть по следующей ссылке (сайт на английском, пункт Page Templates в горизонтальном меню – это и есть шаблоны страниц, выбираете нужный и смотрите как он выглядит ):
http://www.elegantthemes.com/preview/Nova/full-width/
WordPress для отображения внешнего вида странички просматривает файлы в вашей текущей теме в следующем порядке:
- Выбраннный для данной страницы шаблон (индивидуальный шаблон).
- page.php (данный файл отвечает за придание единого стиля и оформления всем страницам вашего сайта)
- index.php (главная страничка сайта)
То есть, если для некоторой странички имеется индивидуальный шаблон, то он будет перекрывать все остальные файлы WordPress (page.php, index.php).
Индивидуальный шаблон может быть написан с нуля, но легче применить уже готовые варианты – чаще используется либо page.php или index.php.
Ниже мы рассмотрим создание индивидуального шаблона для определенной страницы с помощью файла page.php.
Для этого вам необходимо выполнить 7 шагов:
Шаг 1. Скачать файл page.php из текущей темы (/public_html/wp-content/themes/название вашей текущей темы) вашего сайта через программу FileZilla.
Шаг 2. Открыть его с помощью редактора кода NotePad++ и вставить в начало данного файла (page.php) следующий код:
<?php /* Template Name: moishablon */ ?>
С помощью данного кода мы оповещаем WordPress о создании индивидуального шаблона с именем moishablon (можете выбрать любое другое имя).
Шаг 3. Сохраняем данный файл (page.php) под другим именем, ну например shablon1.php (можете выбрать любое другое имя).
Шаг 4. Закачиваем shablon1.php в текущую тему вашего сайта (/public_html/wp-content/themes/название вашей текущей темы) с помощью программы FileZilla.
Шаг 5. Заходим в панель управления вашим сайтом и выбираем страничку, на которой вы хотите применить данный шаблон.
Шаг 6. Переходим в редактирование странички и ищем там блок “Атрибуты страницы”.
Если его у вас нет, то нажмите в правом верхнем углу на кнопку “Настройки экрана” и поставьте галочку напротив “Атрибуты страницы”).
Блок “Атрибуты страницы” находится справа и выглядит следующим образом:
В пункте Шаблон выбираем наш индивидуальный шаблон, в данном примере: moishablon.
Данным действием мы подключили наш индивидуальный шаблон к выбранной вами страничке.
Если вы откроете данную страничку через браузер, то изменений не заметите, для того чтобы увидеть изменения вам нужно отредактировать индивидуальный шаблон – внести туда какие-нибудь изменения, так как на данном этапе он похож на изначальный файл темы – page.php.
Шаг 7. Редактирование индивидуального шаблона.
Редактировать индивидуальный шаблон можно с помощью редактора кода NotePaad++ (для этого вам обратно придется скачать данный файл из вашей текущей темы на свой компьютер с помощью программы FileZilla) или же можно воспользоваться редактором кода, встроенного в WordPress, для этого:
В панели управления в левом меню выбираем пункт “Внешний вид”, далее подпункт “Редактор”, и теперь справа в меню Шаблоны находим наш индивидуальный шаблон:
Открываем его и редактируем.
Для наглядности, если у вас на сайте есть сайдбар (боковая колонка) можете найти в нем следующий код и удалить его:
<PHP get_sidebar ();?>
После нажмите на кнопку “Обновить файлы”.
Теперь зайдите на страничку к которой прикреплен индивидуальный шаблон и вы увидите, что на данной страничке сайдбар (боковая колонка) исчезла, на остальных же страничках вашего сайта сайдбар (боковая колонка) присутствует.
Однако, текст статьи на область удаленного нами сайдбара заходить не будет – для этого вам еще нужно настроить стили, но об этом я расскажу в следующей статье.
Вот в принципе и все теперь вы научились создавать индивидуальные шаблоны для страничек.
Подскажите такой вопрос. Хочу на своем блоге ezoman.in.ua сделать отдельный дизайн для страницы “ezoman.in.ua/osanka”
Хочу чтобы дизайн выглядел так как примерно тут “russianmarketing.ru”
Можете вкратце описать как делать.
Спасибо.
Если вы хотите отцентрировать текст (чтобы он располагался посередине страницы), то добавьте еще один блок с помощью тега div и задайте ему нужные стили оформления.
На сайте “russianmarketing.ru/” блок content помещен в блок box, который и создает так, что контент располагается посередине.
То есть создаете индивидуальный шаблон страницы, убираете если нужно шапку, подвал, форму комментирования. Далее создаете еще один блок с помощью тега div и заключаете в него весь контент странички (то есть блок box должен включать в себя блок content), после указываете для него в файле style.css следующие стили оформления (если нужно отцентрировать как на вышеуказанном сайте):
#box {
border-left: 1px solid silver;
border-right: 1px solid silver;
margin: 0 auto;
width: 700px;
}
А как у Вас сделана боковая колонка слева, со ссылками на соц сети и внизу кнопка “вверх”?
Про кнопки соц сетей прочитал, спасибо. Кнопку вверх не понял.
Как создать кнопку вверх читайте вот эту статью: https://mnogoblog.ru/knopka-vverx-plagin-dynamic-to-top-plugin
Подскажите!!!!!!! Как сделать шаблон без сайдбара, если на page.php нет строки, выводящей сайдбар
Как сделать на моем блоге “tcm-live.net” более широкую шапку, ответ можно оставить в коментах
Evgen, как я понял высоту шапки, если да, то коротко нужно сделать следующее:
1. В файле functions.php измените размер фоновой картинки:
define( ‘HEADER_IMAGE_HEIGHT’, apply_filters( ‘thirdstyle_header_image_height’, 198 ) );
198 – измените на нужную высоту.
2. В файле style.css
в блок header добавьте нужную высоту с помощью строчки height: px;
Пример:
#header {
padding-top: 20px;
-moz-border-radius: 8px 8px 0px 0px;
-webkit-border-radius: 8px 8px 0px 0px;
border-radius: 8px 8px 0px 0px;
height: 300px;
}
3. Загрузите картинку через панель управления (пункт “Внешний вид” – “Шапка”)
4. Так как шапка изменит свою величину, но менюшка останется на своем месте, поэтому нужно обернуть ее в свой блок (div id=”menu2″) и прописать к нему стили с отступом сверху.
Пример:
div id=”menu2″>
div id=”access” role=”navigation”>
…
А в файл style.css пропишите что-то типо следующего:
#menu2 {
padding: 200px 0 0 0;
}
спасибо, статья реально помогла!
Добрый день! Есть плагин Ready! Интернет магазина. Назначил отдельным страницам шаблон (категории, бренды, все товары и тд.) После установки плагина они появились в списке всех страниц. Но страницы генерируемые при выдачи отдельного товара показываются в шаблоне по умолчанию. В списке всех страниц при создании товара они не появляются, да и назначать в ручную для каждого вида товара шаблон не реально и неудобно. Как и где это можно сделать. Благодарю!
Здравствуйте!
Подскажите пожалуйста, куда обратиться с такой проблемой:
Выбрал себе шаблон StarStruck, у которого шапка страницы сайта визуально расширяется по горизонтали до краёв экрана за счёт позиционирования с помощю style.css в теге body фоновой картинки методами: top left repeat-x. Весь остальной фон приобретает цвет, присваеваемый соответствующим атрибутом. Итог: атрибут выбора картинки фона занят украшением шапки, остальной фон имеет просто цвет, но не оформлен изображением. Хотелось бы: вместо цвета замостить весь оставшийся фон какой-либо картинкой.
Что пытался сделать: с помощю фокуса CSS3 применить в стилях мультифон таким способом –
body{
border:0;
padding:0;
margin:0;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
text-align:center;
background: orange url(images/bg_header.gif) top left repeat-x, url(images/background_wood.jpg);
}
Метод не срабатывает, даже если я меняю в описании background местами ссылки на изображения и играю с описанием атрибутов, в результате одно из двух получается, либо мостится весь фон и пропадают аолоски по краям шапки, либо пропадают все фоновые изображения вообщеа фон становится просто белый. Как быть, спасите?!
Дмитрий, решить данную проблему можно следующим образом:
1. Добавьте в файл стилей (style.css) следующие строчки:
HTML { background: url(https://mnogoblog5.p.ht/wp-content/uploads/2013/05/facebook.png) repeat; }То есть мы привязываем первую фоновую картинку к тегу html, а второе фоновое изображение будет выводится тегом body.
2.Подкорректируем стиль body (в строчке с background удалим вывод черного цвета, а оставим только картинку, повторяющуюся по горизонтали):
body{ border:0; padding:0; margin:0; font-family:Arial,Helvetica,sans-serif; font-size:12px; color:#555555; text-align:center; background: url(images/bg_header.gif) top left repeat-x; }Пример временно можно посмотреть на сайте – mnogoblog5.p.ht
Спасибо за полезную статью! Информация очень пригодилась для создания новой страницы на моем блоге.
Здравствуйте! Совсем измучилась с дизайном:
Пытаюсь в блоге в сайтбаре заменить под формой “Подписаться” имеющиеся кнопки I Like соцсетей на кнопки, сгенерированные Pluso (какие стоят у отдельных постов внизу).
Вы не могли бы подсказать – в каком файле и в каком месте нужно удалить код с имеющимися кнопками, чтобы вставить код Pluso?
Спасибо большое заранее!
Татьяна, скорее всего в файле sidebar.php (Внешний вид – Редактор – справа в списке шаблонов выберите sidebar.php)нужно удалить блоки с id=sociallike.
подскажите пожадуйста в чем может быть причина я создаю копию файла page_new.php но он у меня в шаблонах не отображается
Здравствуйте! В WP 3.8 блока “Атрибуты страницы” не обнаружила. Есть ли он в этой версии, и как его найти? Спасибо!
Атрибуты страницы в WP 3.8 нашла. А можно ли подключить индивидуальный шаблон не к странице, а к конкретной записи? Спасибо!
Марина, в ближайшее время напишу статью про индивидуальные шаблоны к записи, спасибо за комментарий!
Спасибо за статью. Веду блог, на главной странице была продающая страница. Теперь отвел в отдельную ветку, а на главную вывел новые статьи. Огроменное спасибо! Доходчиво объясняете )
Спасибо большое! Все получилось … со второго раза. Единственное, проблема: вместе с сайдбаром пропали колонки.. Страница комментов оголилась((
Спасибо за потрясающую и интересную статью!
Здравствуйте, помогите пожалуйста справиться с проблемой. Делаю индивидуальный шаблон страницы точно таким же методом, мне нужна на ней только форма регистрации и фон (бэграунд) с определенным цветом. Не нужна даже шапка сайта…Буду очень признательна.