روش ایجاد کد کوتاه در وردپرس (در 7 مرحله)

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

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

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

آموزش ساخت کد کوتاه در وردپرس

گام به گام روش ایجاد کد کوتاه وردپرس را یاد بگیرید.

برای ویدیوهای آموزشی بیشتر مشترک شوید!
هاستینگer آکادمی

اشتراک در

کدهای کوتاه وردپرس چیست؟

کدهای کوتاه وردپرس به عنوان میانبر عمل می کنند که به شما امکان می دهد عناصر را در یک پست یا page به سرعت. اینها معمولاً از یک خط کد در داخل پرانتز تشکیل می شوند، مانند [exampleshortcode]، مثلا. این کد یک ویژگی از پیش تعیین شده را نمایش می دهد روی قسمت جلویی سایت شما

وردپرس اولین بار کدهای کوتاه را معرفی کرد با انتشار Shortcode API. این به کاربران این امکان را می دهد تا به راحتی عناصر جذاب را به پست ها و صفحات خود اضافه کنند، مانند Google Maps یا دکمه “لایک” فیس بوک.

وجود دارد شش کد کوتاه پیش فرض در وردپرس:

• عنوان: زیرنویس ها را در اطراف محتوا قرار می دهد
• آلبوم عکس: گالری تصاویر را نشان می دهد
• سمعی: فایل های صوتی را جاسازی و پخش می کند
• ویدئو: فایل های ویدئویی را جاسازی و پخش می کند
• لیست پخش: مجموعه ای از فایل های صوتی یا تصویری را نمایش می دهد
• جاسازی کنید: موارد تعبیه شده را می پیچد

همچنین با دو نوع اصلی قالب‌بندی کد کوتاه مواجه می‌شوید – خود بسته شدن و محصور کردن. کدهای کوتاه خود بسته می توانند بایستند روی خودشان هستند و نیازی به تگ بسته شدن ندارند، مانند gallery یا video کدهای کوتاه بالا

در همین حال، محصور کردن کدهای کوتاه محتوایی را که می خواهید تغییر دهید بپیچید و از شما می خواهد که برچسب را به صورت دستی ببندید. برای مثال، می‌توانید یک ویدیوی YouTube را با قرار دادن URL در آن جاسازی کنید embed و /embed برچسب ها:

به عنوان مثال، این نتیجه زیر را ایجاد می کند:

برخی از بهترین افزونه های وردپرس با کدهای کوتاه خود ارائه می شوند. به عنوان مثال، فرم های WP و فرم تماس 7 دارای کدهای کوتاهی هستند که به شما امکان می دهد فرم تماس وردپرس را در یک پست یا پست قرار دهید. page به سرعت. همچنین می توانید از افزونه ای مانند MaxButtons برای اضافه کردن کد کوتاه دکمه وردپرس در هر کجا که می خواهید استفاده کنید روی سایت شما.

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

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

کدهای کوتاه می توانند برای خودکارسازی برخی از ویژگی هایی که به طور مکرر استفاده می کنید استفاده شوند. به عنوان مثال، اگر از a استفاده کنید فراخوان برای اقدام (CTA) دکمه روی هر یک از پست های شما، داشتن یک کد کوتاه اختصاصی می تواند یک راه حل سریع و کاربردی باشد.

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

چنین روشی بسیار مناسب‌تر برای مبتدیان است، زیرا می‌توانید محتوا را مستقیماً به رابط کاربری اضافه کنید. با این حال، ویرایشگر بلاک وردپرس هنوز در مواردی که ارائه می دهد محدود است. خوشبختانه، آن را با یک کد کوتاه مسدود کردن، به شما امکان می دهد محتوای سفارشی را به صفحات خود اضافه کنید.

روش ایجاد کد کوتاه در وردپرس (در 7 مرحله)

اگر قبلاً دانش کدنویسی دارید، ممکن است بخواهید کدهای کوتاه سفارشی خود را ایجاد کنید. این به شما امکان کنترل کامل بر ظاهر و عملکرد سایت خود را می دهد.

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

مرحله 1 – یک فایل تم جدید ایجاد کنید

قبل از شروع، ایده خوبی است که به طور کامل backup سایت وردپرس شما همچنین باید یک فایل جداگانه برای کد کوتاه سفارشی خود خارج از فایل functions.php تم خود ایجاد کنید. در صورتی که مشکلی پیش بیاید، این یک بازگشت مجدد ارائه می کند.

می توانید از a استفاده کنید پروتکل انتقال فایل (FTP) کلاینت مانند FileZilla برای دسترسی به فایل های موضوعی سایت شما. پس از اتصال به سایت خود، به آن بروید wp-content > تم هاو پوشه موضوع فعلی خود را پیدا کنید. در مثال ما، این خواهد بود rosa-lite:

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

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

با این کار فایل در ویرایشگر متن پیش فرض شما باز می شود. سپس، شما به سادگی باید بلوک کد زیر را اضافه کنید:

<?php 
?>

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

سپس می توانید تغییرات خود را ذخیره کرده و فایل را ببندید. حتما کادر زیر را علامت بزنید تا مطمئن شوید به روز شده است روی سرور و در وب سایت شما اعمال می شود:

بعد، را باز کنید functions.php در همان پوشه تم فایل کنید و خط کد زیر را در پایین سند اضافه کنید:

include('custom-shortcodes.php');

این به سیستم می‌گوید هر تغییری را که در آن ایجاد می‌کنید شامل شود custom-shortcodes.php فایل داخل functions.php در حالی که به شما اجازه می دهد آنها را جدا نگه دارید. وقتی آماده شدید، تغییرات خود را ذخیره کرده و فایل را ببندید.

مرحله 2 – عملکرد Shortcode را ایجاد کنید

در مرحله بعد، باید تابع کد کوتاه را ایجاد کنید و به آن دستور دهید که چه کاری انجام دهد. انتخاب کنید مشاهده/ویرایش دوباره گزینه برای شما custom-shortcodes.php فایل. از قطعه کد زیر برای اضافه کردن یک اقدام استفاده کنید hook عملکرد شما به:

function subscribe_link(){
return 'Follow us روی <a rel="nofollow" href="https://twitter.com/هاستینگer؟s=20">Twitter</a>';
}

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

add_shortcode('subscribe', 'subscribe_link');

هنگامی که یک کد کوتاه با استفاده از add_shortcode تابع، شما یک تگ کد کوتاه “($tag)” و یک تابع مربوطه “($func)” اختصاص می دهید. hook که هر زمان از میانبر استفاده شود اجرا می شود.

به عبارت دیگر، اگر تگ کد کوتاه باشد [subscribe]، باعث می شود hook ‘subscribe_link’ بازدید کننده را به URL ارائه شده هدایت کنید.

بنابراین، کل کدی که در خود استفاده خواهید کرد custom-shortcodes.php فایل چیزی شبیه به این خواهد بود:

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

مرحله 3 – کد کوتاه خود بسته شدن را به وب سایت اضافه کنید

اکنون می توانید کد اولیه خود را به عنوان یک کد کوتاه خود بسته شونده آزمایش کنید روی سایت وردپرس شما با استفاده از ویرایشگر بلاک وردپرس، می توانید آن را وارد کنید [subscribe] مستقیماً در پست تگ کنید:

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

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

مرحله 4 – پارامترها را به Shortcode اضافه کنید

شما می توانید تطبیق دهید ‘اشتراک در’ کد کوتاه برای عملکرد اضافی برای نمایش سایر پیوندهای رسانه های اجتماعی. می توانید این کار را با افزودن یک پارامتر برای تغییر URL انجام دهید.

به اضافه کردن ویژگی های هندلینگ، باید در را باز کنید custom-shortcodes.php فایل و کد زیر را اضافه کنید:

function subscribe_link_att($atts) {
    $default = array(
        'link' => '#',
    );
    $a = shortcode_atts($default, $atts);
    return 'Follow us روی '.$a['link'];
}
add_shortcode('subscribe', 'subscribe_link_att');

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

اضافه شدن از تابع shortcode_atts(). ویژگی های کاربر را با هر ویژگی شناخته شده ترکیب می کند و هر داده از دست رفته به مقادیر پیش فرض خود تغییر می کند. وقتی آماده شدید، تغییرات خود را ذخیره کرده و فایل را ببندید.

مرحله 5 – پارامترها را تست کنید

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

[subscribe link='https://www.facebook.com/Hostinger/']
[subscribe link='https://twitter.com/Hostinger?s=20/']

این نتیجه زیر را ایجاد خواهد کرد روی قسمت جلویی:

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

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

مرحله 6 – یک کد کوتاه محصور ایجاد کنید

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

ابتدا باید اضافه کنید محتوای $ = پوچ، که این تابع را به عنوان یک کد کوتاه محصور کننده شناسایی می کند. سپس می توانید وردپرس do_shortcode را اضافه کنید، که محتوا را برای کدهای کوتاه جستجو می کند.

در داخل custom-shortcodes.php فایل، کد کوتاه جدید را اضافه کنید:

function subscribe_link_att($atts, $content = null) {
    $default = array(
        'link' => '#',
    );
    $a = shortcode_atts($default, $atts);
    $content = do_shortcode($content);

    return 'Follow us روی <a href="'.($a['link']).'" style="color: blue">'.$content.'</a>';

}
add_shortcode('subscribe', 'subscribe_link_att');

وقتی آماده شدید، custom-shortcode.php فایل باید به شکل زیر باشد:

کد قبلی یک اضافه نیز دارد “سبک” ویژگی، که متن لنگر را به رنگ آبی تغییر می دهد. فراموش نکنید که پس از پایان کار، تغییرات خود را ذخیره کنید!

مرحله 7 – یک کد کوتاه محصور کننده به وب سایت اضافه کنید

اکنون می توانید کد کوتاه خود را در ویرایشگر بلاک وردپرس وارد کنید تا نتیجه نهایی را ببینید:

همانطور که متوجه شدید، می توانید به راحتی آدرس صفحات رسانه های اجتماعی خود و متن لنگر نمایش داده شده به بازدید کننده را با استفاده از این کد کوتاه محصور کننده تغییر دهید. در این مورد، ما انتخاب کرده ایم “فیس بوک” و “توییتر”:

خودشه! اکنون یک کد کوتاه سفارشی برای پیوندهای اشتراک در صفحات و پست های خود ایجاد کرده اید. توجه داشته باشید که تمام مراحل ذکر شده را می توان برای ساخت انواع عناصر مختلف با استفاده از وردپرس تغییر داد. کدهای کوتاه تابع.

نتیجه

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

در این پست، ما یاد گرفتیم که چگونه کد کوتاه خود را در وردپرس در هفت مرحله آسان ایجاد کنیم:

1. یک فایل تم جدید ایجاد کنید
2. تابع کد کوتاه را ایجاد کنید
3. کد کوتاه خود بسته شدن را به وب سایت اضافه کنید
4. پارامترها را به کد کوتاه اضافه کنید
5. پارامترها را تست کنید
6. یک کد کوتاه محصور ایجاد کنید
7. کد کوتاه ضمیمه را به وب سایت اضافه کنید

سوالات بیشتری در مورد روش ایجاد کد کوتاه وردپرس خود یا برنامه ریزی برای بهینه سازی عملکرد سایت خود با میزبانی وردپرس دارید؟ در بخش نظرات زیر به ما اطلاع دهید!

ایجاد یک کد کوتاه در سوالات متداول وردپرس

اکنون که می دانید چگونه یک کد کوتاه ایجاد کنید، در اینجا برخی از سوالات متداول در مورد این موضوع وجود دارد.