آموزش افزونه (Shortcake (Shortcode UI

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

آموزش افزونه (Shortcake (Shortcode UI

احتمالا کسانی که توسعه دهنده صفحات وب هستند میدانند که کد های کوتاه در وردپرس چه قدر مهم هستند. اما چون این کد ها پیچیده هستند در بیشتر موارد افراد تازه کار از استفاده از آن ها فرار می کنند. اما همین کد های کوتاه می توانند باعث شوند که پست ها و صفحات شما منعطف تر و زیبا تر باشند. پس لازم است که برای استفاده از این ها راه حلی پیدا کنیم.

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

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

 

قدم اول این است که افزونه وردپرس را در پنل وردپرس نصب و فعال کنید. بعد از این کار در پوشه قالبی که میخواهید این رابط کاربری برای آن درست شود قالب کد های این رابط کاربری را در فایل Functions.php بگذارید. یک نکته ای که در این قسمت وجود دارد این است که میتوانید این کد ها را در افزونه اختصاصی سایتتان هم اضافه کنید.

ثبت رابط کاربری کدهای کوتاه در فایل functions.php

API این افزونه به شما اجازه می دهد که رابط کاربری برای کد های کوتاه را ثبت کنید. شما باید مقادیر کد های کوتاه و نوع زمینه های ورودی و نوع پست ها برای نمایش در رابط کاربری کد های کوتاه را مشخص کنید. این کد ها بیشتر برای آموزش استفاده می شوند و برای درک بیشتر شما گذاشته شده اند. البته این کد ها در بعضی از جاها فارسی نشده اند که به این دلیل است که ترجمه ی این کد ها باعث اشتباه بیشتری می شود.

<pre dir="ltr">
shortcode_ui_register_for_shortcode(
 
<span style="color: #0000ff;">/** Your shortcode handle */</span>
'cta-button',
 
<span style="color: #0000ff;">/** آیکن و لیبل کد کوتاه شما */</span>
array(
 
<span style="color: #0000ff;">/**لیبل برای کد کوتاه شما.این قسمت الزامی است.*/</span>
'label' =&gt; 'Add Button',
 
<span style="color: #0000ff;">/**تصویر یا آیکن شورت کد.این گزینه اجباری نیست. src or dashicons-$icon.  */</span>
'listItemImage' =&gt; 'dashicons-lightbulb',
 
<span style="color: #0000ff;">/** مقادیر کد کوتاه*/</span>
'attrs'          =&gt; array(
 
<span style="color: #0000ff;">/**
* Each attribute that accepts user input will have its own array defined like this
* Our shortcode accepts two parameters or attributes, title and URL
* Lets first define the UI for title field. 
*/</span>
 
array(
 
<span style="color: #0000ff;">/** این لیبل در رابط کاربری به نمایش در خواهد امد. */</span>
'label'        =&gt; 'Title',
 
<span style="color: #0000ff;">/** This is the actual attr used in the code used for shortcode */</span>
'attr'         =&gt; 'title',
 
<span style="color: #0000ff;">/** Define input type. Supported types are text, checkbox, textarea, radio, select, email, url, number, and date. */</span>
'type'         =&gt; 'text',
 
<span style="color: #0000ff;">/*متن کمکی برای هدایت کاربران */
</span>'description'  =&gt; 'Please enter the button text',
),
 
<span style="color: #0000ff;">/** ما در این قسمت برای زمینه آدرس رابط کاربری تعریف کرده ایم.*/
</span>
array(
'label'        =&gt; 'URL',
'attr'         =&gt; 'url',
'type'         =&gt; 'text',
'description'  =&gt; 'Full URL',
),
),
),
 
<span style="color: #0000ff;">/** شما می توانید انتخاب کنید که این رابط کاربری کجا نمایش داده شود. */
</span>'post_type'     =&gt; array( 'post', 'page' ), 
)
);

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

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

دانلود افزونه (Shortcake (Shortcode UI

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

منبع : بیگ تم ارائه دهنده قالب وردپرس وبلاگی – هک وردپرس