جلسه هشتم – طراحی ستون های کناری صفحه سایدبار با جزئیات بیشتر

طراحی قالب وردپرس، کدنویسان

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

گفته شد فایل sidebar.php برای ساخت ستون کناری صفحه استفاده می شود، در صورتی که صفحه دارای دو ستون در سمت چپ و راست صفحه باشد می توان دو تا فایل  سایدبار داشت یکی به نام left-sidebar.php و دیگری بنام right-sidebar.php .

حالا برای طراحی هر کدام از این فایل ها می توانیم طراحی و کدنویسی های ثابتی داخل آنها قرار دهیم و یا اینکه یک ناحیه برای قراردادن ابزارک (widget ) تعریف کرده و اجازه دهیم مدیر سایت در پانل مدیریتی ابزارک های دلخواه را در این ستون ها قرار دهد.

طراحی فایل sidebar.php در مثال های قبل بصورت زیر بود:

<?php wp_list_categories('title_li'); ?>

و در نتیجه در این ستون لیست دسته بندی ها  نمایش داده شد

نمایش دادن لیست برگه ها

بعنوان یک مثال دیگر می توان با تغییر آن بصورت زیر، در ابتدای این ستون لیست برگه ها را نمایش داد.

<?php wp_list_pages('title_li='); ?>
<hr />
<?php wp_list_categories('title_li='); ?>

تابع wp_list_pages برای نمایش لیست برگه ها استفاده می شود و پارامتر title_li= استفاده شده تا عنوان “برگه ها”  را قبل از لیست نمایش ندهد.

نمایش دادن آرشیو نوشته ها

برای نمایش دادن لیست آرشیو مطالب می توانیم از تابع wp_get_archives بصورت زیر استفاده کنید:

<?php wp_list_pages('title_li='); ?>
<hr />
<?php wp_get_archives(''); ?>
<hr />
<?php wp_list_categories('title_li='); ?>

در فراخوانی تابع  wp_get_archives می توان از آرگومانهایی استفاده کرد:

<?php wp_get_archives('type=postbypost&limit=5'); ?>

با آرگومان limit تعداد آرشیوها را به ۵ تا محدود کرده و نوع آرشیو را به دلخواه تعیین کنیم ، type می تواند مقادیر زیر را بگیرد تا به ترتیب آرشیو روزانه، هفتگی، ماهانه، سالانه و پست به پست را نشان دهد، پیش فرض آن monthly  یعنی ماهانه است.

 

  • daily
  • weekly
  • monthly
  • yearly
  • postbypost – باعث می شود تا تعداد دلخواه از آخرین مطالب را نشان دهد.

پویا کردن ستون کناری صفحه

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

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

برای این منظور در پوسته جدید codenevisan یک فایل جدید بنام functions.php ایجاد کرده و کد زیر را در آن قرار می دهیم:

<?php
if(function_exists('register_sidebar')) {register_sidebar(array(
'name' => 'sidebar 1',
'description' =>'ستون کناری شماره یک'  ));}
?>

در این قطعه کد ، اگر تابعی بنام register_sidebar وجود داشته باشد، اجرا شده و یک ناحیه با نام sidebar 1 و توضیح دلخواه تعریف شده است. به محض ایجاد فایل functions.php و ثبت تغییرات فوق، اگر صفحه مدیریت وردپرس را رفرش کنید متوجه اضافه شدن گزینه “ابزارک ها” در زیر منوی “نمایش” خواهید شد.

اضافه کردن سایدبار پویا به وردپرس

حالا می توانید از لیست ابزارک های موجود در سمت راست، هر کدام را به داخل ناحیه sidebar1 درگ کنید. در هر ناحیه ابزارک امکان اضافه کردن چندین ابزارک وجود دارد.

حال برای نمایش ابزارک ها در جاهای مختلف پوسته و از جمله فایل sidebar.php باید از تابع زیر استفاده کنید:

dynamic_sidebar('نام سایدبار');

بنابراین فایل sidebar.php  را بصورت زیر دوباره طراحی می کنیم، تا ابزارک ها را قبل از محتوای قبلی ستون نمایش دهد:

<?php dynamic_sidebar('sidebar1'); ?>
<?php wp_list_pages('title_li='); ?>
<hr />
<?php wp_get_archives('type=postbypost&limit=5'); ?>
<hr />
<?php wp_list_categories('title_li='); ?>

خروجی پوسته بصورت زیر خواهد بود:

نمایش سایدبار (sidebar ) پویا - کدنویسان

همچنین می توان دستورات ثابت برای نمایش دسته ها، برگه ها و آرشیو را حذف کرده و به جای آنها و ابزارک هایی  درناحیه اضافه کرد.

یکی از ابزارک های خیلی مفید وردپرس، ابزارک متن است که در داخل آن می توان قطعه کد html نوشت ، مثلاً می توان متن دلخواه و یا لیستی از لینک ها (فرضاً تبلیغاتی ) را داخل آن قرار داد.

توجه  کنید علیرغم نام دو تابع برای ثبت ناحیه ابزارک و نمایش آن دارای کلمه sidebar است، این ناحیه ها می توانند برای هر مکانی از پوسته تعریف شوند و حتماً نباید داخل داخل سایدبار باشند.

تابع register_sidebar دارای آرگومان های دیگری هم هست که کیفیت نمایش ابزارک ها را تعیین می کند ، به مثال زیر از فایل functions.php دقت کنید:

<?php
if(function_exists('register_sidebar')) {
register_sidebar(array(
'name' => 'sidebar1',
'description' =>'ستون کناری شماره یک'  ));
register_sidebar(array(
'name' => 'sidebar2',
'description' => 'ستون کناری شماره ۲',
'before_widget' => '<div class="block">',
'before_title' => '<h4 class="block-title">',
'after_title' => '</h4> <div>',
'after_widget' => '</div></div>'
));}  ?>

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

اضافه کردن sidebar برای وردپرس

در این مثال برای sidebar2  تعیین شده است که هر ابزارک داخل تگ div  با کلاس block قرار گیرد و عنوان آن داخل تگ h4 قرار داده شود.پس پارامترهای زیر را می توان برای هر ناحیه ابزارک تعیین کرد:

  • name – نام ناحیه ابزارک
  • description – توصیف ناحیه ابزارک
  • before_widget – تعیین تگ هایی که باید قبل از هر ابزارک نوشته شود.
  • after_widget – تعیین تگ هایی که باید بعد از هر ابزارک نوشته شوند.
  • before_title – تعیین تگ هایی که باید قبل از عنوان ابزارک نوشته شوند.
  • after_title – تعیین تگ هایی که باید بعد از عنوان هر ابزارک نوشته شوند.

برچسب ها

, , , , ,

محصولات پیشنهادی


نظرات کاربران


نظرات برای آموزش ساخت قالب وردپرس | بدون نظر »

کاربر عزیز، لطفاً دیدگاه ارزشمند خود را از طریق فرم زیر برای ما ارسال کنید:

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


تماس با ما
  • شماره همراه : ۰۹۱۵۱۶۰۴۰۶۸
  • آی دی تلگرام : @mmoha94
  • پست الکترونیکی : mohammadi.sm@gmail.com
  • آدرس پستی : بیرجند، خیابان پیروزی، پیروزی ۹، پلاک ۲۸
کلیه حقوق متعلق به سایت کدنویسان است، انتشار و کپی برداری از مطالب این سایت غیرمجاز بوده و پیگرد قانونی دارد.