آموزش طراحی قالب وردپرس

[SAJJADSAA]

جلسه 11
امروز میریم سراغ یکی دیگر از قسمتهای مهم هر سایت، یعنی سایدبار یا ستون کناری که میتونیم بسیاری از کاربردها و ابزارک ها رو در این قسمت قزار بدیم.
میدونیم که وردپرس قسمتی داره به نام ابزارک ها یا widgets که ابزارهایی رو برای قالب ما در خودش جا داده و ما میتونیم این ابزار ها رو از سایت وردپرس یعنی wordpress.org پیدا و دانلود کنیم.
برای اینکه قالب ما بتونه از ابزارک ها استفاده کنه یا اصطلاحن widgetize بشه باید یه کارهایی انجام بدیم که قعلن کاری نداریم به اون قضیه ! فقط خواستم بدونین این کلمات قلمبه سلنبه(املاشو بلد نیستم) چیز خاصی نیستن و یک خط کد کارشه!
حالا میریم وارد بحث سایدبار بشیم و چند تا امکان پیش فرض براش قرار بدیم.
میدونیم که header و content و sidebar و footer از هم جدا هستن!
یعنی div هاشون توهم نمیرن!
همونطوری که بعد از بسته شدن تگ header رفتیم سراغ content حالا بعد از آخرین <div/> که مربوط به content هست یک div با کلاس sidebar میسازیم:

<div class=”sidebar” >

</div>

شاید این سوال پیش بیاد که ما چرا برای header و content از آی دی که منحصر به فرد هست استفاده کردیم! ولی برای سایدبار از کلاس؟

و جواب اینه که ممکنه ما بخواهیم ۲ سایدبار داشته باشیم! و برای اینکه بتونیم با هر دوشون یک کار رو انجام بدیم دادن کلاس میتونه مفید باشه!

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

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

بریم سراغ درس، یک تگ ul که مخفف unordered list است رو در محدوده ی sidebar باز میکنیم و میبندیم تا داشته باشیم:

<div class=”sidebar”>
<ul>
</ul>
</div>

تگ ul در واقع برای لیست کردن نوشته های ماست، مثلا نوشته زیر در این تگ قرار گرفته:

• این یک نمونه از تگ ul است.
• این یک نمونه دیگراین تگ است!!

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

<li>
<?php _e(‘Categories’) ?>
</li>

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

یادتون هاست که برای عناوین از چه تگی استفاده کردیم؟!

از تگ h2 استفاده میکنیم و کد رو به شکل زیر تغییر میدیم:

<li>
<h2> <?php _e(‘Categories’) ?> </h2>
</li>

میتونیم تا اینجای کار رو ذخیره کنیم و به سایتمون سر بزنیم و ببینیم که یک

• Categories
  
  

در وردپرس انگلیسی و یا یک

• دسته ها
  
  

در وردپرس فارسی اضافه شده به انتهای صفحه مون.
حالا باید کدی بنویسیم که دسته بندی های ساین رو فرا خوانی کنه و لیستش رو زیر نوشته ی ” دسته ها ” قرار بده
برای اینکار در داخل تگ li که نوشتیم و بعد از پایان تگ h2 کد زیر رو مینویسیم:

<ul> <?php wp_list_cats(); ?> </ul>

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

مثلن number=n تعداد n عدد موضوع رو نشون میده!

یا hide_empty=n دسته هایی که هیچ نوشته ای ندارن رو نشون میده اگه n صفر باشه و نشون نمیده اگه n یک باشه! یعنی n یا صف است یا ۱ .

<?php wp_list_cats(‘hide_empty=0′); ?>

ما میتونیم هر دوی این شرطها رو قرار بدیم اما یادمون نره که باید هرattribute یا مشخصه رو با یک & از هم جدا کنیم:

<?php wp_list_cats(‘number=3&hide_empty=0′); ?>

اگه هیچ دسته ای نساختین میتونین از قسمت دسته ها یا categories چندتا بسازین:

http://localhost/wordpress/wp-admin/categories.php

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

wp_list_categories()

حالا نگاهی میندازیم به کار امروزمون،توجه کنید که از تگهایی که از بالا به ترتیب شروع میشن از پایین به ترتیب بسته میشن:

و دلیل اینکه ۲ تگ رو با ۴ شماره گذاری کردم اینه که هر دو در یک مرتبه قرار دارن یعنی در کنار هم هستن نه داخل هم! تصویر گویای همه چیز هست…

نه خسته!!

بابای
نویسنده آموزش آقای کشمیری