یکی از جالبترین امکانات وردپرس ، Short Codes هستند. به کمک این شورتکد در وردپرس میتوانید، با کمترین دانش برنامهنویسی، تغییراتی کوچک، بزرگ و جذاب را در سایتتان ایجاد کنید. استفاده از کد کوتاه در وردپرس برای شما مزایای زیادی دارد. مثلاً میتوانید به جای چندین و چند ساعت کد زدن، با استفاده از تنها یک خط کد داخل [ ]، یک گالری عکس، با ۳ ستون و ۶ عکس، به سایت خودتان اضافه کنید. کد زیر را ببینید:
[ gallery ids="47 ,86, 92, 64, 48, 75, 89, 80" columns="4" size="medium"]
تاریخچه استفاده از ShortCode به قبل از وردپرس برمیگردد. قبل از اینکه این CMS ظهور کند، تغییر رنگ با استفاده از یک کد کوچک، موفقیت بزرگی بود! آن هم در سایتهای استاتیکی که در آن زمان رایج بودند. در سال ۲۰۰۳ سیستم مدیریت محتوای وردپرس بهوجود آمد و کارها را برای طراحان وب تا حد زیادی راحت کرد. بعدها، با توسعه وردپرس، مشخص شد که برای انجام کارهای خاصی که کمی پیچیدگی دارند (مثل اضافه کردن گالری به مطلب)، میشود از همان راه حل قدیمی (یعنی شورت کدها) استفاده کرد؛ منتها این بار با کد کوتاه در وردپرس !
به این ترتیب، تعدادی کد کوتاه برای انجام کارهای خاص در وردپرس تعریف شد. غیر از این، الان توسعهدهندهها هم، هر وقت که دلشان بخواهد میتوانند شورت کدهای اختصاصی خود را برای استفاده در صفحات مختلف وردپرس، یک بار تعریف و بارها استفاده کنند!
شورتکدهای وردپرس، قطعه کدهای کوتاهی هستند که برای اجرای یک عملکرد خاص به کار میروند. مثلا ممکن است شما بخواهید یک ویژگی خاص مانند فرمهای تماس، گالری تصاویر و موارد دیگری را در چند جای مختلف سایت، اضافه کنید. در این زمان است که شورتکد، یک راه ساده برای ایجاد تغییرات پیچیده به کاربران ارائه میدهد.
در واقع هرجا که نیاز باشد، میتوانید با اضافه کردن یک کد کوتاه، تغییرات مدنظرتان را اعمال کنید.
در وردپرس ۲ نوع شورتکد وجود دارد: پیشفرض و سفارشی. در ادامه توضیح میدهیم که این شورت کدها چه فرقی با هم دارند.
۶ شورتکد در وردپرس به شکل پیشفرض وچود دارد که بلافاصله بعد از نصب وردپرس میتوانید از آنها استفاده کنید. این Shortcodeها عبارتند از:
با استفاده از شورت کد [ Gallery ]، میتوانید یک گالری از تصاویر را در سایت یا مقاله خود قرار دهید. این گالری میتواند شخصیسازی شود؛ یعنی میتوانید برای هر قسمت ویژگیهایی مثل رنگ و ابعاد تعیین کنید (دقیقاً مانند مثالی که در ابتدای مقاله آوردیم).
عددهایی که در مثال زیر میبینید، ID عکسها هستند؛ هر عکسی که در وردپرس یا دیگر سیستمهای مدیریت محتوا آپلود شود یک ID مخصوص خواهد داشت. کافیست آن را در کد کوتاهتان کپی پیست کنید.
ویدئو :
شورت کد [ video ] در وردپرس یک پخشکننده ویدئویی ساده به صفحه اضافه میکند. یادتان باشد که این قطعه کد از پسوندهای MP4، M4V، webm، ogv، wmv و flv پشتیبانی میکند. داخل ” ” در کد زیر، باید URL ویدئوی خود را وارد کنید.
شورت کد دیگری که این روزها استفاده زیادی از آن میشود، [ Audio ] است. با این کد کوتاه در وردپرس میتوانید فایلهای صوتی را به محتوای خود اضافه کنید. برای نمونه اگر خواستید به مطلبتان پادکست اضافه کنید، این شورت کد کارتان را راه میاندازد.
کپشن یا زیرنویس، بیشتر برای توضیح تصاویر استفاده میشود؛ اما میتوانید خلاقیتتان را به کار بیندازید و هرجایی که نیاز دارید از شورت کد کپشن استفاده کنید. کلیت کد کپشن به شکل زیر است؛ اما بیایید یک مثال هم برای درک جزئیات ببینیم.
ID کپشن یک شناسه منحصربهفرد HTML است؛ یعنی قبلا در مطلبی کپشن را نوشتهاید و حالا ID آن را اینجا وارد میکنید. در بخش img source هم باید آدرس عکس یا فایلی که میخواهید کپشن برای آن نوشته شود را وارد کنید.
این تکه کد، در سایت به شکل زیر نمایش داده میشود. همان طور که میبینید، یک تصویر داریم و کپشنی که برای آن نوشته شده است.
با استفاده از شورت کد [ Playlist ] در وردپرس میتوانید مجموعهای از فایلهای صوتی یا ویدئویی را به شکل پلیلیست نمایش دهید.
به کد زیر دقت کنید. ids در کد زیر، ID ویدیوهایی را نشان میدهد که میخواهید پخششان کنید! استایل هم به این بستگی دارد که قبلاً در کدهای CSS چطور تعریف شده باشد. اینجا ما استایل Dark را داریم که لیست پخش را به رنگ تیره در میآورد.
این شورت کد در وردپرس به شما اجازه میدهد ویژگیهای گوناگونی (مثل حداکثر اندازه طول و عرض) را برای بخشهای مختلف تنظیم کنید.
خب همه کدهای پیشفرض را معرفی کردیم. برویم سراغ شورت کدهای سفارشی!
شورت کدهای سفارشی در وردپرس توسط اشخاص تولید میشوند! یعنی مثل کدهای پیشفرض، از قبل آماده نشدهاند. اگر یادتان باشد، بالاتر گفتیم که میتوانید برای انجام امور مشخص، یکبار کد تعریف کنید و بارها از آن استفاده کنید. این کدها، با نام شورت کدهای سفارشی شناخته میشوند.
نکته: برای نوشتن شورت کد سفارشی، باید دانش برنامهنویسی داشته باشید! یعنی باید بتوانید کدنویسی کنید!
مشخصاً کدهای سفارشی و کدها پیشفرض، با هم تفاوت دارند. بیایید چند نمونه از بهترین شورت کدهایی که میتوان ایجاد کرد و چگونگی ساخت آنها را بررسی کنیم.
وقت آن رسیده تا با هم ببینیم چطور میتوان یک شورتکد سفارشی در وردپرس ایجاد کرد. اگر میخواهید شروع به کدنویسی برای وردپرس خود کنید، یادتان باشد که باید کدنویسی به زبان PHP را بلد باشید.
اما قبل از این کار باید بدانیم که کجا باید شورت کدها را اضافه کرد؟
برای اینکه بتوانیم از کد کوتاه در وردپرس استفاده کنیم، باید آنها را به ویرایشگر خود در وردپرس اضافه کنیم. متداولترین نسخه ویرایشگر که کاربران از آن استفاده میکنند گوتنبرگ است. ویرایشگر گوتنبرگ روی نسخه ۵ به بالای وردپرس به صورت پیشفرض نصب و قابل استفاده است و اگر از نسخه پایینتر استفاده میکنید، میتوانید با ارتقای نسخه وردپرس خود، از این ویرایشگر و امکانات آن بهره ببرید.
برای دسترسی به این ویرایشگر لازم است تا بعد از ورود به پنل کاربری وردپرس، قسمت نوشتهها و افزودن نوشته را انتخاب کنید. بعد از اینکه ویرایشگر را روی پنل وردپرس خود باز کردید، میتوانید قطعه کدهایی که نیاز دارید را به آن اضافه کنید. روی «+» در بالای صفحه کلیک کنید. در لیست ظاهر شده روی آیکن کد کوتاه کلیک کنید. (مطابق تصویر زیر)
در این مقاله طریقه ویرایش هر بخش را بیان میکنیم.
حالا در باکس باز شده، شورتکد مدنظر خود را وارد کنید.
خب، اگر پاسخ شما مثبت است، وارد قسمت ویرایشگر متن شده و شورتکد مورد نظر خود را در صفحهای که میخواهید شورت کد به آن اضافه شود، وارد کنید. هرجایی که دلتان بخواهد، میتوانید شورت کد مورد نظر خود را اضافه کنید، فقط مطمئن شوید که قطعه کد مورد نظر، در خط خود قرار گرفته باشد.
اگر آماده هستید سریعتر کار خود را شروع کنیم تا بتوانید اولین شورتکد خود را در وردپرس ایجاد کنید!
برای شروع یک شورت کد از طریق [current_year] ایجاد میکنیم. دیدن اینکه در چه تاریخی قرار داریم، کاری است که بسیاری از سایتها آن را انجام میدهند. شما میتوانید تاریخ را به انواع و شکلهای مختلف تنظیم کنید. نمایش تاریخ را به سادهترین شکل ممکن باهم پیش میبریم. اول یک مثال ساده میزنیم و بعد آن را در قالب یک پلاگین سفارشی میکنیم. به کد زیر توجه کنید:
[y] display current year 2019
از این تگ می توان برای نمایش سال استفاده کرد.
[cy] display symbol of copyright and current year ©2019
همچنین از تگ [cy] برای نمایش حق کپی رایت و سال کنونی استفاده شده است. اگر کمی خلاقیت به خرج دهیم، میتوانیم از این تگها به صورت زیر هم استفاده کنیم:
[cyy year=”2003″] display symbol of copyright, first year, current year ©2003-2019
من برای اضافه کردن توابع از یک پلاگین barebones استفاده میکنم. به شما هم پیشنهاد میکنم همین کار را انجام دهید. برای ایجاد افزونه یک پوشه جدید به آدرس زیر اضافه کنید:
/wp-content/Plugins
این آدرس برای اضافه کردن افزونهها است. یک پوشه با هر نامی که دوست دارید بسازید. در فهرست ایجاد شده یک فایل با پسوند PHP و با نامی که انتخاب کردید ایجاد کنید.
بعد از این کار، عنوان زیر را به فایل خود اضافه کنید:
حالا میتوانید این فایل را ذخیره کنید. برای فعال کردن آن، به داشبورد وردپرس بروید. میتوانید برای دیدن عملکرد این کد کوتاه در وردپرس ، کد زیر را به فایل ایجاد شده قبلی اضافه کنید:
بعد از اضافه کردن کدهای بالا، پلاگین را ذخیره کنید. زمان آن رسیده تا عملکرد شورتکدهایی که نوشتیم را بررسی کنیم.
پوشه پلاگین خود را ذخیره کنید. اکنون زمان آن رسیده است که آزمایش کنیم آیا کد کوتاه همانطور که در نظر گرفته شده عمل میکند یا نه!
شورت کد را میتوانید به هر جای سایت خود اضافه کنید (صفحه، پست، ویجت نوار کناری و غیره). من آن را به عنصر متن نوار کناری سایت خود اضافه میکنم. به تصویر زیر توجه کنید:
در تصویر بالا، طریقه استفاده از Current_year نشان داده شده و با اجرای کدهایی که در پلاگین استفاده کردیم خروجی آن به صورت تصویر زیر خواهد بود.
البته کدی که ایجاد شد، ویژگی و محتوای خاصی ندارد. فقط یک مثال ساده از شورت کد سفارشی بود. در مثالهای بعدی، نحوه استفاده از آنها را بررسی میکنیم.
بیایید برویم سراغ یک بخش جذاب! طراحی یک کال تو اکشن (CTA) بهصورت دستی برای سایت. برای اینکه بتوانید روی کال تو اکشن طراحی شده تنظیمات دستی خود را اعمال کنید، باید به یک سری ویژگیهای کلید مورد نظر دسترسی داشته باشید. ویژگیهایی مانند href، id، class، target و label تا از این طریق بتوانید با استفاده از کدهای HTML کلید خود را سفارشی کنید.
قطعه کد زیر را ببینید:
/** * [cta_button] returns the HTML code for a CTA Button. * @return string Button HTML Code */ add_shortcode( 'cta_button', 'salcodes_cta' ); function salcodes_cta( $atts ) { $a = shortcode_atts( array( 'link' => '#', 'id' => 'salcodes', 'color' => 'blue', 'size' => '', 'label' => 'Button', 'target' => '_self' ), $atts ); $output = '<p><a href="' . esc_url( $a['link'] ) . '" id="' . esc_attr( $a['id'] ) . '" class="button ' . esc_attr( $a['color'] ) . ' ' . esc_attr( $a['size'] ) . '" target="' . esc_attr($a['target']) . '">' . esc_attr( $a['label'] ) . '</a></p>'; return $output; }
عملکرد تابع ()add_shortcode را در بخش قبل بررسی کردیم . ()Shortcode_atts یک تابع وردپرس است. این تابع ویژگیهایی که به کاربر اختصاص داده را با ویژگیهای شناخته شده وردپرس ترکیب میکند. نتیجه نهایی یک آرایه از تمام ویژگیها است. در تابعی که ایجاد کردیم، یک متغیر ($a) تعریف میکنیم و آن را به یک آرایه که با () shortcode_atts ایجاد شده است اختصاص میدهیم.
بعد از این کار مقادیر پیش فرض را به ‘attribute’ => ‘default-value’ اختصاص میدهیم. میتوانیم مقادیر را برای هر ویژگی کدPHP برای آرایههایی مانند a[‘attribute’]$ استخراج کنیم. متغیر $output مقدار کلید را در خود ذخیره میکند و در نهایت مقدار نهایی کلید بازگردانی میشود.
اگر میخواهید لینک پیشفرض را در صفحه اصلی سایت قرار دهید، میتوانید از تابع() home_url استفاده کنید. بعد از اینکه قطعه کد را ایجاد کردید، میتوانید در ویرایشگر وردپرس از نام تابع برای بازگردانی مقدار داخلی آن در خروجی استفاده کنید.
این یکی از روش های جالب استفاده از کد کوتاه در وردپرس است. خب بیایید قطعه کدی که ایجاد کردیم را تست کنیم تا ببینیم نتیجه چیست!
درست مانند مثال اول، نام تابع اصلی را برای فراخوانی در ویرایشگر مینویسیم. ممکن است ندانید براکتهایی که در تصویر به آن اشاره کردیم چه کاری انجام میدهند. آنها به شما در خروجی سایت کمک میکنند. تصویر زیر را ببینید:
حالا به قطعه کدی که در تصویر هایلایت کردم توجه کنید. لینک سایت برای ورود از طریق یک کال تو اکشن قرار داده شده است.
همچنین میتوانید اندازه، رنگ و ویژگیهای دیگر این کلید را تعریف کنید. البته مقادیر پیشفرضی از قبل در تابع handler دارد، اما میتوان مقادیر آن را تغییر داد. بهتر است که هرکدام از کلاسها را به صورت جداگانه تنظیم کنید. با انجام این کار، اگر وردپرس خود را بهروز کنید، همچنان این کلاسها بدون تغییر، در دسترس شما باقی خواهند ماند.
/** Enqueuing the Stylesheet for the CTA Button */ function salcodes_enqueue_scripts() { global $post; if( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'cta_button') ) { wp_register_style( 'salcodes-stylesheet', plugin_dir_url( __FILE__ ) . 'css/style.css' ); wp_enqueue_style( 'salcodes-stylesheet' ); } } add_action( 'wp_enqueue_scripts', 'salcodes_enqueue_scripts');
تابع() salcodes_enqueue_scripts متغیر سراسری $post را تعریف میکند که برای Confirm شدن دو شرط دارد:
اگر هردو شرط صحیح باشند، تابع Style.css در پوشه CSS ذخیره میشود. تابع plugin_dir_url ($file) گرفتن URL از افزونه را آسان میکند. حالا بیایید شورت کد[cta_button] را به محتوای پست اضافه کنیم و آن را آزمایش کنیم:
تصویر زیر دکمه CTA را در خروجی نشان میدهد:
حالا که یادگرفتید چگونه ویژگیهایی را با استفاده از شورت کدها به استایل و کال تو اکشنها اضافه کنید، میتوانید ویژگیهای جذاب دیگری مانند انیمیشن، افکتهای مختلف و … را هم به کال تو اکشن یا همان CTA اضافه کنید.
برای سومین مثال، میخواهیم یک شورت کد کوتاه به نام [ boxed ] بسازیم. یک باکس محتوایی ایجاد کنیم و با در نظر گرفتن برچسب عنوان، محتوای مناسب و ویژگیهای دیگر آن را تنظیم کنیم. این باکس، محتوا را بین تگهای خود با جلوههای مختلف به تصویر میکشد. بگذارید با رجیستر شورت کد و تابع handler شروع کنیم.
/** * [boxed] returns the HTML code for a content box with colored titles. * @return string HTML code for boxed content */ add_shortcode( 'boxed', 'salcodes_boxed' ); function salcodes_boxed( $atts, $content = null, $tag = '' ) { $a = shortcode_atts( array( 'title' => 'Title', 'title_color' => 'white', 'color' => 'blue', ), $atts ); $output = '<div class="salcodes-boxed" style="border:2px solid ' . esc_attr( $a['color'] ) . ';">'.'<div class="salcodes-boxed-title" style="background-color:' . esc_attr( $a['color'] ) . ';"><h3 style="color:' . esc_attr( $a['title_color'] ) . ';">' . esc_attr( $a['title'] ) . '</h3></div>'.'<div class="salcodes-boxed-content"><p>' . esc_attr( $content ) . '</p></div>'.'</div>'; return $output; }
در این مثال، با استفاده از CSS style محتوا را اصلاح میکنیم. استایلهای مربوط به هر کلاس، در شورت کدها استفاده شده و مانند مثال قبل ثبت میشوند. اما داشتن دو شورت کد از یک استایل شیت، نشان میدهد که در صورت استفاده از هریک از آنها باید آن را بارگیری کنید. بنابراین، بیایید تابع () salcodes_enqueue_scripts را فراخوانی و بهروز کنیم.
/** Enqueuing the Stylesheet for Salcodes */ function salcodes_enqueue_scripts() { global $post; $has_shortcode = has_shortcode( $post->post_content, 'cta_button' ) || has_shortcode( $post->post_content, 'boxed' ); if( is_a( $post, 'WP_Post' ) && $has_shortcode ) { wp_register_style( 'salcodes-stylesheet', plugin_dir_url( __FILE__ ) . 'css/style.css' ); wp_enqueue_style( 'salcodes-stylesheet' ); } } add_action( 'wp_enqueue_scripts', 'salcodes_enqueue_scripts');
تصویر زیر خروجی ما را نشان میدهد.
حالا که چگونگی نوشتن شورت کد را میدانید، میتوانید از خلاقیت خود برای بهرهوری بیشتر از شورت کدها استفاده کنید و تجربیاتتان را با ما به اشتراک بگذارید. حالا که شورتکدها را ایجاد کردیم، به نظر شما کجا میتوان این شورت کدها را اضافه کرد؟
جواب این سوال خیلی سخت نیست. شما میتوانید شورت کدهای وردپرس را در هر بخشی که بتوان به ویرایشگر متنی دسترسی داشت، قرار دهید. در هر برگه، نوشته، ابزارکها و قالبهای سفارشی و هر جای دیگری میتوان این کدهای کوتاه را به کار برد و از مزیت آنها برای سایت خود استفاده کرد. انجام این کار، سایتتان را نسبت به دیگر رقبا متمایز میکند.
در ادامه، اضافه کردن شورت کدها به فوتر، هدر، سایدبار و مقاله را بررسی میکنیم.
اگر قصد دارید به سایدبار خود یک قطعه کد را اضافه کنید، باید ابتدا به قسمت ویجتها در منوی نمایش بروید. برای اضافه کردن کد کوتاه در وردپرس خود ابتدا بهتر است راجب ویجب ها اطلاعاتی را به دست بیاورید.
شاید راحتتر باشد که با یک مثال ویجت را تعریف کنیم. ابزارهایی که امکانات مختلفی را در اختیار کاربر قرار میدهند؛ مثل نوار جستوجو، دستهبندی مطالب یا حتی فیلترگذاری برای جستوجو در یک دستهی خاص از اجناس یا مطالب سایت. به این دستهبندیها ویجت یا ابزارک میگویند.
حالا میخواهیم بگوییم این ویجتها چگونه طراحی میشوند و چطور میتوانیم امکانات مختلفی را به سایت خود اضافه کنیم تا یک وبسایت منحصربهفرد داشته باشیم.
برای دسترسی به بخش ویجتها یا همان ابزارکها، در منوی سمت راست روی نمایش کلیک کرده و از زیر منوی آن ابزارکها را انتخاب کنید. به این ترتیب وارد صفحه ابزارکها میشوید. برای اضافه کردن شورت کدهای خود تنها نیاز دارید یک ویجت متنی ایجاد کنید.
یادتان باشد هر تغییری که ایجاد میکنید را ابتدا ذخیره کنید تا شاهد تغییرات آن در سایت خود باشید. بعد از ذخیره میتوانید برای مشاهده تغییرات، وارد سایت شوید.
استفاده از شورت کدها در سایدبارها را دیدید. یکی دیگر از بخشهایی که میتوان کد کوتاه را در وردپرس اضافه کرد، هدر و فوتر سایت است. این شورت کد میتواند در وبسایت وردپرس شما به صورت یک CTA در فوتر سایت باشد. در ادامه به بررسی عملکرد تابع do_shortcode() میپردازیم. اگر قصد استفاده از یک شورتکد را در سایت خود دارید، میتوانید از توابع header.php و footer.php استفاده کنید.
<?php echo do_shortcode("[name_of_your_shortcode]"); ?>
یکی از نمونههای استفاده توابع هدر و فوتر و استفاده از Do_shortcode را میگوییم.با استفاده از این دستورالعمل، میتوانید یک کال تو اکشن ایجاد کنید. این شورت کد را در خاطر داشته باشید. مسلماً استفادههای زیادی از آن خواهید کرد.
شما میتوانید اسکریپتهای شورت کد را به فایل function.php یا در یک افزونه اضافه کنید. در صورت اضافه کردن تغییرات به فایل، میتوانید تابع() add_shortcode را اجرا کنید؛ اما اگر از افزونه استفاده میکنید، بهتر است بعد از اجرای کامل وردپرس آن را تنظیم کنید. البته باید مطمئن شوید که از طریق تابع دیگری فراخوانی نمیشود. مثال زیر را ببینید:
function shortcodes_init(){ add_shortcode( 'shortcode_name', 'shortcode_handler_function' ); } add_action('init', 'shortcodes_init');
تابع () add_action زیر مجموعه تابع shortcodes_init قرار میگیرد و پس از اجرای این دستورالعمل اجرا میشود. خب؛ کمکم داریم به پایان مقاله میرسیم. برای اینکه خیالمان راحت شود، بیایید مروری هم بر مزایا و معایب شورت کدها داشته باشیم.
در این مقاله، با انواع شورتکدها آشنا شدیم و عملکرد آنها را بررسی کردیم. با چند قطعه کد کوتاه کار کردیم و نهایتاً مزایا و معایب کدها را گفتیم. شاید در زندگی واقعی راه میانبر وجود نداشته باشد، اما شما میتوانید از این میانبرها در وردپرس خود استفاده کنید. شما می توانید از کدهای آماده استفاده کنید و اگر آنچه را که میخواستید پیدا نکردید، خودتان آن را بنویسید.
حتی میتوانید با استفاده از افزونه Shortcoder، میانبر ایجاد کنید تا کد کوتاه دلخواه خود را ایجاد کنید. به یاد داشته باشید: زندگی کوتاه است، از کد کوتاه استفاده کنید!
اگر از این مقاله لذت بردید، آن را با دوستان خود به اشتراک بگذارید. همچنین میتوانید نظرات و پیشنهادات خود را با ما در قسمت کامنتها در میان بگذارید. ضمن اینکه اگر تجربهای خاص در استفاده از شورتکدها دارید آن را بیان کنید تا ما و کاربران دیگر هم از آن استفاده کنیم.
دیدگاهتان را بنویسید