В мене був сайт візитівка на Tilda, але без блога. Після відмови від російського сервісу вирішив перейти на якусь альтернативу. Завдання звучало так: зробити головну сторінку-лендинг, де я зможу продати себе як фахівця і додатково вести блог. Бажано, щоб ця вся історія була багатомовною.
Вибір зробив на користь WordPress + Платна тема + Візуальний конструктор. Як альтернативу розглядав ще Weblium (український конструктор сайтів) та Webflow (західний аналог Tilda). Але перевагу віддав self-hosted варіанту.
У цій статті опишу стартовий пак, який я використав на старті для створення цього сайту з блогом. Буде корисно приватним спеціалістам, які бажають собі презентабельний сайт-візитку з блогом. Нічого складного нема. Потрібно вміти користуватися Google та головою. Я все зробив своїми руками без залучення дизайнерів чи програмістів.
Хостинг, CMS та платна тема
Етапу вибору хостингу в мене насправді не було. Багато років використовую Хостинг Україна. Проблем із ним не було. Сподіваюся, і не буде. Для інтересу заліз в історію рахунків і виявилося, що я користуюсь їхніми послугами з 2011 року.
По CMS також все просто. WordPress – найпопулярніша CMS у світі на момент запуску цього сайту. Понад половина всіх сайтів у світі працюють на цій платформі. На Хостингу Україна є зручна функція встановлення CMS. Це дозволяє заощаджувати час і не возитися з FTP підключенням, завантаженням інсталяційного пакета на сервер, створення БД і т.д. У пару кліків все робимо, чекаємо 10 хвилин і сайт готовий до роботи.
Як тему вибрав Essentials від Pixfort (вартість $59 на момент покупки + $17 за пролонгацію підтримки). Я випадково натрапив на сайт одного колеги, який мені візуально сподобався. Вивчив вихідний код та знайшов назву теми. Легким гуглінням потрапив на themeforest, де у теми вже було 9185 проданих ліцензій із середньою оцінкою 4.95.
Тема підтримує два найпопулярніших плагіни візуального редагування на WordPress: Elementor і WPBakery (як я розумію колишній Visual Composer). Це для мене було найголовніше. Також було купа гарних та елегантних демок. Тема йде англійською мовою та підтримка теж. При цьому шрифт я використав Roboto і всі шаблони працюють без проблем, залишаються такими ж красивими та функціональними.
Набір плагінів
Голий WordPress навіть із встановленою темою — це жалюгідне видовище. Щоб зробити адмінку функціональнішою, використовуються плагіни. Вже в наборі з темою йшли деякі плагіни, але я додатково встановлював ще 10+, які мені були потрібні.
Ділюсь ретельно відібраним паком плагінів, які я вирішив використати від початку запуску сайту. Коротко описую призначення та функції кожного з них.
Плагін WPBakery — візуальний редактор, який дозволяє редагувати контент та блоки так само легко, як у Tilda. Все будується на секціях (блоках), рядках, колонках та елементах усередині них. Усього з перерахованого є свій набір властивостей та налаштувань.
Окрім WPBakery, моя тема підтримує також плагін Elementor, який призначений також для візуального редагування контенту і є прямим конкурентом WPBakery. Вибір зробив на користь останнього з двох причин:
- Підтримка pixfort UI (це покращений інтерфейс плагіна від виробника теми).
- Підтримка типів блоків Tabs, Accordions, Highlighted Box and Content Stack, які Elementor не підтримує
Плагін Contact Form 7 (wpcf7) — найпопулярніший плагін для форм зворотного зв’язку. Поруч із темою йдуть красиві шаблони під цей плагін. Зі старту жодних форм на сайті не робив, тому підозрюю, що при використанні додатково потрібно буде поставити reCAPTCHA або щось подібне.
Плагін Loco Translate — дозволяє перекладати теми та плагіни. Нагадаю, що куплена тема Essential була англійською. Тому частину рядків треба було перекласти. У мене сайт зі старту двома мовами: українською та російською. Тому я у плагіні додав 2 мови та переклав ті рядки, які відвідувачі бачать на Front-End. Редактор перекладів легкий у засвоєнні: ліворуч оригінал англійською — справа потрібно вписати переклад.
Для популярних тем і плагінів у Loco Translate є готові файли перекладів. Але моя тема не така популярна, тому перекладав сам своїми руками. Також можна перевести взагалі всі рядки (їх ~300), але я вирішив зробити це тільки для тих рядків, які видно відвідувачам у блозі. Те, що в адмінці залишив англійською.
Плагін Polylang — дозволяє зробити мультимовний сайт. Якщо попередній плагін перекладає лише плагіни та тему, то цей потрібен, щоб переводити контент (шапку, футер, статті тощо)
Я зі старту зробив собі сайт 2-ма мовами. Далі для кожного контенту додав по 2 мови. Тепер під час вибору мови відвідувача перенаправляє на потрібну версію сайту. Існували деякі проблеми з налаштуванням правильного редиректу. Потикав налаштування і все запрацювало правильно з використанням таких налаштувань:
Плагін Cyr-To-Lat — перетворює кириличні латинські символи в адресах сторінок і статей. Кирилічні символи погані тим, що при копіюванні виходить каша. Наприклад, сторінка https://denysgerman.com/пример-каши виглядатиме ось так страшно: https://denysgerman.com/%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D1%80-%D0%BA%D0%B0%D1%88%D0%B8
Плагін Wordfence Security и iThemes Security — обидва відповідають за безпеку. Можна обійтися одним, але я вирішив їх скомбінувати. Дозволяють сканувати файли сайту на віруси, змінити URL входу в адмінку, запобігати спробам бруту паролів та ще багато інших корисних функцій, які дозволяють закрити вразливості та захистити сайт від злому.
Плагін wpDiscuz — дуже круто розширює функціонал вбудованих коментарів WordPress. В однієї старої версії була вразливість. Але автори вже пофіксили. Мати безліч гнучких налаштувань і додаткових функцій. Я думав використовувати за старою звичкою Disqus, але, судячи з інфи в гуглу, він вже не торт.
Плагін Leira Letter Avatar — генерує аватарку користувачів за першою літерою у коментарях. Якщо користувач залишає коментар на веб-сайті WordPress, то за замовчуванням підтягується його Gravatar. У багатьох його просто немає. І щоб аватарки користувачів у коментарях не виглядали однаково, використовується плагін Leira Letter Avatar.
Плагін Site Kit от Google — за допомогою нього можна в пару кліків встановити Google Analytics (Universal та GA4), а також додати сайт до Google Search Console. При цьому не потрібно копіювати скрипти або ідентифікатори. Просто логінишся у свій обліковий запис Gmail і він підтягує всі облікові записи. Дуже зручно. Ще б GTM додали туди.
Плагін WP Maintenance Mode & Coming Soon — закриває доступ до сайту для роботів та неадмінів. Використовував його усі 4 дні, поки робив сайт. Замість сайту відвідувачі бачили заглушку з текстом, який я поставив у налаштуваннях плагіна. Можливо також додати таймер зворотного відліку до запуску сайту.
Плагін Rank Math SEO — аналог Yoast SEO. Почув рекомендацію на нього на YouTube каналі Ahrefs та вирішив використовувати саме його. У безкоштовній версії йде купа аддонів для розширення функціоналу плагіна. Непотрібні можна просто вимкнути, щоб зайвий раз не навантажувати сайт.
Плагін Markup (JSON-LD) structured in schema.org — простий та зручний спосіб додати мікророзмітку на сайт. Окремо можна встановити мікророзмітку для головної сторінки та окремо для постів блогу. Нічого складного. Щоправда, я обрав мікророзмітку “Peson” для головної сторінки і мені там не вистачило поля “Job Title”, тому свою спеціалізацію вказав разом із прізвищем та ім’ям у полі “Name”.
Плагін BetterLinks — скорочуватель посилань прямо всередині WordPress. Я колись робив для агентства свого скорочувач посилань на базі безкоштовної CMS “YOURLS” і доводилося використовувати піддомен. А тут плагін дозволяє робити одразу на основному домені. Приклад посилання: https://denysgerman.com/instagram.
Також зручно, коли вказуєш реферальні посилання. Або ще можна обернути посилання на свій телеграм і замість t.me/username використовувати denysgerman.com/tg-username. Так важче спарсити логін телеграма для спаму.
Плагін Broken Link Checker — шукає биті посилання на сайті та надсилає звіт на email. Можна встановити періодичність роботи, щоб не так часто плагін навантажував сайт.
Було корисно — став лайк 💙. Якщо є питання – го в коментарі 💬.
