نحوه افزودن رابط کاربری کد کوتاه در وردپرس با شیرینی پزی

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

Shortcake چیست؟ h4>

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

به عنوان مثال ، در یک تم معمولی وردپرس ، اگر کد کوتاه برای وارد کردن یک دکمه وجود دارد ، کاربر احتمالاً باید حداقل دو تا پنج پارامتر را اضافه کند. مانند این:

[themebutton url = ”http://example.com” title = ”اکنون بارگیری کنید” color = ”purple” target = ”newwindow”]

Shortcake یک افزونه وردپرس و یک ویژگی پیشنهادی آینده وردپرس است. هدف آن حل این مشکل با ارائه یک رابط کاربری برای وارد کردن این مقادیر است. با این کار استفاده از کد کوتاه بسیار آسان تر می شود.

Shortcake Bakery Plugin

شروع کار h4>

این آموزش برای کاربرانی است که در توسعه وردپرس تازه کار هستند. کاربران سطح مبتدی که دوست دارند مضامین وردپرس خود را تغییر دهند نیز این آموزش را مفید می دانند.

با گفتن این حرف ، بیایید شروع کنیم.

اولین کاری که باید انجام دهید نصب و فعال سازی میانبر (میانبر کد کوتاه) .

اکنون به یک کد کوتاه که چند پارامتر از آن را بپذیرد نیاز دارید. ورودی کاربر. اگر به کمی تازه سازی نیاز دارید ، در اینجا نحوه افزودن کد کوتاه در وردپرس .

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

add_shortcode ('cta-button'، 'cta_button_shortcode')؛

عملکرد cta_button_shortcode ($ atts) {
       عصاره (کد کوتاه_اتس (
               آرایه(
                       'title' => 'عنوان' ،
                       'url' => "
               ) ،
               $ atts
       ))
       Return ' '. عنوان $ ' '؛
}

برای سبک کردن دکمه خود باید برخی CSS را نیز اضافه کنید. می توانید از این CSS در صفحه سبک تم خود استفاده کنید.


دکمه .cta {
بالشتک: 10px؛
اندازه قلم: 18px؛
حاشیه: 1px جامد #FFF؛
شعاع مرز: 7px؛
رنگ: #FFF؛
background-color: # 50A7EC؛
}

اینگونه یک کاربر از کد کوتاه در پست ها و صفحات خود استفاده خواهد کرد:

[cta-button title = "اکنون بارگیری کنید" url = "http://example.com"]

حالا که کد کوتاه داریم که پارامترها را می پذیرد ، بیایید یک UI برای آن ایجاد کنیم.

ثبت رابط کاربری کد کوتاه خود با کیک کوتاه h4>

Shortcake API به شما امکان می دهد رابط کاربری کد کوتاه خود را ثبت کنید. شما باید توصیف کنید که کد کوتاه شما چه ویژگی هایی را می پذیرد ، انواع فیلدهای ورودی و کدام نوع پست ها رابط کاربری کوتاه را نشان می دهد.

در اینجا یک نمونه کد کد موجود است که ما برای ثبت UI کد کوتاه خود استفاده خواهیم کرد. ما سعی کرده ایم هر مرحله را با نظرات درون خطی توضیح دهیم. می توانید این مورد را در فایل توابع یا در a افزونه اختصاصی سایت .

ثبت نام کوتاه برای کد کوتاه (

/ ** دسته کوتاه شما * /
'cta-button' ،

/ ** برچسب و نماد کد کوتاه * /
آرایه(

/ ** برچسب رابط کاربری کد کوتاه خود را. این قسمت الزامی است. * /
'label' => 'افزودن دکمه' ،

/ ** نماد یا پیوست تصویر برای کد کوتاه. اختیاری. src یا dashicons- نماد $. * /
'listItemImage' => 'dashicons-lightbulb' ،

/ ** ویژگی های کد کوتاه * /
'attrs' => آرایه (

/ **
* هر صفتی که ورودی کاربر را بپذیرد آرایه خاص خود را دارد که به این صورت تعریف شده است
* کد کوتاه ما دو پارامتر یا ویژگی عنوان و URL را می پذیرد
* بیایید ابتدا UI را برای قسمت عنوان تعریف کنیم.
* /

آرایه(

/ ** این برچسب در رابط کاربری ظاهر خواهد شد * /
'label' => 'عنوان' ،

/ ** این اصلی است که در کد استفاده شده برای کد کوتاه استفاده می شود * /
'attr' => 'عنوان' ،

/ ** نوع ورودی را تعریف کنید. انواع پشتیبانی شده متن ، کادر تأیید ، منطقه متن ، رادیو ، انتخاب ، ایمیل ، آدرس اینترنتی ، شماره و تاریخ هستند. * /
'type' => 'متن' ،

/ ** توضیح مفیدی برای کاربران اضافه کنید
'description' => 'لطفا متن دکمه را وارد کنید'،
) ،

/ ** حال ما UI را برای قسمت URL تعریف خواهیم کرد * /

آرایه(
'label' => 'URL' ،
'attr' => 'آدرس اینترنتی' ،
'type' => 'متن' ،
'description' => 'URL کامل' ،
) ،
) ،
) ،

/ ** می توانید انتخاب کنید کدام نوع پست UI کد کوتاه نشان داده شود * /
'post_type' => آرایه ('ارسال' ، 'صفحه') ،
)
)

این همه ، اکنون می توانید با ویرایش یک پست ، رابط کاربری کد کوتاه را در عمل مشاهده کنید. کافی است بر روی دکمه Add Media بالای ویرایشگر پست کلیک کنید. با این کار بارگذارنده رسانه ظاهر می شود و در آنجا متوجه خواهید شد که یک مورد جدید “درج عنصر پست” در ستون سمت چپ وجود دارد. با کلیک بر روی آن دکمه ای برای درج کد شما نمایش داده می شود.

Inserting your shortcode in a post or page

با کلیک بر روی تصویر کوچک حاوی نماد لامپ و برچسب کیک کوتاه ، UI کد کوتاه به شما نشان داده می شود.

User interface for a simple shortcode

افزودن کد کوتاه با چند ورودی h4>

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

ابتدا کد کوتاه را اضافه می کنیم. تقریباً همان کد کوتاه است ، با این تفاوت که اکنون ورودی کاربر را برای رنگ استثنا می کند.


add_shortcode ('mybutton'، 'my_button_shortcode')؛

عملکرد my_button_shortcode ($ atts) {
       عصاره (کد کوتاه_اتس (
               آرایه(
                       'color' => 'آبی' ،
                       'title' => 'عنوان' ،
                       'url' => "
               ) ،
               $ atts
       ))
       Return ' . عنوان $ ' '؛
}

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

دکمه .my
    بالشتک: 10px؛
    اندازه قلم: 18px؛
    حاشیه: 1px جامد #FFF؛
    شعاع مرز: 7px؛
    رنگ: #FFF؛
}

دکمه آبی
    background-color: # 50A7EC؛
}
دکمه نارنجی {
background-color: # FF7B00؛
}

دکمه سبز {
background-color: # 29B577؛
}

شکل دکمه ها به این شکل است:

Call to action buttons created with shortcode

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

ثبت نام کوتاه برای کد کوتاه (

/ ** دسته کوتاه شما * /
"دکمه دکمه" ،

/ ** برچسب و نماد کد کوتاه * /
آرایه(

/ ** برچسب رابط کاربری کد کوتاه خود را. این قسمت الزامی است. * /
'label' => 'یک دکمه رنگارنگ اضافه کنید'،

/ ** نماد یا پیوست تصویر برای کد کوتاه. اختیاری. src یا dashicons- نماد $. * /
'listItemImage' => 'dashicons-flag' ،

/ ** ویژگی های کد کوتاه * /
'attrs' => آرایه (

/ **
* هر صفتی که ورودی کاربر را بپذیرد آرایه خاص خود را دارد که به این صورت تعریف شده است
* کد کوتاه ما دو پارامتر یا ویژگی عنوان و URL را می پذیرد
* بیایید ابتدا UI را برای قسمت عنوان تعریف کنیم.
* /

آرایه(

/ ** این برچسب در رابط کاربری ظاهر خواهد شد * /
'label' => 'عنوان' ،

/ ** این اصلی است که در کد استفاده شده برای کد کوتاه استفاده می شود * /
'attr' => 'عنوان' ،

/ ** نوع ورودی را تعریف کنید. انواع پشتیبانی شده متن ، کادر تأیید ، منطقه متن ، رادیو ، انتخاب ، ایمیل ، آدرس اینترنتی ، شماره و تاریخ هستند. * /
'type' => 'متن' ،

/ ** توضیح مفیدی برای کاربران اضافه کنید * /
'description' => 'لطفا متن دکمه را وارد کنید'،
) ،

/ ** حال ما UI را برای قسمت URL تعریف خواهیم کرد * /

آرایه(
'label' => 'URL' ،
'attr' => 'آدرس اینترنتی' ،
'type' => 'متن' ،
'description' => 'URL کامل' ،
) ،

/ ** سرانجام UI را برای انتخاب رنگ تعریف خواهیم کرد * /
آرایه(
'label' => 'رنگ' ،
'attr' => 'رنگ' ،

/ ** ما به جای متن از قسمت انتخابی استفاده خواهیم کرد * /
'type' => 'انتخاب' ،
    'options' => آرایه (
        'blue' => 'آبی' ،
        'orange' => 'نارنجی' ،
        'green' => 'سبز' ،
    ) ،
) ،

) ،

/ ** می توانید انتخاب کنید کدام نوع پست UI کد کوتاه نشان داده شود * /
'post_type' => آرایه ('ارسال' ، 'صفحه') ،
)
)

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

Selecting post element or shortcode to insert

با کلیک بر روی کد کوتاه تازه ایجاد شده ، UI کد کوتاه ظاهر می شود ، جایی که می توانید مقادیر را به راحتی وارد کنید.

Shortcode UI with a select field

می توانید کدهای استفاده شده در این آموزش را به عنوان یک افزونه بارگیری کنید.

آموزش wpb-shortcake

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

امیدواریم این مقاله به شما کمک کند تا یاد بگیرید چگونه می توانید رابط کاربری برای کد کوتاه در WordPress with Shortcake اضافه کنید. همچنین ممکن است بخواهید نگاهی به اینها بیندازید 7 نکته اساسی برای استفاده از کد کوتاه در وردپرس .

اگر این مقاله را دوست داشتید ، لطفاً در کانال YouTube مشترک شوید برای آموزش های ویدئویی وردپرس. همچنین می توانید ما را در Twitter و فیس بوک .

منبع:
https://www.wpbeginner.com/wp-tutorials/how-to-add-a-shortcodes-user-interface-in-wordpress-with-shortcake/.

دیدگاهتان را بنویسید