Работаем c шорткодами в WordPress на примерах

Работаем c шорткодами в WordPress на примерах

Комментарии 18 комментариев
5/5 - (3 голоса)

Шорткоды часто используются в плагинах и темах WordPress как способ достичь дополнительную функциональность без необходимости правки и модифицирования файлов шаблона. При помощи шорткода можно просто прописать короткую исполнительную команду для работы той или иной функции прямо в вашей записи. Некоторые плагины и темы используют шорткоды для добавления в записи календарей событий, объявлений или же для вставки формы обратной связи. Шорткоды не только расширяют функциональность, они еще и просты в использовании. Скорее всего, вы уже встречали шорткоды в своей работе над сайтами и даже работали с ними, просто не догадывались с чем имеете дело. Если же вы все еще так и не поняли о чем идет речь, то ниже я вам приведу пример создания простого шорткода и как с ним работать, а также приведу ряд интересных возможностей придания вашим записям индивидуальности и дополнительной функциональности. Попробовав раз, вы оцените все удобство работы с шорткодами и, возможно, на практике примените полученные примеры.

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

Шорткоды впервые появились в WordPress, начиная с версии 2.5 и представляют из себя макросы, которые выполняют те или иные функции в тексте ваших записей. Если вы хотите более подробно о них почитать, то можно посетить специальный раздел в Кодексе WordPress, посвященном шорткодам, где им дается описание, а также приведены ряд примеров. Все функции шорткодов должны располагаться в файле functions.php вашего шаблона или в файле плагина, если вы намереваетесь его создать. Но для начала давайте приведу простой пример шорткода, чтобы вы уже, наконец, увидели его в работе. Это будет обычная строка, которая не выполняет никаких функций, но дает вам наглядный пример работы шорткода. Добавьте нижеприведенный код в файл functions.php:

function extra_style_shortcode( $atts, $content = null ) {
   return '<span style="color: blue; text-decoration: underline;">' . $content . '</span>';
}
add_shortcode('extra-style', 'extra_style_shortcode');

Теперь добавьте макрос шорткода в любое место вашей записи:

[extra-style]Привет, я шорткод![/extra-style]

В результате, выведется подчеркнутая строка синего цвета:

Привет, я шорткод!

Мы говорим WordPress, что текст, содержащийся в тегах []…[/] должен располагаться в переменной $content и в эту переменную также будут входить и все стилевые свойства, которые мы задали шорткоду.

Ну что, надеюсь, разобрались? Согласитесь, довольно-таки удобное использование нужной нам функции в пределах записи. Это был простой пример, теперь давайте перейдем к более сложному, дадим шорткоду самому определить цвет текста с помощью заданного атрибута в функции.

function extra_style_shortcode( $atts, $content = null ) {
    extract(shortcode_atts(array(
		"color" => 'blue',
	), $atts));
   return '<span style="color: ' . $color . '; text-decoration: underline;">' . $content . '</span>';
}
add_shortcode('extra-style', 'extra_style_shortcode');

В запись вставим следующий шорткод с атрибутом цвета:

[extra-style color=red]Привет, я шорткод![/extra-style]

В итоге, на выходе получаем: Привет, я шорткод! или:

[extra-style color=orange]Привет, я шорткод![/extra-style]

В итоге, на выходе получаем: Привет, я шорткод!

Нижеприведенная часть кода нашей функции извлекает информацию из атрибута, которую ввел пользователь для переменной цвета. Если же пользователь не указал конкретный цвет для атрибута, то, по-умолчанию, строке будет назначен цвет синий.

Опять же, этот пример тоже является бесполезным, так как не выполняет никакой функции, а привел я его вам исключительно для ознакомления. А вот следующий вариант шорткода уже несет в себе некоторую функциональность:

function extra_style_shortcode( $atts, $content = null ) {
    extract(shortcode_atts(array(
	"color" => 'blue',
        "size" => '14px',
        "padding" => '0px',
	), $atts));
   return '<span style="color: ' . $color . '; padding: ' . $padding . '; font-size: ' . $size . '; text-decoration: underline;">' . $content . '</span>';
}
add_shortcode('extra-style', 'extra_style_shortcode');

Опять же, вставляем шорткод в нужное место вашей записи:

[extra-style color=purple size=18px padding=5px]Привет, я шорткод![/extra-style]

Вот, что получится, если вставить наш шорткод в какую-нибудь часть текста:

Шорткоды часто используются в плагинах  и темах WordPress как способ достичь дополнительную функциональность без необходимости правки и модифицирования файлов шаблона. При помощи шорткода можно просто прописать короткую исполнительную команду для работы той или иной функции прямо в вашей записи.

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

Создание информационного блока

Этот небольшой пример позволит добавить вам небольшой информационный блок или объявление, например, в верхнюю часть вашей записи, чтобы привлечь внимание пользователей какой-нибудь важной информацией.

function box_shortcode( $atts, $content = null )
{
    extract( shortcode_atts( array(
      'color' => 'yellow',
      'size' => 'medium',
      ), $atts ) );

      return '
		<style type="text/css">
		.shortcode_box {
			padding: 2px 4px;
			border: 1px solid #ccc;
		}
		.yellow {
			background: #ffd149;
			color: #666;
		}
		.blue {
			background: #a0c5ef;
			color: #333;
		}
		.gray {
			background: #f0f0f0;
			color: #333;
		}
		</style>

      <div class="shortcode_box ' . $size . ' ' .  $color . '">' . $content . '</div>';

}
add_shortcode('box', 'box_shortcode');

В результате получим небольшой блок, наподобие этого:

вставляете шорткод в вашу запись:

[box color=yellow]Это блок с важной информацией, которую вам следует прочитать.[/box]

Изменяя цвет переменной, можно получить блоки разного цвета.

Добавлением соответствующих свойств CSS можно еще изменить размер блока, но это вы уже можете сделать сами на свое усмотрение.

Создаем кнопку загрузки

Процесс создания кнопки загрузки очень похож на процесс создания блока с сообщением, отличие заключается в том, что теперь мы применим некоторые стили CSS3 блоку, а внутрь добавим ссылку на скачивание.

function button_shortcode( $atts, $content = null )
{
    extract( shortcode_atts( array(
      'color' => 'blue',
      'size' => 'medium',
      ), $atts ) );

      return '
		<style type="text/css">
		.shortcode_button {
			padding: 2px 8px;
			border: 1px solid #ccc;
			border-radius: 10px;
			-webkit-border-radius: 10px;
			-moz-border-radius: 10px;
		}
		.black {
			background: #ffd149;
			background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#636363), to(#332F2F));
			background: -moz-linear-gradient(19% 75% 90deg,#332F2F, #636363);
			color: #f0f0f0;
			border-top-color: #1c1c1c;
			border-left-color: #1c1c1c;
			border-right-color: #525252;
			border-bottom-color: #525252;
		}
		.blue {
			background: #a0c5ef;
			background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#508BC7), to(#203F75));
			background: -moz-linear-gradient(19% 75% 90deg,#203F75, #508BC7);
			color: #f0f0f0;
			border-top-color: #023778;
			border-left-color: #023778;
			border-right-color: #26609e;
			border-bottom-color: #26609e;
		}

		.large	{
			width: 200px;
		}
		.medium	{
			width: 120px;
		}
		.small	{
			width: 80px;
		}
		</style>

      <div class="shortcode_button ' . $size . ' ' .  $color . '">' . $content . '</div>';

}
add_shortcode('button', 'button_shortcode');

а затем прописываем сам шорткод в записи:

[button color=black size=medium]<a href="#">Загрузить</a>[/button]

в результате получим вот такую вот кнопку с ссылкой на скачивание:

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

Создаем блок и кнопку вместе

Чем еще интересны и удобны шорткоды – это тем, что позволяют их объединять в единое целое для выполнения нескольких функций. Я не буду заново переписывать код функции, приведу всего лишь пример объединения шорткодов блока и кнопки:

[box color=blue]Это блок с важной информацией, которую вам следует прочитать.

[button color=black size=small]<a href="#">Скачать</a>[/button][/box]

Правда, существует одна небольшая проблема. По-умолчанию, WordPress не позволяет объединять вместе шорткоды, поэтому, чтобы обойти этот запрет,  нужно вставить нижеприведенную строку в файл functions.php или файл плагина:

add_filter('the_content', 'do_shortcode');

Это позволит спокойно объединять несколько шорткодов, несмотря на запрет WordPress.

Выводим похожие записи

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

function related_posts_shortcode( $atts ) {
	extract(shortcode_atts(array(
	    'limit' => '5',
	), $atts));

	global $wpdb, $post, $table_prefix;

	if ($post->ID) {
		$retval = '<ul>';
 		// Get tags
		$tags = wp_get_post_tags($post->ID);
		$tagsarray = array();
		foreach ($tags as $tag) {
			$tagsarray[] = $tag->term_id;
		}
		$tagslist = implode(',', $tagsarray);

		// Do the query
		$q = "SELECT p.*, count(tr.object_id) as count
			FROM $wpdb->term_taxonomy AS tt, $wpdb->term_relationships AS tr, $wpdb->posts AS p WHERE tt.taxonomy ='post_tag' AND tt.term_taxonomy_id = tr.term_taxonomy_id AND tr.object_id  = p.ID AND tt.term_id IN ($tagslist) AND p.ID != $post->ID
				AND p.post_status = 'publish'
				AND p.post_date_gmt < NOW()
 			GROUP BY tr.object_id
			ORDER BY count DESC, p.post_date_gmt DESC
			LIMIT $limit;";

		$related = $wpdb->get_results($q);
 		if ( $related ) {
			foreach($related as $r) {
				$retval .= '
	<li><a title="'.wptexturize($r->post_title).'" href="'.get_permalink($r->ID).'">'.wptexturize($r->post_title).'</a></li>
';
			}
		} else {
			$retval .= '
	<li>No related posts found</li>
';
		}
		$retval .= '</ul>
';
		return $retval;
	}
	return;
}
add_shortcode('related_posts', 'related_posts_shortcode');

Ну, и как вы уже догадались, прописываем шорткод в нужном месте записи:

[related_posts]

Создаем буквицу

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

function dropcap($atts, $content = null) {
	return '
<div class="dropcap">'.$content.'</div>
;';
}
add_shortcode('dropcap', 'dropcap');

Дополнительно пропишите еще стили CSS:

.dropcap {
display:block;
float:left;
font-size:50px;
line-height:40px;
margin:0 5px 0 0;
}

затем, шорткодом окружаем нужную нам букву:

[dropcap]Б[/dropcap]Буквица выглядит очень эффектно ...

Вывод статей из пользовательского типа записей

Допустим, вы создали пользовательский тип записи под названием “Новости” и желаем вывести все записи из нее на страницу с названием, например, “Статьи”. Сделать это можно при помощи кода:

function news_shortcode()
{
	//The Query
	query_posts('post_type=news');
	//The Loop
	if ( have_posts() ) : while ( have_posts() ) : the_post();
		echo	'<h3><a href="'; echo the_permalink(); echo '">'; echo the_title(); echo '</a></h3>';
		echo the_excerpt();
	endwhile; else:
	endif;

	//Reset Query
	wp_reset_query();
}
add_shortcode('news', 'news_shortcode');

Для показа записей из “Новости” на странице “Статьи” используем шорткод:

[news]

Показываем на странице записи из определенной категории

Очень похожий пример, что и выше, только теперь мы укажем ограничение в количестве выводимых записей из определенной категории:

function category_shortcode( $atts )
{
extract(shortcode_atts(array(
	    'limit' => '5',
            'category' => '',
	), $atts));
	//The Query
	query_posts('category=' . $id . 'posts_per_page=' . $limit);
	//The Loop
	if ( have_posts() ) : while ( have_posts() ) : the_post();
		echo	'<h3><a href="'; echo the_permalink(); echo '">'; echo the_title(); echo '</a></h3>';
		echo the_excerpt();
	endwhile; else:
	endif;

	//Reset Query
	wp_reset_query();
}
add_shortcode('category', 'category_shortcode');

в шорткоде указываем номер идентификатора рубрики, из которой нужно вывести записи и количество записей:

[category id=# limit=5]

Вот и все. Теперь вы имеете представление о шорткодах и как ими и в каких случая пользоваться. Надеюсь, вы что-то возьмете для себя из этих примеров и примените на практике для своего сайта или блога.

Работаем c шорткодами в WordPress на примерах: 18 комментариев

  2. Спасибо за подробную статью.
    И сразу вопрос, если позволите – какие функции выводят заголовки постов из определенной категории?
    Объясню зачем. Хочу создать несколько страниц (по типу карты сайта), но на каждой странице хочу сделать просто список записей из определенной категории.
    Плагины, которые я смотрел выводят все подряд, исключая из списка только некоторые заданные категории и все в одну страницу. Я же хочу сделать несколько страниц, которые будут называться по названию категории и там уже…
    Не подскажете?

    Ответить

    1. Андрей, в последнем примере удалите из кода строчку echo the_excerpt(); и будут выводиться только заголовки постов.

      Ответить

    1. Андрей, я посмотрел ваш код. Действительно, получился он немного топорным, но раз вас устраивает и работает так, как вам нужно, то почему бы и нет, для новичке вполне сойдет. Мне пришлось его удалить из комментариев, так как здесь он отображается некорректно. Попробуйте добавлять код в тегах code. В дальнейшем я планирую установить подсветку синтаксиса кода в комментариях, для правильного и корректного отображения кода.

      Ответить

  4. Отличная статья! обязательно надо будет воспользоваться указанными приемами.

    Ответить

  6. Что если я хочу использоваться несколько шорткодов на странице. Например, блок “Это блок с важной информацией, которую вам следует прочитать.”
    С представленной реализацией показывается только один последний шорткод.

    Вы не могли бы подсказать, что нужно изменить для показа нескольких блоков на странице?

    Ответить

    1. Яна, а в чем проблема? Шорткод [box color=yellow]Это блок с важной информацией, которую вам следует прочитать.[/box] можете вставлять на страницу сколько угодно.

      Ответить

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

    Пример:

    [box]Это блок 1. [/box]

    [box]Это блок 2.[/box]

    [box]Это блок 3.[/box]

    В итоге “жёлтым” отображается только “Это блок 3.”

    Ответить

  8. Поняла в чём проблема, они просто вставляются один поверх другого, поэтому виден только последний

    Ответить

  9. Здравствуйте! У меня такая ситуация: нужно вставить шорткоды ниже поста в файле темы single.php. Точнее поместить шорткод формы cforms внутри шорткода jquery-collapse-o-matic. Я использовал следующий код:
    <?php echo do_shortcode('[expand title="Ð

    Ответить

  11. Здравствуйте. Подскажите пожалуйста, заинтересовала кнопка загрузить, хотел было поставить, но что то не получается. Помогите, как поставить кнопку. Буду очень признателен. Когда вставляю код в файл “functions.php” наверху страницы появляется часть кода и не могу до конца понять куда ставить шорткод?

    Ответить

  12. блин не работает шорткод нужен срочно не могу в интернете найти рабочий, этот выводит 5 постов не зависимо от настроек и всегда сверху всего хотя я его ставлю внизу страницы

    Ответить

  13. Не подскажете, как выводить с помощью шорткода записи из одной категории полностью, вместе с картинками?

    Ответить
  14. Уведомление: Делаем и показываем скриншоты сайтов на страницах WordPress — WordPressAdmin

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

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