در وردپرس تابعی به نام body_class() وجود دارد، کار این تابع تعیین class هایی برای تگ body است، به طور مثال اگر پوسته فارسی بود، این تابع کلاس rtl را به تگ body می دهد، اگر در صفحه اصلی بودیم کلاس home ، اگر در سایت لاگین کرده بودیم کلاس logged-in و … ، به طور عادی چنین چیزی اتفاق نخواهد افتاد و حتما از تابع در تگ body باید استفاده کنیم پس کد body را به شکل زیر تغییر دهید :
|
۱
|
<body <?php body_class(); ?>>
|
اگر فایل را ذخیره و سورس را نگاه کنید، جتما چنین نتیجه ای خواهید دید :
شاید به نظر کاربرد خاصی نداشته باشند اما در مواقع ضروری می توان استایل های متفاوتی را با استفاده از این کلاس ها به بعضی صفحات اختصاص داد.
چند خط پایین تر به کدهای logo و tagline می رسیم که باید عنوان و توضیح سایت را با استفاده از توابع وردپرس بگیریم و درون تگ های h1 و h2 چاپ کنیم. به کد های زیر دقت کنید :
|
۱
۲
۳
۴
۵
۶
۷
|
<div id=“logo”>
<h1><?php bloginfo(‘name’); ?></h1>
</div>
<div id=“tagline”>
<h2><?php bloginfo(‘description’); ?></h2>
</div>
|
کار بعدی قسمت جستجو است ، اما این قسمت را در جلسات آینده انجام خواهیم داد، چونکه نیاز به دیدن نتیجه داریم تا اگر اشکالی بود آن را رفع کنیم اما به دلیل اینکه هنوز قسمت مطالب را ایجاد نکردیم، نمی توان نتیجه جستجو را مشاهده کرد پس به قسمت منوی سایت می رویم :
در وردپرس می توان به دو صورت این بخش را ایجاد کرد، روش اول استفاده از تابع wp_list_pages() و قرار دادن نام برگه ها است و روش دوم استفاده از تابعwp_nav_menu() و ایجاد فهرست هاست، ما از همان روش اول استفاده خواهیم کرد و برگه ها منوی ما را تشکیل خواهند داد. ابتدا همه liها را بجز li مربوط به صفحه اصلی را پاک کنید :
|
۱
۲
۳
۴
|
<ul id=“menu”>
<li><a href=“<?php bloginfo(‘home’); ?>“></a></li>
<?php wp_list_pages(‘title_li=’); ?>
</ul>
|
تابع bloginfo با مقدار home آدرس صفحه اصلی را چاپ خواهد کرد، که ما از آن برای href لینک صفحه اصلی استفاده کرده ایم
با استفاده از تابع wp_list_pages() نیز لیست برگه ها نمایش داده خواهد شد.
اگر دقت کنید یک مقدار نیز به تابع wp_list_pages داده ایم. دلیل آن، این است که وردپرس به صورت پیشفرض کلمه “برگه ها” (در وردپرس انگلیسی pages) را قبل از نمایش لیست برگه ها اضافه می کند. اما ما به این کلمه نیاز نداریم. برای برداشتن آن title_li را با مقدار هیچ! قرار داده ایم تا از نمایش این کلمه صرفنظر شود برای دیدن حالت پیشفرض ‘title_li=’ را پاک کنید.
در ضمن می توانید به بخش مدیریت رفته و چند برگه جدید ایجاد کنید تا در لیست منوی سایت ما نمایش داده شوند.
خب، توانستیم لیست برگه را نمایش دهیم، اما هنوز کار ما با منو تمام نشده است، اگر چند برگه دیگر ایجاد کرده باشید.
متوجه خواهید شد که وردپرس برگه را به ترتیبی که ایجاد کرده ایم نمایش نمی دهد و بلکه آن ها را بر اساس حروف الفبا ترتیب خواهد داد. هر چند می توان با استفاده از گزینه چیدمان در هنگام ایجاد برگه مکان آن را تعیین کرد اما می خواهیم که وردپرس به صورت اتوماتیک این کار را برایمان انجام دهد و برگه را به ترتیب تاریخ ایجاد کردن آن ها را مرتب کند. برا اینکار تابع wp_list_pages را به شکل زیر تغییر می دهیم :
|
۱
|
<?php wp_list_pages(‘title_li=&sort_column=menu_order’); ?>
|
بسیار خب حال کاری که باید انجام دهیم، جدا کردن کدهای قسمت هدر ، و قرار دادن آن ها در یک فایل مجزاست، برای اینکار یک فایل جدید با نام header.php در کنار فایل index.php ایجاد کنید، سپس کدها را از خط اول یعنی doctype تا توضیح <!– End Header –> از فایل index.php به فایل header.php منتقل کنید
سپس فایل header.php را با اینکودینگ utf-8 ذخیره کنید.
خب اگر مرورگر را ریفرش کنید می بینید که قالب بدون header است، پس باید فایل header.php را به فایل index.php متصل کنیم، برای اینکار کد زیر را در اولین خط فایل index.php قرار دهید :
|
۱
|
<?php get_header(); ?>
|
این تابع کدهای فایل header.php را در به فایل index.php اضافه خواهد کرد. اگر کار فوق را بدرستی انجام داده باشید، پس از ریفرش مجدد مرورگر قالب به حالت عادی خود بازخواهد گشت. اما در اینجا یک سوال به وجود خواهد آمد که دلیل این کار چیست و چه فایده ای دارد؟ در وردپرس بعضی از صفحات وجود دارند که کلیّت مشابهی دارند و فقط در بخش محتوا با هم دیگر فرق دارند، به طور مثال اگر قالب را در نظر بگیرید، هدر و فوتر و سایدبار در همه صفحات از جمله صفحه اصلی، صفحه ادامه مطلب، و برگه ها، به یک شکل است. از طرف دیگر برای این صفحاتی که نام بردیم، هر کدام باید یک فایل ایجاد کنیم، که اگر یادتان باشید برای ادامه مطلب صفحه single.php و برای برگه ها صفحه page.php، خب در این حالت وقتی که هدر هر سه صفحه یعنی index.php ,single.php و page.php مانند هم است، برای جلوگیری از کدنویسی مجدد، کدهای هدر را در یک فایل مجزا قرار دادیم، تا در هنگام ایجاد ما بقی صفحات فقط فایل header را include کنیم. و از بالا رفتن حجم فایل نیز جلوگیری کرده ایم. مزیت دیگر این است که اگر خواستیم تغییری در هدر قالب ایجاد کنیم، فقط کافیست فایل header.php را ویرایش کنیم. و این تغییر در index , page و single اتفاق خواهد افتاد.
