Шорткод text – текст, выделенный определенный цветом, фоном и размером

Иногда в тексте приходится выделять фрагменты текста, чтобы сконцентрировать на них внимание читателей. Можно использовать чистую разметку HTML, но мне оказалось удобнее создать для подсветки текста специальный шорткод text. С его помощью я выделяю текст определенным цветом, размером, подсвечиваю фоном. Для этого я заранее определил несколько цветов и размеров, создав для них классы с индивидуальным оформлением (см. далее дополнительный код для style.css). Это заранее созданное оформление я применяю в своих шорткодах – вы можете взять этот подход на вооружение, создав набор шорткодов, которые будут смотреться не хуже, чем шорткоды из плагинов или премиум-тем. Распишу, как создал шорткод для подсветки текста.

Использование шорткода: [code inline=”yes”]выделенный текст

Использование с параметрами: [code inline=”yes”]выделенный текст

Дополнительные параметры:

• цвет шрифта: green (по умолчанию) / blue / brown / lime / magenta / mango / pink / purple / red / teal / black / white
• цвет фона: white (по умолчанию) / blue / brown / lime / magenta / mango / pink / purple / red / teal / black / white / green / light
• размер шрифта: normal (по умолчанию) / small / big / large

Это – выделенный текст с параметрами по-умолчанию. Это – выделенный и подсвеченный текст нормального, маленького, большого и очень большого размера.

исходный код: [code inline=”yes”]Это – выделенный текст с параметрами по-умолчанию. Это – выделенный и подсвеченный текст нормального, маленького, большого и очень большого размера.

function shortcode_text($atts, $content = null) {
	extract(shortcode_atts(array(
		"color"      => 'green',
		"size"       => 'normal',
        "background" => 'white'		
	), $atts));
	return '<span class="text color-'.$color.' font-size-'.$size.' background-'.$background.'">'.$content.'</span>';
}
add_shortcode("text", "shortcode_text");

.text {font-size:1em;}

.background-blue    {background:#04AEDA !important; padding-left:2px; padding-right:2px;}
.background-brown   {background:#A05000 !important; padding-left:2px; padding-right:2px;}
.background-green   {background:#339933 !important; padding-left:2px; padding-right:2px;}
.background-lime    {background:#A2C139 !important; padding-left:2px; padding-right:2px;}
.background-magenta {background:#D80073 !important; padding-left:2px; padding-right:2px;}
.background-mango   {background:#F09609 !important; padding-left:2px; padding-right:2px;}
.background-pink    {background:#E671B8 !important; padding-left:2px; padding-right:2px;}
.background-purple  {background:#A200FF !important; padding-left:2px; padding-right:2px;}
.background-red     {background:#E51400 !important; padding-left:2px; padding-right:2px;}
.background-teal    {background:#00ABA9 !important; padding-left:2px; padding-right:2px;}
.background-black   {background:#000000 !important; padding-left:2px; padding-right:2px;}
.background-light   {background:#FFFFD3 !important; padding-left:2px; padding-right:2px;}

.color-blue    {color:#04AEDA !important}
.color-brown   {color:#A05000 !important}
.color-green   {color:#339933 !important}
.color-lime    {color:#A2C139 !important}
.color-magenta {color:#D80073 !important}
.color-mango   {color:#F09609 !important}
.color-pink    {color:#E671B8 !important}
.color-purple  {color:#A200FF !important}
.color-red     {color:#E51400 !important}
.color-teal    {color:#00ABA9 !important}
.color-black   {color:#000000 !important}
.color-white   {color:#FFFFFF !important}

.font-size-normal   {font-size:1em !important}
.font-size-small    {font-size:0.85em !important}
.font-size-big      {font-size:1.38em !important}
.font-size-large    {font-size:1.62em !important}