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]