Содержание статьи
- cyr-to-lat
- Contact form 7
- Yoast SEO
- Jetpack
- Elementor
Сегодня мы с вами рассмотрим 5 wordpress плагинов, которые сильно упростят вашу работу. Плагины подбирались исходя из пользы именно бесплатного функционала , которым может воспользоваться каждый желающий. И начнем мы с наиболее простого.
Cyr-to-lat
Cyr-to-lat простейший wordpress плагин , не требующий специальных знаний при использовании. Из коробки вордпресс на основе заголовка формирует ярлык записи , и уже на основе этого ярлыка формирует url страницы или записи. В случае англоязычного сайта никаких проблем не возникает. Но как только мы начинаем заполнять русскоязычный сайт, сразу появляются невалидные ссылки, использующие кириллицу.
Тут то нам и пригодится этот плагин. Он заменяет кириллический url на понятный человек url (ЧПУ). Конечно wordpress позволяет вручную изменять url каждой страницы, но зачем когда за тебя это может сделать плагин. Всего пару кликов и о формировании urlов вручную можно забыть, и уделить время чему то другому.
Contact form 7
Contact form 7 Очень простой плагин , который позволяет создать как очень простые формы, так и весьма сложные опросы. Главные плюс этого плагина это простота в купе с универсальностью. Все что от вас требуется это знать базовые понятия html и выучить простой синтаксис используемый в плагине.
Как мы видим начальный экран плагина отображает все созданные при помощи плагина формы. В том числе и шорткоды ри помощи которых можно интегрировать эти формы на свой сайт.
Давайте капнем поглубже.
При переходе на страницу создания формы мы оказываемся во вкладке шаблона. Здесь мы видим набор таких базовым элементов формы как , текстовое поле , поле почты , поле с номером телефона , выбор даты, селекты, радио кнопки и кнопка отправки.
Каждое это поле можно всячески конфигурировать , для того чтобы форма полностью соответствовала нашим хотелкам.
Например
<label> Ваше имя
[text* your-name // - Звездочка после text - добавление поля required
autocomplete:off // - отключение автозаполнения данных
class:name-input // - добавление пользовательского класса
minlength:3 maxlength:12 // - установка разрешенного количества символов
placeholder "Ваше имя"]// - Добавление Плейсхолдера который будет отображаться в пустом поле
</label>
При создании формы мы можем использовать стандартный html код что делает это плагин очень удобным и универсальным. При помощи html мы может группировать поля задавать классы, для последующей стилизации. В качестве примера модернизируем уже существующую форму
<div class="flex flex-row nowrap">
<label> Ваше имя
[text* your-nameautocomplete:off class:name-input minlength:3 maxlength:12 placeholder "Ваше имя"]
</label>
<label> Ваш e-mail
[email* your-email autocomplete:email] </label>
</div>
<label> Тема
[text* your-subject] </label>
<label> Ваше сообщение (не обязательно)
[textarea your-message] </label>
[submit "Отправить"]
<div class="polityca">
<label for="politCheckbox1">Я согласен с условиями <a href="https://example.com/privacy-policy">политики конфиденциальности</a></label>
<div class="checkbox-wrapper">
<input type="checkbox" name="checkbox" class="politCheckbox" id="politCheckbox1">
<div class="custom-checkbox"></div>
</div>
</div>
В данном примере мы обернули первые два поля одним DIVом с пользовательскими классами для последующей стилизации.
Помимо этого мы добавили стилизованный блок с классом "polityca" внутри которого находится чекбокс, отслеживающий согласие с действующей политикой конфиденциальности.
Компоненты формы можно стилизовать использую css, подключенный к нашей теме и мы получим стильную и функциональную форму.
Полученный шорткод мы можем вставить прямо на страницу как на примере ниже.
В результате чего мы получаем работающую форму как на картинке ниже
Осталось только настроить отправку почты и все готово. Для этого мы переходим во вкладку "Письмо";
для того чтобы отправка писем через форму начала работать нужно лишь в строке "кому" подставить свою почту, а в строке от кого необходимо между треугольных скобок подставить адрес почты находящейся на вашем хостинге.
В поле "Тело письма мы верстаем электронное письмо которое приходит на на ящик" подставляя переменные инпутов нашей формы.
Вот так просто за 10 минут можно сверстать форму которую можно использовать множество раз.
Этот плагин можно интегрировать с различными cms типа "Битрикс 24", и телеграм ботами при помощи сторонних плагинов, либо вручную при помощи хука wpcf7_mail_sent но на этом остановимся в другой раз.
Yoast SEO
Yoast SEO- это wordpress плагин для SEO оптимизации сайта. Благодаря нему мы можем создать динамический sitemap, микроразметку, хлебные крошки, настроить заголовки и описание страниц, категорий страниц, товаров , записей и всего прочего, что публикается на нашем сайте.
После первичной настройки нас встречает такой вот экран
Здесь мы передвигая ползунки может включать и отключать модули данного плагина. При первом ознакомлении с плагином , лучше проставить все возможные ползунки , это не сильно загрузит ваш сайт.
Следующая вкладка которую необходимо посетить- это оптимизация обхода. Здесь мы можете настроить то, какие страницы вашего сайта могут индексировать поисковые роботы, не работая при этом с файлом htaccess. Ограничьте доступ к техническим и к сокращенным URLам, дабы избежать дублирование контента. Можно также ограничить страницы поиска, если он у вас не реализован на сайте.
В следующую очередь вам нужно будет пробежаться по настройкам архивов и убрать из индексации ненужные страницы. Вот и все, вы провели простейшую SEO оптимизацию, теперь можно приступать к заполнению сайта.Теперь когда вы зайдете в ваш редактор "Gutenberg" в самом конце вас будет встречать настройка SEO данных вашей страницы, а также ее SEO анализ.
Подробно на этом функционале останавливаться не будем , там и так все предельно просто описано. Хочется отметить что анализ не очень корректно работает с с русским языком. И плохо сопоставляет ключевые слова с их склонениями. Поэтому не стоит гнаться за двумя зелеными галочками, это сделает ваш текст переоптимизированным и нечитабельным.
Jetpack boost
Jetpack boost - это плагин для кэширования статических файлов и не только. Благодаря данному плагину вы можете значительно ускорить ваш сайт. Помимо кэша здесь можно настроить отправку изображение и скриптов через сторонние CDN. Это сильно снизит нагрузку на вашу сеть.
Почему мы выбрали этот плагин? потому что он предоставляет огромный функционал в бесплатном тарифе, При этом он весьма прост. Его может освоить любой вебмастер
Очень аккуратно стоит относиться к объединение css и js. В теории это может сильно ускорить ваш сайт. Но в доброй части случаев вызовет визуальные артефакты, чего нам с вами бы крайне не хотелось. Все закэшированные страницы плагин хранит в html формате. Именно их он отдает всем новым пользователям , что снижает нагрузку на сервер и ускоряет работу сайта, Самое главное это обновлять кэш каждый раз, когда вы вносите изменения в html структуру вашего сайта. Иначе они могут не отобразиться у новых пользователей.
Ну что-ж, вот мы с вам и разобрали 5 WordPress плагинов, которые упростят вашу работу. В настройке каждого из них и не только, вам поможет наша веб студия!