Как пользоваться Shortcodes Ultimate. Кнопка, заголовок, спойлер, цитата и аккордеон

Плагин Shortcodes UltimateПривет!

Плагин Shortcodes Ultimate для WordPress предназначен для быстрого и простого создания в ваших записях и статьях разного рода удобств, украшательств и полезностей.

Цель и задача этой моей статьи — создать удобный мануал. В первую очередь для себя.

Потому что плагин имеет десятки возможностей и упомнить все нереально человеку со средними умственными способностями. :-)

В интернете искал аналогичные инструкции. Есть годные, но сделаны жуть как неудобно. Например, почти часовое видео. Попробуй найди там, что тебе нужно именно сейчас.

Поэтому преимущества этого мануала, этой статьи в том, что тут

  1. оглавление с переходами на короткие разделы описаний функций;
  2. короткие видео;
  3. все виды оформлений того или иного элемента выведены вместе и подписаны. Поэтому что вам не придется перебирать их по одному в плагине, пытаясь не забыть ЧТО было до этого.

Так что если хотите с удобствами узнать, как пользоваться Shortodes Ultimate, смотрите -

Кнопка

Стиль кнопки выбирать тут

Настройка стиля кнопки в плагине Shortcodes Ulitmate

Смотрите все стили кнопок под спойлером ниже —

Обратите внимание, что для разных стилей кнопок потребуется подбирать разный цвет текста. Например, белый текст со стилем Призрак не сочетается, так как становится невидимым.

В кнопку вместе с текстом можно вставить и иконку —

Вставка иконки в кнопку в плагине Shortcodes Ultimate

Цвет иконки тоже можно менять. Не рекомендую делать его иным, чем цвет текста. Да и с самими иконками... Ставьте только там, где она действительно несет информативную нагрузку. Иными словами, если не уверены, что постановка иконки даст рост конверсии — не ставьте.

Совет: Иконок предлагается на выбор +800 штук, все просматривать не всем дано — в глазах может зарябить. Я обычно ввожу в поле «Фильтр иконок» начало слова на тему желаемой иконки. Например — «heal» если ищу что-то на тему здоровья, или «car» если на тему автомобиля.

Ещё круче в этом смысле оформления «Медиа менеджер». Вы можете вместо иконки вставить любое изображение, которое подгрузите в Медиафайлы. Опять же — смотрите, чтобы это было оправдано и не превратило вашу страницу в яркий мельтешащий пазл. Конверсию это подкосит.

Заголовок

Смотрите здесь, под спойлером, стили заголовков

По умолчанию

Современный 1: Темный

Современный 1: Светлый

Современный 1: Голубой

Современный 1: Оранжевый

Современный 1: Фиолетовый

Современный 2: Темный

Современный 2: Светлый

Современный 2: Голубой

Современный 2: Оранжевый

Современный 2: Фиолетовый

Линия: Темный

Линия: Светлый

Линия: Голубой

Линия: Оранжевый

Линия: Фиолетовый

Пунктир: Темный

Пунктир: Светлый

Пунктир: Голубой

Пунктир: Оранжевый

Пунктир: Фиолетовый

Плоский: Темный

Плоский: Светлый

Плоский: Голубой

Плоский: Зеленый

Спойлер

Пример:

Вид и названия иконок для спойлеров
Вид и названия иконок для спойлеров Shortcodes Ultimate

Базовые и дополнительные стили спойлеров

Стили выбираются здесь

Базовые стили спойлеров Shortcodes Ultimate

и выглядят они вот так

По умолчанию
Хочу сразу узнавать о новых публикациях!

Стильный
Хочу сразу узнавать о новых публикациях!

Простой
Хочу сразу узнавать о новых публикациях!

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

Дополнительные стили спойлеров Shortcodes Ultimate

Вот как они выглядят

Карбон
Образцы дополнительных стилей спойлеров

Резкий
Образцы дополнительных стилей спойлеров

Сетка
Образцы дополнительных стилей спойлеров

Дерево
Образцы дополнительных стилей спойлеров

Ткань
Образцы дополнительных стилей спойлеров

Современный: Темный
Образцы дополнительных стилей спойлеров

Современный: Светлый
Образцы дополнительных стилей спойлеров

Современный: Фиолетовый
Образцы дополнительных стилей спойлеров

Современный: Оранжевый
Образцы дополнительных стилей спойлеров

Стеклянный: Темный
Образцы дополнительных стилей спойлеров

Стеклянный: Светлый
Образцы дополнительных стилей спойлеров

Стеклянный: Голубой
Образцы дополнительных стилей спойлеров

Стеклянный: Зеленый
Образцы дополнительных стилей спойлеров

Стеклянный: Золотой
Образцы дополнительных стилей спойлеров

Аккордеон

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

Пример

Анджелина Джоли ню
Мем когда обманули

Реальное фото Анджелины Джоли ню
Мем Достали - Ну сколько можно - Роберт Дауни младший

Возможные проблемы со спойлерами и аккордеонами

Если вид спойлера или первой панели аккордеона стал таким

Проблемы со спойлерами и аккордеоном

Хотя должен быть такой

Конфликт плагинов

Значит совпало два обстоятельства:

  1. Выше спойлера или аккордеона в тексте статьи/записи у вас вставлена гиперссылка. Например,
    Конфликт плагинов2. У вас установлен плагин Responsive Lightbox & Gallery от автора: dFactory или ему подобный плагин лайтбокса.

Как это срабатывает: Если выше спойлера/аккордеона имеется гиперссылка, то во время штатной работы плагина лайтбокса (поиск изображений в содержимом записи и дополнение их разметки для автоматической активации лайтбокса) происходит захват лишних строк и вырезается заголовок спойлера из содержимого записи.

Варианты решения

  1. Удалите из текста статьи выше спойлера/аккордеона все гиперссылки.  Если не хотите, то 
  2. Отключите фильтр авто-лайтбоксов на страницах/постах в содержимом которых есть спойлеры. Это значит, что лайтбоксы не будут активированы автоматически там, где есть хотя бы один спойлер. Для этого, добавьте следующий PHP код в файл functions.php
function vanokhin_disable_rlightbox_where_su_spoilers( $posts ) {
	if (
		empty( $posts )
		|| ! function_exists( 'Responsive_Lightbox' )
		|| ! function_exists( 'su_get_shortcode_prefix' )
	) {
		return $posts;
	}
	foreach ( $posts as $post ) {
		if ( ! has_shortcode( $post->post_content, su_get_shortcode_prefix() . 'spoiler' ) ) {
			continue;
		}
		remove_filter( 'the_content', array( Responsive_Lightbox()->frontend, 'add_lightbox' ) );
		break;
	}
	return $posts;
}
add_action( 'the_posts', 'vanokhin_disable_rlightbox_where_su_spoilers' );

Но при этом, для того, чтобы изображения на странице всплывали-таки лайтбоксами, вам придется руками вставить в ссылку каждого изображения код data-rel = ''lightbox'' в конце открытия href. Он должен выглядеть примерно так: <a href="ссылка на изображение" data-rel="lightbox"> <img class = «какой-то текст тут» src = «ссылка на изображение» /></a>
Вот конкретный пример: <a href="https://sidorevich.ru/wp-content/uploads/2018/11/Set-Hard-Limiter-1.jpg" data-rel="lightbox"><img class="aligncenter wp-image-2229" title="Подключение плагина Hard Limiter" src="https://sidorevich.ru/wp-content/uploads/2018/11/Set-Hard-Limiter-1.jpg" alt="Подключение плагина Hard Limiter" width="600" height="487" /></a>

Цитата

Добавляет к оформлению цитаты вашей темы дополнительные скины.

Например, вот это оформление цитаты, идущее с темой Simpatika от GoodwinPress.

А вот так выглядит оформление цитаты с помощью плагина Shortcodes Ulitmate.

С помощью этого плагина можно ещё круче оформить цитату, указав автора и даже вставить ссылку —

шорткод цитата

Дешевые вещи сделаны дешевоДмитрий Сидоревич

Но если вы докупили Дополнение к плагину Shortcodes Ultimate - Additional Skins, то выбор оформления сильно увеличивается.

Под спойлером все стили оформления цитат

Дополнительные стили оформления цитат с дополнением Additional Skins

Стиль оформления цитаты — Карбон

Стиль оформления цитаты — Резкий

Стиль оформления цитаты — Сетка

Стиль оформления цитаты — Дерево

Стиль оформления цитаты — Ткань

Стиль оформления цитаты — Современный: Тёмный

Стиль оформления цитаты — Современный: Светлый

Стиль оформления цитаты — Современный: Голубой

Стиль оформления цитаты — Современный: Оранжевый

Стиль оформления цитаты — Современный: Фиолетовый

Стиль оформления цитаты — Плоский: Тёмный

Стиль оформления цитаты — Плоский: Светлый

Стиль оформления цитаты — Плоский: Голубой

Стиль оформления цитаты — Плоский: Зелёный


P.S. Хотите получать уведомления о новых статьях этого блога? Нажмите на эту кнопку -

Хочу сразу узнавать о новых публикациях!

Предыдущая запись Настройка плагина Subscribe to comments reloaded
Следующая запись Правильная настройка темы Simpatika от GoodvinPress

Ваш комментарий

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

Чтобы отправить комментарий, разрешите сбор ваших персональных данных .
Пользовательское соглашение