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

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

Shortcake چیست؟

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

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

[url button = "http://example.com" title = "بیشتر بیاموزید" color = "purple" target = "newwindow"]

اینجا جایی است که Shortcake وارد می شود ، به این معنی که به شما امکان می دهد کد کوتاه خود را بهتر مدیریت کنید.

روغنی-نانوایی-پلاگین

مراحل اول

این آموزش برای کاربرانی است که تازه با توسعه وردپرس آشنا شده اند. کاربرانی که دوست دارند خود را شخصی سازی کنند تم همچنین این آموزش برای شما جالب خواهد بود.

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

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

add_shortcode ('cta-button'، 'cta_button_shortcode')؛ عملکرد cta_button_shortcode ($ atts) {اکسترکت (کد کوتاه_اتس (آرایه ('عنوان' => 'عنوان' ، 'url' => '') ، $ atts))؛ بازگشت ' . عنوان $ ' '؛ }

برای دکمه نیز احتمالاً به کد CSS نیاز دارید.

.cta-button {padding: 10px؛ فونت اندازه: 18px؛ مرز: 1px جامد #FFF؛ مرز-شعاع: 7px؛ رنگ: #FFF؛ رنگ پس زمینه: #50A7EC؛ }

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

[عنوان دکمه cta = »اکنون بارگیری کنید» url = »http://example.com»]

اکنون شما یک کد کوتاه دارید که پارامترها را می پذیرد ، اکنون ما یک رابط برای آن ایجاد خواهیم کرد.

نحوه ثبت نام یک رابط برای کوتاه با ShortCacke

Shortcake's API به شما امکان می دهد کدهای کوتاه را در رابط کاربری ثبت کنید. شما نیاز داریدنوشتن کد کوتاه چه ویژگی هایی را می پذیرد، نوع فیلدها و فرمت پست UI (رابط کاربری) را نمایش می دهد.

در اینجا مثالی از قطعه کد وجود دارد که می توانید با استفاده از آن کد کوتاه را در رابط کاربری Shortcake ثبت کنید.

shortcode_ui_register_for_shortcode (/ ** کد کوتاه شما * / 'cta-button' ، / ** برچسب کد کوتاه و نماد آن * / آرایه (/ ** برچسب مورد نیاز است. * / 'label' => 'افزودن دکمه' ، / ** Icone. Src یا dashicons- $ icon. * / 'ListItemImage' => 'dashicons-lightbulb'، / ** ویژگی های کد کوتاه * / 'attrs' => آرایه (/ ** * همه زمینه هایی که مقادیر را قبول می کنند کاربران آرایه خود را به شرح زیر تعریف می کنند. * این کد کوتاه دو پارامتر url و عنوان را می پذیرد * ما UI را برای عنوان تعریف خواهیم کرد. * / array (/ ** این برچسب در رابط کاربری نمایش داده می شود * / 'label' => 'عنوان' ، / ** این صفتی است که برای کد کوتاه استفاده می شود * / 'attr' => 'عنوان' ، / ** نوع فیلد را تعریف کنید ، پشتیبانی می شوند: متن ، کادر تأیید ، متن منطقه ، رادیو ، انتخاب ، ایمیل ، آدرس اینترنتی ، شماره و تاریخ. * / 'type' => 'متن' ، / ** افزودن توضیحات 'description' => 'توضیحات' ،) ، / ** ما بیایید اکنون یک UI برای قسمت پیوند تعریف کنیم * / array ('label' => 'URL'، 'attr' => 'url'، 'type' = > 'text'، 'description' => 'URL کامل'،)،)،)، / ** قالب پستی که برای نمایش UI * / 'post_type' => آرایه ('post'، 'page') ) ،)) ؛

این تمام کاری است که شما برای نمایش کد کوتاه در UI باید انجام دهید. اکنون می توانید ویرایش مقاله را شروع کنید تا بتوانید از کد کوتاه استفاده کنید. تمام کاری که شما باید انجام دهید این است که بر روی دکمه add media کلیک کنید. بخش جدیدی با عنوان " عنصر پست را وارد کنید" با کلیک بر روی آن ، می توانید کد کوتاه های مختلفی را که ایجاد کرده اید مشاهده کنید.

insertpostelement

با کلیک بر روی نماد ، رابط کاربری را مشاهده می کنید که به شما امکان می دهد کد کوتاه را سفارشی کنید.

shortcodeui

چگونه یک کد کوتاه با چندین فیلد اضافه کنیم

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

ابتدا کد کوتاه را اضافه می کنیم. در اصل همان کدی است که در بالا ذکر شده است ، تنها استثنا این است که ما می خواهیم یک قسمت برای رنگ اضافه کنیم.

add_shortcode ('mybutton'، 'my_button_shortcode')؛ تابع my_button_shortcode ($ atts) {extract (کد کوتاه_اتس (آرایه ('رنگ' => 'آبی' ، 'عنوان' => 'عنوان' ، 'url' => '') ، $ atts))؛ بازگشت ' . عنوان $ " " }

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

.mybutton {padding: 10px؛ فونت اندازه: 18px؛ مرز: 1px جامد #FFF؛ مرز-شعاع: 7px؛ رنگ: #FFF؛ } .blue-button {background-color: #50A7EC؛ } orange-button {background-color: #FF7B00؛ } green-button {background-color: #29B577؛ }

در اینجا ظاهر این دکمه چیست.

رنگارنگ-دکمه-کوتاه

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

shortcode_ui_register_for_shortcode (/ ** دسته کد کوتاه شما * / 'mybutton' ، / ** برچسب و نماد کد کوتاه * / array (/ ** برچسب رابط کاربری کد کوتاه شما. این قسمت لازم است. * / 'label' => 'افزودن) یک دکمه رنگارنگ '، / ** نماد یا پیوست تصویر برای کد کوتاه. اختیاری. src یا dashicons- $ icon. * /' listItemImage '=>' dashicons-flag '، / ** ویژگی های کد کوتاه * /' attrs '=> آرایه (/ ** * هر صفتی که ورودی کاربر را بپذیرد ، آرایه خود را مانند این تعریف خواهد کرد * کد کوتاه ما دو پارامتر یا ویژگی ، عنوان و URL را می پذیرد * بیایید ابتدا UI را برای قسمت عنوان تعریف کنیم. * / آرایه (/ ** این برچسب در رابط کاربری ظاهر خواهد شد * / 'label' => 'عنوان' ، / ** این اصلی است که در کد استفاده شده برای کد کوتاه استفاده می شود * / 'attr' => 'عنوان' ، / ** نوع ورودی را مشخص کنید. انواع پشتیبانی شده متن ، کادر تأیید ، منطقه متن ، رادیو ، انتخاب ، ایمیل ، آدرس اینترنتی ، شماره و تاریخ است. * / 'Type' => 'text'، / ** توضیح مفید برای کاربران اضافه کنید * / 'description' => ' لطفاً متن دکمه را وارد کنید '،)، / ** اکنون ما هستیم UI را برای قسمت URL تعریف می کند * / array ('label' => 'URL'، 'attr' => 'url'، 'type' => 'text'، 'description' => 'URL کامل'،)، / ** سرانجام ما UI را برای انتخاب رنگ تعریف خواهیم کرد * / array ('label' => 'Color'، 'attr' => 'color'، / ** ما به جای متن از قسمت انتخاب استفاده خواهیم کرد * / 'type' => 'انتخاب' ، 'گزینه ها' => آرایه ('آبی' => 'آبی' ، 'نارنجی' => 'نارنجی' ، 'سبز' => 'سبز' ،) ،) ،) ، / ** شما می تواند نوع پست را کد کوتاه UI نشان دهد * / 'post_type' => آرایه ('ارسال' ، 'صفحه') ،)) ؛

همین! اکنون هنگام ویرایش یا نوشتن یک پست ، می توانید کد کوتاه جدید را که هنوز در همان بخش از پنجره رسانه است ، مشاهده کنید.

postelements

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

colorui

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