Веб-дизайн і розробка є одними з найбільш затребуваних спеціальностей в останні роки. Згодні?
Так як інтернет-бізнес зростає, все більше і більше клієнтів готові витрачати великі суми на свої сайти і на людей, що мають необхідні навички. Ви, можливо, вивчили, як створити сайт на HTML і CSS. Але, швидше за все, в даний час створення таких сайтів більше не має сенсу для великого бізнесу або навіть блогу. Це вагома причина зробити WordPress-конвертацію сайту з HTML і CSS.
На перший погляд, існує кілька причин, чому люди зупинялися на варіанті статичного HTML (CSS) сайту.
Чому люди вибирали статичні веб-сайти?
- Статичний сайт підтримується майже будь-яким браузером;
- Легка настройка.
Але коли справа доходить до функціональності, динамічний сайт, наприклад, на WordPress, це більше вірний шлях.
Чому?
Статичні веб-сайти самі по собі не можуть виводити вміст динамічно, так як вони створені на статичному мовою.
Швидка зміна дизайну. Вам не потрібно витрачати багато часу на налаштування кольору і зовнішнього вигляду. Ви можете налаштувати це безпосередньо через панель адміністрування.
Шаблони виглядають набагато краще, ніж сайти, побудовані на традиційному статичному HTML.
Вам не потрібно писати код, що якщо ви хочете додати сторінку або запис. Просто робите це через панель адміністрування.
Функції безпеки, пропоновані HTML, набагато більш обмежені, ніж безпека динамічних сайтів на WordPress та інших CMS.
Якщо ви запустили статичний (тільки HTML і CSS) сайт, вам не потрібно кидати розпочате якщо ви хочете перейти на WordPress. Тим не менш, конвертування HTML-CSS сайту на WordPress вимагає деяких навичок програмування, таких як знання PHP і JQuery — щоб перевести статичний сайт на динамічну платформу WordPress.
У цій серії з двох частин я розповім про основні засади перетворення HTML в повністю функціональну тему WordPress з використанням теми NeoBlog HTML and CSS.
В кінці цієї статті ви будете знати, як можна перетворити статичні HTML-CSS сайт повністю динамічний сайт на WordPress. Це забезпечить власникам сайтів велику гнучкість, тим самим, вдихнувши в сайт нове життя.
Ресурси, необхідні для виконання завдань даної статті
- Тема NeoBlog HTML and CSS;
- Базові знання з Кодексу WordPress;
- Деякі навички PHP і jQuery.
Що ми створюємо
Що потрібно знати про код
Тема WordPress є свого роду «шкіркою» зовнішнього дизайну вашого сайту. За допомогою теми загальний вигляд вашого сайту може бути істотно змінений, а WordPress надасть для цього графічний інтерфейс.
При створенні теми WordPress, варто звернути увагу на наступне:
- Будьте обережні з іменами файлів шаблонів, які ви створюєте. За замовчуванням WordPress розпізнає такі імена файлів шаблонів, як single.php і page.php. Перш ніж називати або створити новий користувальницький файл, я рекомендую перевірити імена шаблонів WordPress за замовчуванням;
- Ознайомтеся з розділами Кодексу WordPress, присвяченими певних функцій, тегам або іншим елементам перед тим, як використовувати їх у файлах шаблонів. Це підкаже вам правильний напрямок для розвитку вашої теми;
- У деяких випадках вам будуть потрібні зовнішні файли JQuery, щоб поліпшити зовнішній вигляд теми WordPress або додати деякі функції. WordPress не надає всі необхідні ресурси в базовій комплектації;
- Переконайтеся, що ви використовуєте належним чином структурований, без помилок PHP-код і дійсний HTML-код. Для отримання більш детальної інформації ознайомтеся зі стандартами кодування WordPress;
- Використовуйте чистий, дійсний CSS. Дивіться стандарти кодування CSS.
- При розробці дизайну макету сайту дотримуйтесь основних принципів дизайну.
- Зберігайте резервні копії файлів. Ви ніколи нічого не втратите, якщо будете створювати резервні копії файлів. В якості додаткових заходів обережності, ви повинні створювати резервні копії всіх файлів теми, плагіни, які ви використовуєте, а також деяких інших файлів, пов’язаних з розробкою теми.
Для чого вам потрібні знання PHP?
PHP — це мова програмування і створення скриптів для динамічних інтерактивних веб-сайтів. Це повсюдно використовується мова скриптів з відкритим вихідним кодом, який особливо підходить для веб-розробки. На додаток до цього, він може бути вбудований в HTML.
WordPress використовує PHP в якості мови скриптів. Він має ліцензію з відкритим вихідним кодом, завірену Open Source Initiative. Деякі частини структури коду WordPress для PHP-розмітки суперечать один одному, тому важливо, щоб у вас були базові навички PHP.
Тим не менш, щоб створити тему WordPress, вам не обов’язково бути PHP-розробником. Вам достатньо мати базові знання HTML, CSS, JavaScript, а також PHP.
Як це працює?
По-перше, потрібно визначити файли, необхідні для створення повноцінної теми WordPress. Далі потрібно додати код в кожен файл шаблону.
У процесі розвитку вам будуть зустрічатися функції, які можуть бути не зовсім зрозумілі для вас. В цьому випадку вам повинен допомогти Кодекс WordPress.
Після того, як ви створите всі необхідні шаблони, вам потрібно буде додати в вашу тему деякий контент, щоб перевірити, чи всі коди, які ви використовуєте, працюють коректно.
Приступаємо до роботи
Для початку вам потрібно створити папку теми у папці WordPress wp-content/themes.
Будь ласка, зверніть увагу, що ім’я папки має відповідати назві теми, яку ви хочете створити. Для цієї статті тема і папка будуть називатися NeoBlog:
Файли шаблонів
Порівняно зі статичним HTML-CSS сайтом тема WordPress складається з купи файлів шаблонів.
Це файли, які містять код, що забезпечує функціонування теми WordPress. Тому створіть у папці теми NeoBlog наступні файли:
- Папка CSS — ця тека містить всі таблиці стилів. Скопіюйте папку з теми NeoBlog HTML and CSS;
- Папку fonts — ця тека містить всі зовнішні шрифти, використовувані в розмітці. Скопіюйте папку з теми NeoBlog HTML and CSS;
- Папка images — ця тека містить всі зображення, такі як логотип і так далі. Ця папка повинні бути скопійована з теми NeoBlog HTML and CSS;
- Папка JS — ця тека містить всі скрипти JavaScript. Її також скопіюйте з теми NeoBlog HTML and CSS;
- header.php цей файл буде містити код для розділу заголовка теми;
- footer.php цей файл буде містити код для розділу підвалу теми;
- index.php — це головний файл для теми. Він буде містити код головної сторінки, і вказувати, де будуть включатися інші файли;
- functions.php цей файл працює як плагін WordPress, додаючи нові можливості і функціонал для сайту на WordPress;
- single.php цей файл буде містити основну компонування сторінки блогу;
- page.php — основний макет сторінки;
- page-about.php — це вбудований шаблон типу запису WordPress. Якщо конкретні сторінки або групи сторінок сайту повинні вести себе або відображатися по-іншому, це легко зробити за допомогою шаблону сторінки. Він використовується для виводу сторінки «Про нас»;
- page-contact.php — ще один вбудований шаблон типу запису WordPress. Він буде виводити контактну форму на сторінках, де це було задано;
- content-search.php цей файл буде запускати цикл для пошуку необхідних результатів;
- search.php цей файл відповідає за відображення сторінки результатів пошуку;
- searchform.php цей файл містить макет форми пошуку;
- comments.php цей файл містить код для відображення коментарів;
- sidebar.php цей файл містить область віджетів бічній панелі;
- 404.php цей файл буде повертати повідомлення «Not Found«, якщо за конкретним пошуковим запитом нічого не знайдено або відповідний об’єкт не існує в базі даних;
- style.css — файл буде включати в себе всі стилі та інформацію теми NeoBlog;
- screenshot — файл PNG-зображення, який повинен представляти дизайн теми або заголовок теми. Для отримання додаткової інформації відвідайте цю сторінку.
Протягом цієї статті ми будемо наповнювати ці файли кодами, які являють собою меню, звернення, цикли і віджети.
У цій частині серії статей нам потрібно буде зайнятися наступним:
- Скопіювати файли в папку NeoBlog WP;
- style.css;
- screenshot.png;
- Активувати тему.
КРОК 1 — Копіювання необхідних файлів в тему NeoBlog WP
Для початку скопіюйте папку CSS, шрифтів, зображень і JS з теми NeoBlog HTML and CSS в папку теми NeoBlog WP:
КРОК 2 — Неймінг вашої теми WordPress за допомогою файлу style.css
Перш ніж почати роботу з файлами шаблонів, додайте посилання на таблиці стилів теми NeoBlog HTML and CSS в тему NeoBlog WP. Потім створіть файл style.css в тему NeoBlog WP і скопіюйте в нього наведений нижче код:
/*
Theme Name: NeoBlog
Theme URI: http://www.1stwebdesigner.com/
Author: Sam Norton
Author URI: http://www.1stwebdesigner.com/
Description: A Simple Blog Theme for 1stwebdesigner.com
Версія: 1.0
Ліцензія: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
@import url(«css/reset.css»);
@import url(«css/bootstrap.css»);
@import url(«css/style.css»);
Цей код не містить нічого специфічного, тільки укладену в теги коментарів стандартну інформацію про темі: назва, автор, сайт автора і так далі. Це забезпечить ідентифікацію теми при установці.
Також в цьому коді міститься ряд тегів @import. Вони пов’язують стилі з папки CSS з основними стилями теми NeoBlog WP, які містяться в цьому файлі.
КРОК 3 — Додавання файлу зображення скріншота
Тепер, коли тема була успішно проименована через файл style.css, нам потрібно додати скріншот теми. Створіть в Photoshop файл зображення з розмірами 880 на 660 пікселів і помістіть в нього тексти з заголовком, коротким описом та ім’ям автора теми.
Насправді в панелі адміністрування WordPress скріншот буде виводитися у вирішенні 387 на 290 пікселів, але збільшений більш ніж у два рази розмір зображення дозволяє переглядати його у високому дозволі на HiDPI дисплеях:
Після цього збережіть тільки що створений файл під ім’ям screenshot.png в кореневому каталозі теми NeoBlog WP.
КРОК 4 — Активація теми
Після додавання скріншота нам потрібно активувати тему NeoBlog WP.
Але перш ніж зробити це, потрібно перевірити, чи працює тема чи ні. Для цього потрібно створити в кореневому каталозі теми NeoBlog WP порожній файл index.php (не хвилюйтеся, коди ми додамо в нього пізніше).
Далі, активуйте тему, перейдіть в панель адміністрування і в головному меню WordPress виберіть розділ Дизайн -> Теми. Наведіть курсор на іконку, відповідну нашої теми, і натисніть кнопку Активувати:
Якщо ви зараз захочете перевірити зовнішній вигляд теми NeoBlog WP, то побачите порожню сторінку, тому що ми ще нічого не додали в файл index.php.
Основні труднощі, з якими ви можете зіткнутися
Під час роботи у вас можуть виникнути проблеми з суміщенням PHPі HTML-кодів.
Що слід зробити
Двічі перевірте код. Це перше, що ви повинні зробити. Може трапитися, що ви забули закрити оператор if або while всередині циклу WordPress.
Наведений нижче код буде видавати помилку, так як в операторі відсутня end if:
Наприклад:
У наведеному нижче коді ця проблема вирішена:
Також перевірте, чи скрізь ви розставили закриваються теги; в іншому випадку, при змішуванні з HTML-кодом PHP може не працювати.
Якщо ви хочете дізнатися більше про те, як додати додаткові функції в свій блог, зверніться до Кодексу WordPress.
Які існують обмеження?
Хоча ця стаття дасть вам основу для початку розробки теми, існують деякі обмеження.
Дана тема буде забезпечувати тільки базові функції блогу, наприклад, бічну панель і футер, форму пошуку, список записів, спеціальні зображення і так далі.
Висновок
Відмінно! Ми закінчили першу частину цієї серії статей. З цієї статті ви дізналися, як створити файли шаблонів, і на що варто звернути особливу увагу при створенні теми WordPress.
Післямова
Якщо ви використовуєте WordPress, то ймовірно витрачали багато часу на пошук теми, яка вам сподобалася. Наприклад, вам довго довелося шукати тему, яка б мала певні кольори, але з іншого налаштуванням елементів. Так може бути, настав час навчитися створювати свою власну тему для WordPress.
Ця серія статей допоможе навчитися конвертувати HTML і CSS шаблон, і в той же час ви зможете створити свою власну тему для WordPress. Ми з’ясуємо всю таємницю і розглянемо, як працює тема, детально розібравшись з усіма файлами, які необхідні для створення повнофункціональної теми WordPress.
Наш HTML тепер готовий і його можна конвертувати в набір файлів теми. У наступній статті ми попрацюємо з файлами шаблонів і додамо функції для вашої теми WordPress.
Це було не так вже й страшно, як могло здатися, чи не правда? Не забувайте, що це всього лише перша частина. Якщо вам не терпиться, спробуйте зробити все, про що тут писалося вже зараз, і напишіть в коментарях, що у вас вийшло.
Переклад статті «Energize Your Static Website with This WordPress Conversion Tutorial (Part 1)» був підготовлений дружною командою проекту Сайтостроение від А до Я.
