طراحی قالب وردپرس (جلسه سوم)
 

در جلسات قبل به ساختار پوسته های وردپرس پرداختیم و همچنین کار با پرونده style.css و تصویر پیشنمایش رو به اتمام رسوندیم. در این جلسه می خواهیم در مورد پرونده header.php و footer.php صحبت کنیم.
پرونده header.php و footer.php حاوی کد هایی هستند که به ترتیب در سربرگ و پانوشت وب سایت شما یا ساده تر بگم بالا و پایین وب سایت شما متداوما وجود دارند. مثلا در بالای وب سایت شما تصویر سربرگ چیزی هستش که در تمامی صفحات هست پس باید درون header.php قرار بگیره.
اینکه از کجا بفهمیم تا چه بخشی از کد ها مربوط میشه به سربرگ سایت و چه بخشی مربوط میشه به پانوشت سایت چیزی هستش که بر اثر تجربه تکرار آزمون و خطا و تمرین به دست میاد. اگر کمی با کد های html آشنایی داشته باشید براحتی می فهمید که چه کد هایی مربوط به سربرگ هستند و چه کد هایی مربوط به پانوشت.
خوب اما فایل اصلی html قالب ما رو از این لینک دانلود کنید چونکه قراره از این کد ها استفاده کنیم.
با کمی دقت در میابیم کد هایی که پیش از دستور زیر قرار گرفته اند مربوط به بخش سربرگ سایت ما هستند:

<!---------- he ---------------------------->

پس تمامی کد های پیش از این عبارت رو کپی می کنیم و در یک فایل جدید با نام header.php در پوشه قالب خودمون ذخیره می کنیم. حالا نوبت به جایگذاری توابع وردپرس در این فایل رسیده. توابع وردپرس (مانند توابع سرویس های وبلاگدهی) دستوراتی هستند که در درون قالب قرار می گیرند و سپس در زمان نمایش سایت با مقداری جدید نمایش داده می شوند. مثلا وقتی شما دارید یک قالب رو طراحی می کنید ممکنه اسم سایتی که از اون قالب استفاده خواهد کرد رو ندونید. در این صورت از تابع نام سایت استفاده می کنید تا وردپرس به صورت خودکار اسم سایت کاربر رو
به جای تابع قرار بده. شما می تونید برای مشاهده لیست کامل توابع وردپرس به مرجع مقالات وردپرس و یا این وب سایت مراجعه کنید.
دو تابع مهمی که ما در طی نوشتن این دو فایل با اون ها سر و کار داریم bloginfo و wptitle هستند. توابع قالب وردپرس به صورت دستورات php هستند و می بایست بین دو دستور <?php و ?> قرار بگیرند. پس برای نوشتن اون ها باید با php آشنایی داشته باشید. تابع bloginfo تابعی هستش که برای بازگرداندن اطلاعات کلی سایت از اون استفاده میشه.
برای مشاهده رشته های این تابع اینجا کلیک کنید.
برگردیم سراغ header.php خودمون.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>عنوان صفحه</title>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<meta http-equiv=Content-Language content=fa-IR>
<meta name=keywords content="کلمات کلیدی سایت" >
<meta name=description content="توضیحات سایت" >
<link href="آدرس فید" type=application/rss+xml rel=alternate>
<link href="http://themeupload.theme-designer.com/62/c.css" type="text/css" rel="stylesheet">
</head>
<!-- template62-wordpress -->
<!-- Design By : wWw.Theme-Designer.Com -->

<!---------- background ---------------------------->
<!---------- address-image --------->
<body background="http://themeupload.theme-designer.com/62/image/1.jpg">
<!---------- address-image --------->
<!---------- background ---------------------------->

<div class="theme-designer-com_background-header">
<div class="theme-designer-com_block-koli">

<div align="center">
<table border="0" width="1003" cellspacing="0" cellpadding="0" dir="rtl">
<tr>
<td>

<!---------- he ---------------------------->
<!---------- address-image --------->
<div style="width:1003px; overflow:hidden; height:293px; overflow:hidden;
background-image:url('http://themeupload.theme-designer.com/62/image/2.jpg');
background-repeat:no-repeat">
<!---------- address-image --------->

<div class="theme-designer-com_makan_blogtitle">
<div class="theme-designer-com_blogtitle"><a href="#">عنوان سایت</a></div>
<div class="theme-designer-com_description">توضیحات سایت</div>
</div>

<div class="theme-designer-com_makan_menutop">
<div style="padding:0px 20px 0px 0px;">
<a href="#">آزمایش پیوند</a>
<a href="#">آزمایش پیوند</a>
<a href="#">آزمایش پیوند</a>
<a href="#">آزمایش پیوند</a>
</div>
</div>

</div>

خوب اولین بخشی که با اون کار داریم عنوان صفحه ماست. ما از دستور bloginfo('name') برای بازگردانی عنوان سایت و سپس از wp_title برای بازگردانی عنوان صفحه جاری سایت استفاده خواهیم کرد.

<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>

بدین صورت وردپرس به صورت خودکار عنوان سایت و سپس صفحه جاری رو در تگ title درج خواهد کرد.
سپس نوبت به آدرس دهی قالب میرسه. همانطور که شما نمی دونید عنوان وب سایتی که از قالب شما استفاده خواهد کرد چیه نمی دونید که آدرس محل بارگذاری فایل های قالب چیه. چونکه در قالب های وردپرس بر خلاف قالب های وبلاگ تصاویر و دیگر فایل های قالب توسط خود استفاده کننده آپلود می شوند و از روی سایت طراح قالب بارگذاری نمی شوند. تابعی که آدرس محل ذخیره فایل های قالب رو بر می گردونه bloginfo('template_directory') هستش. به طور مثال این تابع آدرس قالب فعلی وب سایت تم دیزاینر رو بدین صورت بر می گرونه:

http://www.theme-designer.com/wp-content/themes/wp

در قالب ما فایل ها از آدرس http://themeupload.theme-designer.com/62 بارگذاری می شوند پس تمامی این آدرس ها رو با دستور زیر جایگزین کنید:

<?php bloginfo('template_directory'); ?>

دیگر موارد فایل header.php عم با استفاده از تابع bloginfo قابل بازگردانی هستند. مثلا برای بازگرداندن آدرس فید می توان از تابع bloginfo(‘rss2_url’) استفاده کرد. در نهایت فایل header.php می بایست محتویات دستورات زیر باشد:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<meta http-equiv=Content-Language content=fa-IR>
<meta name=keywords content="<?php bloginfo('keywords'); ?>" >
<meta name=description content="<?php bloginfo('description'); ?>" >
<link href="<?php bloginfo('rss2_url'); ?>" type=application/rss+xml rel=alternate>
<link href="<?php bloginfo('template_directory'); ?>/style.css" type="text/css" rel="stylesheet">
</head>
<!-- template62-wordpress -->
<!-- Design By : wWw.Theme-Designer.Com -->

<!---------- background ---------------------------->
<!---------- address-image --------->
<body background="<?php bloginfo('template_directory'); ?>/image/1.jpg">
<!---------- address-image --------->
<!---------- background ---------------------------->

<div class="theme-designer-com_background-header">
<div class="theme-designer-com_block-koli">

<div align="center">
<table border="0" width="1003" cellspacing="0" cellpadding="0" dir="rtl">
<tr>
<td>

<!---------- he ---------------------------->
<!---------- address-image --------->
<div style="width:1003px; overflow:hidden; height:293px; overflow:hidden;
background-image:url('<?php bloginfo('template_directory'); ?>/image/2.jpg');
background-repeat:no-repeat">
<!---------- address-image --------->

<div class="theme-designer-com_makan_blogtitle">
<div class="theme-designer-com_blogtitle"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></div>
<div class="theme-designer-com_description"><?php bloginfo('description'); ?></div>
</div>

<div class="theme-designer-com_makan_menutop">
<div style="padding:0px 20px 0px 0px;">
<a href="<?php bloginfo('url'); ?>">صفحه اصلی</a>
<a href="#">آزمایش پیوند</a>
<a href="#">آزمایش پیوند</a>
<a href="#">آزمایش پیوند</a>
</div>
</div>

</div>

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

نوبت به پرونده footer.php میرسه. این پرونده حاوی کد هایی هستش که در پانوشت یا همون پایین وب سایت شما قرار می گیرند. با دقت در دستورات فایل default.html در میابیم که کد های خط ۱۳۴ به بعد مربوط به پانوشت سایت ما هستند.

</td>
</tr>
</table>
</div>

</div>
</div>

<div class="theme-designer-com_footer1">
<div align="center">
<div class="theme-designer-com_footer2"></div>
</div>
</div>

</body>
</html>

خوب این فایل کار خاصی نداره پس همین دستورات رو در فایلی با نام footer.php درون پوشه قالب خود ذخیره کنید.

در جلسه بعد پرونده index.php رو طراحی خواهیم کرد و و اولین امتحان از قالب خودمون رو خواهیم گرفت!؟!


نظرات و دیگر موارد
اگر این قالب را دوست دارید امتیاز دهید :
۱۳ دیدگاه نوشته شده است! می توانید دیدگاه خود را بنویسید


8 − هشت =

  1. سلام خسته نباشید عای بود همچنان منتظر جلسه چهارم هستیم

  2. آقا محمد سلام من میخوام یه منوی مزاحم رو از قالبم از بین ببرم ولی هرچی میگردم پیداش نمیکم خواهشا کمکم کنید منو زیر اون سه بخش تماس با ما . درباری ما و… اگر میتونید کمکم کنید لطفا بهم اطلاع بدید اینم آدرس سایتم http://cartest.cloudsite.ir/wp/

  3. سلام دادا
    هنوز منتظر جلسات بعدیتون هستیم
    لطفا آمادش کنید

  4. php نا بلد در تیر ۷, ۱۳۹۳ ساعت ۶:۵۵ ب.ظ  گفته :

    چرا دیگه آموزش رو ادامه نمیدید اموزش بسیار عالی بود منتظرم

  5. خواهش میکنم ادامه بدید تازه داشتم ی چیزی میشدم:(

  6. ممنون بابت آموزش عالیتون خسته نباشید

  7. به نظر من همین آموزش های طراحی قالب وردپرس رو ادامه بدید.
    ممنون.

    پاسخ شما:
    به روی چشم.

  8. من توی این : bloginfo(‘name’)
    بحای name نوشتم title .
    درست بود.
    میشه از wp_title استفاده نکرد؟

    پاسخ شما:
    باید بگم که تابحال این تابع رو مشاهده نکردم و نمی دونم کرکردش چگونه هست. اما استاندارد وردپرس به صورتی بود که گفتم.

  9. من از wp استفاده نکردم
    به جای name نوشتم title
    درست بود.
    کاربرد wp رو میگید؟

    پاسخ شما:
    ای کاش تابع رو می ذاشتید تا بنده هم بفهمم چون هنوز نفهمیدم! ما اابتدا با تابع bloginfo('name') اسم سایت مربوطه رو برگردوندیم سپس با تابع wp_title() عنوان صفحه جاری رو. مثلا اگر کاربر در حال مشاهده یک نوشته باشه این تابع عنوان اون نوشته رو بر می گرونه.

  10. اینو میدونم ولی من مثلا تو تگ تایتل از این استفاده کردم:

    کاملا درست بود.
    ولی شما میگین از wp استفاده کنم.
    لطفا در مورد فرق این دو تا کامل تر توضیح بدین.
    راستی به نظر من همین آموزش طراحی وردپرس رو ادامه بدین عالیه.
    ممنون.

    پاسخ شما:
    نمیشه تابع رو در نظر وارد کرد. همینطور که می بینید جاش خالیه. بدون پیشوند و پسوند php قرار بدید یا لینک تابع رو در دانشنامه وردپرس بدید.

  11. عالی
    ولی یکم بهتر در مورد کاربرد توابع وردپرس توضیح بدید ممنون میشم.

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