Це головна сторінка посібника зі створення тем (шаблонів) для WordPress. Основна інформація взята з офіційного керівництва та з особистого досвіду.

Що таке тема?

Тема WordPress - це набір css, js, php файлів, які у зв'язці з WordPress та плагінами виводять інформацію з бази даних на екран у гарному та зручному вигляді (дизайні). Ну або в негарному і незручному, тут дивлячись якусь тему вибрати... В інших движках тему ще називають "шаблоном", але в WordPress прийнято говорити саме тема - theme, а не шаблон - template. Хоча і те й інше по суті одне й те ж саме...

Таким чином, якщо ви змінюєте тему, сайт змінює свій вигляд, виглядає інакше. На WordPress.org є тисячі безкоштовних тем. Незважаючи на широкий вибіртим, багато хто воліє створювати свої теми. Пов'язано це насамперед із тим, що створити просту темуне складно.

Необхідні файли

Щоб створити тему, необхідні лише два файли:

1. index.php - головний файлтеми, відповідає за виведення вмісту
2. style.css - головний файл стилів, що відповідає за css стилі

Але жодна тема не складається лише з двох файлів. Їх більше: PHP, мовні файли, файл CSSта JS, текстові файли. Тему починають із двох файлів, а потім, щоб було зручніше, її розширюють, додаючи такі файли як:

• header.php - відповідає за виведення шапки
• footer.php - відповідає за виведення підвалу
• sidebar.php - відповідає за виведення бічної панелі
• page.php - відповідає за висновок окремої сторінки(записи)
• і т.д. дивіться повний список.

Можливості теми

Можливості теми насправді безмежні, адже там можна повністю використовувати PHP. АЛЕ! Тема, як покликана відображати вміст сайту певним чином, а чи не додавати функціоналу сайту. Тому можливості теми прийнято обмежувати до тих, які відповідають за зовнішній вигляд, а решта можливостей: голосування, рейтинги, редиректи, СЕО тощо. прийнято виносити в плагіни...

Таким чином, тема може:

• Відповідати за виведення вмісту сайту під різні типипристроїв: монітори та смартфони. Такі теми називають адаптивні. Також теми можуть бути фіксовані, одноколонні, двоколонні і т.п.;
• Тема може виводити будь-який вміст;
• Може вказати, який контент відображатиметься для різних користувачів;
• Може використовувати будь-які елементи дизайну (картинки, відео).

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

Чим тема відрізняється від плагіна?

З погляду коду, можна сказати, нічим – у темі можна створити повноцінний плагін. А ось з погляду логіки – усім! Завдання плагіна, додати щось нове на сайт, наприклад, додати опитування. Завдання теми - висновок вмісту, зокрема цього опитування...

Таким чином тема відповідає за показ контенту на сторінці, а плагін потрібен для реалізації функціоналу сайту.

Ніколи не додавайте функціональність у саму тему, якщо на це немає вагомих причин. Якщо це зробити, то при зміні теми функціональність загубиться у місці з нею. Наприклад, у вашій темі є крута фотогалерея. І якщо змінити тему, то ця крута фотогалерея загубиться.

В силу того, що більшість сайтів, що розробляються мною, створюється з використанням CMS Wordpressі доводиться постійно стикатися з нетривіальними завданнямивирішив ділитися з вами досвідом використання різних плагінів. Як безкоштовних, так і платних, причому спробую дотримуватися такого формату: одна стаття - один плагін. Постараюся розглядати тільки розробки, що дійсно заслуговують на увагу, і ось у першому своєму оповіданні розповім вам про OptionTree - прекрасне, на мій погляд, рішення для створення сторінки з налаштуваннями користувачасайту.

Що таке налаштування користувача?

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

Коли створюється унікальний сайт (під унікальністю я маю на увазі сайт, який використовує розроблений спеціально для клієнта шаблон з унікальним дизайномі функціоналом), то часто потрібно створити можливість для адміністраторів змінювати ті чи інші параметри. Майже завжди необхідно дати можливість змінювати файл логотипу, якісь елементи на головній сторінці, іконки соціальних мереж, колір фону в «підвалі» сайту і т.д. Саме таку можливість для розробників надає плагін OptionTree, який можна завантажити безкоштовно з офіційного сайту Wordpress.

Після встановлення...

Встановивши та активувавши плагін, ми, умовно, отримуємо дві частини: одна для розробників сайту, інша – для користувачів. Перша частина доступна з пункту меню OptionTree-Settings, який з'являється після активації плагіна зліва в адміністративній частині Wordpress. Сміливо тиснемо туди і отримуємо унікальний інтерфейс для формування набору полів користувача, який буде доступний для користувачів у другій частині плагіна. Зовнішній вигляд- Theme Options.

Theme Options UI Builder

Отже, як же створювати опції? Під окремим налаштуваннямя матиму на увазі деяке поле, яке буде доступне користувачеві, адміністратору сайту для редагування. UI Builder дозволяє створювати секції або розділи, давайте назвемо це краще так, усередині яких будуть розташовуватися ті чи інші налаштування. На малюнку вище я навів приклад налаштувань, що складається з двох розділів: «Основне» та «Послуги». Тобто. мається на увазі, що в розділі «Основне» будуть розміщені якісь Загальні налаштуваннясайту, а в розділі «Послуги» – специфічні для сторінки послуг. Погляньмо, як розділи виглядають для користувача. Переходимо у «Зовнішній вигляд» – «Theme Options» та – ура! Ось вона сторінка налаштувань!

Зліва ми бачимо розділи, які можна перемикати, праворуч – набір налаштувань усередині розділу. Розділи створюються за допомогою Theme Options UI Builder за кнопкою "Add section", і для розділу необхідно ввести його заголовок та унікальний ідентифікатор. Давайте створимо розділ «Додатково» і додамо кілька налаштувань.

Всі зміни, звичайно, фіксуються за натисканням на кнопку Save Сhanges. Тепер додамо налаштування для користувача, ну, наприклад, колір заголовків. Натискаємо «Add setting» і подивіться, який набір полів доступний для вибору. Можна сказати, величезний! Виберемо "Colorpicker" і введемо заголовок та унікальний ідентифікатор. Будьте уважні з ідентифікаторами, саме за унікальним ідентифікатором потім код шаблону ми зможемо отримати доступ до значення цього поля.

Давайте подивимося, що тепер доступно користувачеві для редагування: з'явився новий розділі нове налаштування, поле «Колір заголовків», яке користувач зручним способомможе тепер редагувати. Дивіться, я не зупинятимуся на повному спискудоступних для створення полів, він є, звичайно ж, у документації до плагіна та на офіційному сайті розробників. Якщо все ж таки якісь поля викличуть у вас інтерес - напишіть, я зроблю оновлення цієї публікації з описом того чи іншого типу пропонованих полів. В принципі, за назвою поля зрозумілий його зміст, але, повторюся, якщо щось викличе у вас труднощі – сміливо звертайтеся, обов'язково поясню.

Редагуємо шаблон

Тепер нам з вами, як розробникам, необхідно внести зміни до шаблону сайту, щоб отримати значення того чи іншого поля, яке ввів або вибрав користувач. За це відповідає певна функція, приклад використання якої для вибору кольору заголовків я наводжу нижче. Причому, зазначу, що варіантів використання цього плагіна може бути величезна кількість, в прикладі мною прикладі всередині файлу header.php шаблону в секції head документа буде виводитися тепер стиль заголовків, а саме, їх колір, залежно від значення поля h_color.

Тобто. за виведення значення поля відповідає функція ot_get_option($option_id, $default), параметрами якої є ідентифікатор поля, який ми з вами як розробники задаємо самі, в нашому випадку ми виводимо значення поля h_color. Другий параметр функції – формат виведення, давайте на цьому я зупинюся трохи докладніше. Наприклад, нам потрібно зробити опцію, яка дозволить користувачеві створювати свій набір іконок для соціальних мереж. Для цього ми використовуватимемо поле List Item (на ілюстрації нижче).

Це поле дозволяє створювати вже набір полів, що повторюються, коли користувач зможе додавати однакові параметри всередині однієї настройки. Трохи незрозуміло, намагатимусь пояснити і потім у коді показати, як це працює. У нашому випадку надамо полю List Item ідентифікатор social_icons і всередині цього поля (зверніть увагу, є ще одна кнопка «Add setting») додамо два поля: файл іконки та посилання. Тип першого поля буде Upload, тип другого – Text. Ідентифікатор першого поля буде icon_image, ідентифікатор другого – icon_link.

Що отримає користувач? Тепер він зможе додавати кілька іконок соціальних мереж, натискаючи кнопку «Add new» на сторінці налаштувань. Причому зверніть увагу, кількість таких налаштувань тепер необмежена і залежить лише від користувача.

Щоб вивести тепер у шаблоні таке складне поле, необхідно використовувати трохи інший формат виводу, нижче – шматочок коду на PHP для такого випадку. Коментаріми постараюся пояснити, що відбувається.

// виводимо в шаблон поля)))?

В ув'язненні

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

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

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

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

Загалом у вас будуть додаткові опціїтеми, які ви зробите власноруч без плагіна. Виглядає вона приблизно так:

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

Давайте приступимо до того, щоб зробити нашу сторінку налаштувань.

Для початку Ви повинні визначитися, як саме ви підключите код сторінки. Є два варіанта.

Перший простий, все додаємо в кінець вашого functions.phpпісля ?> і все.

Другий спосіб – потрібно створити файл settings.phpі до нього додати весь код, після підключити його в functions.phpнаступним чином.

Include("/settings.php");

Коли створите settings.php, перед тим як додавати до нього код переконайтеся, що він збережений у правильному кодуванні - UTF-8 без BOM. Редагувати файли найкраще в програмі Notepadd++.

Тепер починаємо додавати сам код. Спершу зареєструємо нашу функцію.

Тепер додамо нашу сторінку до адмінки в меню зліва.

// Додавання Сторінок налаштувань у меню function add_settings_page() ( add_menu_page(__("Опції теми"), __("Опції теми"), "manage_options", "settings", "theme_settings_page"); ) //Додавання дій add_action( "admin_init", "theme_settings_init"); add_action("admin_menu", "add_settings_page");

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

Додамо дії та функцію збереження опцій нашої сторінки

//Збереження налаштувань function theme_settings_page() ( global $select_options; if (! isset($_REQUEST["settings-updated"])) $_REQUEST["settings-updated"] = false; ?>

Тепер почнемо додавати код, який виводитиме елементи нашої сторінки. Створюємо div і до нього додаємо блоки.

Першим елементом буде назва сторінки, яка буде виводитись на самому початку, потім блок, усередині якого з'являтиметься повідомлення про те, що налаштування збережені.

Тепер весь код повністю

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

Для цього спочатку потрібно увімкнути нашу функцію

Цей рядок потрібно прописувати щоразу перед виведенням опції

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

Для лого наприклад це так:

Готовий результат буде таким

Думаю із цим зрозуміло. Якщо хочемо вивести значення зі сторінки налаштувань, у потрібному місці вставляємо код, що вище, лише правильно вказавши імена. Так виводимо для метрики та банера змінюючи лише імена на tracking та banner, або ті, що Ви придумаєте, головне щоб вони збігалися з тими, що на сторінці налаштувань.

Можна провернути ще один фокус. На прикладі опції - Текст у підвалі, пропоную додати умову - якщо. Суть така - спочатку текст у підвалі прописаний за замовчуванням, але якщо користувач на сторінці налаштувань щось введе, то замість тексту за замовчуванням з'явиться те, що задав користувач.

Щоб це зробити нам знадобиться прописати такий код:

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

Зміст якщо прапорець встановлено.

Можна додавати будь-який зміст. Хоч підлогу сайту приховати, якщо потрібно.

Тепер залишилося вивести лише зміст того, що вибере користувач у списку. У нас це було розміщення блоку ліворуч чи праворуч

Тут як і з текстом у підвалі будемо використовувати умову - якщо. У моєму списку - тільки два елементи, тому умова така - якщо вибраний пункт номер один (ліворуч) показуємо блок у якого в стилях властивість - float:left;, інакше показуємо блок у якого властивість - float:right;.

Блок зліва

Блок праворуч

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

На цьому все, дякую за увагу. 🙂

Створити шаблон для WordPress простіше, аніж можна подумати. Для цього не треба мати величезний досвід розробки дизайну або програмування сайтів. У цій статті розповімо про основи створення з нуля своїх тем WordPress.

Навіщо взагалі може знадобитися створення власного шаблону WordPress, коли можна скористатися заготовками, що є в базі? Ось які причини можуть підштовхнути до цього:

• Можна отримати унікальний сайт або лендінг, який відрізняється від конкурентів. Враховуючи мільйони блогів, побудованих на цій CMS, кожен типовий дизайн використовується щонайменше сотню разів.
• Повна свобода дій на етапі розробки. Можна додавати власний функціонал із потрібними саме вам робочими елементами.
• Можна використовувати різні дизайни для різних розділів сайту, що неможливо використовувати готовий шаблон.
• Можна зробити кілька видів та надати відвідувачам можливість перемикатися між різними темами, що підвищить інтерес та лояльність до веб-ресурсу.
• Простота роботи на Вордпрес робить її доступною для багатьох (на допомогу будуть відео-уроки в інтернеті). Отже, власноручна розробка головної чи створення дочірньої теми дозволить заощадити гроші на залученні сторонніх дизайнерів та програмістів.
• Можна скористатися можливістю дочірніх тем – коли коригування вносяться до дублерів таблиці стилів style.css, а головний файл залишається недоторканим. Це дозволяє швидко скасувати зміни, якщо вони виявляться невдалими, а також не втрачати напрацювання під час оновлення основної теми.

Коротка інструкція

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

Крок перший: підготовчі роботи

Перед початком робіт треба переконатися, що у вас є текстовий редактор (найпростішим є Блокнот або Nodepad++, тим більше скачати їх можна безкоштовно). Наступний крок – встановлення двигуна WordPress та набору Denwer на локальний комп'ютер. Денвер – це важливий інструмент для програмістів. За допомогою них значно полегшується та прискорюється процес розробки та внесення зміни сайтів. Як його встановлювати, підкаже це відео:

Крок другий: створюють папку нової теми

Переходимо у потрібну директорію. Вона найчастіше має наступний шлях: . Тут зберігаються усі теми – і стандартні, і довільні. Заходимо до неї створюємо нову папку. Називаємо її, наприклад, MyFirstTheme.

Тепер переходимо до нової папки і обов'язково додаємо два файли, зроблені через Nodepad++ або інший редактор. Це index.php та style.css. Поки ці документи нехай залишаться порожніми, потім ми займемося їх наповненням. Ще додайте в MyFirstTheme сюди папку images. куди можна буде додавати зображення для оформлення шаблону.

Надалі в MyFirstTheme можна додавати шаблони для окремих частин сайту: бічної панелі (sidebar.php), сайту (header.php), записів на сторінках (single.php), коментарів (comments.php) та ін. Набір додаткових файлів залежить від структури, яку ви плануєте для свого веб-ресурсу.

Крок третій: заповнення index.php

Перше, що треба зробити, – заповнити індексний файл (index.php). Ось приклад найпростішого коду, за яким сайт має чотири області: header, main, sidebar і footer.

У файлі можна прописати будь-які елементи, які ви бажаєте бачити у себе на сайті. Більше інформації про прописування коду index.php для створення тем у WordPress можна отримати з відео:

Крок четвертий: заповнюємо та style.css

Тепер треба відкрити style.css, додати та заповнити наступні поля (вписати замість *** власну інформацію про сайт та власника). Введені дані відображатимуться в адмінці.

/*Theme Name: ***

Theme URI: http:// ***

Author URI: http:// ***

Description: ***

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

(Інформація в /**/ - це коментарі, а не частини коду)

На даному етапі поки що рано задавати строгі параметри стилів, але при подальшій роботі з файлом вам знадобиться цей відеоурок:

Крок п'ятий: розбиваємо файли

Всі елементи, вказані в index.php, слід продублювати окремими файлами. У першому кроці в прикладі крім головної частини main були вказані header, sidebar і footer - отже, для них створюємо свої документи у форматі.php.

Наприклад, створюємо файл header.php, відкриваємо index.php. знаходимо відповідну ділянку коду та вставляємо його у новий файл. Це буде:

Те саме робиться для інших елементів. Це треба зробити для легшої навігації. Коли елементів майбутнього сайту буде багато, окремі файли допоможуть краще орієнтуватися для перевірки або внесення змін.
Щоб головний індексний файл був узгоджений з додатковими, в index.php під блоками кожної частини треба прописати наступне:

Нижче наведено список стандартних файлів шаблонів, які використовуються WordPress. Їх можна не використовувати або додавати свої розділи:

• Header – стиль шапки вашого сайту.
• Comments – шаблон для створення коментарів.
• Home – тема головної сторінки.
• Page — визначає тему, якщо створите окремі сторінки на сайті
• Category – шаблон для розбиття на категорії
• Date – визначає стиль виведення дати-часу.
• Archive – шаблон для архівного розділу із старими матеріалами.
• Search – файл, у якому вказуються параметри пошуку на сайті.
• 404 — шаблон для сторінки, де повідомляється про помилку 404 Not Found.
• Footer – визначає стиль підвалу вашого сайту.

Коли згодом ви доопрацьовуватимете кожен елемент, знадобиться наочний відеоурок. Ось кілька добірок, які можуть вам допомогти:

Шапка в header.php:

Додавання контенту:

Стилізація коментарів:

Підвал на сайті:

Як можна вносити зміни без побоювань

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

Щоб цього не сталося, можна створити дочірню тему WordPress (підтему) – це дублер файлу стилів style.css, що не торкається головного файлу (зміни в одному не скасовують оновлення в іншому).

Створення дочірньої теми WordPress не складе жодних труднощів. Потрібно зробити нову папку в основному каталозі C:\WebServers\home\localhost\www\НАЗВА_ЗАДАНА_ПРИ_УСТАНОВЦІ\wp-content\themes. У новій папці робимо свій файл style.css з таким вмістом:

Theme Name: НАЗВА ТЕМИ

Template: НАЗВА ПАПКИ У ДОЧЕРНІЙ ТЕМІ

Theme URI: Заповнити

Description: ЗАПОВНИТИ

Author URI: Заповнити

/* імпортуємо стилі батьківської теми */

@import url(«../НАЗВА/style.css»);

/* Свої додаткові стилі */

Foo(color:red; )

Тепер можна в адмінці зайти у «Зовнішній вигляд> Теми» та активувати дочірній шаблон. Надалі можна працювати у новому файлі. На додаток невелика відео-презентація на тему дочірніх шаблонів:

Якщо ви хочете, щоб ваш сайт wordpress став перспективним, то спочатку вам варто задуматися про створення унікальної теми для нього. Цей процес є досить трудомістким, оскільки безпосередньо пов'язані з різними кодуваннями і скриптами. Розберемо його з нуля.

Майже кожна тема на wordpress встановлюється в каталог wp-content/themes і складається з 3 категорій файлів:

1. файли таблиці стилів;
2. файли додаткового функціоналу;
3. файли шаблон.

Файли таблиці стилів є style.css. Вони відповідають за колір, розміри, шрифт та інші параметри елементів сайту. Кожен сайт має лише 1 файл style.css. Якщо відкрити цей файл, то в самому верху можна побачити інформацію про назву, автора та короткий опис теми. При створенні власної теми ви можете вписати в style.css інформацію про себе.

Наступною категорією є файли додаткового функціоналу. До таких відноситься functions.php, принцип роботи якого робить його схожим на плагін. Завдяки цьому файлу ви можете здійснити візуальне налаштування теми прямо на панелі адміністратора. Зазвичай перелік налаштувань не дуже широкий (назва сайту, колір навігації та бічних панелей сайту тощо). Якщо ж тема є багатофункціональною, то перелік налаштувань буде значно ширшим.

Тепер перейдемо до файлів шаблону. Їх основною функцією є створення сторінок, які запитуються відвідувачами сайту. Файли шаблону мають розширення ".php". Найпростіші теми можуть містити лише один файл шаблону під назвою index.php. У такому разі всі сторінки сайту будуть ідентичними. Такий дизайн найчастіше використовується для створення інтернет-ресурсів із базами даних, коли дизайн не відіграє ключової ролі.

Якщо ви ніколи не займалися створенням дизайну, то спочатку вам варто спробувати створити просту тему. Для її нормальної роботи знадобиться хоча б 2 наступні файли: style.css і index.php.

Файли додаткового функціоналу можна не використовувати, як ви зрозуміли. Серед файлів шаблону index.php є одним із найбільш гнучких. Він може самостійно генерувати заголовки, різні блоки, нижню частину (футер), контент та інші елементи сайту.

Варто зазначити, що параметри, які не генеруються файлом index.php, будуть генеруватися стандартними файлами. Наприклад, якщо ваша тема складається тільки з 2 перерахованих вище файлів, але у користувача виникає потреба в генерації форми додавання коментарів, то в такому випадку цю функцію буде виконувати стандартний comments.php. Тому, якщо хочете, щоб ваша тема була більш унікальною, варто зробити додаткові файли шаблону. Розглянемо основні.

1. Для додавання коментарів, як ви здогадалися, використовується шаблон comments.php.
2. Якщо ж ви хочете зробити спливаюче вікно з коментарями, то для таких цілей вам знадобиться comments-popup.php.
3. Щоб генерувати домашню сторінку, використовується home.php.
4. Файл single.php відповідає за відображення статей сайту. Якщо у вас відсутній такий файл, його функцію буде виконувати index.php.
5. Файл page.php здійснює генерацію окремих сторінок сайту.
6. Для виведення інформації про автора вам знадобиться author.php.
7. За категорію відповідає category.php.
8. Відображення архівів, дати та пошуку здійснюється файлами archive.php, date.php та search.php відповідно.
9. Щоб ваш сайт виводив унікальну сторінку помилки номер 404, вам знадобиться додати свій 404.php.
10. Верхня та нижня частина сайту генерується файлами header.php та footer.php відповідно.

Створення унікальної теми вручну з нуля

Для початку необхідно встановити відповідний шаблон. Його можна знайти як на офіційному сайті wordpress.org, так і на якомусь іншому. Рекомендується використовувати офіційний сайт, тому що будь-який сторонній може містити шкідливі файли та биті посилання.

Після того, як визначитеся з вибором, можна почати скачування архіву. Після закінчення процесу вам потрібно буде його розпакувати та завантажити файли у певні папки сайту (в архіві зазвичай міститься невелика інструкція). Завантаження можна здійснити за допомогою програми FileZilla або прямо з хостингу, якщо він підтримує таку опцію. Тепер вам залишиться лише перейти до розділу «Теми», вибрати ту, яку завантажили, і натиснути на кнопку «Активувати».

Також її можна вибрати прямо в панелі адміністратора Wordpress. При цьому вам не потрібно її завантажувати. Вам потрібно буде лише натиснути на клавішу «Встановити», а потім «Активувати». Перед встановленням пропонується здійснити попередній перегляд.

Тепер, коли тему активовано, можна перейти до її унікалізації. Насамперед варто задуматися про верхню частину сайту (шапку). Це перше, що кинеться у вічі вашим відвідувачам, тому варто поставитися відповідально. Зазвичай шапка складається з назви сайту, логотипу та короткої інформації про контент. Шапку можна створити у будь-якому графічному редакторі. Навіть у стандартному Paint. Більш просунуті дизайнери використовують Adobe Photoshop.

Назва сайту має бути невеликою та легкою для запам'ятовування. В Adobe Photoshop можна підібрати багато різних стилів для нього. При створенні логотипу вам можуть знадобитися різні фігури. Їх можна завантажити на офіційному сайті Adobe Photoshop.

Після того, як зробите малюнок шапки у графічному редакторі, вам потрібно буде завантажити його до себе на сайт. Після закінчення завантаження праворуч від малюнка з'явиться URL-адреса, яку потрібно буде скопіювати. Потім вам доведеться перейти в розділ «Редактор» і вибрати файл, який відповідає за генерування шапки (header.php). У ньому потрібно буде знайти URL-адресу поточного малюнка та замінити його на ту, яку ви отримали при завантаженні малюнка шапки. Після цього потрібно буде оновити файл. Тепер можна перейти до перевірки відображення шапки.

Якщо ваша шапка має такі параметри, як стандартна, їх можна підігнати в header.php. Ширина регулюється атрибутом width, а висота – height. Налаштування може здійснюватися у пікселях та відсотках. Тож якщо хочете просто розтягнути шапку, то виставляйте 100%.

При бажанні до шапки можна додати активні посилання на сторінки сайту Wordpress. Це можна зробити за допомогою різноманітних сервісів. Їх в інтернеті досить багато. Більшість із них працює за одним і тим же принципом. Ви обводите бажану область шапки, яка відводиться під посилання, а сервіс видасть вам потрібний код. Потім цей код вам потрібно буде додати файл header.php. Будьте уважні під час його додавання. Кожна точка має значення. Якщо додати код не в те місце, у шапці не з'являться активні посилання.

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

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

Щоб створити якісну навігацію з нуля, вам знадобляться невеликі знання про такі теги, як