WordPress – shortcodes, jak stworzyć własny shortcode?

Shortcodes (miko kody) pojawiły się już w WordPress 2.5 i są obecnie bardzo często wykorzystywane w bardziej rozwiniętych szablonach dostępnych pod systemem WordPress. Dzięki zastosowaniu shortcodes w łatwy sposób możemy dodać np. przycisk, formularz, interaktywną mapę, box itp bez znajomości HTML’a. Dobrym przykładem shortcodes jest typowa galeria WordPress’a. W trybie tekstowym dodajemy Wyślij/Wstaw medium, ustawiamy ilość kolumn, sortowanie i klikamy Wstaw galerię.

[ gallery columns=”5″ type=”m” ids=”3870,3871,3872″ orderby=”rand” ]

Gallery – galeria,
ids= id zdjęć
orderby – sortowanie (ASC,DESC – malejąco lub rosnąco)
columns – ilośc kolumn galerii

Jak stworzyć własne shortcodes ?

Shortcodes tworzymy w pliku funkcji szablonu – functions.php.  Stworzymy 3 kolumny z 3 ikonkami o dowolnym tle oraz podpisem.

Dodatkowo wykorzystujemy wektorowe ikonki z http://fortawesome.github.io/Font-Awesome/

W pliku funkcji (functions.php) tworzymy taki kod

 
 function icon($atts, $content = null) {
 extract(shortcode_atts(array(
 "color" => 'green' ,
 "name" => 'icon-pencil' ), $atts));
 return''.$content.'';
}
add_shortcode("icon", "icon");

function “icon” – to nazwa naszego shortcode
$atts – dodatkowe argumenty, u nas jest to kolor i nazwa ikony
$content – aktualna treść wewnątrz funkcji , null – puste

Aby uzyskać podobny efekt jak na obrazku wpisujemy w edytorze tekstowym wpisu/ strony taki kod:

[icon name="icon-pencil" color="#10B5A7"]
 <h2>Profesjonalizm</h2>
 Lorem Ipsum jest tekstem stosowanym jako przykładow ywypełniacz
w przemyśle poligraficznym. [/icon]

[icon name="icon-lightbulb" color="#FFCC00"]
 <h2>Doświadczenie</h2>
 Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz
w przemyśle poligraficznym. [/icon]

[icon name="icon-cogs" color="#B1143C"]
 <h2>Technologie</h2>
 Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz
w przemyśle poligraficznym. [/icon]