Перетворення HTML у WordPress (крок за кроком)


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


Однак це не означає, що статичних веб-сайтів HTML вже не існує. Насправді HTML5, остання ітерація мови розмітки, є дуже потужним і дозволяє створювати якісні веб-сайти без CMS за ними.

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

Частка ринку WordPress у 2019 році

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

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

Давайте підемо.

Contents

3 способи переходу від статичного HTML до WordPress

Щоб перейти від HTML до WordPress, вам потрібно перетворити свій дизайн HTML у тему WordPress. Тема контролює зовнішній вигляд веб-сайту WordPress, тоді як функціональність надається самою CMS, а також додатковими плагінами.

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

A) Перетворення HTML вручну на тему WordPress

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

Це не надто складно, особливо якщо у вас є досвід кодування. Ви можете витягнути це за допомогою трохи HTML, CSS та деяких знань PHP. Багато цього – копіювати та вставляти.

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

Хоча ваш сайт буде виконувати свою роботу, ви не зможете ним керувати повністю за допомогою WordPress. З цієї причини ми особисто віддаємо перевагу наступному варіанту.

Б) HTML в WordPress через тему для дитини WordPress

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

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

C) Імпорт вмісту з HTML у WordPress за допомогою плагіна

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

A) Як вручну перетворити HTML в тему WordPress

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

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

1. Створіть папку з темами та основні файли

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

Після цього перейдіть до редактора коду і створіть ряд текстових файлів. Назвіть їх наступним чином:

  • style.css
  • index.php
  • header.php
  • sidebar.php
  • footer.php

Нічого не робіть з ними, тримайте файли відкритими в редакторі. Вам вони знадобляться незабаром.

2. Скопіюйте існуючий CSS у таблицю стилів WordPress

Настав час підготувати аркуш стилів WordPress (файлstyle.css Ви щойно створили), щоб скопіювати CSS вашого старого сайту в нього. Для цього відкрийте файл і вставте наступне:

/ *
Назва теми: Двадцять тринадцять
Тема URI: http://wordpress.org/themes/twentythirteen
Автор: команда WordPress
Автор URI: http://wordpress.org/
Опис: Тема 2013 року для WordPress повертає нас до блогу, де представлений повний спектр форматів публікацій, кожен з яких красиво відображається по-своєму. Деталі дизайну рясніють, починаючи з яскравої кольорової гами та відповідних зображень заголовків, красивої типографії та піктограм та гнучкої компоновки, яка чудово виглядає на будь-якому пристрої, великому чи маленькому.
Версія: 1.0
Ліцензія: Загальна публічна ліцензія GNU v2 або новішої версії
URI ліцензії: http://www.gnu.org/licenses/gpl-2.0.html
Теги: чорний, коричневий, помаранчевий, коричневий, білий, жовтий, світлий, одноколонний, двоколонний, правий бічний рядок, гнучка ширина, користувацький заголовок, користувацьке меню, редактор-стиль, підкреслені зображення, мікроформати, постформати, підтримка мови rtl, стик-пост, переклад готовий
Текстовий домен: двадцять тринадцять

* /

Це так званий заголовок аркуша стилів (Важливо: не залишайте коментар/*...*/ теги виходять!). Заповніть кожну частину так:

  • Назва теми – Тут іде назва вашої теми. Це може бути все, що завгодно, але це зазвичай те саме, що і назва вашої тематичної папки.
  • Тема URI – Ви зазвичай розміщуєте домашню сторінку теми тут, але ви можете використовувати свою власну адресу.
  • Автор – Це ти. Поставте тут своє власне ім’я або те, що ви хочете, щоб вас називали.
  • Автор URI – Посилання на вашу домашню сторінку. Це може бути той, який ви будуєте, або що має сенс.
  • Опис – Необов’язковий опис вашої теми. Це з’явиться у серверній програмі WordPress.
  • Версія – Версія вашої теми. Оскільки ви його не публікуєте, це насправді не має значення. Ми зазвичай ставимо тут 1,0.
  • Ліцензія, URI ліцензії, теги – Ці речі важливі лише, якщо ви плануєте подати свою тему до Каталог тем WordPress. Ви можете залишити їх у цьому випадку, ми просто включили їх для завершення.

Після заголовка скопіюйте та вставте існуючий CSS зі свого статичного веб-сайту HTML. Потім збережіть файл у новій темі та закрийте його. Час перейти до відпочинку.

3. Розділіть свій існуючий HTML

У наступній частині вам потрібно зрозуміти, що WordPress зазвичай використовує PHP для витягування інформації зі своєї бази даних. З цієї причини вам потрібно подрібнити наявний HTML на різні частини, щоб CMS змогла правильно їх скласти.

Хоча це звучить складно, все це означає, що ви копіюєте та вставляєте частини свого документа HTML у кілька файлів PHP. Щоб краще продемонструвати це, ми склали просту сторінку з прикладом, яку ви можете побачити нижче.

HTML на сторінку приклад WordPress

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





Назва веб-сайту







Назва веб-сайту

  • елемент наві # 1
  • елемент наві # 2
  • елемент наві 3

Назва статті

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel Vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper posleat est, eu porta velit mollis nec.

Підзаголовка

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel Vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper posleat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Proin in est sed erat facilisis pharetra.

Підзаголовка

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel Vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper posleat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Proin in est sed erat facilisis pharetra.

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

Спочатку відкрийте свій струм index.html (головний файл вашого веб-сайту HTML). Після цього перегляньте щойно створені файли WordPress та скопіюйте їх у них (приклади нижче – це моя розмітка):

header.php

Все, починаючи з початку вашого HTML-файлу до основної області вмісту (зазвичай позначається символом

або

) переходить у цей файл. Крім того, прямо перед тим, де сказано, копіювати і вставляти . Це важливо, щоб багато плагінів WordPress працювали належним чином.




Назва веб-сайту






Назва веб-сайту

  • елемент наві # 1
  • елемент наві # 2
  • елемент наві 3

sidebar.php

Все, що належить до розділу

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

4. «WordPressify» Header.php та Index.php

Для заголовка залишилось лише змінити виклик для аркуша стилів з HTML на формат WordPress. Для цього шукайте наявне посилання в розділ. Це може виглядати приблизно так:

Замініть його таким:

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




Це дзвінки для інших файлів, які містять решту вашого сайту. Можливо, ви помітите пробіл між викликом для заголовка та бічної панелі. Тут ви додасте Петля.

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


Тепер збережіть index.php файл і закрийте його. Молодці! Ваша основна тема готова. Тепер ви можете додати його на новий сайт WordPress.

5. Створіть знімок екрана та завантажте тему

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

Для цього відкрийте свій веб-сайт у веб-переглядачі та зробіть знімок екрана з обраним способом. Після цього відкрийте на свій вибір програмне забезпечення для редагування зображень та обріжте його до 880 × 660 пікселів. Збережіть як screenshot.png і додайте його до папки тем. Тепер ви готові завантажити свою тему.

Щоб отримати нову тему на вашому сайті WordPress, у вас є кілька варіантів. Однак обов’язковою умовою є те, щоб усі файли знаходились у вашій темі.

Перший варіант – створити з нього ZIP-файл. Після цього перейдіть на свій сайт WordPress, а потім на Зовнішній вигляд> Теми. Тут натисніть Додати новий вгорі і потім Завантажити тему.

завантажити конвертовану тему

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

Крім того, ви можете підключитися до свого сервера через FTP (або просто перейти до локального каталогу на жорсткому диску) та перейти до wp-content / теми. Потім завантажте туди свою папку тем (нерозпаковане). Після цього активуйте тему з того самого місця, що і раніше.

Приємно! Передня частина вашого нового сайту повинна виглядати як ваша стара. Залишилося лише перейти від HTML до WordPress – імпортувати наявний вміст. Ми розповімо це далі нижче, коли будемо говорити про використання існуючої теми WordPress.

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

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

Б) HTML в WordPress через тему для дитини WordPress

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

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

1. Виберіть підходящу тему

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

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

Вибравши тему, встановіть тему на веб-сайті WordPress так, як ви встановили будь-яку тему. Не потрібно його активувати. Як уже згадувалося, саме там можна створити базу для роботи. Решта відбувається в дитячій темі.

2. Створіть нову папку

Аналогічно попередньому методу для дочірньої теми вам потрібно створити тему. Ось де ви помістите всі файли, що належать до нього.

Створюючи дочірні теми, папку зазвичай називають тією ж назвою, що і батьківська тема плюс -дитина. Отже, оскільки тема нашої дитини базується на темі «Двадцять дванадцять», ми називаємо її довідник двадцятьсот-дитина.

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

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

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

До другої частини ми дістанемось пізніше. Наразі створіть звичайне style.css і помістіть його в папку з темами. Потім додайте наступне:

/ *
Назва теми: Двадцять п'ятнадцять дітей
Тема URI: http://example.com/twenty-fifteen-child/
Опис: Двадцять п’ятнадцять тематика дитини
Автор: Джон Доу
Автор URI: http://example.com
Шаблон: двадцять п’ятнадцять
Версія: 1.0.0
Ліцензія: Загальна публічна ліцензія GNU v2 або новішої версії
URI ліцензії: http://www.gnu.org/licenses/gpl-2.0.html
Теги: світлий, темний, двоколонний, права бічна панель, адаптивний макет, доступність
Текстовий домен: двадцять п’ятнадцять дітей
* /

Як бачите, він дуже схожий на заголовок аркуша стилів, який ви використовували раніше, за одним винятком: він містить Шаблон тег.

У цьому розділі слід вказати назву теми, яка буде функціонувати як батьківська. Без цього дочірня тема не працюватиме. Щоб цього уникнути, введіть ім’я папки батьків. Отже, для двадцяти дванадцяти, це було б Шаблон: двадцять полотен.

4. Створіть Functions.php та спадкові батьківські стилі

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

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

Однак у цьому випадку ви будете використовувати його лише для виклику батьківського стилю. Для цього створіть новий файл і зателефонуйте до нього function.php. Перше, що ви додасте на самому початку, це:

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

функція child_theme_enqueue_styles () {

$ parent_style = 'батьківський стиль';

wp_enqueue_style ($ parent_style, get_template_directory_uri (). '/style.css');
wp_enqueue_style ("дитячий стиль",
get_stylesheet_directory_uri (). '/style.css',
масив ($ parent_style),
wp_get_theme () -> get ('Версія')
);
}
добавлення ('wp_enqueue_scripts', 'child_theme_enqueue_styles');

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

5. Активуйте тему дитини

У цей момент дочірня тема готова до активації.

Ви можете додати скріншот до нього, як у наведених вище інструкціях. Крім цього, ви можете або застебнути його, і додати його до WordPress через Зовнішній вигляд> Теми> Додати нове> Завантажити тему або просто додавши папку як слід wp-content / теми.

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

6. Відрегулюйте конструкцію

Ось з чого починається вищезазначена детективна робота. Настав час змінити дизайн існуючої теми, щоб він нагадував ваш початковий HTML-сайт.

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

html до wordpress через сторінку прикладу теми для дітей

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

корпус {
маржа: 0;
}

Потім ми робимо те ж саме з моєю новою темою WordPress, де ми знаходимо ці стилі:

корпус. сайт {
margin-top: 48 пікселів;
margin-top: 3.428571429rem;
маржа-нижня: 48 пікселів;
маржа-нижня: 3,428571429rem;
}

Моя мета зараз застосувати стилізацію з сайту HTML до теми WordPress. У цьому випадку ми можемо досягти цього, просто додавши наступне до теми моєї дитини style.css:

корпус. сайт {
маржа: 0 авто;
}

Після збереження тема WordPress має до неї нові стилі:

html до wordpress через довідкову сторінку, відредаговану темою

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

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

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

C) Імпорт вмісту з HTML у WordPress за допомогою плагіна

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

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

1. Встановіть плагін імпорту

Перше, що вам потрібно зробити - це встановити плагін Імпорт HTML 2. Найпростіший спосіб досягти цього - це піти Плагіни> Додати нове і шукайте його по імені. Коли ви знайдете його у списку (він може бути внизу), натисніть на Встановити зараз. Активуйте його, коли це зроблено.

html до WordPress плагін імпорту

2. Підготуйте імпорт

Щоб імпортувати відразу кілька сторінок, вам потрібно завантажити їх на той же сервер, що і ваша установка WordPress. Плагін запропонує щось подібне html-файли для імпорту  назва папки, але ви можете вибрати все, що завгодно. Просто не забудьте запам'ятати ім'я шляху.

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

Файли

html для імпорту файлів WordPress

Налаштуйте цей екран так:

  • Каталог для імпорту - Введіть шлях, в який ви щойно скопіювали наявні файли.
  • Стара URL-адреса сайту - Використовується для переадресації. Введіть стару URL-адресу. Ми з цим знову розберемося в цій статті.
  • Файл за замовчуванням —Зазвичай файл за замовчуванням для каталогів на старому сайті index.html.
  • Розширення файлів, які слід включити - розширення файлів, які потрібно імпортувати.
  • Каталоги для виключення - Якщо у вас на старому сайті є каталоги, які ви не хочете імпортувати, введіть їх тут.
  • Збережіть імена файлів - Щоб плагін автоматично використовував імена ваших файлів як нову URL-адресу, поставте цей прапорець. Це має сенс, якщо ваші заголовки дуже довгі, тому що, як правило, імпортер використовуватиме їх для створення слимака.

Зміст

Під вмістом потрібно налаштувати тег HTML, який містить вміст вашого веб-сайту.

html до WordPress імпорту вмісту

Для цього виберіть варіант Тег HTML на вершині. Потім налаштуйте тег у наступних трьох полях. Наприклад, якщо ваш вміст міститься в тезі під назвою

, інформація, яку ви введете дів, ід і головний.

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

Назва та метадані

html до WordPress імпорту імпорту та метаданих

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

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

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

Спеціальні поля

html в WordPress імпортувати спеціальні поля

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

Категорії та теги

html до WordPress імпорту категорій та тегів

Тут ви можете призначити категорії, теги та формати публікацій імпортованому вмісту. Плагін покаже існуючу систематику на вашому сайті, щоб зробити цей крок простішим.

Інструменти

html до WordPress інструментів імпорту

На цьому екрані перераховано ряд корисних інструментів для успішного імпорту з HTML у WordPress.

3. Почніть імпорт

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

HTML імпорту WordPress

(Примітка. Ви також можете потрапити сюди через Інструменти> Імпорт а потім збирання Запуск імпортера під HTML варіант.)

Далі виберіть, чи імпортувати каталог файлів або один файл (вам потрібно переглянути його), а потім натисніть Надіслати. Потім плагін перейде до роботи.

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

Додаткові кроки

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

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

перевірити посилання після html імпорту WordPress

Щоб змінити його, натисніть Редагувати праворуч, змініть на обрану URL-адресу та натисніть Добре.

Друга річ - реалізувати переадресації зі старих URL-адрес на нові. Таким чином, ви не програєте на існуючу вартість SEO.

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

Ви маєте доступ до нього через FTP, однак, можливо, вам доведеться включити перегляд прихованих файлів, оскільки вони не відображаються за замовчуванням. Потім відредагуйте .htaccess і введіть правила.

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

Ви успішно перейшли з HTML до WordPress?

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

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

  • Налаштуйте WordPress поетапно
  • Перемістіть свій сайт з HTTP на HTTPS
  • Додайте спеціальні шрифти в WordPress
  • Прискоріть свій веб-сайт WordPress
  • Додайте контактну форму на свій сайт WordPress

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

Ви перемістили свій сайт з HTML на WordPress? Яким був ваш досвід? Якісь поради додати? Будь ласка, повідомте нас про це в розділі коментарів нижче.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map