آموزش تبدیل html به وردپرس - قسمت اول (نقسیم بندی فایل ها)

image post

آموزش تبدیل html به وردپرس - قسمت اول (نقسیم بندی فایل ها)

وردپرس cms محبوبی است که میتوان از آن درپروژه های خبری , فروشگاهی و .. استفاده نمود , این cms همواره بروز میشود و از هزاران پلاگین با امکانات بالا بر خوردار است , همچنین به صورت کامل از زبان و تاریخ فارسی پشتیبانی می نماید !

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

ابتدا پوسته html خود را آماده می نماییم , من یک ساحتار ساده در این قسمت آماده کرده ام

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My Theme</title>
    <link href="<?php echo esc_url( get_template_directory_uri() ); ?>/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

<div id="header">

<img src="img/logo.png">
<h1>My First Wordpress Websie</h1>

</div>

<div id="menu">

<ul>
<li>Home</li>
<li>Shop</li>
</ul>

</div>


<div id="sidebar">

    <div class="box">
        <h3>Sidebar Box</h3>
        <ul>
            <li>Siderbar Titlte</li>
            <li>Siderbar Titlte</li>
            <li>Siderbar Titlte</li>
            <li>Siderbar Titlte</li>
            <li>Siderbar Titlte</li>
            <li>Siderbar Titlte</li>
        </ul>   
    </div>

    <div class="box">
        <h3>Sidebar Box</h3>
        <ul>
            <li>Siderbar Titlte</li>
            <li>Siderbar Titlte</li>
            <li>Siderbar Titlte</li>
            <li>Siderbar Titlte</li>
            <li>Siderbar Titlte</li>
            <li>Siderbar Titlte</li>
        </ul>   
    </div>

</div>

<div id="main">

    <div class="posts">
        <h2>Post Title></h2>
        <img src="posts.png">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

    <div class="posts">
        <h2>Post Title></h2>
        <img src="posts.png">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>


    <div class="posts">
        <h2>Post Title></h2>
        <img src="posts.png">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

</div>

<div id="footer">

    <div class="footer-box">
        <h3>Footer Title</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>

    <div class="footer-box">
        <h3>Footer Title</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>

    <div class="footer-box">
        <h3>Footer Title</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>

</div>

سپس فایل های php زیر را در کنارشان ایجاد می نماییم

  • index.php
  • single.php
  • page.php
  • sidebar.php
  • header.php
  • footer.php

باید کد های پوسته کد را قسمت بندی نماییم

قسمت هایی که مربوط به header است را در فایل header.php کپی می نماییم

برای مثال :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My Theme</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

<div id="header">

    <img src="img/logo.png">
    <h1>My First Wordpress Websie</h1>

</div>

<div id="menu">

    <ul>
        <li>Home</li>
        <li>Shop</li>
    </ul>

</div>

همانطور که مشاهده می کنید کد هایی که در همه صفحات در قسمت سربرگ وجود دارد باید در فایل header قرار بگیرند ! تا همیشه مورد استفاده قرار گیرند این بخش شامل head و قسمت های لوگو , عنوان و منو می باشد که در بالای همه صفحات نمایش داده می شوند !

 بعد از بخش header باید بخش سایدبار را از سایر کد های قالب جدا نماییم , کد های سایدبار را مثل مثال پایین در بخش sidebar.php قرار دهیم.

مثال :

<div id="sidebar">

    <div class="box">
        <h3>Sidebar Box</h3>
        <ul>
            <li>Siderbar Titlte</li>
            <li>Siderbar Titlte</li>
            <li>Siderbar Titlte</li>
            <li>Siderbar Titlte</li>
            <li>Siderbar Titlte</li>
            <li>Siderbar Titlte</li>
        </ul>   
    </div>

    <div class="box">
        <h3>Sidebar Box</h3>
        <ul>
            <li>Siderbar Titlte</li>
            <li>Siderbar Titlte</li>
            <li>Siderbar Titlte</li>
            <li>Siderbar Titlte</li>
            <li>Siderbar Titlte</li>
            <li>Siderbar Titlte</li>
        </ul>   
    </div>

</div>

خب بخش بعدی محتوای اصلی سایت یا همان div main می باشد

کد div main را کپی می کنیم و در فایل index.php قرار می دهیم , این بخش همان قسمتی است که مطالب سایت نمایش داده می شود !

<div id="main">

    <div class="posts">
        <h2>Post Title></h2>
        <img src="posts.png">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

    <div class="posts">
        <h2>Post Title></h2>
        <img src="posts.png">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>


    <div class="posts">
        <h2>Post Title></h2>
        <img src="posts.png">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

</div>

پس از بخش اصلی سایت به بخش footer می رسیم که باید کد box های footer را درونش قرار دهیم !

مثال فایل footer.php :

<div id="footer">

    <div class="footer-box">
        <h3>Footer Title</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>

    <div class="footer-box">
        <h3>Footer Title</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>

    <div class="footer-box">
        <h3>Footer Title</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>

</div>

اگر دقت کرده باشید تمام قسمت های پوسته را در فایل های php کپی نموده ایم !

در قسمت بعدی این فایل هارا به هم متصل می نماییم و توابع مورد نیاز را در آنها قرار میدهیم !

موفق باشید

دنیس ریچی : یونیکس بسیار ساده هست، تنها یک نابغه باید باشید تا بتوانید سادگی آن را درک کنید.