Если данный туториал не то, что Вы искали, у Вас все еще остались вопросы или предложения - дайте нам знать. Пожалуйста, помогите нам обслуживать Вас лучше!

Ваше имя

Ваш e-mail

Ваше сообщение (обязательно)

captcha

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

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

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

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

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

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

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

wordpress_shortcodes_ using1

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

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

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

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

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

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

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

    wordpress_shortcodes_ using2

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

  4. [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"] 
    

    wordpress_shortcodes_ using3

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

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

    wordpress_shortcodes_ using4

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

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

    wordpress_shortcodes_ using5

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

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

    wordpress_shortcodes_ using6

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

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

    wordpress_shortcodes_ using7

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

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

    wordpress_shortcodes_ using8

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

  16. [recent_comments num="5"]
    

    wordpress_shortcodes_ using9

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

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

    wordpress_shortcodes_ using10

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

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

    wordpress_shortcodes_ using11

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

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

    wordpress_shortcodes_ using12

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

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

    wordpress_shortcodes_ using13

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

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

    wordpress_shortcodes_ using14

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

  28. [categories class="plus"]
    

    wordpress_shortcodes_ using15

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

  30. [tags]
    

    wordpress_shortcodes_ using16

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

  32. [span#] [/span#]
    

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

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

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

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

  34. [one_half] [/one_half] 
    

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

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

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

    wordpress_shortcodes_ using17

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

  38. [label style="default"]label[/label]
    
  39. Highlight (Выделение) выделяет избранный фрагмент текста:

  40. [highlight]Text[/highlight]
    
  41. Button (Кнопка) применяется для вставки кнопки с различными настройками отображения (стиль, размер, иконка, прочее):

  42. [button text="Text" link="#" style="default" size="normal" target="_self" display="inline" icon="no"] 
    
  43. Dropcap (Инициал) отображает инициальную заглавную букву:

  44. [dropcap]L[/dropcap] 
    
  45. Blockquote (Цитата) применяется для цитирования:

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

  48. [check_list] List here ... [/check_list] 
    
  49. Video Preview (Видео) позволяет вставить видео файл, загружаемый с внешних ресурсов (youtube, vimeo) или с сайта (внутренний ресурс):

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

    wordpress_shortcodes_ using18

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

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

    wordpress_shortcodes_ using19

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

  54. [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]
    

    wordpress_shortcodes_ using20

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

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

    wordpress_shortcodes_ using21

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

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

    wordpress_shortcodes_ using22

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

  60. [map src="#" width="300" height="200"]
    
  61. Вы можете найти информацию по шорткодам, не вошедшим в данный туториал, в документации к шаблону. Количество шорткодов зависит от версии Cherry плагина и может быть расширено в Вашем конкретном шаблоне.

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

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

WordPress. Как использовать шорткоды (на основе Cherry), 5.0 out of 5 based on 1 rating