Допоможіть!
Це, можливо, ваша перша реакція, коли ви намагаєтеся зрозуміти, що вам потрібно зробити для конвертації сайту на WordPress, вірно?
Навіть якщо ви новачок і не є веб-експертом, ви все одно можете створити тему WordPress, якщо зрозумієте, як працює ця CMS.
Якщо ви використовуєте WordPress, в якості основної платформи для свого сайту, ви швидше за все вже втомилися використовувати загальні теми. Можливо, ви вже замислювалися над тим, щоб створити власну тему з потрібними вам стилями і функціями.
Настроювання сайту WordPress
Ви можете створити свій ідеальний сайт, створивши макет в Photoshop, а потім перетворити PSD-файл в HTML і CSS. Після цього ви можете перетворити його в повністю функціональну тему WordPress.
Розробка сайтів з використанням файлів Photoshop PSD, а потім його перетворення в тему WordPress, є сьогодні одним з найбільш простих методів у веб-дизайні і розробки. Це ідеальний спосіб зробити сайт швидко і просто.
Це простіше простого, повірте!
Ця стаття допоможе вам дізнатися, як конвертувати HTML-CSS статичний сайт повністю функціональну тему WordPress:
- Перетворення HTML-CSS статичного сайту в тему WordPress стане вашим основним методом веб-дизайну і розробки. Це означає, що ви зможете легко створювати сайти для своїх клієнтів за невеликий проміжок часу;
- Прочитавши цю статтю, ви зможете просто отримати знання про те, як створити свою власну тему для WordPress.
Примітка: Ви повинні мати базові знання HTML, CSS, JavaScript і PHP.
Що ви повинні в результаті отримати
В кінці цієї статті ви дізнаєтеся, як перетворити ваш статичний HTML сайт повністю функціональну тему WordPress. Ця стаття дасть вам уявлення про шаблони, теми WordPress, про які ми вже говорили в першій частині цієї серії.
У цій статті ви повинні будете слідувати стандартам кодування WordPress:
Завжди спочатку проводите валідацію HTML і CSS кодів. Ви можете скористатися такими сервісами валідації, як W3C, щоб переконатися, що ваша розмітка і стилі валідні.
Переконайтеся, що синтаксис коду WordPress не викличе жодних проблем. Ви завжди можете відвідати цей сайт, щоб перевірити, чи відповідає ваш код стандартам WordPress.
Завжди перевіряйте код у всіх браузерах, якщо це можливо. Щоб уникнути будь-яких проблем у вашій темі в подальшому, переконайтеся, що ваш сайт працює у всіх основних браузерах.
Перевірте свій код на кількох пристроях. Оскільки планшети та інші мобільні пристрої стають все більш популярними, ідеально, якщо ваш сайт буде адаптивним і буде працювати на сучасних гаджетах.
Про що ви дізналися на поточний момент?
У першій частині цього уроку ми мали справу з наступним:
- копіювання файлів в папку NeoBlog WP;
- style.css;
- screenshot.png;
- активація теми.
Якщо ви стежили за першої статті цієї серії, то знаєте, що в ній ми назвали тему WordPress за допомогою файлу style.css і додали скріншот теми, щоб її іконка відображалася в панелі адміністрування WordPress.
Після цього, ми активували тему. Дійсно, нам ще багато належить зробити. Освіжіть в пам’яті дії, описані в першій статті, після чого ви зможете насолоджуватися етапами розробки другий частини.
У цій статті ми приділимо більше уваги шаблонів WordPress, про яких згадували першій частині цього циклу статей.
Без подальшої передмов, давайте почнемо роботу з шаблонами, щоб створити повністю функціональну тему WordPress.
Що вас чекає
Якщо бути точним, ми будемо працювати з такими файлами:
- functions.php;
- header.php;
- footer.php;
- searchform.php;
- sidebar.php;
- index.php;
- single.php;
- page.php;
- page-about.php;
- page-contact.php;
- page-contact.php;
- search.php;
- content-search.php;
- comments.php;
- 404.php.
Ресурси, необхідні для виконання завдань даної статті:
- Тема NeoBlog HTML and CSS;
- Базові знання з Кодексу WordPress;
- Деякі навички PHP і jQuery.
На чому ми зосередимося у цій статті?
У першій частині цієї серії ви дізналися, як підготувати HTML і CSS файлів для конвертації в WordPress, а також як створити скріншот і активувати тему.
В цій частині ви дізнаєтеся код, який потрібно додати в інші шаблони, щоб створити робочу тему WordPress.
В кінці цієї статті ви отримаєте той же результат, що і у файлі демо-зображення, яке ми розмістили в першій частині.
КРОК 1 — Визначення констант і реєстрація підтримки меню навігації
Тема вже активована! Тепер нам потрібно додати підтримку папки теми, а також меню навігації через файл functions.php. Створюємо файл functions.php у кореневому каталозі теми NeoBlog WP.
Далі, визначаємо константи для каталогу теми. Скопіюйте наведений нижче код в тільки що створений файл functions.php.
(Примітка: оскільки це PHP-файл, що всі функції та коди, які відносяться до PHP, повинні бути укладені в тег ).
/***********************************************************************************************/
/* Define Constants */
/***********************************************************************************************/
define(‘THEMEDIR’, get_stylesheet_directory_uri());
define(‘IMG’, THEMEDIR.’/images’);
Вам також потрібно зареєструвати функцію для навігації в меню. Нижче наведені функції, необхідні, щоб створити робочу навігацію. Скопіюйте цей код:
add_action(‘init’, ‘register_my_menus’);
function register_my_menus() {
register_nav_menus(array(
‘main-menu’ => ‘Main Menu’
));
}
Метод add_action додає в регістр меню навігації. В якості першого аргументу використовується подія (до якого пізніше буде додано дію), а другий аргумент визначає виклик функції register_my_menus.
Щоб отримати додаткову інформацію ознайомтеся з цією сторінкою.
КРОК 2 — Створення файлу header.php
Тепер створіть файл header.php. Відкрийте файл index.html і скопіюйте з нього все, починаючи від відкриття оголошення DOCTYPE і до закривається тега, а потім вставте цей код у файл header.php, створений в папці теми NeoBlog WP:
