استاد shortcode های وردپرس شوید !
کدهای کوتاه ابزارهای قدرتمندی هستند اما هنوز تابع ناشناخته ای در وردپرس هستند.
تصور کنید که شما می تواند فقط کلمه ی “adsense”را برای نمایش یک “adsense” یا “post_count”تایپ کنید تا فورا بتوانبد تعداد پستهای وبلاگ خود را پیدا کنید.
کد های کوتاه وردپرس می تواند این کار و حتی بیشتراز آن را انجام دهد و قطعا زندگی وبلاگ نویسی شما را آسانتر می کند. در این مقاله، ما به شما نحوه ایجاد و استفاده از کدهای کوتاه را نشان داده، و همچنین مخرب های (killer) کدهای کوتاه آماده به استفاده وردپرس را که تجربه وبلاگ نویسی شما را افزایش خواهند داد، ارائه میدهیم.
کد های کوتاه چه هستند؟
استفاده از کدهای کوتاه بسیار آسان است. برای استفاده از یکی از آنها، یک پست جدید ایجاد کنید (و یا یکی از قدیمی ها را ویرایش کنید) ویرایشگر() به حالت HTML تغییر دهید و یک کد کوتاه در پرانتز تایپ کنید، مانند:
همچنین استفاده کردن از ویژگیها با کدهای کوتاه ممکن است. یک کد کوتاه استفاده شده با ویژگی ها چیزی شبیه به این خواهد بود:
|
1
|
[showcase id="5"] |
همانطور که در اینجا نشان داده شده است، کدهای کوتاه همچنین می توانند دارای محتوای باشند:
|
1
|
[url href="http://www.smashingmagazine.com"]Smashing Magazine[/url] |
کدهای کوتاه بر اساس مجموعه ای از توابع معرفی شده در وردپرس ۲٫۵ به کار گرفته شده اند که کد کوتاه API نامیده می شود. هنگامی که یک پست ذخیره شد، محتوای آن تجزیه می شود و کد کوتاه API به طور خودکار کدهای کوتاه را برای نمایش توابعی که در نظر دارید نمایش داده شود، تغییر می دهد.
ایجاد یک کد کوتاه ساده
چیزی که باید در مورد کد های کوتاه یه یاد داشته باشید این است که ایجاد کد های کوتاه بسیلر آسان است. اگر شما می دانید که چگونه یک تابع اولیه PHP بنویسید، پس شما در حال حاضر می دانید که چگونه یک کد کوتاه وردپرس بنویسید.
برای تجربه اولمان، اجازه دهید که پیام به خوبی شناخته شده “Hello, World” را ایجاد کنیم.
۱٫ فایل functions.php در تم خودتان باز کنید. اگر این فایل وجود ندارد، آن را ایجاد کنید.
۲٫در ابتدا باید تابعی ایجاد کنیم که کلمه ی “Hello, World” را بوجود آورد. این را در فایل functions.php پیست کنید:
|
1
2
3
|
function hello() { return 'Hello, World!';} |
3.حالا که ما یک تابع داریم، باید آن را به یک کد کوتاه تبدیل کنیم. با تشکر از تابع add_shortcode() انجام این کاربسیار آسان است. این خط را بعد از تابع hello() پیست کنید سپس فایل functions.php را ذخیره کرده و ببندید.
|
1
|
add_shortcode('hw', 'hello'); |
اولین پارامتر، نامگذاری کد کوتاه است، دومین کار نامگذاری تابع است. حالا که کد کوتاه ایجاد شد میتوانیم در صفحات و پست های بلاگ از آن استفاده کنیم.
۴٫ حالا که کد کوتاه ایجاد شده است، می توانیم آن را در پست های وبلاگ و در صفحات استفاده کنیم. برای استفاده از آن، به سادگی ویرایشگر (editor) را به حالت HTML تغییر دهید و موارد زیر را تایپ کنید:
|
1
|
[hw] |
کار انجام شده است! هرچند که، این کد کوتاه بسیار پیش پا افتاده است، اما این یک مثال خوب از این است که چقدر آسان میتوان یک کد کوتاه ایجاد کرد.
ایجاد یک کد کوتاه پیچیده
همانطور که اشاره شد، کد کوتاه را می توان با ویژگی ها هم استفاده کرد، که بسیار مفید می باشد به عنوان مثال برای فرستادن استدلال ها به توابع. در این مثال، ما به شما نحوه ایجاد یک کد کوتاه برای ساختن یک URL را نشان می دهیم، همانطور که با کد های BBC انجام میدهید که این یکی از forums هایی مانند VBulletin و PHPBB استفاده میکند.
۱٫فایل functions.php خود را باز کنید. تابع زیر را در آن پیست کنید:
|
1
2
3
4
5
6
|
function myUrl($atts, $content = null) { extract(shortcode_atts(array( "href" => 'http://' ), $atts)); return '<a href="'.$href.'">'.$content.'</a>';} |
2. حالا بیایید تابع را به کد کوتاه تبدیل کنیم:
|
1
|
add_shortcode("url", "myUrl"); |
3.الان کد کوتاه ساخته شده است. شما میتوانید آن را در صفحات و پست های خود استفاده کنید.
|
1
|
[url href="http://www.wprecipes.com"]WordPress recipes[/url] |
هنگامی که شما یک پست را ذخیره میکنید، کد کوتاه این عنوان لینک را نشان میدهد “WordPress recipes” و به http://www.wprecipes.com اشاره میکند.
توضیح کد، برای عملکرد صحیح، تابع کد کوتاه باید دو پارامتر را بکار گیرد: $atts و $content. $attsکه اینها ویژگیهای کد های کوتاه هستند. در این مثال، ویژگی ها href نامیده میشود و حاوی یک لینک به URL است. $content محتوای کد کوتاه است که بین domain و sub-directoryتعبیه شده است(به عنوان مثال بین “www.example.com” و “/subdirectory” ). همانطور که از کدها مشاهده میکنید، ما ارزش default را به $content and $atts داده ایم.
حالا که ما میدانیم چگونه یک کد کوتاه بسازیم و از آن استفاده کنیم، بیایید نگاهی به مخرب های کد کوتاه آماده به استفاده (killer ready-to-use) بیاندازیم.
۱٫ ساختن یک کد کوتاه “Send to Twitter”
مشکل: به نظر میرسد که بسیاری از شما از هک “Send to Twitter” که در آخرین مقاله ی من در Smashing Magazine چاپ شده بود لذت بردید. من هم واقعا لذت هک بردم، اما آن دارای یک اشکال است: اگر شما کد ها را درفایل single.php خود پست کنید، لینک “Send to Twitter” در همه ی پست ها آشکار خواهد بود، چیزی که ممکن است نخواهید اتفاق بیفت. تحت کنترل داشتن این هک بهتر است و هر زمان که میخواهید میتوانید آن را در هر پستی که بخواهید آشکار کنید. راه حل ساده است: استغاده از کدهای کوتاه.
راه حل: ساختن این کد کوتاه آسان است. در واقع، ما فقط از هک “Send to Twitter” کد میگیریم و آن را به تابع PHP تبدیل میکنیم. کد زیر را در فایل functions.php در تم پیست کنید:
|
1
2
3
4
5
6
7
8
|
function twitt() { return '</pre><div id="twitit"><a title="Click to send this page to Twitter!" href="http://twitter.com/home?status=Currently reading '.get_permalink($post->ID).'" target="_blank">Share on Twitter</a></div><pre>';}add_shortcode('twitter', 'twitt'); |
برای استفاده از این کد کوتاه، به سادگی ویرایشگر (editor) را به حالت HTML تغییر دهید و سپس تایپ کنید:
|
1
|
[twitter] |
و یک لینک “Send to Twitter” در هر کجا که شما کد کوتاه را وارد کنید ظاهر میشود.
منبع و PLOG-IN های مرتبط
• How to: Create a “send this to twitter” button
• Twitter tools
ایجاد یک کد کوتاه “Subscribe to RSS”
مشکل: شما می دانید که یک راه بسیار خوب برای به دست آوردن مشترکین RSS یک جعبه ی خوش ظاهر است که چیزی شبیه به “Subscribe to the RSS feed” را بیان میکند. اما یکبار دیگر، ما واقعا نمی خواهیم که چیزی را در تم هایمان hard-code کنیم و کنترل ظاهر شدن آن را از دست بدهیم. ما در این هک کد کوتاه “Subscribe to RSS” را ایجاد خواهیم کرد. نمایش دادن آن در برخی از مکان ها و نه در همه جا، در پست ها و یا بر روی صفحات، بالا و یا پایین محتوای اصلی، همه ی اینها به شما بستگی دارد.
راه حل: به طور معمول، ما یک تابع را ایجاد و سپس آن را به یک کد کوتاه تبدیل میکنیم. این کد به فایل functions.php شما می رود. فراموش نکنید که به جای عنوان آدرس مثال، عنوان خود را وارد کنید!
|
1
2
3
4
5
6
7
8
|
function subscribeRss() { return '</pre><div class="rss-box"><a href="http://feeds.feedburner.com/wprecipes">Enjoyed this post? Subscribe to my RSS feeds!</a></div><pre>';}add_shortcode('subscribe', 'subscribeRss'); |
طراحی جعبه: شما احتمالا متوجه طبقه RSS-BOX ی که به عنصر DIV حاوی لینک اضافه شده بود، شده اید. این به شما اجازه می دهد تا جعبه را به صورتی که دوست دارید طراحی کنید. در اینجا یک مثال از برخی از طرح های CSS که شما می توانید در جعبه “Subscribe to RSS” خود بکار ببرید، آورده ایم. به سادگی آن را به فایل style.css در تم خود را پیست کنید:
|
1
2
3
4
5
6
|
.rss-box{ background:#F2F8F2; border:2px #D5E9D5 solid; font-weight:bold; padding:10px;} |
3. قرار دادن گوگل Google AdSense درهر جایی
مشکل: اکثر وبلاگ نویسان از Google AdSense استفاده میکنند. بسیار آسان است که کد AdSense را در یک فایل تم مانند sidebar.php وارد کرد. اما بازاریابان اینترنتی موفق می دانند که مردم بیشتر بر روی تبلیغاتی که درخود محتوا تعبیه شده است کلیک می کنند.
راه حل: برای قراردادن AdSense در هر نقطه در پست ها یا صفحات خود، یک کد کوتاه ایجاد کنید.
۱٫ فایل functions.php در تم خود باز کنید و کد زیر را پیست کنید. فراموش نکنید که کد JavaScript را با کد AdSense مورد نظر خود جایگزین کنید.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
|
unction showads() { return '</pre><div id="adsense"><script type="text/javascript">// <![CDATA[google_ad_client = "pub-XXXXXXXXXXXXXX"; google_ad_slot = "4668915978"; google_ad_width = 468; google_ad_height = 60;// ]]></script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">// <![CDATA[// ]]></script></div><pre>';}add_shortcode('adsense', 'showads'); |
2. هنگامی که شما فایل functions.php را ذخیره کردید، می توانید کد کوتاه زیر برای نمایش AdSense در هرجایی بر روی پست ها و صفحات خود استفاده کنید:
|
1
|
[adsense] |
توجه داشته باشید که کد AdSense با یک عنصر adsense div پیچیده شده است، می توانیم هر گونه که میخواهیم آن را در فایل style.css مان طراحی کنیم.
توضیح کد: کد بالا به سادگی برای نمایش تبلیغات AdSense استفاده می شود. هنگامی که کد کوتاه در یک پست قرار داده میشود، به یک تبلیغ AdSense تبدیل می شود. این امربسیار آسان است، اما شما هم موافق خواهید بود که واقعا زمان کمتری می برد.
۴٫ قراردادن RSS Reader
مشکل: همچنان به نظر می رسید بسیاری از خوانندگان از پست “۸ RSS Hacks for WordPress” که به تازگی در وردپرس منتشر شد لذت بردند. حالا، اجازه دهید از دانشمان در هر دو مورد RSS و کد کوتاه برای جایگزاری RSS reader در پست ها و صفحات مان، استفاده کنیم.
راه حل: به طور معمول، برای کاربرد این هک، به سادگی کد زیر را در فایل function.php تم خود پیست کنید.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
//This file is needed to be able to use the wp_rss() function.include_once(ABSPATH.WPINC.'/rss.php');function readRss($atts) { extract(shortcode_atts(array( "feed" => 'http://', "num" => '1', ), $atts)); return wp_rss($feed, $num);}add_shortcode('rss', 'readRss'); |
برای استفاده از کد کوتاه، این را تایپ کنید:
|
1
|
[rss feed="http://feeds.feedburner.com/wprecipes" num="5"] |
ویژگی feed ، feed URL برای جاسازی است و num تعداد اقلام برای نمایش است.
۵٫ دریافت پست ها از پایگاه داده های وردپرس با یک کد کوتاه:
مشکل: آیا هرگز آرزو کرده اید که کاش می توانستید لیستی از پست های مرتبط را به طور مستقیم در ویرایشگر وردپرس فرا بخوانید؟ مطمئنا می توانید، پلاگین “پست های مرتبط” می توانید پست های مرتبط را برای شما بازیابی کند، اما با یک کد کوتاه شما به راحتی می توانید یک لیست از هر تعداد پست خاص بدست آورید.
راه حل: مانند قبل، این کد در فایل functions.php خود قرار دهید.
|
01
02
03
04
05
06
07
08
09
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
|
function sc_liste($atts, $content = null) { extract(shortcode_atts(array( "num" => '5', "cat" => '' ), $atts)); global $post; $myposts = get_posts('numberposts='.$num.'&order=DESC&orderby=post_date&category='.$cat); $retour='</pre><ul><ul>';</ul></ul> <ul><ul>foreach($myposts as $post) :</ul></ul> <ul><ul>setup_postdata($post);</ul></ul> <ul><ul>$retour.=' <li><a href="'.get_permalink().'">'.the_title("","",false).'</a></li></ul></ul> <ul><ul>';</ul></ul> <ul><ul>endforeach;</ul></ul> <ul>$retour.='</ul><pre> '; return $retour;}add_shortcode("list", "sc_liste"); |
برای استفاده از آن، به سادگی متن زیر را پس از تغییر به حالت HTML، در ویرایشگر وردپرس پیست کنید:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
[liste num="3" cat="1"]این امر یک لیست از سه پست از رده ای با شناسه ۱ نشان می دهد.توضیح کد: پس از آنکه استدلال ها استخراج و متغیرهای جهانی $posts ایجاد شدند، تابع sc_liste() از تابع get_posts() با پارامترهای numberposts,order, orderby و category استفاده میکند تا بتواند X که جدید ترین پست ها هستند را از رده Y بگیرد. پس از انجام این کار، پست ها در یک لیست نامرتب HTML تعبیه شده و به شما بازگردانده می شوند.<strong>6. گرفتن آخرین تصویر پیوست شده به یک پست</strong>مشکل: در وردپرس، تصاویر بسیار آسان دستکاری می شوند. اما چرا آن را آسان تر را نکنیم؟ اجازه دهید به یک کد کوتاه پیچیده تر بپردازیم ، آن یکی که به طور خودکار آخرین تصویر پیوست به یک پست را می گیرد.راه حل: فایل functions.php را باز کنید و کد زیر را پیست کنید:1function sc_postimage($atts, $content = null) { extract(shortcode_atts(array( "size" => 'thumbnail', "float" => 'none' ), $atts)); $images =& get_children( 'post_type=attachment&post_mime_type=image&post_parent=' . get_the_id() ); foreach( $images as $imageID => $imagePost ) $fullimage = wp_get_attachment_image($imageID, $size, false); $imagedata = wp_get_attachment_image_src($imageID, $size, false); $width = ($imagedata[1]+2); $height = ($imagedata[2]+2); return '</pre><div class="postimage" style="width: '.$width.'px; height: '.$height.'px; float: '.$float.';">'.$fullimage.'</div><pre>';}add_shortcode("postimage", "sc_postimage"); |
برای استفاده از کد کوتاه، به سادگی کد زیر را زمانی که در حالت HTML است در ویرایشگر تایپ کنید:
|
1
|
[postimage size="" float="left"] |
توضیح کد: تابع sc_postimage() اول ویژگی های کد کوتاه را استخراج می کند. سپس، تصویر را با استفاده از توابع وردپرس get_children(), wp_get_attachment_image() و wp_get_attachment_image_src() بازیابی می کند. پس از انجام این کار، تصویر برگردانده شده و در محتوای پست قرار داده می شود.
۷٫ اضافه کردن کد کوتاه به ابزارهای کناری
مشکل: حتی اگر شما از این مقاله لذت برده اید، ممکن است کمی احساس نا امیدی کرده باشید، زیرا به طور پیش فرض وردپرس اجازه نمی دهد که کدهای کوتاه به ابزارهای کناری وارد شوند.
خوشبختانه، در اینجا یک ترفند کوچک برای افزایش قابلیتهای وردپرس و اجازه ی استفاده از کدهای کوتاه می شود در ابزارهای کناری ارائه می شود.
راه حل: یک کد دیگر برای قرار دادن در فایل functions.php شما:
|
1
|
add_filter('widget_text', 'do_shortcode'); |
این همه ی آن چیزی است که شما برای وارد کردن کدهای کوتاه در ابزارهای کناری نیاز دارید.
توضیح کد: کاری که ما در اینجا انجام داده ایم کاملا ساده است: ما یک فیلتر به تابع widget_text() برای اجرای تابع do_shortcode() اضافه کردیم، چیزی که از API برای اجرای کدهای کوتاه استفاده می کند. بنابراین، کدهای کوتاه در حال حاضر در ابزار کناری فعال هستند.
منبع : Smashing که با کلی عشق در همیار وردپرس ترجمه شده است
مطالب زیر را حتما بخوانید:
قوانین ارسال دیدگاه در سایت
- چنانچه دیدگاهی توهین آمیز باشد و متوجه اشخاص مدیر، نویسندگان و سایر کاربران باشد تایید نخواهد شد.
- چنانچه دیدگاه شما جنبه ی تبلیغاتی داشته باشد تایید نخواهد شد.
- چنانچه از لینک سایر وبسایت ها و یا وبسایت خود در دیدگاه استفاده کرده باشید تایید نخواهد شد.
- چنانچه در دیدگاه خود از شماره تماس، ایمیل و آیدی تلگرام استفاده کرده باشید تایید نخواهد شد.
- چنانچه دیدگاهی بی ارتباط با موضوع آموزش مطرح شود تایید نخواهد شد.
نظرات کاربران