در قسمت اول این مطلب دستکاری صفحه ی ویرایش نوشته ها در وردپرس را بررسی کردیم و از این طریق توانستیم هنگام نگارش یا ویرایش نوشته ها، مطالب برگزیده را انتخاب کنیم. در قدم بعد همین امکان را در منوی ویرایش سریع وردپرس گنجاندیم تا با سرعت و سهولت بیشتری مطالب «برگزیده» را انتخاب کنیم یا مطالب «برگزیده» را به حالت «عادی» برگردانیم.
اما هدف از دو مرحله ی قبلی در واقع رسیدن به جایی بود که ما بتوانیم مطالب برگزیده را به نحوی که نظر مخاطب را به خود جلب کند در سایت به نماشی درآوریم و این بخش از کار موضوع قدم سوم از این مطلب است.
برای این کار باید سه فایل جدید ایجاد کنیم:
- featured.php: حاوی کد مربوط به اسخراج و نمایش مطالب برگزیده است که در قسمت مربوطه در پوسته ی سایت فراخوانی خواهد شد.
- featured.js: حاوی کد جاوااسکریپت مربوط به نمایش مطالب برگزیده است.
- featured.css: مربوط به استایل های قسمت مطالب برگزیده است.
در نهایت ما یک قسمت نمایش مطالب برگزیده در سایت خواهیم داشت که شبیه دموی سمت چپ خواهد بود.
در تکه کد بالا از تابع is_home در ساختار شرطی استفاده کرده ایم که باعث می شود کد فقط در صفحه ی نخست سایت اجرا شود. خط ۵ با استفاده از دستور include فایل featured.php را بارگذاری می کند. خطوط ۶ و ۷ فایل css را با استفاده از تابع wp_enqueue_style اضافه کرده و دو خط ۸ و ۹ هم فایل مربوط به کد jQuery را با تابعی مشابه به نام wp_enqueue_script به صفحه ی اصلی سایت اضافه می کند. حالا می توانیم محتویات هر کدام از سه فایل بالا را مورد بحث قرار دهیم.
featured.php
'۶'
,'meta_key' => 'is_featured'
,'meta_value' => 'on'));
?>
';
while ($featured_posts_query -> have_posts())
{
echo '
';
}
?>
در کد بالا قسمتی که بین خطوط ۱ تا ۵ قرار دارد یک شیء جدید از کلاس WP_Query ایجاد می کند. این شیء که featured_posts_query نام دارد مانند یک query عادی وردپرس است که برای نمایش پست ها از آن استفاده می شود با این تفاوت که طبق تنظیماتی که حین ایجاد برای آن تعیین کرده ایم نوشته هایی را از پایگاه داده ی وردپرس استخراج یم کند که مقدار is_featured برای آن ها تعریف شده باشد. به علاوه در هر مجموعه ی پست که به عنوان یک صفحه در کنار هم قرار داده می شوند ۶ پست وجود خواهد داشت. به این ترتیب در حین نمایش در سایت ما ۶ مورد از آخرین مطالب برگزیده را خواهیم دید. البته بسته به نیازمان می توانیم این عدد را تعییر دهیم. در ادامه ی کد هم عنوان و چکیده ی هر کدام از مطالب به ترتیب با استفاده از توابع the_title و get_the_excerpt نمایش داده می شود. مابقی کار به عهده ی فایل css مربوطه می باشد.
featured.css
#featured_posts
{
min-width:660px;
height:470px;
background-image:url('images/featured_area.png');
}
.featured_slide
{
width:630px;
padding:10px 20px 0px 10px;
}
.featured_h1
{
font-family:tahoma;
font-weight:bold;
font-size:28px;
color:#A88F00;
padding-top:15px;
padding-right:45px;
}
.featured_title
{
background-image:url('images/title.png');
width:612px;
height:45px;
font-family:tahoma;
font-size:24px;
color:#E0E0E0;
}
.featured_h2
{
padding:7px 15px;
}
.featured_excerpt
{
font-family:tahoma;
font-size:12px;
line-height:1.5em;
text-align:justify;
margin:10px 50px 10px 10px;
display:none;
}
محتویات فایل css بین خط های ۱ تا ۶ مربوط به کادری است که همه ی مطالب برگزیده در آن نمایش داده می شود. در این قسمت در خط ۵ یک تصویر که قبلا آن را برای این قسمت آماده کرده ایم به عنوان پس زمینه قرار داده می شود. ابعاد این فایل ۶۶۰ در ۴۴۰ پیکسل است و همانطور که در خط ۳ و ۴ هم مشخص است، ابعاد این قسمت را هم هم اندازه با فایلمان در نظر گرفته ایم.
خطوط ۲۱ تا ۲۹ هم مربوط به استایل عنوان هر کدام از مطالب برگزیده است و به شکلی مشابه روالی که در بالا اشاره شد قبلا یک فایل به ابعاد ۶۱۲ در ۴۵ پیکسل برای پس زمینه ی آن آماده کرده ایم. تعیین ابعاد دقیق این بخش و بخشی که در پاراگراف قبلی به آن اشاره شد از این جهت حائز اهمیت است که دقیقا با ابعاد فایل هایی که برای پس زمینه انتخاب کرده ایم همخوانی داشته باشد.
تنها نکته ی خاص دیگری که لازم است به آن اشاره شود خط ۴۱ کد است که باعث مخفی شدن همه ی چکیده ها خواهد شد. به این ترتیب در بدو نمایش مطالب برگزیده بازدیدکننده قادر به مشاهده ی هیچ یک از چکیده ها نخواهد بود. حالا می توانیم با استفاده از jQuery ترتیب نمایش و مخفی شدن چکیده ها را بدهیم.
featured.js
jQuery('document').ready(function(){
jQuery('.featured_excerpt:eq(0)').show();
});
jQuery('.featured_slide').find('h2').click(function(){
jQuery('.featured_excerpt').slideUp('fast');
jQuery(this).parent().parent().children().slideDown('slow');
});
خط ۱ تا ۳ کد به نمایش چکیده ی نخستین مطلب به محض بارگذاری صفحه اختصاص داشته و خط ۴ تا ۷ کد jQuery نوشته شده منتظر کلیک روی عنوان مطالب برگزیده می ماند. با هر کلیک نخست همه ی چکیده هایی که باز هستند مخفی می شوند و سپس چکیده ی مربوط به مطلبی که روی عنوان آن کلیک شده به نمایش در می آید.
در نهایت هم لازم است تا کلیه ی کدهای مورد استفاده در این مطلب برای دانلود قرار داده شود.
دیدگاهتان را بنویسید