زمینه های دلخواه که در سیستم مدیریت محتوای وردپرس با آن سر و کار داریم روشی برای پیشرفته کردن وبسایت های وردپرسی است؛ با بکارگیری زمینه های دلخواه یا Custom Field میتوانیم از کاربران داده های سپارشی دریافت کنیم یا داده هایی را در یک قالب مشخص به آنها نمایش بدیم.
در بخش پیشین این آموزش که همراه با ویدیوی آموزشی هم بود درباره افزودن یک زمینه دلخواه از پیشخوان وردرپرس و از بخش افزودن نوشته توضیح دادیم ولی این تمام ماجرا نیست!
برای اینکه زمینه های دلخواه ایجاد شده در نوشته ها در جای دلخواه نمایش داده شوند اکنون نیاز به کمی کار با کد ها هست! 🙂
میتوانید بخش نخست این آموزش را از پیوند “آموزش کار با زمینه دلخواه وردپرس – بخش یک ” بخوانید، در بخش نسخت درباره افزودن یک زمینه دلخواه به یک نوشته و در این بخش درباره نمایش ان زمینه دلخواه در مکان دلخواه توضیح میدهیم.
پیش از این که این بخش برسیم نمونه ای از کاربرد زمینه دلخواه را در نوشته پیشیت توضیح دادم، برای نمونه اگر بخواهیم جعبه دانلودی برای وبسایت خود طراحی کنیم تا اگر در نوشته ای قرار است فایلی برای دانلود قرار داده شود مدام نیاز به نوشتن یک سری متن ها و لینک دادن های تکراری نباشد میتوانیم از زمینه دلخواه بهره ببریم.
بنابراین برای اینکه در این اموزش هدفی داشته باشیم چگونگی ساخت باکس دانلود تارنمای کد فنجونی را آموزش میدهیم.
در نمونه بالا که تصویری از جعبه دانلود وبسایت خودمون هست میخواهیم نشون بدیم که چگونه چنین جعبه ای رو میشه ایجاد کرد و نمایش داد.
برای اینکه زمینه های دلخواه مورد نیاز ما در جای دلخواه ما نمایش داده شود باید فایل مناسب پوسته فعال را پیدا کنیم و کد هایی را به آن بیافزاییم، برای نمونه برای نمایش این جعبه در برگه ای که ادامه یک نوشته نمایش داده میشود باید کد ها را به فایل single.php یا برابر پارسی آن “برگه تک نوشته” را برای ویرایش انتخاب کنیم.
برای آغاز کار نخست باید مشخص کنیم که قرار است چه تعداد زمینه دلخواه داشته باشیم؟ برای نمونه در تصویر بالا 3 زمینه دلخواه افزوده شده که دو تای ان برای افزودن پیوند های دانلود و دیگری برای نمایش حجم فایل است.
بنابراین کد هایی که برای آغاز باید در هر کجای فایل single.php اضافه کنیم به شکل زیر است.
<?php $dl1 = get_post_meta($post->ID, 'dl1', true); $dln1 =get_post_meta($post->ID, 'dln1', true); $dl2 = get_post_meta($post->ID, 'dl2', true); $dln2 = get_post_meta($post->ID, 'dln2', true); $size = get_post_meta($post->ID, 'size', true); ?>
در این کد که به زبان php است 5 متغیر معرفی شده است و آن هم به این دلیل است که برای نمایش یک متن برای دکمه اول متغیر dln1 و برای نمایش یمت برای دکمه دوم dln2 را گزینش کردیم و برای لینک دادن به هر کدام از این دکمه ها هم باید دو متغیر دیگر برای نگهداری لینک ها اضافه کنیم ولی به این خاطر که حجم را در تصویر بالا یک کلمه و مقدار ثابت در نظر گرفتیم برای همین نیازی به افزودن متغیر نیست و تنها برای مقدار عددی حجم یک متغیر هم به نام size در نظر گرفتیم.
اما در کد بالا مهم کد
get_post_meta($post->ID, 'dl1', true);
است که بار ها تکرار شده و یکی از توابع وردپرسی است که Post Meta هر نوشته را برمیگرداند که با نام dl1 مشخص شده باشد؛ dl1 همان نامی است که در افزودن/ویرایش یک نوشته در کادر زمینه دلخواه باید وارد کنیم تا مقدار وارد شده در بخش مقدار یا Value همان همین کادر زمینه دلخواه در متغیر dl1 قرار بگیرد.
تابع get_post_meta سه آرگومان دریافت میکند که نخستین آن روش دریافت مشخصات نوشته است که در اینجا با Post ID مشخص شده میتوانید و دومی نامی است که در کادر افزودن زمینه دلخواه برای مقدار دادن به آن بهره میبرید و آخرین آن تنها مقدار های True و false را میگیرید که true قرار داده شده در کد بالا به معنای دریافت مقدار کلید dl1 است.
به این ترتیب با افزودن این بخش از کد تنها نام و مقدار های زمینه دلخواه را از پیشخوان وردپرس به سمت کاربر هدایت کردیم ولی هنوز به کاربر نشان نداده ایم!
از اینجای کار به بعد کمی پیچیدگی بیشتر میشود! باید برای نمایش نخست یک طرح را با زبان HTML و CSS پیاده سازی کنید تا مقدار های زمینه دلخواه با شیوه ویژه ای نمایش داده بشوند.
<?php if(isset($dl1) && !empty($dl1) && isset($dln1) && !empty($dln1)) { ?> <div id="box-dl"> <h3>پیوست ها</h3> <hr> <div class="bx pevst"><span>دریافت : </span><ul> <li><a href="<?php echo $dl1; ?>"><?php echo $dln1; ?></a></li> <?php if(isset($dl2) && !empty($dl2) && isset($dln2) && !empty($dln2)) { ?> <li><a href="<?php echo $dl2; ?>"><?php echo $dln2; ?></a></li> <?php } ?> </ul> </div> <?php } ?> <?php if(isset($size) && !empty($size)) { ?> <div class="bx pevst3"><span>اندازه : </span> <ul><li><?php echo $size; ?> </li></ul> </div> <?php } ?> </div> <?php } ?>
در کد بالا که ترکیبی از زبان HTML و CSS است زمینه های دلخواه را با شیوه ای که در تصویر اول مشخص است نمایش داده ایم.
دومین خط که با دستور php آغاز میشود بررسی میکند که درصورتی که زمینه دلخواهی با نام dln1 و dl1 مقداری را دریافت کرده باشد تمام این بخش نمایش داده شود در غیر اینصورت خبری از نمایش زمینه دلخوه در برگه single نخواهد بود.
در ادامه هم یک Div Element آغاز شده که کار نمایش جعبه را با بکارگیری یک لیست و شیوه CSS نمایش میدهد؛ در ادامه دوباره با دستور شرطی بررسی میشود که درصورتی که در متغیر های dln2 و dl2 و همچنین size مقدار هایی وجود داشته باشد آن بخش ها را نمایش میدهد.
در نهایت هم با دستور چاپ php کد echo میباشد مقدار هر زمینه را در جای مناسب نمایش داده است.
سید مصطفی
آبان ۱۴, ۱۳۹۵ در ۶:۰۱ ب.ظ
سلام ممنون از آموزشتون میشه کد های بالا رو کامل بدید تا من بتونم بزارم توی فایل سینگل،اخه من کد هارو هر جوری میزارم پیج ارور میده و باز نمیشه
محمدتقی
آبان ۱۴, ۱۳۹۵ در ۷:۱۲ ب.ظ
درود بر شما، کد های باین نوشته تنها یک نمونه بودن! شما با دونستن شیوه کار و پیدا کردن یک پوسته HTML میتونید زمینه دلخواه خود و متناسب با پوستتون رو بسازید، اگر مایل بودید خطایی که دریافت میکنید رو به اشتراک بذارید تا بررسی بشه
مصطفی
آبان ۱۱, ۱۳۹۵ در ۱۱:۰۴ ق.ظ
بازم تشکر بابت متن آموزش بسیار عالیت
خسته نباشید
دیدگاه خود را در میان بگذارید