با کدهای میانبر پست حرفه ای ایجاد کنید !

امروز قصد داریم به چگونگی استفاده از کدهای کوتاه در رابطه با انواع خدمات عمومی ، از جمله سایت هایی مانند یوتیوب و فلیکر بپردازیم. ابتدا ببینیم چگونه یک کد کوتاه ایجاد می شود، و پس از آن ببینیم چگونه به چیزی تبدیل می شود که می تواند توسط کاربر استفاده و دستکاری شود. ما کدهای کوتاه را در همیار وردپرس برای شما عزیزان بررسی می کنیم، و در مورد مزایای استفاده از آنها و چگونگی خوب استفاده کردن از آنها بحث می کنیم. کدهای کوتاه به طور موثر میانبر (تعریف شده توسط وردپرس) هستند که بسیار زمان گذاشته شده تا ما به راحتی استفاده کنیم . در ساده ترین شکل ، کدهای کوتاه شامل برخی از کدهای وردپرس یا hook هستند، گاهی اوقات برای محصول برای یک کاربر است، مثلا YouTube یا Flickr

شروع : ساخت یک کد میانبر ساده

کد های میانبر با افزودن یک تابع به functions.php قالب ایجاد میشود . مثلا در زیر میخواهیم یک کد میانبر برای لینک کردن به wordpress98 ایجاد کنیم :

<?php
function link_to_wordpress98($atts, $content=null) {
 return '<a href="http://www.hamyarwp.com">Wordpress98</a>';
}
add_shortcode('wordpress98', 'link_to_wordpress98');
?>

خب کدمیانبر ما ساخته شد. حالا میتوانید از کد کوتاه زیر بدون هیچ نسبت خاصی استفاده کنید :

[wordpress98]

خروجی : WordPress98

خب حالا ما میتوانیم از قابلیت ساخت کدمیانبر به همراه دادن ویژگی به کد استفاده کنیم. (اگر توضیحات این جمله رو متوجه نشدید با ما باشید تا با مثال متوجه شوید ). مثلا میخواهیم به یک قسمت سایت همیار وردپرس لینک دهیم , مجددا کد زیر در functions.php قالب قرار دهید :

<?php
function link_to_wordpress98($atts, $content=null) {
 extract(shortcode_atts( array('site' => 'www'), $atts)); 
 return '<a href="http://' . $site . '.wordpress98.net">Wordpress98</a>';
}
add_shortcode('wordpress98', 'link_to_wordpress98');
?>

خب این بار کد میانبر به یکی از ساب دامنه های سایت همیار وردپرس وصل خواهد شد. وارد کردن نام ساب دامنه با افزودن صفت site به کد میانبر امکان پذیر است. اگر که site را وارد نکنید بطور پیش فرض www قرار خواهد داد.مثلا کد زیر را مشاهده کنید که به یکی از قسمت های سایت (سرزمین توابع ) لینک داده است :

[appstorm site="codex"]

خروجی : WordPress98

خب همانطور که مشاهده میکنید لینک بسیار ساده است و خیلی راحت ما با ویژگی آن را افزودیم. خب حالا اینبار میخواهیم همی روش ساخت کد میانبر را برای سایت های عمومی استفاده کنیم و با دادن یک صفت ساده به کد میانبر , منابع سایت YouTube یا Flickr در مطالب و ابزارک های خود بکار بگیریم.

از سرویس های عمومی تا کد میانبر

خب شما تا الان یاد گرفتید که چگونه یک کد میانبر ساده درست کنید و حالا میخواهیم با همان روش درست کردن کدمیانبر برای لینک , استفاده از یک سرویس عمومی را درست کنیم. البته روش کار باز هم سادست اما یک مقدار شخصی سازی نیاز دارد. که در ادامه همین مطلب عرض میکنم.

قدم اول : ساخت یک کد میانبر ثابت

خب برای شروع من یک کد ساده از یک ویدیو یوتیوب قرار میدهم. (توجه کنید که یک تابع است و در functions.php قرار میدهیم و در ضمن کد زیر بدون ویژگی است و صرفا یک ویدیو رو نمایش میدهد )

<?php
function youtube_video($atts, $content=null) {
    return '<iframe width="640" height="360" src="http://www.youtube.com/embed/caYu-Lf9A4Y?rel=0" frameborder="0" allowfullscreen></iframe>';
}
add_shortcode('youtube', 'youtube_video');
?>

کد میانبر تابع بالا بصورت زیر است :

[youtube]

با روش ساخت کد میانبر لینک این بار یک کد نمایش فیلم از سرویس یوتیوب ساختیم. اما باز هم ذکر میکنم که کد بالا فقط یک ویدیو رو درج میکند و نمایش میدهد و به هیچ وجه قابل تغییر نیست.

قدم دوم : معرفی برخی ویژگی ها

کدی که در مرحله قبل تولید کردیم یک کد ثابت بود ولی شما که نمیخواهید یک فیلم را چندین بار در چندین مکان مختلف به نمایش بگذارید بلکه میخواهید ویدیو های مختلفی را به نمایش بگذارید. برای این کار باید به سراغ استفاده از shortcode_atts برویم و یک ویژگی جدید به نام id ایجاد کنیم تا از این پس با وارد کردن id فیلم مورد نظر بتوانید فیلم آن را نمایش دهید . توجه کنید تابع extract() به شما اجازه میدهد که att های مختلف را در کد خود قرار دهید . خب برای این کار مجددا تابع زیر را در functions.php قالب خود قرار دهید :

<?php
function youtube_video($atts, $content=null) {
    extract(shortcode_atts( array('id' => ''), $atts));
    return '<iframe width="640" height="360" src="http://www.youtube.com/embed/' . $id . '?rel=0" frameborder="0" allowfullscreen></iframe>';
}
add_shortcode('youtube', 'youtube_video');
?>

کد میانبر تابع بالا بصورت زیر میشود :

[youtube id=""]  

خب همانطور که در کد بالا میبینید فقط id فیلم قابل تغییر است . در تابع پایین با افزودن دو متغیر دیگر به شما اجازه میدهیم تا عرض و ارتفاع نمایش فیلم رو هم در هنگام درج کد میانبر تغییر دهید :

<?php
function youtube_video($atts, $content=null) {
    extract(shortcode_atts( array(
        'id' => '',
        'width' => '640',
        'height' => '360'
    ), $atts));
    return '<iframe width="' . $width . '" height="' . $height .'" src="http://www.youtube.com/embed/' . $id . '?rel=0" frameborder="0" allowfullscreen></iframe>';
}
add_shortcode('youtube', 'youtube_video');
?>

کد میانبر تابع بالا بصورت زیر میشود :

[youtube id="" width="" height=""]

قدم دوم (ب) : پارامتر های اضافی

یویتیوب برای کد هایی که صادر میکند پارامترهای زیادی دارد که در بالا به سه مورد اشاره کردیم و یک قسمت دیگر نیز autoplay هست که به مان روش بالا با افزودن یک متغیر دیگر قابل پیاده سازی است. کافیست از تابع زیر استفاده کنید :

<?php
function youtube_video($atts, $content=null) {
    extract(shortcode_atts( array(
        'id' => '',
        'width' => '640',
        'height' => '360',
        'autoplay' => '0'
    ), $atts));
    return '<iframe width="' . $width . '" height="' . $height .'" src="http://www.youtube.com/embed/' . $id . '?autoplay=' . $autoplay . '&rel=0" frameborder="0" allowfullscreen></iframe>';
}
add_shortcode('youtube', 'youtube_video');
?>

کد میانبر تابع بالا بصورت زیر است :

[youtube id="" width="" height="" autoplay=""]

قدم سوم : تمام شد !

بالاخره کار ما برای ساختن کد میانبر یوتیوب تمام شد . واقعا ساده بود کل کدهایی که نوشتیم 4-5 تابع بیشتر نداشت اما دیدید که چقدر حرفه ای میشد استفاده کرد و شما نیز براحتی میتوانستید از آنها در مطالب و برگه ها و حتی ابزارک های خود استفاده کنید .

مثال های بیشتر

در سه مرحله بالا ما یک مثال رو چند بار ویرایش و گسترش دادیم . در زیر چند مثال اضافی برای استفاده بهتر و بیشتر بیان میکنیم.

Vimeo

سرویس اشتراک گزاری ویدیو Vimeo یک سرویس شبیه شبکه Youtube است که شما میتوانید با قرار دادن iframe با طول و عرض و رنگ دلخواه از این سرویس استفاده کنید .

<?php
function vimeo_video($atts, $content=null) {
    extract(shortcode_atts( array(
        'id' => '',
        'width' => '640',
        'height' => '360',
        'color' => '59a5d1'
    ), $atts));
    return '<iframe src="http://player.vimeo.com/video/' . $id . '?color=' . $color . '" width="' . $width .'" height="' . $height . '" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe>';
}
add_shortcode('vimeo', 'vimeo_video');
?>

خب فکر کنم حدس زده باشید کد میانبر و متغیرها چی هستند اما برای اطمینان بیشتر کد زیر را مشاهده کنید :

[vimeo id="" width="" height="" color=""]

پروفایل Twitter

ابزارک پروفایل توییتر کمی از جاوا اسکریپت استفاده میکنه البته با کمی ویژگی ها و متغیر ها .تمام متغیرهای موجود رو ما در کد زیر قرار دادیم تا بتوانید آن ها را تغییر دهید و جایگزین کنید.

<?php
function twitter_widget($atts, $content=null) {
    extract(shortcode_atts( array(
        'username' => '',
        'width' => '300',
        'height' => '200',
        'tweetnum' => '4',
        'shellbgcolor' => 'cccccc',
        'listbgcolor' => 'eeeeee',
        'textcolor' => '333333',
        'linkcolor' => '639ee3',
        'hashtags' => 'true',
        'scrollbar' => 'true',
        'loop' => 'false',
        'stream' => 'false',
        'avatars' => 'false',
        'timestamp' => 'false'
    ), $atts));
    return '<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: "profile",
  rpp: ' . $tweetnum . ',
  interval: 30000,
  width: ' . $width . ',
  height: ' . $height . ',
  theme: {
    shell: {
      background: "#' . $shellbgcolor .'",
      color: "#' . $textcolor . '"
    },
    tweets: {
      background: "#' . $listbgcolor .'",
      color: "#' . $textcolor . '",
      links: "#' . $linkcolor . '"
    }
  },
  features: {
    scrollbar: ' . $scrollbar . ',
    loop: ' . $loop . ',
    live: ' . $stream . ',
    hashtags: ' . $hashtags . ',
    timestamp: ' . $timestamp . ',
    avatars: ' . $avatars . ',
    behavior: "all"
  }
}).render().setUser("' . $username .'").start();
</script>
';
}
add_shortcode('twitter', 'twitter_widget');
?>

خب با توجه به کد بالا کدمیانبر بصورت زیر است . تمام تغیر ها اختیاری ولی username اجباری میباشد . در ضمن هشتگ رو هم میتوانید در hashtags وارد نمایید :

[twitter username="" tweetnum="" width="" height="" shellbgcolor="" listbgcolor="" textcolor="" linkcolor="" hashtags="" scrollbar="" loop="" stream="" avatars="" timestamp=""]

دکمه توییت

دکمه توییت یکی از محبوبترین دکمه های اشتراک گذاری میباشد

<?php
function tweet_button($atts, $content=null) {
    extract(shortcode_atts( array(
        'username' => '',
        'url' => '',
        'style' => 'none'
    ), $atts));
    return '<a href="https://twitter.com/share" class="twitter-share-button" data-url="' . $url . '" data-count="' . $style .'" data-via="' . $username . '">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>';
}
add_shortcode('tweetbutton', 'tweet_button');
?>

با توجه به متغیرهای بالا کد میانبر به شکل زیر میباشد

[tweetbutton username="" url="" style=""]

دکمه لایک و ارسال Facebook

دکمه لایک فیس بوک نیز مثل دکمه توییت کاربرد مشابه و محبوبت بالایی دارد. فقط برای لود این دکمه نیاز به منبع the JavaScript SDK دارید.

<?php
function facebook_buttons($atts, $content=null) {
    extract(shortcode_atts( array(
        'width' => '450',
        'showfaces' => 'false',
        'colorscheme' => 'light',
        'font' => 'arial'
    ), $atts));
    return '<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<fb:like send="true" width="' . $width .'" show_faces="' . $showfaces .'" colorscheme="' . $colorscheme . '" font="' . $font . '"></fb:like>';
}
add_shortcode('like', 'facebook_buttons');
?>

کد میانبر ساده به شکل زیر میباشد فقط میتوانید متغیرهای colorscheme , showfaces , width , font را خودتان مشخص کنید :

[like] 

نشان Flickr

این قابلیت به شما این امکان را میدهد تا جدیدترین عکس های خود در Flickr را نمایش دهید . کد با کمک css و table به نمایش عکس ها میپردازد .

<?php
function flickr_widget($atts, $content=null) {
    extract(shortcode_atts( array(
        'userid' => '',
        'num' => '3',
        'sort' => 'random',
        'size' =>
    ), $atts));
    return '
<style type="text/css">
#flickr_badge_source_txt {padding:0; font: 11px Arial, Helvetica, Sans serif; color:#666666;}
#flickr_badge_icon {display:block !important; margin:0 !important; border: 1px solid rgb(0, 0, 0) !important;}
#flickr_icon_td {padding:0 5px 0 0 !important;}
.flickr_badge_image {text-align:center !important;}
.flickr_badge_image img {border: 1px solid black !important;}
#flickr_www {display:block; padding:0 10px 0 10px !important; font: 11px Arial, Helvetica, Sans serif !important; color:#3993ff !important;}
#flickr_badge_uber_wrapper a:hover,
#flickr_badge_uber_wrapper a:link,
#flickr_badge_uber_wrapper a:active,
#flickr_badge_uber_wrapper a:visited {text-decoration:none !important; background:inherit !important;color:#3993ff;}
#flickr_badge_wrapper {background-color:#ffffff;border: solid 1px #000000}
#flickr_badge_source {padding:0 !important; font: 11px Arial, Helvetica, Sans serif !important; color:#666666 !important;}
</style>
<table id="flickr_badge_uber_wrapper" cellpadding="0" cellspacing="10" border="0"><tr><td><a href="http://www.flickr.com" id="flickr_www">www.<strong style="color:#3993ff">flick<span style="color:#ff1c92">r</span></strong>.com</a><table cellpadding="0" cellspacing="10" border="0" id="flickr_badge_wrapper">
<tr>
<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=' . $num . '&display=' . $sort . '&size=m&layout=h&source=user&user=' . $userid . '"></script>
</tr>
</table>
</td></tr></table>
';
}
add_shortcode('flickr', 'flickr_widget');
?>

کد میانبر آن نیز بصورت زیر است :

[flickr userid="" num="" sort="" size=""]

خلاصه …

امیدوارم توضیح داده باشم که چگونه از کدهای میانبر برای راحتی کار استفاده نمایید . این مثالها بسیار ساده بودند . شما خودتان سعی کنید کاربرد هر تکه کد را تحقیق کنید و در موردش در نظرات همین پست توضیح دهید. این کد ها علاوه بر افزایش سرعت شما در ارسال مطلب به شما کمک میکند تا پست های حرفه ای تر و بهتری نیز داشته باشید . امیدوارم مفید باشد و بتوانید وردپرس خود و سطح علم وردپرسی خود را افزایش داده باشد.