У меня был сайт визитка на Tilda, но без блога. После отказа от российского сервиса, решил перейти на какую-то альтернативу. Задача звучала так: сделать главную страницу-лендинг, где я смогу продать себя, как специалиста и дополнительно вести блог. Желательно, чтобы эта вся история была мультиязычная.
Выбор сделал в пользу WordPress + Платная тема + Визуальный конструктор. Как альтернативу рассматривал еще Weblium (украинский конструктор сайтов) и Webflow (западный аналог Tilda). Но предпочтение отдал self-hosted варианту.
В этой статье опишу стартовый пак, который я использовал на старте для создания этого сайта с блогом. Будет полезно частным специалистам, которые хотят себе презентабельную сайт-визитку с блогом. Ничего сложного нет. Нужно уметь пользоваться Google и головой. Я всё сделал своими руками без привлечения дизайнеров или программистов.
Хостинг, CMS и платная тема
Этапа выбора хостинга у меня по сути не было. Много лет использую Хостинг Украина. Проблем с ним не было. Надеюсь и не будет. Для интереса залез в историю счетов и оказалось, что пользуюсь их услугами с 2011 года.
По CMS тоже всё просто. WordPress — самая популярная CMS в мире на момент запуска этого сайта. Более половины всех сайтов в мире работают на этой платформе. На Хостинге Украина есть удобная функция установки CMS. Это позволяет экономить время и не возиться с FTP подключением, загрузкой установочного пакета на сервер, создания БД и т.д. В пару кликов всё делаем, ждем 10 минут и сайт готов к работе.
В качестве темы выбрал Essentials от Pixfort (стоимость $59 на момент покупки+$17 за пролонгацию поддержки). Я случайно наткнулся на сайт одного коллеги, который мне визуально понравился. Изучил исходный код и нашел название темы. Легким гуглением попал на themeforest, где у темы уже было 9185 проданных лицензий со средней оценкой 4.95.
Тема поддерживает 2 самых популярных плагина визуального редактирования на 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. Можно задать периодичность работы, чтобы не так часто плагин нагружал сайт.
Было полезно — ставить лайк 💙. Если есть вопросы — го в комментарии 💬.
