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

Привет!

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

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

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

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

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

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

Так что если хотите с удобствами узнать, как пользоваться Shortodes 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 Ultimate - Additional Skins, то выбор оформления сильно увеличивается.