آموزش ساخت قالب وردپرس (قسمت دوم)
ساخت ساختار اچ تی ام ال پوسته
تازه کار اصلی ما از این بخش آغاز می شود. باید کدهای HTML مربوط به پوسته را بنویسیم. برای کد نویسی همیشه باید دو نکته ی خیلی مهم را در نظر داشته باشید. نکته اول مختصر نویسی و تمیزی کد است و نکته ی دوم این است که کد شما باید معنا دار و خوانا باشد. از همین رو هنگام کد نویسی سعی می کنیم کدهایی قوی و مختصر با کمک تگ های HTML بنویسیم و از نام های استاندارد برای خوانا بودن کدمان استفاده نماییم.
ساختار کد HTML ما به صورت زیر است :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <html> <head> </head> <body> <div id="wrapper" class="hfeed"> <div id="header"> <div id="masthead"> <div id="branding"> </div><!-- #branding --> <div id="access"> </div> <!-- #access --> </div><!-- #masthead --> </div><!-- #header --> <div id="main"> <div id="container"> <div id="content"> </div><!-- #content --> </div><!-- #container --> <div id="primary" class="widget-area"> </div><!-- #primary .widget-area --> <div id="secondary" class="widget-area"> </div><!-- #secondary --> </div><!-- #main --> <div id="footer"> <div id="colophon"> <div id="site-info"> </div><!-- #site-info --> </div> <!-- #colophon --> </div><!-- #footer --> </div><!-- #wrapper --> </body> </html> |
کد فوق را در ویرایشگر متنی خود کپی نمایید و در جایی ذخیره نمایید چون از این ساختار کد بسیار استفاده خواهیم کرد. قبل از ادامه ی آموزش یک سری نکات مهم را باید یادآور شد. متوجه شده اید که در بخش اصلی HTML، ۲ بخش برای ابزارک ها در نظر گرفته شده است که بعد از بخشی که مربوط به مطالب سایت است کدنویسی شده اند. همین چند خط ساده به مرور و در فصل های بعدی و پس از اتمام دوره تبدیل به یک پوسته حرفه ای وردپرس خواهد شد.
ساختار پوسته و دایرکتوری آن
ساده ترین پوسته ها در وردپرس ممکن است تنها شامل یک فایل style.css و index.php باشد ولی پوسته هایی که ما کار خواهیم کرد کمی پیشرفته تر هستند و برای کارهای مختلف و گسترده در نظر گرفته شده اند. پوسته ای که در این دوره خواهیم ساخت شامل ۶ فایل است. به پوشه وردپرس در مسیر wp-content/themes بروید و پوشه ای برای پوسته جدید خود ایجاد نمایید. در این دوره من از اسم YOUR-THEME استفاده میکنم ولی این اسم هر چیزی می تواند باشد و به انتخاب شما خواهد بود. پس از ایجاد پوشه، فایل های زیر را در پوشه ایجاد شده بسازید. ( این فایل ها خالی خواهند بود) .
index.php
sidebar.php
header.php
footer.php
functions.php
style.css
sidebar.php
header.php
footer.php
functions.php
style.css
اکنون آخرین فایلی را که ساختیم در ویرایشگر متن خود باز می کنیم. بله منظور من فایل style.css است. در اول این فایل باید کدهایی را به صورت کامنت یا توضیح درج کنیم که در پنل مدیریت وردپرس هم ظاهر شود و اطلاعات کلی در مورد پوسته به سیستم وردپرس اعلام نماید. ما با کمک این کدها که وجودشان ضروری است به وردپرس اطلاعاتی از قبیل نام پوسته، آدرس اینترنتی پوسته ، توضیحات ، سازنده ی پوسته و نسخه ی آن را اعلام می نماییم.
1 2 3 4 5 6 7 8 9 10 11 | /* Theme Name: Your-Theme Theme URI: http://iranhightechnology.com Description: A search engine optimized website framework for WordPress Author: hamed ganjbakhsh Author URI: http://iranhightechnology.com Version: 1.0 Tags: Comma-separated tags that describe your theme Your theme can be your copyrighted work Like WordPress, this work is released under GNU General Public License, version 2 (GPL) http://www.gnu.org/licenses/old-licenses/gpl-2.0.html */ |
ساخت فایل های header.php و footer.php
فایل HTML ای که در فصل قبل نوشتیم را باز کرده و همه ی کدهای بخش بالای کار را تا کد موجود در خط <div id=”main”>در فایلی به نام header.php ذخیره می کنیم. این فایل را قبلا ساخته ایم و محتوای آن خالی بوده است ولی اکنون محتوای این فایل به صورت زیر است :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <html> <head> </head> <body> <div id="wrapper" class="hfeed"> <div id="header"> <div id="masthead"> <div id="branding"> </div><!-- #branding --> <div id="access"> </div> <!-- #access --> </div><!-- #masthead --> </div><!-- #header --> <div id="main"> |
در مرحله بعد فایل footer.php را که شامل کدهای زیر می شود می سازیم.
1 2 3 4 5 6 7 8 9 10 | </div><!-- #main --> <div id="footer"> <div id="colophon"> <div id="site-info"> </div><!-- #site-info --> </div> <!-- #colophon --> </div><!-- #footer --> </div><!-- #wrapper --> </body> </html> |
در حال حاضر فایل های فوتر و هدر ما کامل شده و فعلا آنها را ذخیره می کنیم و سراغ فایل index.php می رویم و کد های مابین و باقی مانده را در این فایل کپی و ذخیره می نماییم.
1 2 3 4 5 6 7 8 | <div id="container"> <div id="content"> </div><!-- #content --> </div><!-- #container --> <div id="primary" class="widget-area"> </div><!-- #primary .widget-area --> <div id="secondary" class="widget-area"> </div><!-- #secondary --> |
در قدم بعدی در بالای فایل index.php و در خط اول کد زیر را اضافه می کنیم:
<? ; () php get_header ?>
قطعه کد بالا باعث میشود فایل هدر را فراخوانی نماییم. نام تابع فوق get_header است. همین کار را برای فوتر انجام میدهیم و کد زیر را در پایین ترین جای index.php قرار میدهیم:
<? ; () php get_Footer ?>
اکنون اگر وارد بخش مدیریت وردپرس شوید و پوسته را فعال نمایید و صفحه را بارگذاری مجدد نمایید و سورس صفحه را مشاهده نمایید، دقیقا کد اصلی html ما در آن موجود است. امیدوارم تا اینجای کار بدون مشکل به پیش آمده باشید. اگر همه چیز خوب پیش رفته است پس پیش به سوی فصل بعد.
