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

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

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

همه ما به دنبال راه راحت تر و کوتاه تری هستیم . اگر قرار باشد فرمی را بسازید یا از امکانات یک افزونه در سایت استفاده کنید به چندین خط کد نیاز دارید البته هر چه این کد ها کوتاه تر باشند بهتر می باشند به همین خاطر شورت کد ها بهترین نوع کد ها هستند shortcode ها به صورت همان چند خط کد عمل می کنند که در جای مناسب قرار داده می شوند . بسیاری از افراد که با وردپرس کار می کنند معتقدند شورت کد وردپرس مربوط به یک قطعه کد ساده به شکل echo do_shortcode(“[shortcode]”); است .

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

چگونگی استفاده از کد های کوتاه

شما از شورت کد ها یا همان کد های کوتاه می توانید در برگه و مطالب وردپرس به شکل مستقیم استفاده کنید البته خود وردپرس از کد کوتاه برای ایجاد برخی قابلیت ها مانند : قرار دادن صوت و ویدیو یا گالری تصاویر در مطالب و … استفاده می کند . در واقع شما اگر شورت کد ها را در اختیار داشته باشید می توانید در جاهای مورد نظر در سایت از آنها استفاده کنید .

معرفی کدهای کوتاه وردپرس

کد های کوتاهی که خود وردپرس از آنها استفاده می کند به شرح زیر است :

  1. کد کوتاه پخش موسیقی یا فایل صوتی [ audio ]
  2. شورت کد پخش فیلم یا ویدیو [ video ]
  3. کد کوتاه ساخت لیست پخش موسیقی یا فیلم [ playlist ]
  4. شورت کد ساخت گالری عکس و تصاویر [ gallery ]
  5. کد کوتاه embed قرار دادن فیلمهای یوتیوب و …
  6. قرار دادن توضیحات کپشن برای تصاویر توسط [ caption ]
  7. و …

 

 

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

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

به طور مثال : فرض کنید می خواهید شورت کد دلخواهی را با یک پس زمینه و استایل متفاوت نسبت به بقیه محتوای پست ایجاد کنید و نام آن را باکس دانلود با نام Downloadbox و محتوای داخل آن را یک طرح دهید . برای این کار باید ابتدا شورت کد خود را بسازید با قطعه کد زیر ( کد زیر را در functions.php قرار بدهید ) .


function MyShortCode( $atts, $content = "" ) { return " لینک دانلود $content "; } add_shortcode( 'downloadbox', 'MyShortCode' );

در این مرحله شما اگر در ویرایش گر دیداری خود شورت کد [downloadbox] را قرار دهید  و در بین آن قطعه کد را وارد کنید ، خود وردپرس به سراغ فانکشن شما خواهد رفت و قبل از آن کلمه لینک دانلود را چاپ می کند .  پس شما باید لینک های دانلود خود را در بین [downloadbox] [/downloadbox] قرار دهید البته شما می توانید به جای لینک دانلود یک المان html قرار دهید به اسمه downloadbox پس کدی که در فانکش قرار می دهید به این شکل می شود .

در کد زیر یک شورت کد با نام Downloadbox ساخته شده است و از زمانی که شورت کد باز تا زمانی که بسته می شود ، متغیر content محتوای شماست  .


function MyShortCode( $atts, $content = "" ) { return " <div class="downloadbox"> $content </div> "; } add_shortcode( 'downloadbox', 'MyShortCode' );

حال در این بخش شما می توانید به فایل style.css خود کلاس .downloadbox را اضافه کنید و طرح مورد نظر خود را بر روی آن اجرایی کنید . به طور مثال کد زیر یک باکس ساده ی دانلود برای شما درست می کند.

</p>
<p class="anguage-php">.downloadbox { padding: 25px 25px 15px 25px; border: 2px dashed #e1e1e1; background: #f6f8f9; } .downloadbox a { display: block; margin: 0px 0px 10px; background: #666; color: white; border-radius: 4px; }</p>
<p class="anguage-php">

اکنون شما اگر لینک های دانلود خود را بین شورت کد ( [downloadbox] محل قرار گیری محتوا [/downloadbox] ) قرار دهید با یک شکل منحصر به فرد برای شما نمایش داده خواهد شد .

استفاده از shortcode در قالب وردپرس

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


<?php echo do_shortcode("[shortcode]"); ?>

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


<?php echo do_shortcode("[contact-form-7 id="۴" title="فرم تماس"]"); ?>

افزونه قرار دادن شورت کد وردپرس در ابزارک

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

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

راه دیگر فراخوانی کد کوتاه در ابزارک های وردپرس استفاده از دستور php زیر در فایل فانکشن functions.php قالب وردپرس است.


add_filter('widget_text','do_shortcode');

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

آموزش ساخت شورت کد(shortcode)

برای ساخت شورت کد مورد نظر خود باید وارد فایل functions سایت خود شده و در این فایل کد های php  مورد نظر خود را قرار دهید توجه داشته باشید که شورت کدها همواره برای محتویات و توابعی که استفاده بسیاری می شوند ساخته می شوند.

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


add_shortcode('code۱','code۱_func');
function code۱_func($atts,$content=null)
{
return $atts['var'];
}

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


[code۱ var="test text for atts"]

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

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

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

<div class="crayon-pre">
<div id="crayon-5a488270e0c43357596096-1" class="crayon-line"><span class="crayon-t">function</span> <span class="crayon-e">sample_shortcode</span><span class="crayon-sy">(</span> <span class="crayon-v">$atts</span> <span class="crayon-sy">)</span> <span class="crayon-sy">{</span></div>
<div id="crayon-5a488270e0c43357596096-2" class="crayon-line crayon-striped-line"><span class="crayon-h">    </span><span class="crayon-e">extract</span><span class="crayon-sy">(</span> <span class="crayon-e">shortcode_atts</span><span class="crayon-sy">(</span> <span class="crayon-t">array</span><span class="crayon-sy">(</span></div>
<div id="crayon-5a488270e0c43357596096-3" class="crayon-line"><span class="crayon-h">        </span><span class="crayon-s">'subtype'</span> <span class="crayon-o">=</span><span class="crayon-o">></span> <span class="crayon-s">'Elnaz'</span><span class="crayon-sy">,</span></div>
<div id="crayon-5a488270e0c43357596096-4" class="crayon-line crayon-striped-line"><span class="crayon-h">        </span><span class="crayon-s">'subtypeurl'</span> <span class="crayon-o">=</span><span class="crayon-o">></span> <span class="crayon-s">'www.wpschool.ir'</span><span class="crayon-sy">,</span></div>
<div id="crayon-5a488270e0c43357596096-5" class="crayon-line"><span class="crayon-h">    </span><span class="crayon-sy">)</span><span class="crayon-sy">,</span> <span class="crayon-v">$atts</span><span class="crayon-sy">,</span> <span class="crayon-s">'multilink'</span> <span class="crayon-sy">)</span> <span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-5a488270e0c43357596096-7" class="crayon-line"><span class="crayon-h">    </span><span class="crayon-k ">return</span> <span class="crayon-e">sprtinf</span><span class="crayon-sy">(</span> <span class="crayon-s">'سلام این یک نمونه نقل قول نوشته شده <a href='</span><span class="crayon-o">%</span><span class="crayon-cn">1</span><span class="crayon-v">$s</span><span class="crayon-s">'>توسط %۲$s</a> است. '</span><span class="crayon-sy">,</span></div>
<div id="crayon-5a488270e0c43357596096-8" class="crayon-line crayon-striped-line"><span class="crayon-h">        </span><span class="crayon-e">esc_url</span><span class="crayon-sy">(</span> <span class="crayon-v">$subtypeurl</span> <span class="crayon-sy">)</span><span class="crayon-sy">,</span></div>
<div id="crayon-5a488270e0c43357596096-9" class="crayon-line"><span class="crayon-h">        </span><span class="crayon-e">esc_html</span><span class="crayon-sy">(</span> <span class="crayon-v">$subtype</span> <span class="crayon-sy">)</span></div>
<div id="crayon-5a488270e0c43357596096-10" class="crayon-line crayon-striped-line"><span class="crayon-h">    </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-5a488270e0c43357596096-11" class="crayon-line"><span class="crayon-sy">}</span></div>
<div id="crayon-5a488270e0c43357596096-12" class="crayon-line crayon-striped-line"><span class="crayon-e">add_shortcode</span><span class="crayon-sy">(</span> <span class="crayon-s">'subscribe'</span><span class="crayon-sy">,</span> <span class="crayon-s">'sample_shortcodea'</span> <span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div>
در کد بالا متغیر $atts به عنوان آرایه صفات نوشته شده است و این امکانات و صفات جدید در آن ذخیره خواهد شد. سپس با استفاده از تابع shortcode_atts مقادیر آرایه را وارد می کنید .
subtype و subtypeurl مقادیر نام و لینک پیشفرض را تعیین می کنید این صفت ها در شورت کد نمایش داده می شوند .

همچنین می توانید برای تغییر نام و لینک پیشفرض به صورت زیر عمل کنید:

<div class="crayon-pre">
<div id="crayon-5a488270e0c47520243210-1" class="crayon-line"><span class="crayon-sy">[</span><span class="crayon-v">subscribe</span><span class="crayon-sy">]</span></div>
<div id="crayon-5a488270e0c47520243210-2" class="crayon-line crayon-striped-line"><span class="crayon-sy">[</span><span class="crayon-e">subscribe </span><span class="crayon-v">subtype</span><span class="crayon-o">=</span>نام<span class="crayon-sy">;</span> <span class="crayon-v">subtypeurl</span><span class="crayon-o">=</span>لینک<span class="crayon-sy">;</span><span class="crayon-sy">]</span></div>
<div>

آموزش استفاده از کدهای کوتاه در ووکامرس

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

افزونه WooCommerce Shortcodes

شما در ابتدا باید این افزونه جانبی ووکامرس را نصب و فعال سازی کنید سپس خواهید دید امکان استفاده از شورت کد های مورد نیاز در فروشگاه در قسمت ویرایشگر وردپرس ایجاد خواهد شد . حال وارد قسمت برگه ها شوید و یک برگه را ویرایش و یا ایجاد کنید خواهید دید یک گزینه جدید با عنوان woocommerce در قسمت ابزار ویرایشگر ظاهر شده است .
آموزش استفاده از شورت کد در وردپرس
شما از هر یک از این شورت کد ها می توانید استفاده نمایید به طور مثال ما می خواهیم در فروشگاه خود بخش وبلاگی را ایجاد کرده و در آ پس برای این کار نیاز به همین افزونه شورت کد استن توضیحات چند نوع محصول را وارد کرده و برای هر محصول یک دکمه خرید ایجاد کنیم پس برای این کار نیاز به همین افزونه شورت کد است .
برای این کار باید از زیر منوی woocommerce و گزینه ی Price/Card button استفاده کنید .
آموزش استفاده از شورت کد در وردپرس
بعد از انجام این کار کادر دیگری برای شما باز خواهد شد که در آن باید مواردی را پر کنید این موارد ورودی هستند که باید وارد شورت کد شوند برای مثال ID در این بخش میتوانید آیدی محصول موردنظر خود را وارد کنید.
آموزش استفاده از شورت کد در وردپرس
برای رسیدن به آیدی محصولات باید وارد بخش محصولات خود شده و در آنجا آیدی محصولات خود را بردارید برای پیدا کردن ID محصول اشاره گر ماوس را روی محصول نگه دارید تا آیدی ظاهر شود .
آیدی را در قسمت ساخت شورت کد وارد کنید و قبول را بزنید تا شورت کد ایجاد شود
آموزش استفاده از شورت کد در وردپرس
خب پس از این عمل شورت کد ساخته می شود و شما می توانید محصول خود را با توجه به نام و توضیحات مشاهده فرمایید . یک فعالیت لیستی در قسمت woocommerce وجود دارد که عنوان آن list است،با استفاد از این گزینه می توانید دسته ای از محصولات فروشگاه خود را به نمایش بگزارید و همچنین قادر هستید محصولات با صفت های مشخصی را هم در این بخش مشخص و وارد کنید.
آموزش استفاده از شورت کد در وردپرس
توجه داشته باشید گزینه های بسیاری در اختیار شما است که می توانید از هر یک از آنها استفاده کنید و امکانات و ویژگی های خاصی را برای فروشگاه خود ایجاد نمایید .
شورت کد ها قابلیت جالبی هستند که میتوانید یک سری از عملیات برنامه نویسی شده را تنها با یک کد کوتاه انجام دهید اینکار اگر یک بار برای همیشه قرار است انجام شود پیشنهاد نمیشود از کد کوتاه استفاده کنید اگر قرار است تکرار شود چرا یا اینکه نیاز دارید در جایی مانند ابزارک ها یا برگه ها که امکان برنامه نویسی مستقیم به صورت پیشفرض وجود ندارد از کد های کوتاه استفاده کنید.
اصلا خوب نبودمیتونه بهتر باشهقابل قبولهخوب بودعالی بود (شما اولین نفر باشید!)

  • دیدگاهتان فقط و فقط در رابطه با همین مطلب باشد.
  • لطفا از تایپ فینگلیش بپرهیزید. در غیر اینصورت دیدگاه شما بررسی نخواهد شد.
  • هدفتان از ارسال دیدگاه تبلیغ یا بک لینک نباشد. در غیر اینصورت دیدگاه حذف می شود.
  • به دیگر توهین و اهانت نکنید.

یک دیدگاه

  1. هدف نت

    ممنون از اموزش کامل و خبتون
    خسته نباشید

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Time limit is exhausted. Please reload the CAPTCHA.