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

در این آموزش به شما چگونگی ساخت یک قالب وردپرس ساده را نشان میدهیم.

مراحل اولیه:

اول از همه باید یه پوشه با عنوان مورد نظر خودتان در مسیر نصب وردپرس  wp-content/themes ایجاد کنید. بهتر است نام این پوشه بدون فاصله باشد و از حروف کوچک استفاده کنید.

برای این آموزش ما پوشه ای با نام tutorial_theme در مسیر یادشده ایجاد کردیم. بهتر است نام این پوشه با عنوان قالبی که قصد ساخت آن را دارید مطابقت داشته باشد.

قبل از شروع با لایه های مختلف قالبی که در این آموزش قصد داریم ارائه دهیم آشنا می شوید، که شامل header, sidebar, content area , footer میباشد و در تصویر زیر مشخص شده است.

قالب وردپرس

برای انجام این کار ابتدا فایل های زیر را به پوشه tutorial_theme خود اضافه میکنیم:

  • header.php شامل کد های سربرگ قالب میباشد.
  • index.php فایل اصلی برای موضاعات می باشد که محتوا بر اساس این صفحه بارگزاری میشود.
  • sidebar.php اطلاعات سایدبارها را شامل میشود.
  • footer.php شامل کد های پایین صفحه قالب می باشد.
  • style.css این فایل کدهای ظاهر قالب را دارا می باشد.

البته صفحات مختلف دیگری نیز میتوان برای یک قالب پیشبینی کرد. فایل های یاد شده جزو اصلی ترین صفحات برای ایجاد یه قالب وردپرس می باشد.

حال بگذارید نگاهی به آنچه در این فایل ها قرار می گیرد بندازیم:

فایل header.php

این فایل شامل کدهای زیر میباشد:

این کدها ساده شامل HTML و یک سری کد های PHP وردپرس می باشد. در این فایل شما میتوانید متا تگ های مانند عنوان وب سایت ، توضیحات کلیدی و… را مشخص کنید.

بعد از تگ title کد زیر را داریم:

که در آن ما داریم فایل استایل را به قالب معرفی میکنیم.

فایل index.php

این فایل شامل کدهای زیر میباشد:

در ابتدای این کد تابع وردپرس

را مشاهده میکنید، که این تابع فایل header.php را فراخوانی میکند و همه کدهای آن را در صفحه کنونی قرار میدهد.

در چند خط بعد از کدهای PHP وردپرس استفاده شده است:

که چک میکند آیا مطلبی وجود دارد یا نه و در صورت وجود مطلب بر اساس قالب دلخواه شما به نمایش در می آید.

کد:

این کد موضوع مطلب ارسال شده را در تگ h1 قرار میدهد و در خروجی نمایش میدهد.

کد:

این کد زمان ارسال مطلب را در تگ h4 قرار میدهد و در خروجی نمایش میدهد.

کد:

این کد محتوای اصلی مطلب را در تگ p در خروجی نمایش میدهد.

نکته: وردپرس در هنگام فراخوانی تابع the_content محتوا را در تگ p قرار میدهد.

فایل sidebar.php

این فایل شامل کدهای زیر می باشد:

در این فایل ما از توابع داخلی وردپرس برای نمایش دسته بندی و آرشیو استفاده کردیم.

فایل footer.php

این فایل شامل کدهای زیر می باشد:

این کد شامل ساده ترین نوع footer میباشد که علاوه بر این شما بر حسب نیاز خود میتوانید در این قسمت لینک های مختلف و کپی رایت و دیگر تنظیمات دلخواه خود را اضافه کنید.

فایل style.css

این فایل شامل کدهای زیر می باشد:

این فایل css ساده مربوط به ظاهر قالب می باشد.

بعد از وارد کردن کد های بالا در صفحه های مشخص شده قالب شما به شکل زیر خواهد شد:

قالب وردپرس

تبریک میگم، شما اولین قالب وردپرس خود را ایجاد کردید.

همچنین شما میتوانید برای آشنایی بیشتر با  توابع وردپرس به مرجع اصلی این توابع در سایت وردپرس مراجعه کرده و با توابع کاربردی بیشتری آشنا شوید.

تبدیل HTML به قالب وردپرس
5 (100%) 1 vote
Telegram Facebook WhatsApp +Google Twitter LinkedIn

دیدگاه خود را بیان کنید

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

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.