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

آموزش ساخت پوسته وردپرس به صورت قدم به قدم (در حال تکمیل)

5 دقیقه برای خواندن کافیست
0
0
51

آموزش تبدیل پوسته Html به پوسته وردپرس (ساخت پوسته وردپرس)

 

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

  • ابتدا در مسیر wp-content/themes/ یک پوشه به نام پوسته دلخواه خود درست کنید . مثال : sample-theme
  • تمام محتویات و فایل های مربوط به پوسته های html را درون این پوسته بریزید  .
  • سپس یک فایل با نام style.css ایجاد کنید .

توضیحات : وردپرس برای پیدا کردن نام پوسته و مشخصات مانند نسخه پوسته را از فایل style.css می خواند حال شما برای تعریف این مشخصات از کامنت زیر در فایل style.css استفاده کنید : ( کد پایین را در ابتدا پوسته قرار دهید! )

/*
Theme Name: نام پوسته شما 
Theme URI: آدرس URL پوسته 
Description: توضیح مختصر پوسته
Version: 1.0 یا هر نسخه دیگر
Author: نام کاربری شما در سایت WordPress.org
Author URI: آدرس سایت شما
Tags: برچسب های پوسته
*/

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

خب تا اینجا پوسته را به وردپرس شناسانده ایم .

  • در ادامه شما باید بدنه اصلی پوسته html خود یعنی فایل index.html را قرار دهید اگر این فایل را ندارید نگران نباشید کد های زیر را در این فایل با ویرایشگر محبوب خود قرار دهید :
<!DOCTYPE html>
	<head>
		<meta charset="UTF-8">
		<title>How To Convert HTML Template to WordPress Theme - WPExplorer</title>
		<link rel="stylesheet" type="text/css" media="all" href="style.css"/>
	</head>
	<body>
		<div id="wrap">
			<header class="header">
				<p>This is header section. Put your logo and other details here.</p>
			</header><!-- .header -->
			<div class="content">
				<p>This is the main content area.</p>
			</div><!-- .content -->
			<div class="sidebar">
				<p>This is the side bar</p>
			</div><!-- .sidebar -->
			<footer class="footer">
				<p>And this is the footer.</p>
			</footer><!-- .footer -->
		</div><!-- #wrap -->
	</body>
</html>

در فایل index.html بالا برای استایل دادن به ظاهر سایت از یکسری کلاس سی اس اس استفاده شده که باید آن ها را در فایل style.css اضافه شود :

#wrap{margin: 0 auto; width:95%; margin-top:-10px; height:100%;}
.header{width:99.8%; border:1px solid #999;height:135px;}
.content{width:70%; border:1px solid #999;margin-top:5px;}
.sidebar{float:right; margin-top:-54px;width:29%; border:1px solid #999;}
.footer{width:99.8%;border:1px solid #999;margin-top:10px;}
  • خب حالا فایل index.html را به index.php تغیر نام دهید .
  • در مرحله بعد طبق استاندارد های وردپرس باید یک فایل جدید با نام header.php ایجاد کنید و تمام بخش <head> و </head> فایل index.html را کات (جدا) و در فایل header.php قرار دهید . دقیقا این تکه کد :
	<head>
		<meta charset="UTF-8">
		<title>How To Convert HTML Template to WordPress Theme - WPExplorer</title>
		<link rel="stylesheet" type="text/css" media="all" href="style.css"/>
	</head>

خب شاید حالا از خود بپرسید بخش head از کجا در فایل index.php صدا زده می شود ؟ برای اینکار شما باید بعد از حذف head تکه کد php زیر را جایگزین آن بکنید :

<?php get_header(); ?>

یعنی :

<!DOCTYPE html>


<?php get_header(); ?>

<body>
<div id="wrap">
    <header class="header">
        <p>This is header section. Put your logo and other details here.</p>
    </header><!-- .header -->
    <div class="content">
        <p>This is the main content area.</p>
    </div><!-- .content -->
    <div class="sidebar">
        <p>This is the side bar</p>
    </div><!-- .sidebar -->
    <footer class="footer">
        <p>And this is the footer.</p>
    </footer><!-- .footer -->
</div><!-- #wrap -->
</body>
</html>

به همین ترتیب فایل های footer.php و sidebar.php را درست کنید  تا تکه کد های آن را هم از بدنه فایل های index.php جدا کنیم و شارت کد آن ها را مانند head قرار دهیم .

در کد های html باقیمانده تکه کد های زیر را در فایل footer.php قرار می دهیم :

<footer class="footer">
  <p>And this is the footer.</p>
</footer>

بعد از آن تکه کد زیر را به جای footer در فایل index.html قرار دهید :

<?php get_footer(); ?>

توابع ضروری وردپرس برای طراحی قالب وردپرس

مشاهده محتوا بیشتر
ادامه مطلب شمشاد امیری خراسانی
بارگذاری بیشتر در آموزش ساخت پوسته وردپرس

دیدگاه بگذارید

avatar
  اشتراک  
به من اطلاع بده

همچنین ببینید

تست ارتباط ‍پایگاه داده mysql با لاراول

برای اینکه تست کنید ارتباط برنامه لاراول شما با پایگاه داده برقرار است در فایل : routes/we…