Перетворіть HTML у WordPress як професіонал

Коли Інтернет тільки починався, веб-сайти були досить тупими. Тобто вони були нічим іншим, як текстом і статичним HTML-кодом, без химерних ефектів і дуже мало інтерактивності.

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

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

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

Якщо у вас є веб-сайт, який не оновлювався з 1990-х років, ця стаття, створена нашою командою wpDataTables, допоможе вам перетворити HTML на WordPress, щоб ви також могли скористатися перевагами сучасних веб-технологій.

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

Чому вам варто конвертувати HTML у WordPress?

Причини, чому людина повинна конвертувати HTML у WordPress, досить різноманітні. Ось добірка найважливіших:

• Перехід на WordPress дає вам повний контроль над кожною деталлю вашого сайту. Щоразу, коли вам не подобається частина вашого сайту, ви можете легко налаштувати її на свій смак.
• Доступ до сайтів WordPress, керування та обслуговування набагато простіший, ніж сайти зі статичним HTML. Це дуже важлива причина для перенесення HTML на WordPress.
• Перетворивши стиль шаблону HTML на WordPress, ви отримаєте унікальну тему, якою не володітиме жодна інша особа, яка використовує CMS.
• WordPress допомагає оптимізувати пошукову систему та гарантує, що ваш веб-сайт знайдуть більше людей.
• Як розробнику веб-сайтів, ваша робота скоротиться вдвічі, оскільки WordPress виконає більшість дій, які раніше вимагали надто багато часу.

Перехід від статичного HTML до WordPress: методи

Тепер, коли у вас є всі причини конвертувати HTML у WordPress, ви можете продовжити, щоб дізнатися, як це зробити.

Є два способи, які ви можете вибрати: ручний метод, який передбачає виконання всього самостійно, з нуля; і метод дочірньої теми, який передбачає використання базової теми WordPress і її налаштування відповідно до ваших потреб.

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

Ручний метод

1 Створіть папку нової теми

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

• style.css
• index.php
• header.php
• sidebar.php
• нижній колонтитул.php

2 Скопіюйте наявний CSS-код у нову таблицю стилів

Створивши файли, можна переходити до копіювання коду CSS. Тим, хто хоче скопіювати свої сайти та перенести їх на WordPress, доведеться експортувати та імпортувати код CSS свого попереднього сайту. CSS відповідає за те, як виглядає сайт, тому відредагуйте файл style.css, додавши до нього такі рядки коду:

/*
Theme Name: Replace with your Theme's name.
Theme URI: Your Theme's URI
Description: A brief description.
Version: 1.0
Author: You
Author URI: Your website address.
*/

Замініть необхідну інформацію на свою власну, додайте решту рядків CSS, і все готово. Не забудьте зберегти файл. Тепер ви можете закрити style.css.

3 Отримайте поточний код HTML

Перейдіть до файлу index.html вашого сайту та виділіть увесь вміст від початку документа до тегу div class="main". Цей розділ потрібно вставити у файл header.php, який ви створили на кроці 1.

Поверніться до файлу index.html і виділіть усе всередині елемента class="sidebar”. Скопіюйте вміст і вставте його у файл sidebar.php, який ви створили. Зробіть те саме для нижнього колонтитула з усім вмістом після елемента бічної панелі.

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

4 Відредагуйте файл index.php

Щоб завершити свій файл index.php, скопіюйте ці рядки коду та вставте їх у верхній частині документа:

Потім у самому низу файлу index.php розмістіть ці рядки PHP.

Файл ще не готовий, тому що вам потрібно створити цикл публікацій, який представляє деякий PHP-код, потрібний WordPress для правильного відображення публікацій у блозі чи статей вашого веб-сайту. Додайте такі рядки коду в розділ вмісту файлу:

Після цього збережіть файл, закрийте його та перейдіть до наступного кроку.

5 Завантажте нову тему

Коли папка з темою буде готова, її потрібно завантажити на свій сайт і завершити перетворення HTML у WordPress. Для цього перейдіть до папки, у яку ви встановили WordPress, і помістіть щойно створену папку в /wp-content/themes/.

Перейдіть на сторінку адміністратора WP, виберіть «Вигляд», а потім «Теми», щоб побачити, чи відображається назва теми у списку чи ні. Якщо так, ви все зробили правильно і можете його активувати. Якщо ні, ще раз уважно прочитайте всі кроки, як конвертувати HTML у WordPress.

Існує також цей корисний відеопосібник від Traversy Media, який ви повинні переглянути:

Використання дочірньої теми WordPress

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

Щоб швидше конвертувати HTML у WordPress, ви можете використовувати дочірню тему з існуючої теми. Дочірні теми називаються так, оскільки вони побудовані на другій темі, яка є батьківською.

1 Виберіть тему

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

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

2 Створіть папку нової теми

Як і в попередньому випадку, вам доведеться створити нову папку теми. Єдина відмінність полягає в тому, що ви назвете папку так само, як і батьківську тему, на якій базується ваша дочірня тема, і додайте до неї суфікс «-child».

Наприклад, якщо ваша тема називається Twenty Nine, ви назвете папку «twentynine-child». Переконайтеся, що в імені немає пробілів.

3 Налаштуйте нову таблицю стилів

Далі створіть файл style.css у папці та додайте ці рядки коду:

/*
Theme Name: Twenty Nineteen Child
Theme URI: http://example.com/twenty-nineteen-child/
Description: Twenty Nineteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentynineteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-nineteen-child
*/

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

4 Створіть файл functions.php

Отримавши файл style.css, ви можете активувати тему як вона є. Однак, щоб веб-сайт виглядав і працював краще, вам доведеться використовувати функції та стилі батьківської теми. Для цього вам потрібно створити файл functions.php.

Використовуйте ці рядки коду та збережіть файл:

/*
Theme Name: Twenty Nineteen Child
Theme URI: http://example.com/twenty-nineteen-child/
Description: Twenty Nineteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentynineteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-nineteen-child
*/

5 Активуйте дочірню тему

Нарешті, вам потрібно активувати тему. Заархівуйте папку та додайте її до WordPress, перейшовши до меню «Вигляд», «Теми», а потім натисніть «Додати новий». Завантажте туди архівований файл. Іншим варіантом було б перетягнути папку в wp-content/themes.

На закриття

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

Якщо ви уважно виконаєте кроки, наведені в цій статті, нічого не може піти не так, тому не хвилюйтеся! Однак якщо у вас виникнуть проблеми, не соромтеся відвідати форуми підтримки спільноти WordPress. Там багато користувачів, які були б раді вам допомогти.

Якщо вам сподобалося читати цю статтю про перетворення HTML на WordPress, вам слід переглянути цю статтю про зарплату розробника WordPress.

Ми також писали про кілька пов’язаних тем, як-от найкращий редактор коду, навчання WordPress, бібліотеки JavaScript і розширення Brackets.