WordPress, egy csodás blogmotor, melyet véleményem szerint nyugodtan hívhatunk akár CMS rendszernek is. Az alap motor is kínál számos funkciót, beállítási lehetőséget, de mivel a wordpress ingyenes, így rengeteg plugin (bővítmény), template (sablon) és segítség található hozzá szerte az interneten. Mostantól pedig remélhetőleg itt a code&ART-on is sokat fogtok róla hallani.
Ebben a cikkben különböző “shortcode” -okat fogunk bemutatni, melyeknek biztosan hasznát fogjátok venni a saját vagy egyéb blogoknál egyaránt.
Cikkünk a hirdetés után folytatódik!
A shortcode-ok (kiegészítő funkciók, nyers fordításban rövid kód) lényegében leegyszerűsítik a weboldal szerkesztését és időt spórolunk velük.
Efrud weboldalán találtam rá egy egyszerű példára, ami nagyon jól szemlélteti, hogyan is működik egy shortcode.
A shortcode-okat, először is definiálnunk kell a functions.php fájlban. Egy php funkciót kell létrehoznunk az alábbi kóddal, mely elvégzi majd a kívánt feladatokat, jelen esetben egy linket fog kiírni.
1 2 3 4 5 | function efrudlink() { return 'Az <a href="http://efrud.eu">Efrud.eu</a> oldalon olvasottak alapján létrehoztam egy rövidkódot.'; } add_shortcode('efrud', 'efrudlink'); |
Ennyi az egész, most már használhatjuk az efrud nevű sortcode-unkat a következő módon. A bejegyzés szerkesztésénél html módban írjuk be:
[efrud]
Most pedig lássunk pár olyan rövid kódot amelyek nagyobb feladatra hivatottak :)
Először is nyisd meg a functions.php fájlt a sablonod könyvtárában. Másodszor pedig illeszd be a következő kódot.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | function related_posts_shortcode( $atts ) { extract(shortcode_atts(array( 'limit' => '5', ), $atts)); global $wpdb, $post, $table_prefix; if ($post->ID) { $retval = ' <ul>'; // Get tags $tags = wp_get_post_tags($post->ID); $tagsarray = array(); foreach ($tags as $tag) { $tagsarray[] = $tag->term_id; } $tagslist = implode(',', $tagsarray); // Do the query $q = " SELECT p.*, count(tr.object_id) as count FROM $wpdb->term_taxonomy AS tt, $wpdb->term_relationships AS tr, $wpdb->posts AS p WHERE tt.taxonomy ='post_tag' AND tt.term_taxonomy_id = tr.term_taxonomy_id AND tr.object_id = p.ID AND tt.term_id IN ($tagslist) AND p.ID != $post->ID AND p.post_status = 'publish' AND p.post_date_gmt < NOW() GROUP BY tr.object_id ORDER BY count DESC, p.post_date_gmt DESC LIMIT $limit;"; $related = $wpdb->get_results($q); if ( $related ) { foreach($related as $r) { $retval .= ' <li><a title="'.wptexturize($r->post_title).'" href="'.get_permalink($r->ID).'">'.wptexturize($r->post_title).'</a></li> '; } } else { $retval .= ' <li>Nincs hasonló bejegyzés</li> '; } $retval .= '</ul> '; return $retval; } return; } add_shortcode('related_posts', 'related_posts_shortcode'); |
Ha kész, hozz létre egy bejegyzést vagy nyiss meg egy meglévőt (a html szerkesztőt használd) és írd be a következő shortcode-ot oda , ahol a hasonló cikkeket látni szeretnéd.
[related_posts]
vagy
[related_posts limit="x"]
Az első kód 5 bejegyzést jelenít meg, míg a második annyit amennyit az x helyére írsz.
A következő funkcióhoz szükségünk lesz egy Google Api kulcsra, ugyanis megmutatjuk, hogyan illessz be google térképet a bejegyzésedbe.
Illeszd a következő kódot a functions.php-ba:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | function googlemap_shortcode( $atts ) { extract(shortcode_atts(array( 'width' => '500px', 'height' => '300px', 'apikey' => 'REPLACEME', 'marker' => '', 'center' => '', 'zoom' => '13' ), $atts)); if ($center) $setCenter = 'map.setCenter(new GLatLng('.$center.'), '.$zoom.');'; if ($marker) $setMarker = 'map.addOverlay(new GMarker(new GLatLng('.$marker.')));'; $rand = rand(1,100) * rand(1,100); return ' <script src="http://maps.google.com/maps?file=api&v=2.x&sensor=false&key='.$apikey.'" type="text/javascript"></script> <script type="text/javascript"> function initialize() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map_canvas_'.$rand.'")); '.$setCenter.' '.$setMarker.' map.setUIToDefault(); } } initialize(); </script> '; } add_shortcode('googlemap', 'googlemap_shortcode'); |
A “REPLACE ME” helyére ird a saját kulcsodat és a map kódját is cseréld a sajátodra.
Ezután nincs más dolgod mint a bejegyzés írásánál beilleszteni a következőt.
[googlemap]
használhatod a következő beállításokat is zoom, center, marker, width:
[googlemap zoom="13" center="52.66389056542801, 0.1641082763671875" marker="52.66389056542801, 0.1641082763671875" width="488px"]
Gondolom mindenkinek ismerősek a kéretlen spam levelek melyek egy része úgy keletkezik, hogy az internetet fürkésző robotok összegyűjtik a mi e-mail címünket is, amelyet pl. egy weboldalon feltüntetünk. WordPress alatt, a következő kód segítségével kiküszöbölhető mindez. Használatához egészítsük ki a functions.php -t a következőkkel:
1 2 3 4 5 6 7 8 | function munge_mail_shortcode( $atts , $content=null ) { for ($i = 0; $i < strlen($content); $i++) $encodedmail .= "&#" . ord($content[$i]) . ';'; return '<a href="mailto:'.$encodedmail.'">'.$encodedmail.'</a>'; } add_shortcode('mailto', 'munge_mail_shortcode'); |
Használata:
[mailto]email@weboldalad.hu[/mailto]
Ez a funkció átalakítja a forrásban található e-mail címet, értelmezhetetlen karakterekké. Így a robotok nem veszik észre.
<a href="mailto:info@code-art.hu">info@code-art.hu</a>
Példa: info@code-art.hu
Hasznos kis funkció, ajánlom a használatát.
Adsens hírdetéseinket megjeleníthetjük shortcode segítségével is. Szintén a functions.php-t fogjuk kiegészíteni, méghozzá a következőkkel:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | function adsense_shortcode( $atts ) { extract(shortcode_atts(array( 'format' => '1', ), $atts)); switch ($format) { case 1 : $ad = '<script type="text/javascript"><!-- google_ad_client = "pub-6928386133078955"; /* 234x60, created 16/09/08 */ google_ad_slot = "0834408702"; google_ad_width = 234; google_ad_height = 60; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>'; break; } return $ad; } add_shortcode('adsense', 'adsense_shortcode'); |
Persze az adsense kódot cseréljük a sajátunkra.
Használata pofonegyszerű, írjuk a kódot oda, ahol a hirdetést látni szeretnénk:
[adsense]
Több hirdetés definiálásakor, ne felejtsük el átírni a nevet pl. (adsens_2, adsens_billboard stb.)
A wordpress adminban, a felhasználók menüpont alatt, különböző információkat közölhetünk magunkról. Ezeket a következőképp írathatjuk ki a bejegyzéseinkben.
Nyisd meg a functions.php fájlt és illeszd be a következő kódot:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | function get_author_bio ($content=''){ global $post; $post_author_name=get_the_author_meta("display_name"); $post_author_description=get_the_author_meta("description"); $html="<div class='clearfix' id='about_author'>\n"; $html.="<img width='80' height='80' class='avatar' src='http://www.gravatar.com/avatar.php?gravatar_id=".md5(get_the_author_email()). "&default=".urlencode($GLOBALS['defaultgravatar'])."&size=80&r=PG' alt='PG'/>\n"; $html.="<div class='author_text'>\n"; $html.="<h4>Szerző: <span>".$post_author_name."</span></h4>\n"; $html.= $post_author_description."\n"; $html.="</div>\n"; $html.="<div class='clear'></div>\n"; $content .= $html; } return $content; } add_filter('the_content', 'get_author_bio'); |
Megjelenítjük a szerző avatarát, nevét és a bemutatkozását.

Külföldön mindenki twitter lázban ég, és idehaza is használják jó néhányan. Ezért gondoltam, hogy megmutatok egy megoldást arra miként jeleníthetünk meg egy twitter gombot a bejegyzésünkben “shortcode” segítségével.
Tehát, egészítsük ki a functions.php-t a következőkkel:
1 2 3 4 5 | function twitt() { return '<div id="twitit"><a href="http://twitter.com/home?status=Currently reading '.get_permalink($post->ID).'" title="Oszd meg ezt az oldalt Twitteren!" target="_blank">Oszd meg Twitteren</a></div>'; } add_shortcode('twitter', 'twitt'); |
Majd, illesszük a bejegyzésbe a következőt:
[twitter]
És itt a példa (persze css-el kipofozhatjátok):
Ha weboldalunk regisztrációhoz kötött, gyakran megeshet, hogy valamilyen tartalmat, letöltést csak azoknak szeretnénk elérhetővé tenni, akik regisztrálva vannak az oldalon. Ezt a következőképp érhetjük el.
Illesszük ezt a shortcode-ot, a functions.php-ba:
1 2 3 4 5 6 7 | add_shortcode( 'member', 'member_check_shortcode' ); function member_check_shortcode( $atts, $content = null ) { if ( is_user_logged_in() && !is_null( $content ) && !is_feed() ) return $content; return ''; } |
Ha ez megvan, akkor a “member”közé zárt tartalom csak a regisztráltak számára lesz elérhető.
1 2 3 | [member] Amit ide írtam csak az látja aki regisztrál! [/member] |
Php funkció a következő kóddal:
1 2 3 4 5 6 7 | function bloginfo_shortcode( $atts ) { extract(shortcode_atts(array( 'key' => '', ), $atts)); return get_bloginfo($key); } add_shortcode('bloginfo', 'bloginfo_shortcode'); |
Adjuk a bejegyzésünkhöz a következő rövid kódot:
[bloginfo key="template_url"]
A key-nél tudjuk megadni milyen info jelenjen meg a blogunkról. A wordpress.org-on létezik egy lista ami tartalmazza ez elérhető dolgokat.
A google charts api segítségével grafikonokat, diagrammokat is illeszthetünk a cikkekbe. Ehhez a következőket kell tennünk.
A functions.php fájlba hozzunk létre egy php funkciót a következő kóddal:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | function chart_shortcode( $atts ) { extract(shortcode_atts(array( 'data' => '', 'colors' => '', 'size' => '400x200', 'bg' => 'ffffff', 'title' => '', 'labels' => '', 'advanced' => '', 'type' => 'pie' ), $atts)); switch ($type) { case 'line' : $charttype = 'lc'; break; case 'xyline' : $charttype = 'lxy'; break; case 'sparkline' : $charttype = 'ls'; break; case 'meter' : $charttype = 'gom'; break; case 'scatter' : $charttype = 's'; break; case 'venn' : $charttype = 'v'; break; case 'pie' : $charttype = 'p3'; break; case 'pie2d' : $charttype = 'p'; break; default : $charttype = $type; break; } if ($title) $string .= '&chtt='.$title.''; if ($labels) $string .= '&chl='.$labels.''; if ($colors) $string .= '&chco='.$colors.''; $string .= '&chs='.$size.''; $string .= '&chd=t:'.$data.''; $string .= '&chf='.$bg.''; return '<img title="'.$title.'" src="http://chart.apis.google.com/chart?cht='.$charttype.''.$string.$advanced.'" alt="'.$title.'" />'; } add_shortcode('chart', 'chart_shortcode'); |
Majd adjuk a rövid kódot a bejegyzésünkhöz:
[chart data="41.52,37.79,20.67,0.03" bg="F7F9FA" labels="Reffering+sites|Search+Engines|Direct+traffic|Other" colors="058DC7,50B432,ED561B,EDEF00" size="488x200" title="Traffic Sources" type="pie"]
A google charts api oldalán több stílus, szín és információ is megtalálható a különböző grafikonok elkészítéséhez, testre szabásához, úgyhogy ajánlott átböngészni.
És végül jöjjön egy paypal funkció, amellyel adakozásra buzdíthatjuk látogatóinkat, persze csak ha elégedettek az oldalunkkal és szeretnék támogatni azt.
Még mindig a functions.php-t szerkesztjük, adjuk fozzá a következő kódot. A “REPLACE ME” részhez a saját paypal e-mail címünket írjuk.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | function donate_shortcode( $atts ) { extract(shortcode_atts(array( 'text' => 'Make a donation', 'account' => 'REPLACE ME', 'for' => '', ), $atts)); global $post; if (!$for) $for = str_replace(" ","+",$post->post_title); return '<a class="donateLink" href="https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&business='.$account.'&item_name=Donation+for+'.$for.'">'.$text.'</a>'; } add_shortcode('donate', 'donate_shortcode'); |
Ha ez megvan a következő shortcode-al tudjuk kitenni az oldalon:
[donate]
Példa: Ha tetszik az oldal, támogasd egy csekély összeggel!
Nos, itt végére is értünk a shortcode túrának, amely remélem hasznos volt és ezután használni fogjátok őket, hiszen láthatjátok mennyire leegyszerűsítenek egyes feladatokat. De szerintem még biztosan lesz róluk szó ezen a blogon is. Természetesen egyes megoldásokra léteznek különböző pluginek, melyek kiválthatják a shortcode funkciókat, viszont a pluginek több memóriát igényelnek és minél több van belőlük annál több gond is felmerülhet!
További kellemes böngészést!
scabi
10.03.07
22:56
szia!
nagyon jó a blogod, örülök, hogy rátaláltam!
codee47
10.03.08
00:13
Köszönöm! Örülök, hogy tetszik.
Remélem találsz rajta hasznos információkat.
Rubin
10.10.24
18:26
Hali!
Tényleg nagyon sok hasznos shortcode!
Köszönöm!
Hogy lehet megoldani hogyha be van jelentkezve akkor bizonyos részt NE lásson?
[member]
Amit ide írtam csak az látja aki regisztrál!
[/member]
[izé]
Amit ide írtam csak az látja aki NEM regisztrál!
[/izé]
Nagyon hasznos lenne.
Előre is köszönöm!
Rubin
10.10.24
18:36
Lehet kicsit értetlen voltam, tehát a shortcode:
[izé]
Amit ide írtam csak az látja aki NEM regisztrál!
Aki regisztrált az ezt a szöveget nem láthatja!
[/izé]
codee47
10.10.24
20:43
Szia!
Értem mit szeretnél, de sajnos ilyenről nem tudok. Ha esetleg találkoznék ilyesmivel mindenképp jelzem.
Rubin
10.10.25
17:44
Köszönöm!
Béla
11.10.02
18:28
Sziasztok
A paypalos adakozós dolgot widgetben hogy lehet előhívni?
codeart
11.10.06
20:40
Szia!
A wp widgetbe alapból nem lehet shortcode-ot tenni, engedélyezd a functions.php-ban a következő kóddal és menni fog.