سلام ، به سایت شرکت هزاره سوم آریایی خوش آمدید.

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

آموزش ساخت قالب وردپرس (قسمت دوم)
آموزش ساخت قالب وردپرس (قسمت دوم)
ساخت ساختار اچ تی ام ال پوسته
تازه کار اصلی ما از این بخش آغاز می شود. باید کدهای HTML مربوط به پوسته را بنویسیم. برای کد نویسی همیشه باید دو نکته ی خیلی مهم را در نظر داشته باشید. نکته اول مختصر نویسی و تمیزی کد است و نکته ی دوم این است که کد شما باید معنا دار و خوانا باشد. از همین رو هنگام کد نویسی سعی می کنیم کدهایی قوی و مختصر با کمک تگ های HTML بنویسیم و از نام های استاندارد برای خوانا بودن کدمان استفاده نماییم.
ساختار کد HTML ما به صورت زیر است :

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

ساختار پوسته و دایرکتوری آن
ساده ترین پوسته ها در وردپرس ممکن است تنها شامل یک فایل style.css و index.php باشد ولی پوسته هایی که ما کار خواهیم کرد کمی پیشرفته تر هستند و برای کارهای مختلف و گسترده در نظر گرفته شده اند. پوسته ای که در این دوره خواهیم ساخت شامل ۶ فایل است. به پوشه وردپرس در مسیر wp-content/themes بروید و پوشه ای برای پوسته جدید خود ایجاد نمایید. در این دوره من از اسم YOUR-THEME استفاده میکنم ولی این اسم هر چیزی می تواند باشد و به انتخاب شما خواهد بود. پس از ایجاد پوشه، فایل های زیر را در پوشه ایجاد شده بسازید. ( این فایل ها خالی خواهند بود) .
index.php
sidebar.php
header.php
footer.php
functions.php
style.css
اکنون آخرین فایلی را که ساختیم در ویرایشگر متن خود باز می کنیم. بله منظور من فایل style.css است. در اول این فایل باید کدهایی را به صورت کامنت یا توضیح درج کنیم که در پنل مدیریت وردپرس هم ظاهر شود و اطلاعات کلی در مورد پوسته به سیستم وردپرس اعلام نماید. ما با کمک این کدها که وجودشان ضروری است به وردپرس اطلاعاتی از قبیل نام پوسته، آدرس اینترنتی پوسته ، توضیحات ، سازنده ی پوسته و نسخه ی آن را اعلام می نماییم.

ساخت فایل های header.php و footer.php

فایل HTML ای که در فصل قبل نوشتیم را باز کرده و همه ی کدهای بخش بالای کار را تا کد موجود در خط  <div id=”main”>در فایلی به نام header.php ذخیره می کنیم. این فایل را قبلا ساخته ایم و محتوای آن خالی بوده است ولی اکنون محتوای این فایل به صورت زیر است :

در مرحله بعد فایل footer.php را که شامل کدهای زیر می شود می سازیم.


در حال حاضر فایل های فوتر و هدر ما کامل شده و فعلا آنها را ذخیره می کنیم و سراغ فایل index.php می رویم و کد های مابین و باقی مانده را در این فایل کپی و ذخیره می نماییم.


در قدم بعدی در بالای فایل index.php و در خط اول کد زیر را اضافه می کنیم:

<? ; () php get_header ?>
قطعه کد بالا باعث میشود فایل هدر را فراخوانی نماییم. نام تابع فوق get_header است. همین کار را برای فوتر انجام میدهیم و کد زیر را در پایین ترین جای index.php قرار میدهیم:
<? ; () php get_Footer ?>
اکنون اگر وارد بخش مدیریت وردپرس شوید و پوسته را فعال نمایید و صفحه را بارگذاری مجدد نمایید و سورس صفحه را مشاهده نمایید، دقیقا کد اصلی html ما در آن موجود است. امیدوارم تا اینجای کار بدون مشکل به پیش آمده باشید. اگر همه چیز خوب پیش رفته است پس پیش به سوی فصل بعد.
ارسال نظر

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

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.

تماس با ما

شماره تماس

برگشت به منوی تماس ها

پشتیبانی واتساپ

برگشت به منوی تماس ها

برگشت به منوی تماس ها

برگشت به منوی تماس ها

برگشت به منوی تماس ها

برگشت به منوی تماس ها