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

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

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

Использование с параметрами: [code inline=”yes”][text color=”цвет шрифта” background=”цвет фона” size=”размер шрифта”]выделенный текст[/text]

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

  • цвет шрифта: 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
Расшифровка цветов:

  • blue: #04AEDA
  • brown: #A05000
  • green: #339933
  • lime: #A2C139
  • magenta: #D80073
  • mango: #F09609
  • pink: #E671B8
  • purple: #A200FF
  • red: #E51400
  • teal: #00ABA9
  • black: #000000
  • white: #FFFFFF
  • light: #FFFFD3
  • grey: #404040
Расшифровка размеров:

  • normal: 1em
  • small: 0.85em
  • big: 1.38em
  • large: 1.62em

Это – [text]выделенный текст[/text] с параметрами по-умолчанию. Это – [text color=”brown” background=”light” size=”normal”]выделенный и подсвеченный текст нормального[/text], [text color=”white” background=”black” size=”small”]маленького[/text], [text color=”white” background=”red” size=”big”]большого[/text] и [text color=”white” background=”lime” size=”large”]очень большого[/text] размера.

исходный код: [code inline=”yes”]Это – [text]выделенный текст[/text] с параметрами по-умолчанию. Это – [text color=”brown” background=”light” size=”normal”]выделенный и подсвеченный текст нормального[/text], [text color=”white” background=”black” size=”small”]маленького[/text], [text color=”white” background=”red” size=”big”]большого[/text] и [text color=”white” background=”lime” size=”large”]очень большого[/text] размера.

function shortcode_text($atts, $content = null) {
	extract(shortcode_atts(array(
		"color"      => 'green',
		"size"       => 'normal',
        "background" => 'white'		
	), $atts));
	return ''.$content.'';
}
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}
Автор tiaurus 2182 Articles
Являюсь создателем n-wp.ru — блога о WordPress для новичков. Мне интересно многое, поэтому еще я сделал 123-box.ru — блог о программах для Windows, и tiaurus.info — блог о красоте.

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

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

Ваш электронный адрес не будет опубликован.


*