Створення сайту на CMS WordPress

WordPress одна з найпростіших CMS і найбільш популярних систем управління сайтом у всьому світі.

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

У відео докладно показано, як додати веб ресурс в панелі управління “Хостинг Україна” і встановити CMS WordPress.

Як за допомогою плагіна Elementor і доповнень для нього можна створювати сторінки в візуальному редакторі. Крім сторінок, ми торкнемося теми контактних форм і покажемо процес роботи з плагіном Contact Form 7.

Для прикладу використовували такі ресурси:

• CMS WordPress: https://ru.wordpress.org/​
• Плагін Elementor: https://elementor.com/Темы для Elementor: https://elementor.com/help/best-elementor-themes/
• Тема OceanWP: https://oceanwp.org/​
• Документація: https://www.ukraine.com.ua/wiki/

Підготовка CMS

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

Текстові версії посібників:

https://www.ukraine.com.ua/wiki/hosting/my-sites/site-add/

https://www.ukraine.com.ua/wiki/hosting/cms/auto-install/

https://www.ukraine.com.ua/wiki/hosting/ssl/install/

Знайомство з Elementor

В даному відео буде розказано про те як працювати з палгіном Elementor. Перейдіть в розділ сторінок в адмінці, видаліть існуючі сторінки, створіть нову і натисніть на кнопку “Редагувати в Elementor” в верхньому меню. Ви будете переадресовані на сторінку конструктора, де зліва буде розташована панель Elementorа, а праворуч попередній сторінки.

Бібліотеки шаблонів для Elementor

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

Також вам знадобляться такі плагіни:

Плагін Elements Kit Lite: https://wordpress.org/plugins/elementskit-lite/

Плагін Envato Elements: https://wordpress.org/plugins/envato-elements/

Плагін Starter Templates: https://wordpress.org/plugins/astra-sites/

Створення головної сторінки в Elementor

У цьому відео ми будемо використовувати - Starter Templates для створення головної сторінки, яка буде складатися з чотирьох блоків. Плагін розробляється тією ж командою, яка займається темою оформлення Astra. Зрозуміло, шаблони з бібліотеки підійдуть для використання і з іншими темами оформлення. У нашому випадку використовується тема Ocean WP.

Також вам знадобляться:

Плагін Starter Templates https://wordpress.org/plugins/astra-sites/

Сервіс підбору кольорів https://coolors.co/

Налаштування теми оформлення OceanWP

У платній версії плагіна Elementor присутній конструктор тим, який дозволяє налаштовувати хедер, футер і окремі сторінки сайту, такі як сторінка блогу, результатів пошуку тощо. В цьому випадку, буде досить теми “Hello”, Яку надають розробники елементора. Вона містить тільки базові настройки, тому при її використанні не виникає конфліктів з настройками самого Elementor. На жаль, на безкоштовній версії плагіна такий функціонал відсутній. Вирішити цю проблему можна установкою і налаштуванням теми оформлення. У минулих відео ми встановлювали тему OceanWP, яка, володіє найбільш широким асортиментом налаштувань у своїй безкоштовної версії.

Налаштування контактної форми в Contact Form 7

Серед всіх плагінів контактних форм своєю простотою і доступністю виділяється Contact Form 7. Він безкоштовний, володіє всім необхідним функціоналом і підійде для вирішення більшості завдань, які ставляться перед формами зворотного зв'язку.

Також вам знадобляться:

Плагін Contact Form 7: https://ru.wordpress.org/plugins/contact-form-7/

Документація Contact Form 7: https://contactform7.com/docs/

Плагін Flamingo: https://ru.wordpress.org/plugins/flamingo/

Підсумок

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

 

Ми пропонуємо найкращий віртуальний хостинг для сайтів на Joomla, Wordpressта іншихпопулярних CMS з підтримкою PHP, Perl, MySQL.

Простовиберіть домен ,замовте хостинг і встановіть CMS в один клік.

Вибирайте пакет послуг, який максимально відповідає потребам вашого проекту: SSD хостинг, VPS на SSD, Cloud (хмарний) хостинг, хмарний VPS. Виділений сервер або dedicated server.

Наша технічна підтримка, працює в режимі 24/7/365 і Ви завжди зможете отримати кваліфіковану допомогу, якщо виникнуть питання.