WordPress. Как использовать шорткоды (на основе Cherry 3.x)

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

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

Шорткоды — это мощный инструмент управления контентом http://codex.wordpress.org/Shortcode. Для использования шорткодов шаблона необходимо:

Скачать и установить плагин Cherry.

1. Открыть запись/страницу в админ панели WordPress.

2. Выбрать режим редактирования Visual (Визуальный). Нажать на кнопку шорткодов и выбрать нужный.

Все шорткоды условно делятся на следующие группы:

• Динамические — используются для вывода контента (записи, типы кастомных записей, теги, и т.п.);

• Колонки сетки — колонки для формирования сетки;

• Элементы — дополнительные элементы контента;

• Другие — вспомогательные элементы расширенного управления контентом.

Рассмотрим основные шорткоды:

1. Post Grid (Сетка записей) отображает стандартные и кастомные посты в форме таблицы с редактируемым количеством колонок и рядов. При выборе появляется лайтбокс с настройками шорткода. Каждая содержит короткое описание с пояснением. Щелкните кнопку Insert Shortcode (Вставить шорткод), когда закончите настраивать опции. Сгенерируется шорткод следующего типа:

[posts_grid columns="3" rows="3" order_by="date" order="DESC" thumb_width="100" thumb_height="100" meta="yes"
 excerpt_count="20" link="yes" link_text="more" custom_class="custom_class"]

Нажмите Update (Сохранить) для сохранения шорткода, затем кликните Preview Changes (Просмотр), чтобы увидеть, как он выглядит на сайте.



2. Post List (Список записей) отображает стандартные и кастомные посты подобно странице блога:

[posts_list numb="3" thumbs="large" thumb_width="100" thumb_height="100" post_content="excerpt" order_by="date"
 order="DESC" link="yes" link_text="more" tags="yes" custom_class="custom_class"] 



3. Mini Post Grid (Мини-сетка записей) — более компактная версия шорткода [post_grid]. Отображает картинки изменяемого размера для стандартных и кастомных записей:

[mini_posts_grid numb="3" thumbs="small" thumb_width="100" thumb_height="100" order_by="date" order="DESC" 
align="left"]



4. Mini Post List (Мини-список записей) — более компактная версия шорткода [posts_list]. Отображает списком стандартные и кастомные посты:

[mini_posts_list numb="3" thumbs="small" thumb_width="100" thumb_height="100" meta="yes" order_by="date" 
order="DESC" excerpt_count="20"] 



5. Recent Posts (Последние записи) отображает недавние записи, для которых можно настраивать следующие опции (тип записи, количество, формат, длина выписки, название кнопки и другие):

[recent_posts num="3" post_format="standard" meta="false" thumb="true" excerpt_count="20"]



6. Recent Testimonials (Последние рекомендации): отображает указанное количество рекомендаций в записях кастомного типа, позволяет убирать/добавлять картинки записей и задавать количество слов:

[recenttesti num="2" thumb="true"]



7. Banner (Баннер) используется для отображения блока со статическим текстом и/или картинкой, названием, ссылкой и т.п.:

[banner img="#" banner_link="#" title="Title" text="Text" btn_text="Button" target="_self"]



8. Comments (Комментарии) показывает последние комментарии:

[recent_comments num="5"]



9. Post Cycle (Цикл записей) отображает различные записи в виде мини-слайдера:

[post_cycle num="5" type="portfolio" meta="false" thumb="true" thumb_width="50" thumb_height="50" effect="slide"]



10. Carousel (Карусель) отображает записи в форме карусели, содержит дополнительные настройки:

[carousel num="5" type="blog" thumb="true" thumb_width="120" thumb_height="50" date="yes" author="yes"
 min_items="3"]



11. Карусель Roundabout — плагин jQuery, превращающий структуру статических элементов HTML в легко управляемый интерактивный элемент в форме карусели:

[roundabout title="Title" num="3" type="blog"]



12. Service Box (Вспомогательное окно) применяется для отображения блоков информации с заголовком, иконкой, текстом, кнопкой. Основная особенность данного шорткода заключается в наличии установленных ранее иконок. Чтобы иконки отобразились, нужно загрузить файлы icon1.png, icon2.png, icon3.png, и т.п в папку wp_content/themes/your_theme/images на FTP сервере:

[service_box title="Title" icon="icon1" text="Your text" btn_text="Button" btn_link="#" btn_size="normal"
 target="_self"]



13. Hero unit (Блок «главное») показывает основную информацию сайта, рекламу, и т.д. Обычно располагается на главной странице сайта, сразу за хедером:

[hero_unit title="Title" text="Text" btn_text="Button" btn_link="#" btn_style="default" btn_size="normal"
 target="_self"]



14. Шорткод Categories (Категории) используется для отображения категорий (в записях блока и в кастомных записях):

[categories class="plus"]



15. Tags (Теги) добавляет теги:

[tags]



16. Grid Columns (Колонки сетки) (span1-12) формирует структуру элементов сетки, где # представляет собой количество колонок от 1 до 12, определяющее ширину элемента:

[span#] [/span#]

Внимание, при создании сетки необходимо "оборачивать" ее элементы в шорткод [row]:

[row] [span6] Your Content... [/span6] [span6] t... [/span6] [/row]

В левой панели Page Attributes (Атрибуты страницы) необходимо выбрать Fullwidth Page (Полноэкранная страница) для Template (Шаблон) .

17. Fluid Columns (Гибкие колонки) (one_half, one_third…) применяется для структурных элементов сетки, чья ширина задается %:

[one_half] [/one_half] 

Внимание, при создании сетки необходимо "оборачивать" ее элементы в шорткод [row_fluid]:

[row_fluid] [five_sixth] Your content... [/five_sixth] [one_sixth... [/one_sixth] [/row_fluid]

18. Шорткоды Multiple Columns (Множественные колонки) (75% / 25%, и т.п.) упрощают управление контентом путем вставки наиболее используемых вариантов сетки:

[row]
[span8] t... [/span8] [span4] Your content... [/span4]
[/row]



19. Label (Метка) отображает метку с заранее заданными стилями:

[label style="default"]label[/label]

20. Highlight (Выделение) выделяет избранный фрагмент текста:

[highlight]Text[/highlight]

21. Button (Кнопка) применяется для вставки кнопки с различными настройками отображения (стиль, размер, иконка, прочее):

[button text="Text" link="#" style="default" size="normal" target="_self" display="inline" icon="no"] 

22. Dropcap (Инициал) отображает инициальную заглавную букву:

[dropcap]L[/dropcap] 

23. Blockquote (Цитата) применяется для цитирования:

[blockquote] Text... [/blockquote]

24. Набор шорткодов Lists (Списки)  (unstyled, check, check2, arrow, arrow2, star, plus, minus — без стиля, флажок, флажок2, стрелка, стрелка2, звездочка, плюс, минус) используется для различных стилизаций списков. Каждый шорткод имеет свой маркер для пунктов списка:

[check_list] List here ... [/check_list] 

25. Video Preview (Видео) позволяет вставить видео файл, загружаемый с внешних ресурсов (youtube, vimeo) или с сайта (внутренний ресурс):

[video_preview post_url="http://demolink.org/blog/video-post-type/" title="yes" date="yes" author="yes"]



26. Шорткоды Alert Boxes (Информационные окна) (message (сообщение), info (информация), success (успех), danger (опасность)) используются для информационных сообщений:

[alert_box style="message" close="yes"]Hello, World![/alert_box]



27. Шорткод Tabs (Вкладки) задает контент в форме вкладок. В них может находиться статический и динамический контент:

[tabs tab1="Title #1" tab2="Title #2" tab3="Title #3"] 
   [tab1] Tab 1 content... [/tab1] 
   [tab2] Tab 2 content... [/tab2] 
   [tab3] Tab 3 content... [/tab3]
[/tabs]



28. Accordion (Аккордеон) отображает аккордеон — свернутые панели с заголовками:

[accordions] 
    [accordion title="title1" visible="yes"] tab content [/accordion] 
    [accordion title="title2"] another c5Text/pre tab2=ontent tab [/accordion] 
[/accordions]



29. Table (Таблица) отвечает за таблицы:

[table td1="#" td2="Title" td3="Value"] [td1] 1 [/td1] [td2] some title 1 [/td2] [td3] some value 1 [/td3] [/table]



30. Google Map добавляет карты Google maps. Чтобы шорткод заработал, нужно вставить необходимые координаты с сайта https://maps.google.com:

[map src="#" width="300" height="200"]

31. Вы можете найти информацию по шорткодам, не вошедшим в данный туториал, в документации к шаблону. Количество шорткодов зависит от версии Cherry плагина и может быть расширено в Вашем конкретном шаблоне.

Вы также можете воспользоваться детальным видео туториалом:

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