در جلسات قبل به ساختار پوسته های وردپرس پرداختیم و همچنین کار با پرونده 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 رو طراحی خواهیم کرد و و اولین امتحان از قالب خودمون رو خواهیم گرفت!؟!
| اگر این قالب را دوست دارید امتیاز دهید : |
با عرض سلام و خسته نباشید یه سوال داشتم تو سایت hamyarwp .com یه اسکریپ یا یک هیدر هست که ضبدر داره یعنی میشه ببندیش در شروع قالب بالای سایت واقعا ممنون میشم بگین چطوری میشه با چه کدی یا افزونه میشه اون کارو کرد ممنون
عالی بود
فقط لطفن قسمت چهارم رو سریع تر انتشار بدید…
تشکر
سلام . خسته نباشید واقعا . آموزش این جلسه هم عالی بود .
منتظر جلسات بعدی هستم . موفق باشید .
قبل از هرچیز از تم دیزاینر خیلی تشکر میکنم که برای ما که مبتدی هستیم اموزش قرار داده.
من از قالب سبز در وب سایتم استفاده میکنم میخواستم که تصویر هدر و تصویر زیرش که حاوی جستجو هست رو عوض کنم… ولی متاسفانه نمیدونم دقیقا باید چیکار کنم … ! دوستان لطفا راهنمایی کنید، خدا خیرتون بده
سلام خسته نباشید عای بود همچنان منتظر جلسه چهارم هستیم
مرسی مثل همیشه عالی بود
عالی بود
آقا محمد سلام من میخوام یه منوی مزاحم رو از قالبم از بین ببرم ولی هرچی میگردم پیداش نمیکم خواهشا کمکم کنید منو زیر اون سه بخش تماس با ما . درباری ما و… اگر میتونید کمکم کنید لطفا بهم اطلاع بدید اینم آدرس سایتم http://cartest.cloudsite.ir/wp/
سلام دادا
هنوز منتظر جلسات بعدیتون هستیم
لطفا آمادش کنید
چرا دیگه آموزش رو ادامه نمیدید اموزش بسیار عالی بود منتظرم
خواهش میکنم ادامه بدید تازه داشتم ی چیزی میشدم:(
ممنون بابت آموزش عالیتون خسته نباشید
به نظر من همین آموزش های طراحی قالب وردپرس رو ادامه بدید.
ممنون.
من توی این : bloginfo(‘name’)
بحای name نوشتم title .
درست بود.
میشه از wp_title استفاده نکرد؟
من از wp استفاده نکردم
به جای name نوشتم title
درست بود.
کاربرد wp رو میگید؟
اینو میدونم ولی من مثلا تو تگ تایتل از این استفاده کردم:
کاملا درست بود.
ولی شما میگین از wp استفاده کنم.
لطفا در مورد فرق این دو تا کامل تر توضیح بدین.
راستی به نظر من همین آموزش طراحی وردپرس رو ادامه بدین عالیه.
ممنون.
عالی
ولی یکم بهتر در مورد کاربرد توابع وردپرس توضیح بدید ممنون میشم.
سلام
آموزش کاملی بود،لطفا اینطور مباحث رو بیشتر اضافه کنید.ممنون از سایت خوبتون