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

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

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

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

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

  1. معرفی فایل index.php
  2. سایت استاتیک یا داینامیک
  3. نمایش اولین کد PHP و HTML در قالبی که طراحی کردیم.
  4. پروسه و راه های دریافت اطلاعات از دیتابیس در وردپرس
  5. نمایش تمام پست ها در صفحه اصلی با چرخه یا loop وردپرس
  6.  نحوه ی نمایش اطلاعات مختلف پست ها در چرخه وردپرس

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

 

1. معرفی فایل index.php

index.php  یکی از دو فایلی هست که هر قالب وردپرس باید آن را داشته باشد تا در سیستم وردپرس به عنوان یک قالب شناخته شود . همان طور که می دانید فایل دیگر style.css می باشد.

علاوه بر این index.php فایلی است که به صورت پیش فرض هنگامی که کاربر وارد صفحه اصلی سایت شما مثلاً به نشانی www.example.com می شود، اجرا می شود و محتوای صفحه اصلی شما را تشکیل می دهد.

شما در فایل index.php می توانید کد های PHP ، HTML ، CSS و JavaScript را در کنار هم قرار دهید و یک صفحه ی اصلی جذاب برای جذب بازدیدکننده داشته باشید.

برای معرفی فایل index.php به همین مقدار بسنده می کنیم.

2. سایت استاتیک یا داینامیک

استاتیک یعنی ثابت و داینامیک یعنی … بهتره بگوییم متغیر.

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

اما اگر سایتی داشته باشید که مدام و روزانه به تعداد صفحات و نوشته های آن اضافه می شود و دیتابیس بزرگی دارید که کاربر هر وقت به سایت شما می آید محتوای جدیدی می بیند. شما یک سایت داینامیک دارید.

اکثر سایت ها از نوع دوم هستند.

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

3.نمایش اولین کد PHP و HTML در قالبی که طراحی کردیم.

با توجه به آموزش قبل قالب ما الان شامل سه فایلindex.php ، Style.css  و screenshot.png  می باشد. فایل style.css همان طور که همه می دانیم برای ذخیره کد های CSS می باشد. برای نمایش مطالب از فایل index.php استفاده می کنیم.

همان طور که گفتیم محتوای صفحه اصلی وب سایت شما را این فایل به نمایش می گذارد، در ضمن ذکر کردیم در فایل های PHP می توان از کد های PHP ، HTML ، CSS و جاوا اسکریپت استفاده کرد. پس هر چیزی در این فایل بنویسید در صفحه ی اصلی نتیجه را می بینید.

برای شروع کد های زیر را به آن اضافه می کنیم:

<?php
		$x = 3; $y =4;
		echo $x + $y;


		echo "<h2> We are PHP programmers that enjoy nothing but coffe </h2>" ;

?>

<p> THIS IS OUR FIRST WORDPRESS THEME </p> 

<style>
		body {
			background-color: yellow;
		}

</style>
<script type="text/javascript">
	
	// write some scripts here 
</script>

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

و مانند این ، هر مقدار کد و یا فایل که مایل هستید می توانید در آن قرار بدهید.

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

4. پروسه  دریافت اطلاعات از دیتابیس در وردپرس

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

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

5. نمایش تمام پست ها در صفحه اصلی با چرخه یا loop وردپرس

ابتدا کد هایی را که در مرحله 3 در فایل index.php اضافه کردید را پاک کنید و به ادامه آموزش بروید.

چرخه یا Loop  در برنامه نویسی زمانی به کار می رود که شما قصد داشته باشید یک کار را چندین بار انجام دهید. The Loop مکانیسم اصلی وردپرس برای نمایش پست ها در خروجی یا همان صفحه ی مرور گر می باشد.

در این مرحله ما قصد داریم عنوان یا همان تیتر تمام نوشته های خود را در صفحه اصلی نمایش بدیم

خوب مسلماً از یک چرخه استفاده می کنیم و به آن دستور می دهیم که در دیتابیس جستجو کند و تا زمانی که نوشته وجود دارد عنوان و یا تیتر آن ها را در خروجی نمایش دهد.

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

<?php 
if ( have_posts() ) {
	while ( have_posts() ) {
		the_post(); 

			the_title();
			echo "<br>"	;
	} 
} 
?>

به وسیله ی معنی عبارت ها هم می توان فهمید که دستور این گونه است: اگر( if ) پست یا نوشته ای هست، در دیتابیس جستجو کن و تا زمانی که ( while ) نوشته هست، تیتر (the_title) آنها را نمایش بده و بعد از هر تیتر به خط بعدی( <br> ) برو .

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

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

6. نحوه ی نمایش اطلاعات مختلف پست ها در چرخه وردپرس

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

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

The Loop می تواند اطلاعات زیر را در مورد یک پست به ما برگرداند :

  • ()next_post_link : لینک پست بعدی
  • ()previous_post_link : لینک پست قبلی
  • ()the_category : دسته و یا دسته هایی که برای هر پست انتخاب شده اند
  • ()the_author : اسم نویسنده پست
  • ()the_content : متن اصلی نوشته
  • ()the_excerpt : نمایش 55 کلمه ی اول متن اصلی نوشته و یا مقداری که قبل از لینک read more قرار می گیرد.
  • ()the_ID : شماره و یا آیدی پست که یک عدد است و برای هیچ دو پستی یکسان نیست.( برای هر پست یک عدد متفاوت است)
  • ()the_meta : زمینه های سفارشی الصاق شده به هر پست.
  • ()the_shortlink : لینک کوتاه برای نوشته که معمولا آدرس سایت به علاوه ی شماره آیدی هر پست است.
  • ()the_permalink : لینک اصلی هر نوشته در وردپرس
  • ()the_tags : برچسب های که برای هر پست وارد شده اند
  • ()the_title : نمایش تیتر و یا عنوان نوشته
  • ()the_time : زمان انتشار پست

پس در حلقه ی وردپرس یا همان The loop کافی است مقادیر بالا را وارد کنید تا در مرورگر آن را ببینید.

در فایل index.php خود کد پایین را وارد کنید و نتیجه را ببینید:

<!DOCTYPE html>
<htmL dir="rtl">
	<head>

	</head>
<body>
<?php 
if ( have_posts() ) {
	while ( have_posts() ) {
		the_post(); 
?>
			<h3><?php the_title(); ?></h3>
			<span> <?php the_time(); ?></span> 
			<hr>
			<div> 
					<?php the_content(); ?>
			</div>

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

</body>
</htmL>

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

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

در آموزش بعدی راه حل این مشکل را مطرح می کنیم و فایل single.php و دو فایل دیگر را به شما معرفی می کنیم.

Series Navigation

آموزش طراحی وب و برنامه نویسی وردپرس آموزش وردپرس برنامه نویسی وردپرس سی اس اس | CSS اچ تی ام ال | HTML جاوااسکریپت | Javascript

To top
ورود | ثبت نام
شماره موبایل یا پست الکترونیک خود را وارد کنید

با ورود یا ثبت نام شما قوانین کراسنو را قبول دارید

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