طراحی قالب وردپرس – قسمت دوم

0

یک قالب وردپرس از صفحات زیر تشکیل شده :HTML-to-Wordpress

Index.php : قالب صفحه اصلی

Header.php : کدهای سرصفحه در این فایل قرار می گیرند.

Footer.php : کدهای پاصفحه در این فایل قرار می گیرند.

Sidebar.php : کدهای ستون کناری در این فایل قرار می گیرند.

single.php : قالب مطالب.

Comments.php : قالب نظرات.

Search.php : قالب صفحه نتایج جستجو.

Functions.php : توابع پوسته، دراصل با استفاده از این فایل می توان امکانات بیشتری برای پوسته ایجاد کرد. که پر استفاده ترین امکان نیز ، پشتیبانی از ابزارک هاست.

404.php : قالب صفحه خطای 404

 

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

مثلا کد زیر مربوط به فایل header.php هست که باید از فایل index .php برداشته میشود و به جای کد

<!doctype html>
<html >
<head>
	<meta charset="UTF-8">
	<title>  </title>
	<meta name="description" content="">
	<meta name="author" content="">
	
	<!-- Mobile Specific Meta -->	
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

	<!-- Stylesheets -->


	<link rel="stylesheet" href="<?php bloginfo('template_directory');?>/assets/css/bootstrap.min.css" media="screen">
  <link rel="stylesheet" href="<?php bloginfo('template_directory');?>/assets/css/bootstrap-responsive.min.css" media="screen">
  <link rel="stylesheet" href="<?php bloginfo('template_directory');?>/assets/css/style.css" >

</head>
<body>

  <div class="container  ">

   <header>

    <div class="row  ">
      <div class="span12">
        <div class="header"> </div>
        <div class="breadcrump">  

          <nav>


          </nav>
        </div>
      </div>
    </div>
  </header>
	<!-- site head end -->

کد زیر را قرار میدهیم ( این کد در واقع فایل header.php را به index.php  لینک میکند )

<?php get_header(); ?>

برای بخش footer.php و sidebar.php همین کار را میکنیم.

و از دو تابع

 <?php get_sidebar(); ?>

 
 <?php get_footer(); ?>

استفاده میکنیم .

 

تا اینجای پروژه را از لینک زیر دانلود کنید

دانلود

 

—————————————-

نکته : به کمک دستور زیر مسیر فایل های css و jquery و .. را به رودپرس میدهیم.

 

<?php bloginfo('template_directory');?>

 

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

آدرس ایمیل شما منتشر نخواهد شد.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.