Jak dodać kolorowe tło do tekstu?

Czasami zdarza się tak, że chcielibyśmy na stronie wyróżnić fragment tekstu, nadając mu wyraźne tło:

Niestety w edytorze WordPressa nie znajdziemy opcji odpowiedzialnej za ustawianie koloru tła dla tekstu. Możemy jednak pomóc sobie, korzystając z przygotowanego poniżej shortcodu.

Na samym końcu pliku functions.php dodaj następujący kod:

function shortcode_info_box( $atts, $content = null ) {
		extract( shortcode_atts( array(
		'color' => 'zolty',
		), $atts ) );
		return ' <div class="infobox ' . $color . '">' . $content . '</div>';
	}
	add_shortcode('informacja', 'shortcode_info_box');

A w pliku style.css:

.infobox {
padding: 2px 4px;
border: 1px solid #ccc;
}

.infobox.szary {
background: #f0f0f0;
color: #333;
}

.infobox.niebieski {
background: #a0c5ef;
color: #333;
}

.infobox.zolty {
background: #ffd149;
color: #666;
}

.infobox.czerwony {
background: #ff0000;
color: #fff;
}

Wystarczy teraz, że w treści strony wpiszesz:

[informacja color="czerwony"]
Uwaga to jest bardzo ważna informacja!
[/informacja]

Tekst znajdujący się pomiędzy [informacja][/informacja] otrzyma czerwony kolor tła. Do dyspozycji, oprócz koloru czerwonego, mamy jeszcze żółty (zolty), niebieski i szary. Oczywiście nic nie stoi na przeszkodzie, aby rozbudować plik CSS o kolejne barwy.

Uwaga!
Ostateczny wygląd tego tekstu jest uzależniony od szablonu z którego korzystasz. Efekt może różnić się od widocznego powyżej.