Шорткоды — что это и как их использовать?

Разработка сайта

Вступление

Современное SEO на 50%, если не больше, состоит из оптимизации и работы с сайтом. Перелопатив множество проектов в визуальном плане, мы заметили, что техническая работа с сайтом (верстка, программирование) занимает достаточно большой объем рабочего времени. Если бюджет на SEO не высокий, то практически не остается времени на то, чтобы и реализовать все фишки на сайте и проводить аналитические и другие дополнительные мероприятия. Это конечно, не касается больших студий, у которых за все отвечают разные люди или по крайнеей мере должны отвечать. Скорее, это актуально для SEO-специалистов, которые работают над сайтами самостоятельно или небольшой командой с ограниченным бюджетом.

Поиски какого-то легкого и не затратного по времени решения привели меня к такой вещи, как Шорткоды. Тема достаточно не новая (архаизм можно сказать), но почему-то редко где можно услышать о том, что это мастхэв в работе с сайтом и возможность без каких-либо серьезных технических знаний (коими не часто обладают SEOшники) сделать на сайте что-то крутое, оформить посадочные страницы и добавить важный для продвижения функционал. Сегодня об этом и поговорим.

В основном данный материал будет полезен тем, кто работает с сайтами на WordPress и Joomla, опыта работы с Шорткодами в других системах у нас нет, но я слышал, что есть плагины шорткодов на OpenCart и других CMS. Можете промониторить этот вопрос. Мы не будем вдаваться в детальные подробности, просто покажем, как эта вещь работает, а далее, если тема будет интересной, можем развить ее в других статьях.

Что такое Шорткоды

Шорткод — дословно «Короткий код». Это технология, которая позволяет настроить корреляцию длинной строчки кода с простой фразой в квадратных скобках, которую вы будете вставлять в код страницы сайта и она будет выполнять абсолютно те же функции, что и длинная заранее подготовленная строчка. Это, если рассматривать основную задачу данной технологии.

Но, мы выберем путь полегче и подберем готовые решения, которые сэкономят нам ценное время.

Дело в том, что для достаточно распространенных движков Joomla и Wordpress, есть специальные плагины, имеющие в своей обойме уже готовые шорткоды, которые позволят Вам решать множество различных задач по оптимизации и визуальному оформлению страниц.

При чем, это подходит, как для блогов, или каких-то информационных сайтов (даже в больше степени), так и для коммерческих сайтов.

Шорткод, просто, с помощью специального функционала плагинов настраивается по вашему усмотрению и вставляется на страницу сайта, а далее вы можете его внедрить на другие страницы, просто скопировав.

Чтобы не вводить в заблуждение, рассмотрим, как это работает, на примере пары плагинов для WordPress, в Joomla отличий практически нет.

Как использовать шорткоды?

Тут все предельно просто.

Ниже будет большой список плагинов с шорткодами, которые Вы можете использовать. Мы остановимся для примера на плагине Shortcodes Ultimate для WordPress.

Устанавливаем плагин и в меню редактирования страницы у нас появляется специальный функционал, который так и называется «Вставить Шорткод».

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

Для примера выберем пункт «Кнопка». Перед нами открывается меню, где мы можем сделать настройки для данной кнопки. Настраиваем, как нравится, тут все интуитивно понятно. Пример настроек Вы можете видеть ниже:

настройка шорткода

Когда все настройки сделаны, мы жмем кнопку «Вставить Шорткод» внизу окна с настройками и видим, что в наше текстовой поле добавилась строчка (шорткод) примерно такого вида:

[su_button style="3d" size="10"]Наша Кнопка[/su_button]

Теперь смотрим, как это выглядит на сайте: кнопка

Отлично, всего в 2 шага, за 5 минут, мы сделали неплохую 3D кнопку на сайте, к которой можем потом прикрутить форму заявки или что-то подобное.

Если, Вы хотите добавить точно такую же кнопку на другие страницы сайта, то нужно просто скопировать Шорткод и вставить его в тело нужной страницы, повторно проводить итерацию настройки не нужно!

Функционал плагинов с шорткодами

В функционале любого плагина с Шорткодами, есть масса крутейших фишек для внедрения, давайте посмотрим самые интересные:

  • Оптимизация и визуализация изображений. Формирование слайдеров, галерей изображений, а также каруселей. Все это улучшит вид страницы, сделает ее более интерактивной, удобной и разнообразной.
  • карусели изображений
  • Широкие возможности для работы с текстовой составляющей на странице. Делать различные персонализированные списки, оформлять заголовок страницы H1 по своему вкусу, выделять текст цветом, делать из него блок «заметку», выводить комментарии при наведении курсора в определенную часть текста. Также, можно добавлять различные аккордеоны или просто отдельные спойлеры, для того чтобы сделать материал на странице более компактным и также добавить интерактивности.
  • Как видно на скриншоте ниже, можно делать целые блоки с вкладками, как в карточках товара на интернет-магазинах. Также, прикреплять к странице видео с различных видео-хостингов (не только YouTube, но и Vimeo, Dailymotion) или аудиозаписи, например, ваши подкасты или просто музыку, которая подходит к статье, она сформируется в аккуратную аудио-дорожку.
  • Добавление выделений для цитат, описаний услуг. Размещение превью предыдущих постов, буквениц, интерактивных карт, дополнительного меню и многое другое.
Возможности шорткодов

Как мы видим, послужной список данного плагина весьма серьезный и повторюсь, что все, что вы видели выше сделано за 10 минут. Также, стоит оговориться, что практически весь функционал на скриншоте делался без изменений, а в каждом из этих типов шорткодов есть масса настроек для изменения визуальной составляющей, с которыми можно играться бесконечно.

Плагины для WordPress

  • Shortcodes Ultimate — самый популярный пак шорткодов, мы взяли его для примера в данную статью;
  • WordPress Shortcodes — второй по популярности плагин для формирования шорткодов, имеет схожий функционал с первым вариантом;
  • Shortcoder — плагин для создания собственных шорткодов;
  • Easy Bootstrap Shortcode — плагин совместимый с Bootstrap 3.0.3 ;
  • Simple Shortcodes — самый просто в обращении, без всего лишнего, но и функционал не самый обширный;
  • WooCommerce Shortcodes — специализированные шорткоды для превращения вашего сайта в интернет-магазин.

Вообще, чтобы найти себе плагин с шорткодами, нужно зайти в админку WP, перейти во вкладку «Плагины», нажать «Добавить новый» и вбить в поле поиска «Шорткоды» или «Shortcodes». В выдаче будет великое множество разнообразных вариантов, которые можно использовать.

Плагины для Joomla

Для Joomla такого широкого выбора плагинов нет. По сути, самых основных можно выделить два :

  • YT Shortcode
  • Shortcode Ultimate

Они имеют абсолютно идентичный функционал с Вордпрессовскими плагинами.

Заключение

В заключении хотелось бы сказать, что максимально идеально шорткоды работают у людей, которые все же разбираются в технической части. Потому, что иногда возникают трудности, например, с адаптивностью. Эти случаи не часты, но имеют место. И тогда необходимо вручную дорабатывать файлы стилей.

Но в целом Шорткоды всем экономят время. Если активно ими пользоваться, то реализация практически любой задумки по оформлению Вашей новой статьи или страниц услуг займет очень короткое время, а результат будет качественный, если грамотно и со вкусом делать настройки в редакторах шорткодов.

Если тема будет интересна, можем более подробно уделить внимание деталям. Это был вводный, обзорный материал по Шорткодам. Оставляйте комментарии, делитесь своим видением! Для нас это очень важно!

Игорь Лобода
Интернет-маркетолог, основатель блога SeoForge.ru
Оцените автора
( 1 оценка, среднее 5 из 5 )
Добавить комментарий