[ad_1]
یکی از جالبترین امکانات وردپرس، شورتکدها (Short Codes) هستند. به کمک این شورتکدها میتوانید، با کمترین دانش برنامهنویسی، تغییراتی کوچک، بزرگ و جذاب را در سایتتان ایجاد کنید.
مثلاً میتوانید به جای چندین و چند ساعت کد زدن، با استفاده از تنها یک خط کد داخل [ ]، یک گالری عکس، با ۳ ستون و ۶ عکس، به سایت خودتان اضافه کنید. کد زیر را ببینید:
|
[ gallery ids=“۴۷ ,۸۶, ۹۲, ۶۴, ۴۸, ۷۵, ۸۹, ۸۰” columns=“۴” 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 را داریم که لیست پخش را به رنگ تیره در میآورد.
Embed
این شورت کد به شما اجازه میدهد ویژگیهای گوناگونی (مثل حداکثر اندازه طول و عرض) را برای بخشهای مختلف تنظیم کنید.
توجه کنید که این کد کوتاه فعال نیست! مگر اینکه حداقل یک بار فیلتر “the_content” پردازش شود. اگر میخواهید این کد کوتاه را قبل از Loop یا بدون آن اجرا کنید و از the_content استفاده نمیکنید، باید متد زیر را با محتوای حاوی کد کوتاه Embed فراخوانی کنید:
خب همه کدهای پیشفرض را معرفی کردیم. برویم سراغ شورت کدهای سفارشی!
شورتکدهای سفارشی
شورت کدهای سفارشی توسط اشخاص تولید میشوند! یعنی مثل کدهای پیشفرض، از قبل آماده نشدهاند. اگر یادتان باشد، بالاتر گفتیم که میتوانید برای انجام امور مشخص، یکبار کد تعریف کنید و بارها از آن استفاده کنید. این کدها، با نام شورت کدهای سفارشی شناخته میشوند.
نکته: برای نوشتن شورت کد سفارشی، باید دانش برنامهنویسی داشته باشید! یعنی باید بتوانید کدنویسی کنید!
مشخصاً کدهای سفارشی و کدها پیشفرض، با هم تفاوت دارند. بیایید چند نمونه از بهترین شورت کدهایی که میتوان ایجاد کرد و چگونگی ساخت آنها را بررسی کنیم.
چطور میتوانیم شورتکد بسازیم؟
وقت آن رسیده تا با هم ببینیم چطور میتوان یک شورتکد سفارشی در وردپرس ایجاد کرد. اگر میخواهید شروع به کدنویسی برای وردپرس خود کنید، یادتان باشد که باید کدنویسی به زبان PHP را بلد باشید.
اما قبل از این کار باید بدانیم که کجا باید شورت کدها را اضافه کرد؟
برای اینکه بتوانیم از شورت کدهای وردپرس استفاده کنیم، باید آنها را به ویرایشگر خود در وردپرس اضافه کنیم. متداولترین نسخه ویرایشگر که کاربران از آن استفاده میکنند گوتنبرگ است.
ویرایشگر گوتنبرگ روی نسخه ۵ به بالای وردپرس به صورت پیشفرض نصب و قابل استفاده است و اگر از نسخه پایینتر استفاده میکنید، میتوانید با ارتقای نسخه وردپرس خود، از این ویرایشگر و امکانات آن بهره ببرید.
برای دسترسی به این ویرایشگر لازم است تا بعد از ورود به پنل کاربری وردپرس، قسمت نوشتهها و افزودن نوشته را انتخاب کنید. بعد از اینکه ویرایشگر را روی پنل وردپرس خود باز کردید، میتوانید قطعه کدهایی که نیاز دارید را به آن اضافه کنید.
روی «+» در بالای صفحه کلیک کنید. در لیست ظاهر شده روی آیکن کد کوتاه کلیک کنید. (مطابق تصویر زیر)
در این مقاله طریقه ویرایش هر بخش را بیان میکنیم.
حالا در باکس باز شده، شورتکد مدنظر خود را وارد کنید.
شاید شما از ویرایشگر کلاسیک وردپرس استفاده میکنید، همینطور است؟
خب، اگر پاسخ شما مثبت است، وارد قسمت ویرایشگر متن شده و شورتکد مورد نظر خود را در صفحهای که میخواهید شورت کد به آن اضافه شود، وارد کنید.
هرجایی که دلتان بخواهد، میتوانید شورت کد مورد نظر خود را اضافه کنید، فقط مطمئن شوید که قطعه کد مورد نظر، در خط خود قرار گرفته باشد.
اگر آماده هستید سریعتر کار خود را شروع کنیم تا بتوانید اولین شورتکد خود را ایجاد کنید!
اولین نمونه: استفاده از تابع [current_year]
برای شروع یک شورت کد از طریق [current_year] ایجاد میکنیم. دیدن اینکه در چه تاریخی قرار داریم، کاری است که بسیاری از سایتها آن را انجام میدهند. شما میتوانید تاریخ را به انواع و شکلهای مختلف تنظیم کنید.
نمایش تاریخ را به سادهترین شکل ممکن باهم پیش میبریم.
اول یک مثال ساده میزنیم و بعد آن را در قالب یک پلاگین سفارشی میکنیم. به کد زیر توجه کنید:
[y] display current year ۲۰۱۹
از این تگ می توان برای نمایش سال استفاده کرد.
[cy] display symbol of copyright and current year ©۲۰۱۹
همچنین از تگ [cy] برای نمایش حق کپی رایت و سال کنونی استفاده شده است.
اگر کمی خلاقیت به خرج دهیم، میتوانیم از این تگها به صورت زیر هم استفاده کنیم:
[cyy year=”۲۰۰۳″] display symbol of copyright, first year, current year ©۲۰۰۳-۲۰۱۹
خب حالا اگر بخواهیم از طریق [current_year] یک پلاگین ایجاد کنیم و آن را سفارشی کنیم، باید چهکار کنیم؟
من برای اضافه کردن توابع از یک پلاگین barebones استفاده میکنم. به شما هم پیشنهاد میکنم همین کار را انجام دهید. برای ایجاد افزونه یک پوشه جدید به آدرس زیر اضافه کنید:
/wp-content/Plugins
این آدرس برای اضافه کردن افزونهها است. یک پوشه با هر نامی که دوست دارید بسازید. در فهرست ایجاد شده یک فایل با پسوند PHP و با نامی که انتخاب کردید ایجاد کنید.
بعد از این کار، عنوان زیر را به فایل خود اضافه کنید:
حالا میتوانید این فایل را ذخیره کنید. برای فعال کردن آن، به داشبورد وردپرس بروید. میتوانید برای دیدن عملکرد کد بالا، کد زیر را به فایل ایجاد شده قبلی اضافه کنید:
بعد از اضافه کردن کدهای بالا، پلاگین را ذخیره کنید. زمان آن رسیده تا عملکرد شورتکدهایی که نوشتیم را بررسی کنیم.
تگ @return در PHP نوع داده بازگشتی کل تابع را مشخص میکند. بیایید خط به خط کد را بررسی کنیم:
- current_year یک تابع شورت کد است. این برچسب سال کنونی را که باید در محتوای خود اضافه کنید، برمیگرداند.
- salcodes_year نام تابع کنترل کننده شورت کد است که در خروجی یک رشته تابع داخلی خود را بر میگرداند. البته میتوان به آن انواع ویژگیها را اضافه کرد.
- salcodes_init تابع داخلی salcodes_year است که میزان getdate را در ورودی میگیرد و آن را بر میگرداند. در واقع مطمئن میشود شورت کد تنها پس از اتمام بارگذاری وردپرس به ثبت رسیده است. تابع add_action () داخلی ساخته شده وردپرس، این امکان را فراهم میآورد.
- getdate () یک تابع 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 شدن دو شرط دارد:
• Is_a(): این تابع چک میکند که آیا $post نمونهای از WP_Post است یا نه.
• Has_shortcode(): بررسی میکند که محتوای پست تابع کال تو اکشن را دارد یا نه.
اگر هردو شرط صحیح باشند، تابع Style.css در پوشه CSS ذخیره میشود. تابع plugin_dir_url ($file) گرفتن URL از افزونه را آسان میکند.
حالا بیایید شورت کد[cta_button] را به محتوای پست اضافه کنیم و آن را آزمایش کنیم:
تصویر زیر دکمه CTA را در خروجی نشان میدهد:
حالا که یادگرفتید چگونه ویژگیهایی را با استفاده از شورت کدها به استایل و کال تو اکشنها اضافه کنید، میتوانید ویژگیهای جذاب دیگری مانند انیمیشن، افکتهای مختلف و … را هم به کال تو اکشن یا همان CTA اضافه کنید.
سومین نمونه: استفاده از شورت کد در تابع $content
برای سومین مثال، میخواهیم یک شورت کد کوتاه به نام [ 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; } |
• $content=null: این شورت کد رجیستر شده به عنوان یک نوع (type) ذخیره میشود. میتوانید از متغیر $content در نوع عملکرد خود استفاده کنید تا خروجی مورد نظر را به دست آورید.
• $tag=”: متغیر $tag به عنوان یک کدکوتاه تعریف شده است.
در این مثال، با استفاده از 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’); |
- $has_shortcode: یک متغیر تعریف شده توسط کاربر که بررسی میکند: آیا هر کدکوتاه در صفحه/پست وجود دارد یا نه! دو اپراتور || امکان این کار را فراهم میکنند.
تصویر زیر خروجی ما را نشان میدهد.
حالا که چگونگی نوشتن شورت کد را میدانید، میتوانید از خلاقیت خود برای بهرهوری بیشتر از شورت کدها استفاده کنید و تجربیاتتان را با ما به اشتراک بگذارید.
حالا که شورتکدها را ایجاد کردیم، به نظر شما کجا میتوان این شورت کدها را اضافه کرد؟
شورت کدها را به کدام بخشهای سایت میتوان اضافه کرد؟
جواب این سوال خیلی سخت نیست. شما میتوانید شورت کدهای وردپرس را در هر بخشی که بتوان به ویرایشگر متنی دسترسی داشت، قرار دهید. در هر برگه، نوشته، ابزارکها و قالبهای سفارشی و هر جای دیگری میتوان این کدهای کوتاه را به کار برد و از مزیت آنها برای سایت خود استفاده کرد. انجام این کار، سایتتان را نسبت به دیگر رقبا متمایز میکند.
در ادامه، اضافه کردن شورت کدها به فوتر، هدر، سایدبار و مقاله را بررسی میکنیم.
درج شورتکد در ویجتهای سایدبار
اگر قصد دارید به سایدبار خود یک قطعه کد را اضافه کنید، باید ابتدا به قسمت ویجتها در منوی نمایش بروید.
یادآوری: ویجت چیست؟
شاید راحتتر باشد که با یک مثال ویجت را تعریف کنیم. حتما تا الان وارد سایتهایی شدهاید که در ستون کناری آنها ابزارهای مختلفی تعبیه شده است. ابزارهایی که امکانات مختلفی را در اختیار کاربر قرار میدهند؛ مثل نوار جستوجو، دستهبندی مطالب یا حتی فیلترگذاری برای جستوجو در یک دستهی خاص از اجناس یا مطالب سایت. به این دستهبندیها ویجت یا ابزارک میگویند.
حالا میخواهیم بگوییم این ویجتها چگونه طراحی میشوند و چطور میتوانیم امکانات مختلفی را به سایت خود اضافه کنیم تا یک وبسایت منحصربهفرد داشته باشیم.
چطور به بخش ویجت (ابزارک) دسترسی پیدا کنیم؟
برای دسترسی به بخش ویجتها یا همان ابزارکها، در منوی سمت راست روی نمایش کلیک کرده و از زیر منوی آن ابزارکها را انتخاب کنید.
به این ترتیب وارد صفحه ابزارکها میشوید. برای اضافه کردن شورت کدهای خود تنها نیاز دارید یک ویجت متنی ایجاد کنید. برای این کار، در منوی ظاهر شده قسمت text را انتخاب کنید تا یک پنل متنی برای اضافه کردن کدها باز شود.
یادتان باشد هر تغییری که ایجاد میکنید را ابتدا ذخیره کنید تا شاهد تغییرات آن در سایت خود باشید. بعد از ذخیره میتوانید برای مشاهده تغییرات، وارد سایت شوید.
استفاده از شورتکدها در هدر و فوتر وردپرس
استفاده از شورت کدها در سایدبارها را دیدید. یکی دیگر از بخشهایی که میتوان کدهای کوتاه را اضافه کرد، هدر و فوتر سایت است.
این شورت کد میتواند به صورت یک 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 قرار میگیرد و پس از اجرای این دستورالعمل اجرا میشود.
خب؛ کمکم داریم به پایان مقاله میرسیم. برای اینکه خیالمان راحت شود، بیایید مروری هم بر مزایا و معایب شورت کدها داشته باشیم.
مزایای استفاده از شورتکد چیست؟
- شورتکدها اضافه کردن ویژگیهای پیچیده به سایتهای وردپرس را ساده میکنند.
- شورتکد به صورت خودکار گردش کار را برای پیشرفت انجام میدهد. بهطور کلی روند کار بسیار راحت شده است، بهطوری که بهصورت اتوماتیک، اسکریپتهای پیچیده را حذف میکند.
- شورتکدها کاملا User friendly هستند.
- شورتکدها چون در پلاگینها قرار میگیرند، حتی اگر وردپرس را بهروز کنید هم معتبر هستند و کار خود را انجام میدهند.
- وقتی شورتکدها را داخل افزونه قرار میدهید، استفاده از آنها در چندین وبسایت وردپرس راحت است. اگر یک دولوپر هستید، با استفاده از این مزیت بهراحتی میتوانید کار خود را پیش ببرید.
- زمانی که برای هر قطعه کد ویژگیهایی را تعریف میکنید، کاربران به راحتی میتوانند این ویژگیها را باتوجه به خواسته خود تغییر دهند.
معایب استفاده از شورتکد چیست؟
- کاربران در زمان کار با سایت متوجه شورتکدها نمیشوند. اگر تعداد این قطعه کدها در هر صفحه زیاد باشد، اصلا تجربه خوشایندی ایجاد نمیکنند؛ یعنی استفاده از این کدها بیشتر به نفع برنامه نویس است تا کاربر.
- این که بدون تست و دیدن عملکرد بگوییم قطعه کد چه کاری انجام میدهد سخت است! به همین خاطر، تیم پشتیبانی اصلی وردپرس نام «mystery meat embed codes» را برای آن انتخاب کرده است.
- کدها در صورت عوض شدن موضوع از کار میافتند.
- به دلیل بعضی تفاوتها با کدهای HTML، ممکن است سایت شما با مشکل روبهرو شود. استفاده از شورتکدها در قسمت جلوی سایت خوب نیست.
- یادتان باشد که کدهای کوتاه شده بار اضافی به همراه دارند و روی سرور شما فشار وارد میکنند. حتی ممکن است سایتتان بهخاطر وجود شورت کدها، توسط خزندههای گوگل ایندکس نشود!
- عملکرد شورت کدها در مقابل خطاهای syntax مبهم است.
کدها بیشتر به نفع برنامه نویس است تا کاربر.حرفهای آخر
اضافه کردن قابلیتهای پیچیده در هر نقطه از سایت وردپرسی، با استفاده از شورتکدها آسان میشود. آنها برچسبهایی با عملکردهای متفاوت ارائه میدهند که توسعهدهندگان میتوانند به جای کار با کدهای پیچیده از این کدها استفاده کنند و نتیجه بهتری هم بگیرند.
در این مقاله، با انواع شورتکدها آشنا شدیم و عملکرد آنها را بررسی کردیم. با چند قطعه کد کوتاه کار کردیم و نهایتاً مزایا و معایب کدها را گفتیم.
شاید در زندگی واقعی راه میانبر وجود نداشته باشد، اما شما میتوانید از این میانبرها در وردپرس خود استفاده کنید. در هرحال، از کدهای آماده استفاده کنید و اگر آنچه را که میخواستید پیدا نکردید، خودتان آن را بنویسید.
حتی میتوانید با استفاده از افزونه Shortcoder، میانبر ایجاد کنید تا کد کوتاه دلخواه خود را ایجاد کنید. به یاد داشته باشید: زندگی کوتاه است، از کد کوتاه استفاده کنید!
اگر از این مقاله لذت بردید، آن را با دوستان خود به اشتراک بگذارید. همچنین میتوانید نظرات و پیشنهادات خود را با ما در قسمت کامنتها در میان بگذارید. ضمن اینکه اگر تجربهای خاص در استفاده از شورتکدها دارید آن را بیان کنید تا ما و کاربران دیگر هم از آن استفاده کنیم.
[ad_2]
