Обрати сторінку

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

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

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

hosting
  1. Домен и хостинг

Хостинг — місце, де зберігається ваш сайт.
Домен — це імя сайту.

wordpress

2. WordPress

WordPress (WP) — базове програмне забезпечення для роботи сайту.

divi red11

3. Тема та плагіни

Тема визначить базовий дизайн сайту. Плагіни визначають функціонал сайту

time

4.Час

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

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

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

arrow
  1. Домен и хостинг

Настроїти хостинг, доменное імя зв’язати з сайтом, настроїти электронну пошту.

arrow

2. WordPress

На сайті встановити та настроїти WordPress

arrow

3. Тема та плагіни

Встановити та сконфігурувати вибрану тему та вибрані плагіни

arrow

4. Контент (Меню, страницы, посты)

Створити меню, сторінки, заповнити сайт контентом (товари, статті), настроїти параметри для SEO на сайті

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

до змісту ↑

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

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

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

Зона в Інтернеті – це назва, що йде в імені сайту після крапки. Наприклад: сайт “electrostal.com.ua” має “electrostal” – ім’я, “com.ua” – зона. Кожна із зон має певний контекст: «biz», «com» – бізнес, «net» – мережі, «org» – організація, «gov» – державні структури. Але це не означає, що в зоні com не може бути особистий блог.

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

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

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

«Базове» забезпечення роботи сайту – це підтримка його імені + хостинг (підтримка ресурсів)
до змісту ↑

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

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

Слід зазначити, що хостинг може встановити WordPress на сайт автоматично. Уточніть у свого хостингу наявність такої функції.

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

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

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

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

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

Storinka vhodu v adminpanel wordpress
Сторінка входу на сайт WordPress
Важливо: При встановленні WordPress намагайтеся уникати стандартних імен користувачів, наприклад “admin”.

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

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

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

Menyu plahiny wordpress
Розділ адміністративної панелі сайту WordPress для керування плагінами

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

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

до змісту ↑

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

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

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

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

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

до змісту ↑

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

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

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

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

до змісту ↑

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

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

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

Nalashtuvannya postiynyh posylan wordpress
Налаштування структури посилань сторінок сайту WordPress
до змісту ↑

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

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

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

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

Vyznachennya holovnoi storinky
Визначення головної сторінки сайту WordPress

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

до змісту ↑

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

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

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

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

Nalashtuvannya saytu
Налаштування назви сайту та короткого опису (ключової фрази сайту) на WordPress

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

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

ikonka saytu
Налаштування іконки сайту WordPress
до змісту ↑

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

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

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

Vybir temy saytu
Вибір теми сайту WordPress

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

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

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

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

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

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

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

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

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

Blochni temy wordpress
Вибір блочної теми для сайту WordPress

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

до змісту ↑

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

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

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

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

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

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

Nalashtuvannya standartnoi temy wordpress
Панель настройки класичної теми WordPress

У кореневій директорії сайту бажано мати файл 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://www.koval.in.ua/sitemap_index.xml
до змісту ↑

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

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

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

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

Futer ta Pidval saytu

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

Nalashtuvann futera ta hedera blochnyh tem
до змісту ↑

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

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

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

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

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

Menyu klassychnoi temy
Створення меню для класичної теми WordPress

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

до змісту ↑

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

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

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

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

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

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

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

до змісту ↑

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

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

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

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

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

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

Nalashtuvannya vidzhetiv klasychna tema
до змісту ↑

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 і отримання «фідів» на електронну пошту читачів.

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

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

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

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

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

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

до змісту ↑

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

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

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

до змісту ↑

Підсумки

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

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

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

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

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

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

Категорії: Створення сайту на WordPress

Про автора:

Олександр Коваль

Олександр Коваль

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

Share via
Send this to a friend