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

فرهاد کره بندی

بسیاری از افراد که با وردپرس کار می کنند بر این باورند که شورت کد وردپرس مربوط به یک قطعه کد ساده به شکل echo do_shortcode(“[shortcode]”); است و تنها برای زمانی است که شما می خواهید در وردپرس خود بعضی افزونه ها را فعال کنید و آنها را نمایش دهید . مثل افزونه معروف Contact form 7  .

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


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

کار با شورت کد وردپرس در افزونه contact form 7

یعنی کدی که وردپرس به شما می دهد را باید جایگزین [shortcode] کنید و در داخل پوسته خود قرار دهید ( البته شورت کد ها در داخل ویرایش گر دیداری پست ها عمل می کنند و نیاز به کد PHP ندارند )

پس به نظر شما بحث شورت کد ها به همین سادگی است ؟ جواب خیر است . شورت کد ها قابلیت های خاص دیگری دارند.

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

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

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

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

مثلا شما می خواهید شورت کد دلخواهی قرار بدهید به نام باکس دانلود با نام 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 را اضافه کنید و به آن طرح مورد نظر خود را بدهید مثلا کد زیر یک باکس ساده ی دانلود برای شما درست می کند.


.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; }

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

پاسخ دهید

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

*

آموزش طراحی سایت

آموزش کامل طراحی سایت

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


براتون منتشر کنم