Відкрити меню

Як створити окремий шаблон для статичної сторінки на WordPress?

Товариство – доброго всім дня! Як створювати статичні сторінки на блозі – відомо кожному блогеру, але бувають випадки, коли потрібно не просто створити окрему сторінку, але й надати їй власний стиль, який буде відрізнятися від зовнішнього вигляду блогу в цілому. З цим я стикнувся нещодавно і вирішив поділитися з Вами, адже ситуації виникають різні – від підписних сторінок до сторінок з певною пропозицією, де наявність сайдбару, навігації і т.д. просто зайва.

Свій шаблон сторінки

Процедура не дуже складна і я спробую описати Вам покроково, що і за чим потрібно робити. Для початку скажу, що надавати статичній сторінці власного зовнішнього вигляду ми будемо на основі файлу page.php, який присутній в кожній темі WordPress без винятку. Якщо у Вас якийсь авторський шаблон – то назва цього файлу може бути інша, але, як правило, рідко його перейменовують.

Отже, підключаємось по FTP (або хто як це робить) до свого блогу на хостингу та завантажуємо собі на робочий стіл файл page.php (файл, який відповідає за відображення статичної сторінки).

Файл статичної сторінки

Відкриваємо його в текстовому редакторі (рекомендовано Notepad++) та в самий початок вставляємо наступний код:

Цим кодом ми даємо блогові зрозуміти, що ця сторінка не залежатиме від основного дизайну, а матиме свій власний. Назву “Сторінка пропозиції” змінюємо на бажану.

Вставляємо код

Далі – зберігаємо цей файл під назвою, якою ми хочемо, наприклад “Сторінку пропозиції” я збережу як page-offer.php

Тепер ми маємо окрему сторінку з окремим підключеним дизайном. Звичайно, що виглядати зараз цей файл буде як і усі, але при редагуванні зовнішнього вигляду у нас буде змінюватись тільки page-offer.php і не попливе весь шаблон.

Тепер давайте подумаємо, а що у нас підключено до цієї сторінки? В цьому файлі містяться три блоки: хедер, футер і сайдбар. Отже, подібну операцію ми повинні зробити і з цими файлами, тобто: завантажити на робочий стіл і перейменувати. На прикладі я покажу Вам без сайдбару, тобто зробимо просту сторінку з хедером та футером.

Перейменовуємо ці два файли (header.php та footer.php) відповідно до назви нашої нової сторінки: header-offer.php та footer-offer.php

Редагуємо файли

В результаті – ми маємо три файли з новою назвою page-offer.php, header-offer.php та footer-offer.php

Здавалося б все, але звернімо увагу, що в page-offer.php у нас підключені старі блоки  header та footer, отже нам необхідно вказати на нові, щоб сторінка виводила вже змінені файли.

Підключаємо нові блоки

Нові блоки ми підключаємо наступним чином: замість

та

ми вставимо функцію виводу нових хедера та футера:

та

Далі поки що нічого не чіпаємо, а підключення сайбару

ми видалимо пізніше, щоб побачити наочно, на прикладі дію зроблених змін. В результаті у Вас повинно вийти наступне:

Шаблон нової сторінки

Після цього ми три змінених файли (page-offer.php, header-offer.php та footer-offer.php) можемо завантажувати на хостинг, до нашого шаблону.

Нові файли на хостингу

Підсумуємо – на даному етапі у нас на хостингу є шаблон сторінки з підключеними хедером та футером, які ми можемо змінювати без впливу на дизайн блогу в цілому. Наразі стандартна статична сторінка у нас виглядає ось так (клікабельно):

Вигляд старої сторінки

Давайте створимо нову сторінку з урахуванням змінених шаблонів. Переходимо в Майстерню-Сторінки-Додати. Пишемо заголовок, текст сторінки, але УВАГА, в атрибутах обираємо назву створеного нами шаблону (клікабельно)!

Створюємо нову сторінку

Публікуємо і дивимось на результат. Якщо нова сторінка нічим не відрізняється від всіх інших статичних сторінок, значить все Ви зробили правильно. Якщо десь видно косяки – перевірте з самого початку ще раз, сторінка повинна бути один в один, як всі інші (клікабельно).

Результат нової сторінки

Тепер – файли page-offer.php, header-offer.php та footer-offer.php Ви можете редагувати, змінювати так, як Вам заманеться. Зміни будуть застосовані тільки до “Сторінка пропозиції” (page-offer.php).

Наприклад, давайте приберемо з сторінки сайдбар, так як ми його не змінювали і він виводиться загальний. Для цього видаляємо з page-offer.php код виводу сайдбару

Сторінка без сайдбару

Завантажуємо змінену сторінку на хостинг і бачимо результат – сторінка без сайдбару. При чому, на інших наших сторінках сайдбар збережеться.

Сторінка без сайдбару

Звичайно, що порожнє місце нам заважає, воно збереглось тому, що в стилях задані певні пропорції до сторінки. Щоб забрати цей пробіл, йдемо в файл стилів і шукаємо клас “main_col”, який відповідає за зовнішній вигляд центральної колонки, та змінюємо його розміри та зовнішній вигляд.

Ось на прикладі стиль “main_col” головної колонки і новий стиль “full_main_col”, який я створив. На зображенні показано, що змінено і що видалено взагалі. Створюйте новий стиль під свої потреби (клікабельно).

Редагуємо файл стилів

Тепер в файлі нової сторінки змінюємо “main_col” на “full_main_col”, завантажуємо змінені файли на хостинг і отримуємо статичну сторінку без цього зайвого пробілу.

Сторінка в повну ширину
Змінена нова готова сторінка

При бажанні можна видалити чи додати все, що завгодно. Наприклад видалимо меню та хедер сторінки, залишимо тільки чистий листок (редагуємо header-offer.php).

Видаляємо хедер

Перезаливаємо файл на хостингу і отримуємо ось таку картину (клікабельно):

Результат голої сторінки

Таким способом Ви можете прибрати форму коментування, футер і все, що Вам буде заважати. Всі зміни застосуються тільки до нової сторінки, а дизайн блогу залишиться без змін.

Запам’ятайте, що редагувати Ви можете тільки три файли – page-offer.php, header-offer.php та footer-offer.php і обов’язково використовуйте текстовий редактор  Notepad++.

Коли це може бути потрібно? Ситуацій можна змоделювати дуже багато – для якогось каталогу товарів, для фотогалерей, для пропозицій якоїсь послуги, для збору підписної бази, для …. іще, і ще, і ще.

Основна перевага такого методу в тому, що сторінка залишається в стилістиці блогу, але може приймати будь-які зміни, без загрози головному шаблону.

Величенька вийшла стаття, але нічого складного тут немає. Якщо Ви зробите це один раз, в подальшому будете виконувати такі дії на автоматі. Як завжди – я намагався розписати все покроково і якомога детальніше, маю надію, що цей матеріал стане Вам у пригоді.

Бажаю Вам вдалого створення оригінальних сторінок, шануйтеся!

Нічого цікавогоТак собіНормальноДобреЧудово (Голосів: 2, середній: 5,00 з 5)
Loading...
Обговорення: 5 коментарів
  1. Pavlofox сказав:

    Корисна інформація, якщо треба буде таке зробити – вже знаю де шукати вирішення проблеми 🙂

    Відповіcти
  2. Все йшло добре, поки не дійшов до “Щоб забрати цей пробіл, йдемо в файл стилів і шукаємо клас «main_col»”
    я переглянув усі файли розширення css у папці з моєю темою, але слів «main_col» не знайшов 😐

    Відповіcти
    1. Олег Волощук сказав:

      Ну у Вас може цей клас по іншому називатись, не обов’язково main_col

      Відповіcти
  3. а чи можливо зробити окремий шаблон для динамічної сторінки. Наприклад, хочу зробити на головній сторінці окремі квадратні блоки? Кожен блок це окрема категорія. У цьому блоці категорії повинні виводитися списком останні публікації цієї категорії. Тобто це таке собі меню розміщене на головній сторінці куди користувач заходить та вже в категорії, що його цікавить шукає потрібні йому публікації.

    Відповіcти
    1. Олег Волощук сказав:

      Та все можливо – якщо знаєтесь на верстці, знаєте php, css, то все можна зробити.

      Відповіcти

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *

© 2017 Блог Олега Волощука · Копіювання матеріалів сайту без дозволу заборонено
Авторство підтверджено Google