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

Дата: 25 червня 2013 Рубрика: Технічні поради по WP Коментарі: 1 коментар

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

Процедура не дуже складна і я спробую описати Вам покроково, що і за чим потрібно робити. Для початку скажу, що надавати статичній сторінці власного зовнішнього вигляду ми будемо на основі файлу 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++.

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

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

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

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


З повагою, Олег Волощук.

Бажаєте мати свій власний блог на WordPress?

Отримайте АБСОЛЮТНО БЕЗКОШТОВНО детальний відеокурс і вперед!

Ваш E-Mail 100% в безпеці!

 

До запису "Як створити окремий шаблон для статичної сторінки на WordPress?" 1 коментар

  1. Pavlofox коментує:

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

Залишити свій коментар

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

Google + фейсбук Вконтакті Twitter RSS
Категорії
  • Інтерв’ю (4)
  • Конкурси (5)
  • Оголошення (10)
  • Особисте (18)
  • Плагіни для Wordpress (15)
  • Саморозвиток (7)
  • Технічні поради по WP (19)
Канал на YouTube
Соціальні спільноти
  • Вконтакті
  • OK
  • Facebook
Кращі коментатори
Віктор Х.(14)
fedun(9)
Володими.(5)
ML(5)
Pavlofox(4)
Саша(4)
Світлана(4)
Cyber(3)
запитів / генер. стор. / спож. пам'яті
55 / 0.418 / 58.74mb
Вгору