Индивидуальный шаблон страниц в WordPress: понятие, использование, создание, редактирование

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

Скачать исходники для статьи можно ниже

Для чего нужны индивидуальные шаблоны?

С помощью индивидуального шаблона можно придать той или иной отдельной странице, категории, записи свою индивидуальность, изменить ее внешний вид, добавить что-то новое или наоборот убрать лишнее, в частности можно:

– убрать или добавить сайдбар, подвал, шапку;

– изменить дизайн шапки,  подвала, сайдбара (в том числе создание для каждой странички, записи, категории новой оригинальной шапки);

– создать страницу регистрации, встроенную в дизайн;

– создание формы связи на отдельной странице;

– возможно реализовать какой-нибудь скрипт (JavaScript и другие);

– оригинальное оформление контента;

– создание оригинальной личной страницы;

и другое.

 

Примеры некоторых шаблонов страницы можете посмотреть по следующей ссылке (сайт на английском, пункт Page Templates в горизонтальном меню – это и есть шаблоны страниц, выбираете нужный и смотрите как он выглядит ):

http://www.elegantthemes.com/preview/Nova/full-width/

 

WordPress для отображения внешнего вида странички просматривает файлы в вашей текущей теме в следующем порядке:

  1. Выбраннный для данной страницы шаблон (индивидуальный шаблон).
  2. page.php  (данный файл отвечает за придание единого стиля и оформления всем страницам вашего сайта)
  3. index.php (главная страничка сайта)

То есть, если для некоторой странички имеется индивидуальный шаблон, то он будет перекрывать все остальные файлы WordPress (page.php, index.php).

То есть Индивидуальный шаблон – это файл в формате php, хранящийся в папке текущей темы (/public_html (или WWW)/wp-content/themes/текущая тема), который позволяет для заданной страницы (к которой прикреплен индивидуальный шаблон) использовать не стандартные файлы системы 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. Переходим в редактирование странички и ищем там блок “Атрибуты страницы”.

Если его у вас нет, то нажмите в правом верхнем углу на кнопку “Настройки экрана” и поставьте галочку напротив “Атрибуты страницы”).

Создание индивидуального шаблона

Блок “Атрибуты страницы” находится справа и выглядит следующим образом:

Создание индвидуального шаблони в WordPress

В пункте Шаблон выбираем наш индивидуальный шаблон, в данном примере: moishablon.

Данным действием мы подключили наш индивидуальный шаблон к выбранной вами страничке.

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

Шаг 7. Редактирование индивидуального шаблона.

Редактировать индивидуальный шаблон можно с помощью редактора кода NotePaad++ (для этого вам обратно придется скачать данный файл из вашей текущей темы на свой компьютер с помощью программы FileZilla) или же можно воспользоваться редактором кода, встроенного в WordPress, для этого:

В панели управления в левом меню выбираем пункт “Внешний вид”, далее подпункт “Редактор”, и теперь справа в меню Шаблоны находим наш индивидуальный шаблон:

Индивидуальный шаблон в WordPress

Открываем его и редактируем.

Для наглядности, если у вас на сайте есть сайдбар (боковая колонка) можете найти в нем следующий код и удалить его:

 <PHP get_sidebar ();?> 

После нажмите на кнопку “Обновить файлы”.

Теперь зайдите на страничку к которой прикреплен индивидуальный шаблон и вы увидите, что на данной страничке сайдбар (боковая колонка) исчезла, на остальных же страничках вашего сайта сайдбар (боковая колонка) присутствует.

Однако, текст статьи на область удаленного нами сайдбара заходить не будет – для этого вам еще нужно настроить стили, но об этом я расскажу в следующей статье.

Вот в принципе и все теперь вы научились создавать индивидуальные шаблоны для страничек.

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc

Индивидуальный шаблон страниц в WordPress: понятие, использование, создание, редактирование: 23 комментария

  1. Ezoman

    Подскажите такой вопрос. Хочу на своем блоге ezoman.in.ua сделать отдельный дизайн для страницы “ezoman.in.ua/osanka”
    Хочу чтобы дизайн выглядел так как примерно тут “russianmarketing.ru”
    Можете вкратце описать как делать.
    Спасибо.

    1. Константин

      Если вы хотите отцентрировать текст (чтобы он располагался посередине страницы), то добавьте еще один блок с помощью тега 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;
      }

    1. Константин

      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;
      }

  2. Денис

    Добрый день! Есть плагин Ready! Интернет магазина. Назначил отдельным страницам шаблон (категории, бренды, все товары и тд.) После установки плагина они появились в списке всех страниц. Но страницы генерируемые при выдачи отдельного товара показываются в шаблоне по умолчанию. В списке всех страниц при создании товара они не появляются, да и назначать в ручную для каждого вида товара шаблон не реально и неудобно. Как и где это можно сделать. Благодарю!

  3. Дмитрий

    Здравствуйте!
    Подскажите пожалуйста, куда обратиться с такой проблемой:
    Выбрал себе шаблон 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. Константин

      Дмитрий, решить данную проблему можно следующим образом:
      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

  4. Татьяна

    Здравствуйте! Совсем измучилась с дизайном:
    Пытаюсь в блоге в сайтбаре заменить под формой “Подписаться” имеющиеся кнопки I Like соцсетей на кнопки, сгенерированные Pluso (какие стоят у отдельных постов внизу).
    Вы не могли бы подсказать – в каком файле и в каком месте нужно удалить код с имеющимися кнопками, чтобы вставить код Pluso?
    Спасибо большое заранее!

  5. Компьютерная помощь

    Спасибо за статью. Веду блог, на главной странице была продающая страница. Теперь отвел в отдельную ветку, а на главную вывел новые статьи. Огроменное спасибо! Доходчиво объясняете )

  6. Валентина

    Здравствуйте, помогите пожалуйста справиться с проблемой. Делаю индивидуальный шаблон страницы точно таким же методом, мне нужна на ней только форма регистрации и фон (бэграунд) с определенным цветом. Не нужна даже шапка сайта…Буду очень признательна.

Добавить комментарий