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

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

 

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

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

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

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

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

  • در ادامه شما باید بدنه اصلی پوسته html خود یعنی فایل index.html را قرار دهید اگر این فایل را ندارید نگران نباشید کد های زیر را در این فایل با ویرایشگر محبوب خود قرار دهید :

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

  • خب حالا فایل index.html را به index.php تغیر نام دهید .
  • در مرحله بعد طبق استاندارد های وردپرس باید یک فایل جدید با نام header.php ایجاد کنید و تمام بخش <head> و </head> فایل index.html را کات (جدا) و در فایل header.php قرار دهید . دقیقا این تکه کد :

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

یعنی :


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

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

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

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

درباره نویسنده

شمشاد امیری خراسانی

بنیان گذار گروه توسعه وب آریا پاد - توسعه دهنده PHP - لاراول و وردپرس

پست های مرتبط

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *