آموزش ساخت قالب وردپرس - قسمت چهارم

This entry is part [part not set] of 8 in the series آموزش طراحی قالب وردپرس

معرفی و کاربرد دو فایل header.php و footer.php

در قسمت سوم آموزش تا ساختن و نمایش پست ها در فایل single.php پیش رفتیم. و اکنون قالب ما شامل 3 فایل index.php, single.php, و style.css و همچنین Screenshot.png می باشد.

حال دو فایل دیگر در این پست به قالب خود اضافه می کنیم header.php و footer.php.

پس به قالب در دست ساخت بروید و دو فایل بالا را بسازید تا فایل های قالب ما مانند زیر باشد:

در ادامه مطلب مباحث زیر را بررسی می کنیم:

معرفی و کاربرد فایل header.php
معرفی و کاربرد فایل footer.php
ادغام دو فایل معرفی شده با index.php
ادغام دو فایل معرفی شده با single.php
قدم آخر

1. معرفی و کاربرد فایل header.php

در یک قالب استاندارد وردپرس فایل header.php باید شامل موارد زیر باشد:

<DOCTYPE HTML!>
تگ <html>
تگ <head>
هر آنچه که باید درون تگ head قرار بگیرد شامل title, meta tags و …
قرار دادن تابع ()wp_head
بستن تگ <head/>

که یک فایل header.php استاندارد در وردپرس به شکل زیر است:

این کد را در فایل header.php خود کپی کنید.

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
    <head>
        <meta charset="<?php bloginfo( 'charset' ); ?>" />
        <title><?php wp_title(); ?></title>
        <link rel="profile" href="http://gmpg.org/xfn/11" />
        <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
        <?php wp_head(); ?>
    </head>

شاید هنگامی که طراحی سایت را از ابتدا یاد می گرفتید، به شما گفته شده و یا یاد گرفته اید، فایل style.css را به صورت مستقیم و از درون تگ <head> به صفحه سایت اضافه کنید. درون وردپرس نیز به این گونه است اما به روشی دیگر که در قسمت بعدی آموزش یعنی قسمت 5 آن را آموزش می دهیم.

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

توضیح کد بالا

DOCTYPE html : برای اینکه مرورگر تشخیص دهد شما از HTML 5 استفاده می کنید.
()language_attributes : بر اساس زبان سایت شما ویژگی های لازم را به سند HTML بر اساس DOCTYPE اضافه می کند، مثلاً برای سایت های فارسی ویژگی dir=RTL را اضافه می کند.
meta charset : باید قبل از هر تگ دیگری درون تگ <head> قرار بگیرد.
()bloginfo : انتخاب بهترین charset برای سایت شما مثلا UTF-8.
()wp_title : برای تنظیم عنوان صفحه استفاده می شود و تگ <title> را پر می کند.
کدهای خط 6 و 7 مخصوص اضافه کردن قسمت feeds می باشد.
()wp_head : باید قبل از بسته شدن تگ <head > حتماً حتماً آورده شود بسیاری از افزونه ها و قسمت های مختلف وردپرس از این تابع استفاده می کنند.

در PHP برای فرا خواندن یک فایل در فایل دیگر از تابع ()include استفاده می شود. حال که ما یک فایل به نام header.php داریم و حاوی کد هایی است که ما باید در تمام صفحات خود از آن ها استفاده کنیم، کافی است به جای نوشتن هر بار این کد ها، آنها را یک بار بنویسیم و در بقیه ی صفحات آن را فراخوانی کنیم.

در وردپرس به جای ()include از ()get_header و ()get_footer برای فراخواندن دو فایل header.php و footer.php و برای فراخواندن بقیه ی فایل ها از تابع ()get_template_part استفاده می شود.

پس ساختار فایل index.php و single.php و بقیه ی صفحات از این به بعد باید چیزی مانند زیر باشد:

البته تگ <body> در فایل footer.php بسته می شود که در مرحله ی بعد توضیح داده می شود.

<?php
	get_header();
?>
<body>

 ... all your codes goes here  ...

<?php
	get_footer()
?>

بعضی طراحان تگ <body> را در فایل header.php باز می کنند و در تگ footer.php می بندند و بعضی اوقات در فایل header.php بعد از تگ <body> یک منو برای بالای صفحه طراحی می کنند. این ها دیگر به سلایق شما بستگی دارد.

همان طور که گفتیم برای فراخوانی فایل header.php در بقیه ی فایل ها مانند index.php و single.php از تابع ()get_header استفاده می شود.

2. معرفی و کاربرد فایل footer.php

فایل footer.php کمی ساده تر است و شامل کد زیر است:

این کد را در فایل footer.php خود ذخیره کنید.

<?php wp_footer(); ?>
</body>
</html>

توجه کنید که تگ <body> و <html> در این تگ بسته می شوند و تابع مهم ()wp_footer نیز در این فایل فراخوانی می شود. حتماً این تابع را قبل از بسته شدن تگ <body/> فراخوانی کنید.

و همان طور که در بالا گفتیم برای فراخوانی فایل footer.php در بقیه ی فایل ها مانند index.php و single.php از تابع ()get_footer استفاده می شود.

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

<?php
	get_header();
?>
<body>
 
 ... all your codes goes here  ...
 
<?php
	get_footer()
?>

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

پس بر اساس دو مرحله بالا ، در مرحله 3 و 4 که در زیر آوردیم ساختار فایل های index.php و single.php به صورت زیر تغییر خواهد کرد.

3. ادغام دو فایل footer.php و header.php با index.php

اکنون فایل index.php قالبی که در حال ساخت آن هستیم حاوی کد زیر می باشد:

اگر پس از ذخیره کردن فایل ظاهر سایت شما به هم ریخت نگران نباشید به ادامه مطلب ( قسمت 5) بروید.

<?php
	get_header();
?>
<body>
		<div class="container" >
			<div class="row">
<?php
				if ( have_posts() ) {
					while ( have_posts() ) {
						the_post(); 
?>
							<div class="col-md-12 col-sm-12 post-box" >
								<h3><?php the_title(); ?></h3>
								<div> 
								<?php the_excerpt(); ?>
								</div>
							
								<p> 
									<span class="btn btn-md btn-success"> 
										<a href="<?php the_permalink(); ?>"> read more </a> 
									</span>
								</p>
							</div>
							<hr>

<?php
					}  // end while
				}  // end if

?>
			</div>
		</div>
<?php
	get_footer();
?>

پس همان طور که می بینید الان 3 فایل مورد نظر با هم ادغام شده اند و محتوای سایت ما را نمایش می دهند.

4. ادغام دو فایل footer.php و header.php با single.php

و کد زیر را در فایل single.php خود ذخیره کنید:

اگر پس از ذخیره کردن فایل ظاهر سایت شما به هم ریخت نگران نباشید به ادامه مطلب( قسمت 5) بروید.

<?php
	get_header();
?>
<body>		
		<div class="container">
			<div class="post-content">
		<?php

					/* Start the Loop */
					while ( have_posts() ) {
						the_post();
		?>
							<h1> <?php the_title() ?></h1>       <!--  show the title of post  -->
							<span> <?php the_date(); ?> </span>  <!--  show the time post published  -->
							<p>  <?php the_category(); ?></p>    <!--  show the post categories  -->
							<div>

								<?php the_content(); ?>          <!--  show the post content   -->
							</div>
							<p> <?php the_tags(); ?> </p>        <!--  show the post tags  -->


		<?php
					}  /* end loop */
		?>
			</div>
	</div>

<?php
	get_footer();
?>

و همان طور که می بینید اکنون فایل single.php شامل محتوای دو فایل header.php و footer.php نیز می باشد.

در ضمن اکنون شما می توانید admin bar را در صفحات وب سایت خود هنگامی که به صورت ادمین در حال بازدید از سایت هستید ببینید چر اکه شما دو تابع ()wp_head و ()wp_footer را در قالب خود فراخوانی کرده اید.

5. قدم آخر

بعد از جای گذاری کد های بالا در صفحه ی اصلی مجدداً مانند زیر شد یعنی نامرتب:

این به هم ریختگی در رابطه با کدهای CSS موجود در فایل ها بود که هنوز آن ها را وارد نکرده ایم.

همان طور که گفتیم در مرحله ی بعد نحوه ی صحیح وارد کردن کدهای CSS و javascript را در وردپرس بیان می کنیم. پس نگران نباشید و آموزش بعدی را دنبال کنید.

درآموزش بعدی فایل کاربردی و مهم هر قالب یعنی functions.php را معرفی می کنیم و با استفاده از این فایل ویژگی های جدید به سایت اضافه می کنیم.

Series Navigation