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

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

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

قسمت ششم : معرفی سه فایل search.php , tag.php , category.php

تا پایان آموزش قسمت پنجم ساخت قالب های وردپرس، قالب وردپرسی که در حال ساخت آن هستیم دارای فایل های زیر بود.

style.css : فایل اصلی استایل قالب شما و معرف قالب به وردپرس
index.php : فایل صفحه اصلی وب سایت وردپرس شما
single.php : فایل مسئول نمایش محتوای یک نوشته یا پست سایت شما به صورت کامل
functions.php : فایلی کاربردی که مسئول اضافه کردن ویژگی های جدید به قالب و سایت وردپرس شما می باشد. با قابلیت های فراوان دیگر.
header.php : نمایش بخش header سایت شما
footer.php : نمایش بخش پایین سایت شما
screenshot.png : قابلیت استفاده به عنوان لوگو یا تصویر قالب وردپرس شما در بخش پوسته ها

در این آموزش قصد داریم 3 فایل tag.php , category.php و search.php را به قالب خود اضافه کنیم.

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

در این قسمت مطالب زیر را به ترتیب بررسی خواهیم کرد:

معرفی و کاربرد فایل tag.php در وردپرس
معرفی و کاربرد فایل category.php در قالب های وردپرس
معرفی و کاربرد فایل search.php در سایت وردپرس
نتیجه گیری

1. معرفی و کاربرد فایل tag.php در قالب وردپرس

tag, تگ یا برچسب، کلمه های کلیدی هستند که شما به نوشته های وب سایت خود اضافه می کنید. در وردپرس در صفحه ی ویرایش هر نوشته در قسمت نشان داده شده در عکس زیر، شما هر چقدر که تمایل داشته باشید می توانید برچسب به نوشته ی خود اضافه کنید ( البته پییشنهاد می کنیم در برچسب گذاری استانداردهای لازم را مد نظر قرار دهید ).

در وردپرس این برچسب ها توسط فایل tag.php مدیریت و نمایش داده می شوند.

هر تگ یا برچسب مانند هر دسته بندی که در قسمت نوشته ها / دسته ها اضافه می کنید دارای یک ID می باشد، پس می توان برچسب ها را به نوعی یک نوع دسته بندی در وردپرس تصور کرد که توسط فایل tag.php مدیریت می شوند.

فایل tag.php به صورت اتوماتیک توسط وردپرس شناسایی می شود و هنگامی که کاربر بر روی یک برچسب کلیک می کند این فایل اجرا می شود.

فرض کنید شما یک سایت موزیک دارید و به هر موزیک پاپ یک برچسب به نام “pop ” اضافه می کنید. شما می توانید با استفاده از این برچسب تمام توشته های دارای این برچسب را نمایش بدهید.

هر تگ یا برچسب دارای یک لینک هست که آن را به فایل tag.php ارجاع می دهد و سپس در فایل tag.php تمام نوشته هایی که تگ مذکور را دارند نمایش داده می شوند.

در قسمت دوم آموزش ساخت قالب وردپرس درباره ی اطلاعاتی که یک چرخه ی وردپرس می تواند در مورد یک نوشته به ما بدهد صحبت کردیم. یکی از این اطلاعات برچسب های اختصاص داده شده به یک پست بودند که با تابع ()the_tag قابل نمایش بودند.

با استفاده از این تابع تگ های هر نوشته به همراه یک لینک به صفحه ی tag.php ارجاع داده می شود. سپس در فایل tag.php شما هر گونه که بخواهید می توانید نوشته هایی که دارای این برچسب می باشند را نمایش دهید. اگر بخواهید می توانید تمام متن آن ها را نمایش بدهید و یا یک لینک به نوشته ی اصلی را نمایش دهید.

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

<?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 add_thanks_message(); ?> </p>	
							<p> <?php the_tags(); ?> </p>        <!--  show the post tags  -->


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

<?php
	get_footer();
?>

به سطر شماره 21 نگاه کنید . ما با استفاده از تابع ()the_tag برچسب های هر پست را به نمایش می گذاریم. حال به یکی از نوشته های سایت خود می رویم که برچسب های زیر به آن اضافه شده است:

همان طور که می بینید ما 3 برچسب داریم. بر روی نمایش نوشته کلیک می کنیم تا به صفحه ی نمایش این نوشته برویم. همان طور که می دانید نمایش نوشته های تکی توسط فایل single.php انجام می شود.

نوشته ی ما به صورت زیر است. همان طور که می بینید هر 3 برچسب با استفاده از فایل single.php که در بالا نمایش دادیم در انتهای نوشته به صورت زیر آورده شده است:

حال با کلیک بر روی هر یک از این برچسب ها قاعدتاً باید به صفحه ی tag.php برویم اما به دلیل اینکه این فایل را هنوز نساخته ایم شما به صفحه ی اصلی سایت هدایت خواهید شد.

پس به قالب در حال ساخت می رویم و فایل tag.php را اضافه می کنیم. ساختار کدها در این فایل مانند فایل index.php می باشد چرا که ما در این فایل می خواهیم گروهی از نوشته ها را به نمایش بگذاریم.

با این تفاوت که در tag.php ما فقط پست هایی را نمایش می دهیم که مربوط به برچسبی هست که روی آن کلیک کرده ایم اما در فایل index.php همه پست ها را نمایش می دهیم.

بعد از ساخت فایل tag.php اگر بر روی تگ ها کلیک کنید به این صفحه هدایت می شوید اما صفحه سفید و خالی است چرا که ما هنوز کدی در فایل tag.php قرار نداده ایم.

کد زیر را در فایل tag.php کپی کنید:

<?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>  <?php the_tags(); ?></p>
								<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();
 ?>

حال در سایت به سراغ برچسب هایی می رویم که از آن ها در چند پست استفاده کرده ایم و بر روی یکی از این برچسب ها کلیک می کنیم.

در تصویر زیر یکی از پست ها که در مورد PHP است انتخاب کرده ایم، بر روی تگ یا برچسب آموزش PHP کلیک می کنیم:

همان طور که در تصویر زیر می بینید با ساختن فایل tag.php و قرار دادن کد مربوطه در آن، با کلیک بر روی هر برچسب، بر اساس کد ، خلاصه ای از نوشته هایی که دارای آن برچسب هستند و تگ های هر پست به همراه آدرس هر نوشته در فایل tag.php به نمایش در می آیند.

در زیر تگ آموزش PHP خط قرمز کشیده ایم که مشخص می شود همه ی پست هایی که نمایش داده شده اند برچسب مربوطه را دارند.

همان طور که در کد فایل tag.php می بینید از یک حلقه وردپرس استفاده کرده ایم که مانند حلقه هایی است که در فایل index.php و single.php به کار برده ایم.

حال می خواهیم برچسب موردنظر که بر روی آن کلیک شده و ما را به فایل tag.php هدایت کرد را در فایل tag.php نمایش دهیم. برای این کار تابع single_tag_title را مانند زیر در فایل tag.php قرار بدهید:

<?php
	get_header();

?>
<body>
		<div class="container" >
			<div class="row">
				<h2> <?php single_tag_title(); ?> </h2>
<?php             if(have_posts() ) {

که نتیجه مانند زیر است، می بینید که برچسب آموزش PHP با استفاده از تابع بالا نمایش داده شد:

2. معرفی و کاربرد فایل category.php در قالب های وردپرس

فایل category.php مربوط به دسته ها در وردپرس می باشد. همان طور که می دانید می توانید در قسمت نوشته ها / دسته ها دسته های دلخواه خود را اضافه کنید و نوشته های خود را در این دسته ها قرار دهید.

فایل category.php مسئول این است تا نوشته هایی را که در یک دسته قرار گرفته اند را به نمایش بگذارد.

این فایل به صورت اتوماتیک توسط وردپرس شناسایی می شود و هنگامی که کاربر بر روی لینک یک دسته در وردپرس کلیک می کند این فایل اجرا می شود.

در قسمت دوم آموزش ساخت قالب وردپرس ذکر کردیم که یکی از اطلاعاتی که چرخه ی وردپرس می تواند از یک نوشته دریافت کند دسته هایی می باشد که آن نوشته در آن ها قرار دارد.

و همچنین گفتیم برای اینکه دسته هایی که یک نوشته در آن قرار دارد را دریافت کنیم باید از تابع ()the_category در چرخه ی وردپرس و یا فایل single.php استفاده کنیم.

فایل single.php را باز کنید . در قسمتی که در عکس زیر می بینید با استفاده از تابع ()the_category دسته های هر نوشته را نمایش داده ایم:

یکی از نوشته های سایت را باز کنید تا دسته های آن را ببینید:

همان طور که می بینید دسته های این نوشته قسمت آموزش و برق هستند که توسط تابع ()the_category نمایش داده شده اند.

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

<?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>  <?php the_category(); ?></p>
								<p>  <?php the_tags(); ?></p>
								<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();
 ?>

حالا در تصویر بالا بر روی دسته برق کلیک می کنیم و پست های مربوط به این دسته مطابق کد بالا که در فایل category.php است نمایش داده می شود.

به شکل زیر که نتیجه کد بالا هست توجه کنید:

مانند آن چه که در کد صفحه category.php می بینید ابتدا عنوان، سپس خلاصه، بعد از آن دسته ها، برچسب ها و در آخر read more که همان لینک به صفحه نمایش نوشته است ، نمایش داده شده است.

اگر بخواهیم نام دسته ای که در حال حاضر در آن هستیم نمایش دهیم کافی است از تابع ()single_cat_title استفاده کنیم. در فایل category.php این تابع را مانند زیر قرار می دهیم:

<?php
	get_header();

?>
<body>
		<div class="container" >
			<h2> <?php echo single_cat_title(); ?></h2>
			<div class="row">

که نتیجه ی آن مانند زیر است:

3. معرفی و کاربرد فایل search.php در سایت وردپرس

قبل از توضیح این فایل ابتدا یک فایل به نام search.php بسازید.

در وردپرس فایل search.php به صورت اتوماتیک شناسایی می شود و هنگامی که از سیستم جستجوی پیش فرض در وردپرس استفاده کنید، این فایل برای نمایش نتایج جستجو اجرا می شود.

سیستم پیش فرض جستجو در وردپرس از تابع ()get_search_form برای نمایش فرم مخصوص جستجو استفاده می کند. کار برای شما راحت شده است. دیگر نیازی به طراحی فرم جستجو و انجام کارهای مربوط به آن نیست.

فقط کافی است تابع ()get_search_form را جایی که قصد دارید باکس جستجو را نمایش دهید فرا بخوانید تا یک باکس جستجو برای شما نمایش داده شود.

قبل از هر کاری کد زیر را درون فایل search.php قرار دهید:

<?php
	get_header();

?>
<body>
		<div class="container" >
			<h2> نتایچ جستجو برای <?php echo $_GET['s']; ?> به صورت زیر است :</h2>
			<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>  <?php the_category(); ?></p>
								<p>  <?php the_tags(); ?></p>
								<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();
 ?>

ما قصد داریم در این قالب باکس جستجو را در صفحه اصلی قرار دهیم پس آن را در فایل index.php قرار می دهیم.

باکس جستجو را با استفاده از تابع ()get_search_form مطابق زیر در فایل index.php قرار می دهیم.

پس فایل index.php اکنون مانند زیر است:

<?php
	get_header();
?>
<body>
		<div class="container" >
			<div class="row searchbox" style="margin-bottom: 15px;">
						<?php get_search_form(); ?>
			</div>
			<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();
 ?>

که تصویر آن مانند زیر است:

در زیر کلمه PHP را در باکس جستجو وارد می کنیم و جستجو می کنیم نتیجه را ببینید:

همان طور که ملاحظه می کنید پس از جستجو فایل search.php اجرا می شود و نتایج را به ما نشان می دهد. نتایج بر اساس کدهایی که در فایل search.php وارد کردیم نمایش داده می شوند.

نتیجه گیری و جمع بندی

می خواستیم در این قسمت در مورد Pagination هم صحبت کنیم ولی به دلیل طولانی شدن این پست و همچنین طولانی بودن مبحث Pagination، آن را در قسمت بعدی توضیح خواهیم داد.

همان طور که ملاحظه کردید نحوه ی استفاده از چرخه وردپرس (WordPress loop) در فایل های مختلف در وردپرس تقریباً یکسان می باشد و تفاوت چندانی ندارند. بعضی از فایل ها در وردپرس به صورت اتوماتیک شناسایی ،مانند 3 فایلی که در این قسمت بررسی کردیم و بعضی از فایل ها را باید فراخوانی کنیم تا از آن ها استفاده کنیم.

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

در قسمت بعدی آموزش که قصد داریم در مورد Pagination و کاربرد آن در وردپرس صحبت کنیم با ما همراه باشید.

Series Navigation

قسمت ششم : معرفی سه فایل search.php , tag.php , category.php

معرفی و کاربرد فایل tag.php در وردپرس

معرفی و کاربرد فایل category.php در قالب های وردپرس

معرفی و کاربرد فایل search.php در سایت وردپرس

نتیجه گیری

1. معرفی و کاربرد فایل tag.php در قالب وردپرس

2. معرفی و کاربرد فایل category.php در قالب های وردپرس

3. معرفی و کاربرد فایل search.php در سایت وردپرس

نتیجه گیری و جمع بندی