Як створити сайт WordPress з нуля — коротка інструкція для початківців

У статті приведена коротка інструкція, як створити сайт WordPress з “нуля”. Приведено послідовність дій, виконавши які в результаті ви отримаєте повноцінний працюючий сайт.

Хочете пришвидшити процесс створення сайту або не бажаєте розбиратись з деталями – звертайтесь до мене. Я допоможу створити сайт.

Основні ресурси та етапи як створити сайт WordPress

По суті, щоб створити сайт WordPress, вам потрібно мати основні ресурси:

Тут я виходжу з того, що ідея та задум сайту у вас уже є: ви визначили мету сайту, формат сайту (візитка, інтернет-магазин, лендінг), хто є ваша цільова аудиторія, тощо.

Щоб створити сайт сайт WordPress “з нуля” потрібно пройти чотири основні етапи:

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

до змісту ↑

1. Підбір імені сайту, реєстрація імені, вибір хостингу

Спочатку для сайту потрібно вибрати назву та зареєструвати її. Підібрати ім’я сайту та зареєструвати його можна у компанії-реєстраторі імен. Наприклад: компанія Хостинг-Україна реєструє імена сайтів та розміщує сайти у себе на хостингу.

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

Ім’я сайту та зона разом дадуть унікальну адресу сайту в Інтернет. Зареєструйте ім’я у вибраній зоні. І по закінченні терміну продовжуйте підтримку ( оплату) цього імені далі.

По суті, адреса сайту – це запис у загальносвітовій “книзі” (реєстрі) всіх адрес Інтернету. Не більше того. А ось щоб сайт правильно працював – треба фізично розмістити тексти, фото, відео. ( контент) на конкретних комп’ютерах-серверах та зв’язати їх із обраною адресою сайту. Робиться це «на хостингу» у «провайдера» – компанії, яка має надати у користування певний обсяг комп’ютерних ресурсів (місце на диску, обсяг пам’яті) та забезпечити 24/7 роботу сайту. За гроші, зрозуміло.

Фізично вміст сайту може бути десь на комп’ютерах-серверах або в Україні, Німеччині, США. Це вже турбота компанії-провайдера. Але незалежно від фізичного розташування сайту він відкриється у користувачів за єдиною адресою.

до змісту ↑

2. Установка WordPress та його базова настройка

Найсвіжіша версія української редакції WordPress знаходиться тут. Там же розміщено інструкцію з встановлення WordPress на сайт.

Ниже приведу відео установки WordPress на сайт у хостинг-провайдера Хостинг-Україна

Після встановлення WordPress переходьте на сторінку входу WordPress. Посилання для входу в адмінку сайту зазвичай має таку адресу:

https://www.site.com/wp-admin

де змініть адресу “www.site.com” на адресу своего сайту.

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

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

Плагін – це окремий програмний модуль, який підключається до WordPress і надає йому додаткові можливості.

Плагини встановлюють чи відключають в меню “Плагіни” адмінки сайту:

Каталог плагінів WordPress дивіться тут .

Деякі корисні плагіни:

• захист от спаму: Akismet Anti-Spam
• заміна кирилічних назв в адресі сторінок на англійські: Cyr to Lat enhanced
• обмеження спроб входу в адмінпанель сайту: Login LockDown
• оптимизація бази данних:WP-Optimize
• додатковий захист сайту: Cerber Security, Antispam & Malware Scan
• настройка SEO: Yoast SEO
• архівація сайту: Duplicator
• +49 пунктів щодо покращення сайту WordPress(платний плагін): Clearfy Pro

до змісту ↑

2.1. Установка плагіна Maintenance Mode (необов’язково, але бажано)

Поки ви налаштовуватимете сайт – доступ до нього буде відкритий з усього Інтернету. Усі можуть бачити ваші “будівельні роботи” на сайті.

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

Плагінів даного типу є велика кількість. Для таких завдань я використовую плагін YITH Maintenance Mode.

Ще один спосіб приховати сайт від небажаного перегляду – використовувати плагін Password Protected. Цей плагін дозволяє переглянути сайт лише після введення пароля.

до змісту ↑

2.2. Налаштування плагінів, забезпечення безпеки сайту

Майже кожен плагін вимагає уваги для його налаштування.

Можливо, потрібно буде витратити деякий час на файли .htaccess і .htpasswd. WordPress генерує файл .htaccess при налаштуванні постійних посилань і цього частіше достатньо.

Однак якщо ви хочете додатково захистити сайт від зловмисників – доведеться витратити деякий час на підвищення безпеки сайту.

до змісту ↑

2.3. Налаштування постійних посилань

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

Перейдіть в меню адмінпанелі сайту “Параметри” -> “Постійні посилання”. Тут ви можете надати посиланням естетичність, зручність використання та забезпечити сумісність у майбутньому при зміні структури сайту:

до змісту ↑

2.4. Визначення головної сторінки

За змовчуванням сайт WordPress встановлює головну сторінку з останніми опублікованими записами. Головна сторінка – це сторінка, яка відкривається під час введення імені сайту.

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

Для цього перейдіть в адмінпанелі сайту в меню “Налаштування” та виберіть пункт “Читання“:

Виберіть потрібні сторінки та збережіть ваш вибір.

до змісту ↑

2.5. Назва сайту, короткий опис та фавікон

У процесі установки WordPress додасть автоматично в назву веб-сайту ключову фразу з написом “Ще один сайт на WordPress”.

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

Щоб змінити назву та короткий опис сайту, виберіть пункт меню “Налаштування” – “Загальне“

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

WordPress має механізм створення іконки сайту. В адмінпанелі треба вибрати меню: “Зовнішній вигляд” > “Налаштувати” > “Ідентичність сайту”, ліворуч внизу вибрати зображення для іконки сайту розміром не меньше 512 пікселів на сторону і зберегти іконку.

до змісту ↑

3. Вибір теми (по суті, дизайну) сайту

Тема WordPress – це базовий дизайн сайту, його зовнішній вигляд. Іншими словами, тема WordPress – це як одяг на людині. Може бути різноманітний: суть одна, а зовнішній вигляд різний.

Зазвичай під час встановлення WordPress встановлює кілька тем. Але, можливо, вам захочеться чогось іншого.

Теми можна підібрати в Інтернеті на будь-який смак:

• безкоштовні теми на офіційному сайті WordPress: https://wordpress.org/themes/
• или платні преміум-теми різних розробників, наприклад тема Divi от ElegantThemes.

Трошки про  тему Divi. На даний момент Divi по суті перетворилася на платформу для веб-дизайну. В тему інтегровано конструктор сторінок Divi Builder.

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

У конструкторі ви можете швидко створити сторінку та одразу побачити результати роботи без втручання в код сайту.

Розробники створили різні конструктори сторінок. Серед конструкторів найпоширенішими є Divi, Elementor, Visual Composer.

Слід відмітити, що розвиток WordPress привів до заміни вбудованого в WordPress классичного текстового редактора редактором блоків Гутенберг. Гутенберг по суті є вбудований в WordPress конструктор сторінок. Контент сторінки сайту постає у вигляді окремих блоків.

Розвиток пішов далі – і на момент написання статті у WordPress є можливість з допомогою редактора Гутенберг створювати сайдбар. Сайдбар – це бокова частина сайту.

Слідуючий крок: з’явилась можливість повної редакціі сайту редактором Гутенберг. Але ця можливість є тільки для так називаємих “блочних тем”. Вибрати блочну тему можна в фільтрі при додаванні теми на сайт.

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

до змісту ↑

3.1. Налаштування теми + файл robots.txt

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

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

Розгляну варіант настройки класичних тем, тобто всіх тем, крім блочних.

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

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

У кореневій директорії сайту бажано мати файл robots.txt. У цьому файлі прописані інструкції для роботів, які заходять на сайт і періодично індексують його.

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

Нижче в якості прикладу приводжу вміст файлу robots.txt :

User-agent: *
Disallow: /wp-admin
Disallow: /wp-includes
Disallow: /wp-content/cache
Disallow: /wp-json/
Disallow: /xmlrpc.php
Disallow: /?s=
Sitemap: https://koval.in.ua/sitemap_index.xml

до змісту ↑

3.2. Настройка хедера («шапки») и футера («підвалу») сайту

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

У футері (низ, «підвал» сайту) зазвичай прописуються авторські права на сайт, можливо якась додаткова інформація, або ще одне меню, наприклад.

Для класичних тем хедер і футер налаштовуються засобами теми: “Вигляд” -> “Налаштувати”. Для теми Divi налаштування виглядають так:

Для блочних тем доступ до налаштування хедера і футера можна одержати через адмінменю сайта: “Вигляд” -> “Editor”. І далі вибрати потрібний шаблон для редактування. Для блочної теми Twenty Twenty-Two це буде виглядати так:

до змісту ↑

4. Ввод контенту сайту

4.1. Створення меню сайту

Меню – важливий елемент сайту, адже зручне та зрозуміле меню дозволяє відвідувачу сайту простіше орієнтуватися на сайті та швидше зрозуміти, де він може вирішити за допомогою сайту свою задачу.

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

Для класичних тем меню створюється в адмінпанелі сайту, розділ “Зовнішній вигляд” ->”Меню“:

Створивши структуру меню в розділі «Налаштування меню» вкажіть область відображення — «Основне», «Меню верхнього рівня» або «Меню футера». Збережіть зміни та меню готове до роботи.

до змісту ↑

4.2. Створення статичних сторінок та записів

У початковій установці WordPress на сайті є кілька типів даних: «сторінки», «записи».

Сторінки — це рідко змінювані дані: «Контакти», «Головна», «Мої роботи», «Про себе», та інші.

Записи — це пости: дані про технічні аспекти чогось, новини про участь у чомусь, роздуми, оповідання та інше.

Теми та плагіни можуть створювати свої типи даних. Наприклад, тема Divi створює тип даних «Проекти». Це опис портфоліо і виконаних робіт.

Плагін для створення інтернет-магазину Woocommerce створює дані “Товари”.

Щоб створити нову сторінку, або перейдіть до меню “Сторінки” і натисніть кнопку “Додати нову“. Далі ви попадете в редактор, де можете побудувати сторінку.

до змісту ↑

4.3. Налаштування віджетів у сайдбарі

Сайдбар — окрема від інших елементів панель (колонка), розташована праворуч або ліворуч на сторінці. Місце розташування зазвичай задається у темі.

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

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

Деякі теми дають змогу використовувати різні сайдбари для різних типів даних.

Для класичних тем перелік доступних віджетів та сайдбарів наведено в панелі адміністратора, позиція меню – “Зовнішній вигляд” → “Віджети“

до змісту ↑

5. Деактивація плагіна Maintenance Mode та публікація сайту

По суті на цьому етапі основа сайту готова. Якщо ви встановлювали плагін Maintenance Mode – час відключити його. Деактивація плагіна робить його видимим для користувачів мережі Інтернет.

Проте торкнемося ще кількох моментів створення сайту WordPress.

6. Налаштування зв’язку із соціальними мережами

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

Наприклад плагіны: Monarch Social Sharing Plugin або Easy Social Share Buttons for WordPress.

Та й у багатьох темах є можливість “пов’язати” сайт із соціальними мережами.

Існує два види зв’язку сайту із соцмережами: «Share» і «Following«.

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

«Following» (послідовники) — якщо ви хочете отримати більше підписників (послідовників) на своїх соціальних сторінках, то ви розміщуєте посилання «наслідувати вас у соціальних мережах» на своєму сайті. Відвідувач натиснувши кнопку «Following» підписується на вашу сторінку в соціальній мережі і ви отримуєте собі ще одного підписника (тобто читача).

до змісту ↑

7. Настройка підписки RSS

Технологія RSS дозволяє інформувати всіх бажаючих про нову інформацію, що з’явилася на сайті. В Інтернеті можна зустріти різні терміни, що позначають те саме: RSS-канал, RSS-стрічка, RSS-розсилка, фід (від англійського «feed» – подача, харчування, згодовувати).

Власне, для сайту на Вордпрес RSS вже присутній на сайті, його адреса: http://ім’я_сайту/feed/

Якщо потрібно створити можливість для відвідувача підписатися на RSS, то можна зробити іконку і розмістити посилання на RSS: http://ім’я_сайту/feed/. Або використовувати сервіс FeedBurner для організації підписки на RSS і отримання «фідів» на електронну пошту читачів.

до змісту ↑

8. Настройка підписки та розсилки

На відміну від RSS, який автоматично оновлюється при появі нових статей на сайті, розсилкою можна керувати вручну.

Для реєстрації підписчиків та проведення розсилок листів існують різні сервіси: MailChimp, GetResponse та багато інших.

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

Однак існують способи формування списку підписчиків, управлінням підпискою та розсилкою листів безпосередньо на сайті. Використовуючи для цього різні плагіни. Наприклад, можна використовувати для цього плагін MailPoet або MyMail

до змісту ↑

9. Реєстрація сайту в Гугл, підключення статистики Гугл

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

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

до змісту ↑

Підсумки

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

Хочете пришвидшити процесс або не бажаєте розбиратись з деталями – звертайтесь. Я допоможу створити сайт.

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

Якщо у вас є питання – ви можете сміливо задати їх будь-яким зручним вам способом. І я обов’язково відповім.

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

Удачі.
Олександр Коваль.