ساخت شورت کد در المنتور و وردپرس

ساخت شورت کد در المنتور و وردپرس راهی کارآمد برای سفارشی کردن پست ها و صفحات سایت شماست. با این حال، با این مفهوم آشنایی ندارید، ممکن است در درک نحوه استفاده از چنین ویژگی در سایت خود دچار مشکل شوید.

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

در این نوشته، ما در مورد اینکه کدهای کوتاه وردپرس چیست و چرا ممکن است از آنها استفاده کنید بحث خواهیم کرد. سپس به شما نشان خواهیم داد که چگونه خودتان هم در وردپرس و المنتور کد کوتاه بسازید. پس بیاید شروع کنیم!

شورت کد یا shortcode چیست؟

شورت کدها یا کدهای کوتاه در آموزش وردپرس و صفحه ساز المنتور به عنوان میانبر عمل می کنند و به شما امکان می دهند عناصر را به سرعت در یک نوشته یا صفحه جاسازی کنید. شورت کدها از یک خط کد در داخل براکت تشکیل می شوند، مانند [exampleshortcode].
این کدها درواقع یک ویژگی از پیش تعیین شده را در قسمتی از سایت شما نمایش می دهند. خود وردپرس به صورت پیش فرض چند شورت کد دارد :

• [ caption ] – به شما امکان می دهد تا زیرنویس ها را در اطراف محتوا قرار دهید
• [ gallery ] – با این شورت کد می توانید گالری تصاویر را مشاهده کنید
• [ audio ] – به شما امکان می دهد فایل های صوتی را جاسازی و پخش کنید
• [ video ] – می توانید فایل های ویدیویی را جاسازی و پخش کنید
• [ playlist ] – به شما امکان نمایش مجموعه ای از فایل های صوتی یا تصویری را می دهد
• [ embed ] – جاسازی آیتم های مختلفی مثل ویدیو یوتیوب، عکس و… در صفحه

افزونه های مختلف مثل صفحه ساز قدرتمند المنتور هم شورت کدهای مخصوص به خود را دارند، مثلا بعد از ساخت هر قالب در المنتور می توانید از شورت کد قالب ساخته شده استفاده کنید.

چرا باید از کدهای کوتاه استفاده کنید؟

دیدید که کدهای کوتاه از یک یا چند کلمه تشکیل شده اند، پس استفاده از آنها آسان‌تر و سریع‌تر از یادگیری و نوشتن یک کد طولانی در HTML است. علاوه بر این، آنها به شما کمک می کنند تا محتوای ایجاد شده در پلاگین های مختلف را در هر بخشی از سایت، در دسترس خود داشته باشید.

شورت کدها برای خودکارسازی برخی از ویژگی هایی که به طور مکرر استفاده می کنید خیلی کارآمد هستند. به عنوان مثال، اگر از دکمه تماس یا یک ویجت خاص در هر یک از پست های خود استفاده می کنید، داشتن یک کد کوتاه اختصاصی می تواند یک راه حل سریع و عملی باشد.

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

چگونه در وردپرس شورت کد بسازیم؟

برای اینکه شورت کدهای خودتان را در وردپرس ایجاد کنید باید با کدنویسی php  در وردپرس آشنایی داشته باشید. البته اگر در این مورد تازه کار هستید یا آشنایی ندارید، نگران نباشید؛ در این خصوص ابزارهای هوش مصنوعی زیادی هستند که همانند دستیار برای شما عمل می کنند. البته لازم است که برای رعایت جوانب احتیاط، قبل از هرگونه تغییر در فایل و کدنویسی از سایت بکاپ تهیه کنید.

بیایید نحوه ایجاد یک کد کوتاه سفارشی وردپرس را بررسی کنیم. در این آموزش، به عنوان مثال، پیوندهای شبکه های اجتماعی را به یک پست اضافه خواهیم کرد.

قدم اول : فایل جدید ایجاد کنید

در قدم اول شما به یک فایل با پسوند .php احتیاج دارید که کدهای مربوط به شورت کد را در آن قرار دهید. این فایل باید در داخل پوشه قالب شما ایجاد شود.

برای دسترسی به پوشه قالب سایت وارد روت هاست و مسیر wp-content > themes و پوشه قالب خودتان شوید (در اینجا قالب ما hello elementor است). در این مسیر با راست کلیک و انتخاب گزینه Create new file یک فایل جدید درست کنید. ما در این آموزش نام این فایل را custom-shortcodes.php میگذاریم.

حالا باید به پوسته سایت فایلی که ساختیم رو معرفی کنیم. برای این منظور در همان پوشه فایل functions.php را پیدا کنید و کد زیر را در آخرین خط فایل قرار دهید.
include('custom-shortcodes.php');

قدم دوم : نوشتن کدهای php برای شورت کد

در مرحله بعد، باید توابع مورد نیاز برای اجرای کد کوتاه را بنویسید و به آن دستور دهید که چه کاری انجام دهد. برای این کار گزینه View/Edit را برای فایل custom-shortcodes.php بزنید و در ویرایشگر شروع به کدنویسی کنید. برای شروع کدنویسی با php همیشه با <?php   شروع و با ?> تمام میکنیم .

حالا این کد زیر را برای شروع داخل موارد بالا که گفته شد قرار می دهیم .
function subscribe_link(){return 'ما را در شبکه های اجتماعی دنبال کنید';}
در خط آخر کدها، باید از تابع add_shortcode برای انتصاب یک تگ به تابع نوشته شده استفاده کنید.
add_shortcode('subscribe', 'subscribe_link');

به بیان دیگر در این مثال  شورت کد [subscribe]   باعث اجرا شدن کدهای داخل تابع subscribe_link() می شود.

بخش اول این هوک که مخصوص نامگذاری شورت کد است؛ قوانین خاصی دارد که باید به آن توجه کنید:

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

قدم سوم : اضافه کردن شورت کد ساخته شده به سایت

استفاده از ویرایشگر گوتنبرگ (ویرایشگر بلوکی) وردپرس یکی از راه هایی است که می توانید شورت کد ها را با کمک آن به صفحات سایت اضافه کنید.

قدم چهارم : اضافه کردن پارامتر به شورت کد

اگر انتظارات بیشتری از شورت کد خود دارید باید به آن پارامتر هم اضافه کنید. برای اینکار دوباره به سراغ فایل custom-shortcodes.php می رویم و کدهای آن را به صورت زیر تغییر می دهیم:

function subscribe_link_att($atts) {
$default = array(
'link' => '#',
);
$a = shortcode_atts($default, $atts);
return 'Follow us on < a href="'.$a['link'].'">'.$a['link'].'</a >';
}
add_shortcode('subscribe', 'subscribe_link_att');

نوشتن این کد به شما امکان می دهد پیوندهای درون تگ کد کوتاه خود را سفارشی کنید و آنها را به ویرایشگر گوتنبرگ یا هرقسمت از سایت خود اضافه کنید. مثال زیر یک کد کوتاه سفارشی شده به همراه پارامتر است:
[subscribe link='https://www.facebook.com/elementorsite/']

چگونه از شورت کدها در المنتور استفاده کنیم؟

این موضوع اهمیت دارد که برای درج شورت کدها از چه ویجتی استفاده کنید. برای اینکه همه چیز به درستی کار کند باید ویجت short code یا کد کوتاه در المنتور را به صفحه اضافه کنید و شورت کد ساخته شده را داخل آن قرار دهید.

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

در صورتی که میخواهید کد کوتاه مورد نظرتان را به دفعات در صفحات مختلف المنتوری خود استفاده کنید؛ این امکان برای شما وجود دارد که شورت کد را به صورت ویجت جهانی ذخیره کنید. با این کار این شورت کد در صفحات دیگر نیز در دسترس شما قرار می گیرد.

توضیحات بیشتر در خصوص کار با ویجت های جهانی را می توانید در آموزش طراحی سایت با المنتور مشاهده کنید.

نحوه استفاده از شورت کد قالب های المنتور در بخش های مختلف سایت

پیشتر گفتیم که قالب های المنتوری شورت کد مختص به خود را دارند، افزونه shortcode for elementor به شما امکان می دهد که قالب ها و بخش های ساخت شده با المنتور را در هرقسمتی از سایت خود استفاده کنید.