Июл
9

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

Шорткоды часто используются в плагинах и темах 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]

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

P.S. Думаю, у каждого за последний год появился достаточный опыть в каких-нибудь вопросах. Для кого-то это всего лишь пара мгновений, не требующих вннимания, а кто-то узнал для себе много нового и испытал множество впечатлений. Если вам, действительно, есть, что рассказать, если вы считаете, что ваша информация и накопленный опыт будет полезен и интересен многим, примите участие в эстафете “Свой опыт” и поделитесь своими навыками и полезными советами со всеми. Пусть ваш опыт принесет пользу не только вам, но и многим людям.

VN:F [1.9.16_1159]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.16_1159]
Rating: 0 (from 0 votes)

Понравилась статья? Поделитесь ею в социальных сервисах!

Подпишитесь на обновление блога!

Ваш e-mail:

Понравилась статья? Вы не хотите пропускать новые статьи, посвященные Wordpress? Тогда подпишитесь на RSS или на электронный ящик и получайте новые статьи мгновенно! Также можете следить за мной в Twitter.

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

  • Нет аватара
    pavka 09.07.2011 в 03:28

    на опыте явно вы :)
    познавательная статья

    VA:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.16_1159]
    Rating: 0 (from 0 votes)
  • Нет аватара
    Андрей 09.07.2011 в 10:28

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

    VA:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.16_1159]
    Rating: 0 (from 0 votes)
  • Нет аватара
    Vadimon 10.07.2011 в 13:15

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

    VN:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VN:F [1.9.16_1159]
    Rating: 0 (from 0 votes)
  • Нет аватара
    Андрей 10.07.2011 в 13:30

    Упс. сбиилось все ((( Как код в комменты поставить?

    VA:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.16_1159]
    Rating: 0 (from 0 votes)
  • Нет аватара
    Vadimon 11.07.2011 в 12:03

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

    VN:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VN:F [1.9.16_1159]
    Rating: 0 (from 0 votes)
  • Нет аватара
    iQuik.ru 12.07.2011 в 10:46

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

    VA:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.16_1159]
    Rating: 0 (from 0 votes)
  • Нет аватара
    Лев 02.08.2011 в 17:51

    В пункте “Создаем блок и кнопку вместе” Вы забыли закрыть тег ссылки

    VA:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.16_1159]
    Rating: 0 (from 0 votes)
  • Нет аватара
    Vadimon 02.08.2011 в 18:00

    Лев, спасибо за наблюдательность, исправил.

    VN:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VN:F [1.9.16_1159]
    Rating: 0 (from 0 votes)
  • Нет аватара
    Яна 12.08.2011 в 15:48

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

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

    VA:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.16_1159]
    Rating: 0 (from 0 votes)
  • Нет аватара
    Vadimon 13.08.2011 в 12:22

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

    VN:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VN:F [1.9.16_1159]
    Rating: 0 (from 0 votes)
  • Нет аватара
    Яна 17.08.2011 в 14:50

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

    Пример:

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

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

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

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

    VA:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.16_1159]
    Rating: 0 (from 0 votes)
  • Нет аватара
    Яна 17.08.2011 в 15:00

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

    VA:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.16_1159]
    Rating: 0 (from 0 votes)
  • Нет аватара
    Никита 15.10.2012 в 23:48

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

    VA:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.16_1159]
    Rating: 0 (from 0 votes)
  • Нет аватара
    Александр 27.03.2013 в 02:00

    Как использовать один шорткод в нутри другого ?

    VA:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.16_1159]
    Rating: 0 (from 0 votes)
  • Нет аватара
    Сергей 19.04.2013 в 15:24

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

    VA:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.16_1159]
    Rating: 0 (from 0 votes)
  • Нет аватара
    андрей 11.06.2013 в 15:14

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

    VA:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.16_1159]
    Rating: 0 (from 0 votes)
  • Нет аватара
    Антон 20.06.2013 в 03:02

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

    VA:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.16_1159]
    Rating: 0 (from 0 votes)

Оставить комментарий

Вы можете использовать следующие теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

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

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

Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога по E-mail:

E-mail:

Последние комментарии

Друзья проекта