Шорткод title — выделение заголовка параграфа шрифтом различного цвета и размера

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

Часто при оформлении текста поста мне приходится разбивать его на несколько частей, озаглавливая каждую из них. Для расстановки заголовков можно применить разметку HTML — заключить текст в контейнеры H1, H2, H3, добавить к ним, но мне удобнее пользоваться шорткодом title, в котором я заранее определил различные виды оформления. Я выделяю заголовки разным цветом, делаю их разного размера, иногда подчеркиваю или перевожу текст заголовка в верхний или нижний регистр. Если вы хотите использовать индивидуальные заголовки, можете воспользоваться готовым шорткодом, либо использовать его код в качестве основы для создания своих заголовков.

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

Использование с параметрами: [code inline=»yes»]

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

  • цвет шрифта: grey (по умолчанию) / green / blue / brown / lime / magenta / mango / pink / purple / red / teal / black / white
  • размер шрифта: normal (по умолчанию) / small / big / large
  • подчеркивание: none (по умолчанию, нет) / solid (сплошная серая линия под текстом заголовка) / dotted (линия из серых точек под текстом заголовка)
  • трансформация: none (по умолчанию, нет) / lowercase (нижний регистр) / uppercase (верхний регистр)
Расшифровка цветов:
  • 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: 18px
  • small: 16px
  • big: 24px
  • large: 32px

исходный код: [code inline=»yes»] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at lectus nec ligula placerat ultrices. Morbi a dictum nunc. Aliquam erat volutpat. Sed varius ipsum in tortor bibendum tempor. Cras justo lacus, tristique id mattis a, sodales in metus. Aenean tristique turpis ac tellus viverra in feugiat nisl volutpat. Praesent fringilla arcu elit. Sed dapibus lacus nec arcu sodales a euismod lacus rutrum. Mauris laoreet, justo non mattis malesuada, lectus urna scelerisque velit, vel molestie tortor leo a quam.

исходный код: [code inline=»yes»] Aliquam molestie convallis blandit. Quisque eget diam dolor. Ut egestas neque eget enim pellentesque tempus. Maecenas sed dictum lectus. In id sem eget sem pellentesque dictum sit amet ut dolor. Quisque ac mollis diam. Quisque tincidunt, est vitae adipiscing tincidunt, dui enim eleifend augue, ut semper nisl dolor vulputate ligula. Quisque eu metus nec purus luctus commodo. Maecenas ornare sem nec urna sodales dignissim.

исходный код: [code inline=»yes»] Ut id purus ac quam varius venenatis sed in leo. Pellentesque ultrices fringilla aliquam. Nunc id quam nec odio venenatis ullamcorper. Praesent elit libero, facilisis nec tincidunt rutrum, rutrum eget risus. Fusce eros nunc, cursus at ornare vitae, dapibus at odio. Maecenas lacinia placerat tempor. Donec dapibus lacus id metus ornare non pulvinar mauris consectetur. Maecenas ultrices, sapien tincidunt viverra molestie, neque enim pretium dolor, non ultrices sem ipsum eu metus. Aliquam justo nunc, adipiscing non ultrices vel, ullamcorper in mauris. Suspendisse nec mauris nec orci placerat interdum ac eu est. Vestibulum semper aliquet velit vel ullamcorper. Integer quis quam a ipsum ornare vestibulum eu vitae mi. Vestibulum nec consequat ante. In enim lacus, sodales sed fringilla at, varius quis risus. Donec lectus tortor, pellentesque at volutpat auctor, varius eu nisl. Pellentesque vitae augue nisl.

исходный код: [code inline=»yes»] Mauris aliquet neque ut lorem laoreet at porttitor lectus consectetur. Quisque interdum mi ut elit cursus congue laoreet enim vehicula. Nam lobortis tincidunt est dictum pulvinar. Aliquam quam dolor, tincidunt quis eleifend non, malesuada scelerisque nunc. Duis congue tristique risus, eu egestas libero faucibus nec. Pellentesque sit amet auctor mi. Ut nec augue sed est viverra molestie at quis sapien. Integer volutpat, est ac pharetra feugiat, erat est condimentum eros, vel gravida risus urna a mauris. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur id erat vitae purus fringilla consectetur a id felis. Aliquam erat volutpat.

исходный код: [code inline=»yes»] Cras bibendum ultrices metus nec cursus. Suspendisse potenti. Praesent a tempus turpis. Ut sapien justo, dapibus et placerat a, vulputate posuere velit. Nullam pretium nunc sed nisl laoreet at commodo leo vehicula. Phasellus ut sem nec dolor bibendum convallis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed commodo metus at dui hendrerit vitae suscipit diam ullamcorper. Maecenas faucibus, nisi a facilisis ultrices, turpis ipsum consectetur lacus, ut dignissim lorem libero vitae diam. Fusce malesuada urna eget felis ullamcorper vel eleifend tortor egestas. Suspendisse semper dictum ante eget pretium.

function shortcode_title($atts, $content = null) {
	extract(shortcode_atts(array(
		"color"      => 'black',
		"size"       => 'normal',
        "border"     => 'none',
        "transform"  => 'none',
        "width"      => 'none',
        "background" => 'white'		
	), $atts));
	return '
	<div class="titletext-div-main">
	    <div class="titletext-div h2-width-'.$width.' h2-border-'.$border.'">
		    <h2 class="titletext color-'.$color.' h2-size-'.$size.' h2-transform-'.$transform.' h2-background-'.$background.'">'.$content.'</h2>
		</div>
	</div>
	';
}
add_shortcode("title", "shortcode_title");
div.titletext-div-main {width:100%;}
div.titletext-div {display:inline-block !important; clear: both;}
h2.titletext {text-shadow:0 0 5px #fff; line-height:1em !important}

.h2-size-normal  {font-size:20px !important; font-weight:500 !important}
.h2-size-small   {font-size:18px !important; font-weight:500 !important}
.h2-size-big     {font-size:24px !important; font-weight:500 !important}
.h2-size-large   {font-size:32px !important; font-weight:500 !important}

.h2-transform-none       {text-transform:none !important}
.h2-transform-lowercase  {text-transform:lowercase !important; }
.h2-transform-uppercase  {text-transform:uppercase !important; font-weight:400 !important}

.h2-border-none   {border-bottom:none !important}
.h2-border-solid  {margin-bottom:15px !important; border-bottom:1px solid #eee !important}
.h2-border-dotted {margin-bottom:15px !important; border-bottom:1px dotted #eee !important}

.h2-width-none {display:block !important;}
.h2-width-full {display:block !important; width:100% !important}

.h2-background-blue    {background:#04AEDA !important; padding:4px}
.h2-background-brown   {background:#A05000 !important; padding:4px}
.h2-background-green   {background:#339933 !important; padding:4px}
.h2-background-lime    {background:#A2C139 !important; padding:4px}
.h2-background-magenta {background:#D80073 !important; padding:4px}
.h2-background-mango   {background:#F09609 !important; padding:4px}
.h2-background-pink    {background:#E671B8 !important; padding:4px}
.h2-background-purple  {background:#A200FF !important; padding:4px}
.h2-background-red     {background:#E51400 !important; padding:4px}
.h2-background-teal    {background:#00ABA9 !important; padding:4px}
.h2-background-black   {background:#000000 !important; padding:4px}
.h2-background-light   {background:#FFFFD3 !important; padding:4px}
.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}
.color-grey    {color:#404040 !important}

Возможно вам будет интересен шорткод для подсветки текста.

Создай свой первый сайт на WordPress

tiaurus

Автор n-wp.ru — блога о WordPress для новичков.

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