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!

Mi is az a shortcode?

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 működése

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 :)

Hogyan írasd ki a hasonló bejegyzéseket cikkekben?

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.

Google Map bejegyzésbe illesztése

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"]

E-mail cím forrásának elrejtése

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:&#105;&#110;&#102;&#111;&#64;&#99;&#111;&#100;&#101;&#45;&#97;&#114;&#116;&#46;&#104;&#117;">&#105;&#110;&#102;&#111;&#64;&#99;&#111;&#100;&#101;&#45;&#97;&#114;&#116;&#46;&#104;&#117;</a>

Példa: info@code-art.hu

Hasznos kis funkció, ajánlom a használatát.

Adsense hirdetés használata bejegyzésekben

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 szerző, biográfiai adatainak megjelenítése a postokban

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.

Twitter gomb

Twitter funkciógomb

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):

Forrás és példa:

Tartalom, csak regisztrált tagoknak

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]

A blogunkal kapcsolatos információk kiíratása

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.

Google Charts

googlechart

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"]

Beállítások

  • data=”41.52,37.79,20.67,0.03″ – Az adatok
  • bg=”F7F9FA” – Háttérszín
  • labels=”Reffering+sites|Search+Engines|Direct+traffic|Other” – Az adatokhoz tartozó nevek (ugyanolyan sorrendben kell megadni mint az adatokat)
  • colors=”058DC7,50B432,ED561B,EDEF00″ – Színek (ugyanolyan sorrendben kell megadni mint az adatokat)
  • size=”488×200″ – Méret (szélesség x magasság)
  • title=”Traffic Sources” – A grafikon címe
  • type=”pie” – Típusa (több típus)

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.

chart

Paypal “adakozz” gomb

É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!

További shortcode tutoriálok/források

Végszó

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!

Szerző:

A codeART 2009-ben alakult és azóta gyűjt inspiráló cikkeket és publikál design és webfejlesztés témában érdekes és hasznos leírásokat.

8 Hozzászólás

  1. szia!

    nagyon jó a blogod, örülök, hogy rátaláltam!

  2. Köszönöm! Örülök, hogy tetszik.

    Remélem találsz rajta hasznos információkat.

  3. 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!

  4. 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é]

  5. Szia!

    Értem mit szeretnél, de sajnos ilyenről nem tudok. Ha esetleg találkoznék ilyesmivel mindenképp jelzem.

  6. Köszönöm!

  7. Sziasztok

    A paypalos adakozós dolgot widgetben hogy lehet előhívni?

  8. 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.

    1
    
    add_filter('widget_text', 'do_shortcode');

Szólj hozzá!

Használható tag-ek:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">

Kérünk ne használd a kommentedet linkelésre, reklámozásra, spammelésre! Csak, tartalomhoz kapcsolódó linkeket kérünk!