Главная
В тренде

Чем полезен плагин шорткодов для WordPress темы Jannah

Как работает плагин шорткодов для wordpress в премиальной теме Jannah.

1. Кратко о шорткодах в теме Jannah


Когда шорткод вставляется в пост или страницу WordPress, он заменяется другим содержимым. Иначе говоря, мы даем команду WordPress найти макрос в квадратных скобках [ ] и заменить его соответствующим динамическим контентом, который создается функцией PHP. И такими свойствами обладает плагин шорткодов для wordpress в теме Jannah.

2. Плагин шорткодов для wordpress в теме Jannah


Чтобы шорткоды заработали, вам нужно установить плагин Jannah Extension, который поставляется с темой бесплатно. Это обязательное условие.

плагин шорткодов для wordpress
плагин шорткодов для wordpress

Войдите в тему Jannah > Выберите Install Plugins > Установите плагин Jannah Extensions и после установки кликните Activate.

3. Собственные шорткоды Jannah 


Тема Jannah поставляется с большим разнообразием шорткодов, которые вам очень понадобятся при редактировании постов и страниц.
После установки плагина Jannah Extensions значки шорткода TieLabs будут выглядеть следующим образом:

шорткоды-jannah
плагин шорткодов для wordpress в теме Jannah

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

4. Обзор шорткодов


4.1. Боксы

При клике на Box в меню шорткодов, появится всплывающее окно:

boxes

  • 1. Style — это стиль бокса, можно выбрать из: (Shadow, Info, Success, Warning, Error, Download, and Note).
  • 2. Alignment — расположение бокса: слева, посередине, справа.
  • 3. Custom Class — если вы хотите больше настроек посредством CSS, вы можете добавить свой класс и использовать в CSS файле.
  • 4. Width — ширина бокса, добавьте значение, например, 500px или 50%.
  • 5. Content — содержимое бокса, именно сюда вставляется ваш текст.
  • 6. Закончив все действия кликните OK чтобы все шорткоды добавились в контент.

Примеры оформления боксов

4.2 Кнопки

Кликните на Button в меню шорткодов, появится всплывающее окно:

кнопки

  • 1. Color — цвет кнопки, выберите из имеющихся цветов.
  • 2. Size — размер: маленький, средний и большой.
  • 3. Link — куда ведет ссылка.
  • 4. Text — the button text.
  • 5. Icon (можно использовать название от Font Awesome) — такие как «fa fa-home», Font Awesome Cheatsheet
  • 6. Открывать ссылку в новой вкладке или окне.
  • 7. Nofollow — предоставляет веб-мастерам возможность сказать поисковым системам «Не переходить по этой ссылке. Это важно для ненадежного контента, платных ссылок и приоритетов сканирования. Больше информации
  • 8. Закончив все действия кликните OK чтобы все шорткоды добавились в контент.

Примеры кнопок

4.3 Переключатели вкладок

Кликните в меню шорткодов на Tabs, у вас появится всплывающее окно:

вкладки

Выберите стиль вкладок: Горизонтальный или Вертикальный, затем нажмите кнопку ОК, чтобы добавить шорткод. Сам код вкладок будет выглядеть следующим образом:

тэги закладок

Вам только останется заменить «Tab x Title» вашим собственным заголовком, а «Tab x | Your Content» содержимым вкладки. Также поступайте с — tabs type=»vertical«.

Примеры переключателей вкладок

4.4 Закрывающиеся боксы

Нажмите на Toggle Box из меню шорткодов, появится всплывающее окно:

toggle

  • 1. Title — заголовок закрывающегося бокса.
  • 2. State — статус закрывающегося бокса (закрывающийся или открывающийся).
  • 3. Content — контент бокса.
  • 4. По окончании кликните кнопку ОК.

тэг toggle

Примеры закрывающихся боксов

4.5 Слайд шоу из контента

Наведите указатель курсора мыши в любом месте содержимого страницы и сделайте разрыв, затем нажмите на Content Slideshow в меню шорткодов.

pointer

Слайдшоу будет добавлено шорткодом в контент, вместо указателя курсора.

слайдшоу

Поместите свой контент в каждый слайд вместо Slide x | Your Content в тэгах — tie_slide — Slide 1 | Your Content [/ tie_slide]. По умолчанию в этой инструкции добавляются три слайда для вас, но вы можете добавить больше слайдов, скопировав и вставив код слайда — tie_slide — Slide 1 | Your Content [/ tie_slide] ниже каждого — tie_slide. Кроме того, вам можно поместить в тэги любой контент, который вы захотите, текст, изображения или видео.

Примеры слайдшоу

4.6 Авторский блок

Нажмите на Author Bio в меню шорткодов, появится всплывающее окно:

блок-автора

  • 1. Title — заголовок авторского блока (наиболее частое употребление имени).
  • 2. Author Image URL — ссылка на фото автора.
  • 3. Content — заполните контентом блок автора.
  • 4. Закончив все действия кликните OK чтобы все шорткоды добавились в контент.

Примеры авторского блока

4.7 Flickr

Нажмите Flickr в меню коротких кодов, появится всплывающее окно:

flickr

  • 1. Account-ID — идентификатор учетной записи, вы можете получить его в https//idgettr.com.
  • 2. Number of Photos — количество фотографий, которые вы хотите отобразить.
  • 3. Sorting — сортировать фотографии по последним или случайным.
  • 4. Закончив все действия кликните OK чтобы все шорткоды добавились в контент.

Примеры заполнения Flickr

4.8 Отображение фидов

Кликните Display Feeds в меню шорткодов, появится всплывающее окно:

feeds

  • Вставьте URL фида.
  • Количество каналов, которые вы хотите отобразить.
  • Закончив все действия кликните OK чтобы все шорткоды добавились в контент.

Примеры отображения фидов

4.9 Подсказки

Нажмите на Tooltip в меню шорткодов, появится всплывающее окно:

подсказки

  • 1. Title — текст, при наведении на который вы отобразите подсказку..
  • 2. Content — текст, который будет отображаться в всплывающей подсказке при наведении курсора на заголовок подсказки.
  • 3. Direction — где отобразится подсказка: вверху, свнизу, справа или слева.
  • 4. Закончив все действия кликните OK чтобы все шорткоды добавились в контент.

Примеры подсказок

4.10 Кнопки «Поделиться»

Нажмите кнопку Share Buttons в меню коротких кодов, появится всплывающее окно:

кнопка поделиться

  • 1. Отметьте кнопки, которые вы хотели бы отобразить.
  • 2. Twitter Follow Button — показать / скрыть кнопку «Twitter».
  • 3. Twitter Username — используйте Twitter follow кнопку. Также будет отображаться следующая кнопка.
  • 4. Закончив все действия кликните OK чтобы все шорткоды добавились в контент.

4.11 Dropcap

dropcap

dropcap-cod

 

Выберите букву, затем нажмите Dropcap в меню шорткодов, код буквы будет добавлен следующим образом. как на картинке слева, а сама буква будет выглядеть так, как в начале этого абзаца.

 

4.12 Облако тэгов

tag-cloud

  • 1. Поставьте курсор в нужное место.
  • 2. Кликните Tags Cloud в меню шорткодов, код Tags Cloud добавиться в это место.

4.13 Подсветка текста

Выделите курсором нужное количество текста, скопируйте его. Затем нажмите Highlight Text в меню шорткодов. Во всплывающем окне выберите нужный цвет, а в окно «text» вставьте скопированный вами текст, нажмите ОК. Текст приобретет выбранный вами фон.

фон-текста

4.14 Отступы

Если вы хотите использовать нужные вам отступы для специальных абзацев с контентом, вы можете это сделать легко как влево, так и вправо. Нажмите на Padding из меню шорткодов, появится всплывающее окно:

padding

  • 1. Отступ слева, Вы можете указать число одной из единиц измерения CSS.
  • 2. Отступ справа.
  • 3. Закончив все действия кликните OK чтобы все шорткоды добавились в контент.

Примеры отступов

4.15 Разделительные линии

Кликните на Divider Line в меню коротких кодов, появится всплывающее окно:

divider

  • 1. Style — выберите стиль разделительной линии, Solid, Dashed, Normal, Double, or Dotted.
  • 2. Margin Top/Bottom — отступы сверху и снизу линии.
  • 3. Закончив все действия кликните OK чтобы все шорткоды добавились в контент.

Примеры разделительных линий

4.16 Списки

списки

Наведите курсор в нужное место, куда вы хотите добавить список. В меню шорткодов выберите Lists → выберите тип списка (к примеру Check), шорткоды списка будут добавлены следующим образом:

шорткод-списка

Теперь между тэгами шорткода можно вставить текст, который вы хотите сделать списком. Вставленный текст между тэгами нужно выделить курсором и кликнуть на панели форматирования иконку «Маркированный список».

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

Примеры списков

4.17 Контент с ограничениями

restrickt

Выберите контент, который вы хотите ограничить только для зарегистрированных пользователей или гостей, в меню шорткодов выберите Restrict Content → затем выберите «Только для зарегистрированных юзеров» или «Только для гостей», шорткод будет добавлен к контенту, который вы выбрали, следующим образом:

registr

Теперь эта строка «Зарегистрироваться на нашем сайте, чтобы получать обновления» будет отображаться только для гостей. Кроме того, вы можете ограничить часть содержимого только для зарегистрированных пользователей.

4.18 Колонки

Нажмите на Columns в меню шорткодов и выберите нужный макет, тема Jannah предлагает 9 вариантов столбцов.

columns

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

код колонок

Вам останется только добавить свой контент вместо оператора Add Content here в каждой колонке.

Примеры колонок

4.19 Карты Google

Поставьте курсор туда, куда вы хотите добавить карту. Нажмите на Google Maps в меню шорткодов, появится всплывающее окно:

карты Google

Введите URL-адрес Google Maps, дополнительная информация о получении URL-адреса карты здесь.

Примеры отображения карты

4.20 Вставка видео

Нажмите на Video в меню шорткодов, появится всплывающее окно:

video

  • 1. Video URL — полный URL видео.
  • 2. Video ширина.
  • 3. Video высота.
  • 4. Закончив все действия кликните OK чтобы все шорткоды добавились в контент.

Примеры вставки видео

4.21 Вставка аудио

Кликните на Audio в меню шорткодов, появится всплывающее окно:

audio

Вставьте URL файла MP3, M4A или OGG в том месте, где вы установили курсор.

Вставка аудио пример

4.22 Lightbox

Нажмите на Lightbox из меню шорткодов, появится всплывающее окно:

lightbox

  • 1. Полный адрес ссылки на Image or Youtube/Vimeo.
  • 2. Title — появится внизу открытого лайтбокса.
  • 3. Content — текст ссылки, при нажатии на которую открывается лайтбокс.
  • 4. Закончив все действия кликните OK чтобы все шорткоды добавились в контент.

картинка

4.23 Цитаты

Кликните на Quote из меню шорткодов, появится всплывающее окно:

цитаты

  • 1. Content — содержание цитаты.
  • 2. Alignment — расположение цитаты: слева, справа или посередине.
  • 3. Author — автор цитаты, появится внизу цитаты.
  • 4. Style — стиль цитаты, тёмный, светлый или простой.

Примеры цитат

4.24 Форма входа на сайт

Кликните на Login Form из меню шорткодов, появится всплывающее окно. Код формы будет выглядеть так:

login_form

Примеры входа на сайт

4.25 Полноразмерное изображение

Кликните на Fullwidth Image из меню шорткодов, появится всплывающее окно. Код вставки изображения будет выглядеть так:

полная-картинка

Затем поставьте курсор после открывающего тега |tie_full_img] и загрузите изображение или выберите из существующих изображений, нажав кнопку «Добавить медиа».

Пример такой картинки

4.26 Индексированное содержание

Шорткод Content Index — одна из самых классных функций, которые предлагает тема Jannah. Для получения дополнительной информации ознакомьтесь с этой статьей.

WordPress тема Jannah с уникальными возможностями! — это главная страница характеристик темы Jannah со всеми подробностями.

Общий рейтинг публикации

Общий дизайн
Качество контента
Картинки
Дружелюбность

Итоговая оценка

Поставьте и Вы свою оценку ниже 🙂

Как установить тему wordpress самому?
User Rating: 4.58 ( 2 votes)
Тэги
Показать больше

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Close
Close