تبدیل قالب HTML به وردپرس مرحله دوم طراحی یک قالب وردپرسی است که در دوره جامع آموزش طراحی قالب وردپرس این موضوع رو به صورت کامل توضیح دادیم پس اگر به دنبال یک آموزش صفر تا صد هستید حتماً از این دوره استفاده کنید چون در این دوره طراحی بهترین قالب فروشگاهی رو یاد خواهید گرفت. اما در این آموزش می خواهیم به صورت خیلی خلاصه نحوه تبدیل قالب html به وردپرس رو توضیح دهیم البته دقت کنید که تبدیل قالب html به php منظور همون تبدیل قالب html به وردپرس است چون وردپرس با زبان php نوشته شده است و ما از این زبان برای همگام سازی قالب با وردپرس استفاده می کتیم.
دلیل تبدیل قالب html به وردپرس چیست؟
شاید از خودتون سوال کنید دلیل تبدیل قالب html به قالب وردپرس چیست و چرا باید این کار رو انجام دهید در ادامه می خواهیم توضیح دهیم دلیل این کار چیست. ببینید شما می تونید از قالب html هم در سایت خود استفاده کنید اما برای تغییر یک بخش خاص نیاز دارید که برید داخل کدهای قالب و هربار کدهای قالب رو تغییر دهید که عملاً یک کار بیهوده و تقریباً نشدی است چون اگر تعداد مطالب و محصولات سایت شما زیاد شود شما نمی تونید به راحتی سایت رو مدیریت کنید و بارها دچار مشکل خواهید شد.
اما اگر تبدیل قالب HTML به وردپرس رو انجام دهید شما دیگه خیلی راحت می تونید تمام بخش های سایت رو از یک داشبود کنترل و مدیریت کنید مثلاً می تونید به راحتی نوشته های خودتون رو منتشر کنید بدون اینکه نیاز باشه وارد کدهای قالب سایت شوید و هزاران مزیت دیگه داره که اگر بخوام براتون بگم باید تا فردا بنویسم اما در کل بدونید شما با تبدیل قالب html به وردپرس قالب سایت خود را داینامیک یا پویا کرده اید.
تبدیل قالب html به ووکامرس
تبدیل قالب html به ووکامرس با تبدیل قالب html به وردپرس تفاوتی ندارد فقط چون افزونه ووکامرس یک فروشگاه ساز برای وردپرس است پس نیاز هست که شما قالب خود را برای این افزونه نیز سازگار کنید البته این موضوع در صورتی است که شما قصد داشته باشید مانند دوره طراحی قالب وردپرس یک سایت فروشگاهی مانند تصویر زیربالا طراحی کنید.
آموزش تبدیل قالب html به php
قبل از تبدیل قالب html به وردپرس شما باید یکسری نکات اساسی رو بدونید تا بتونید درک بهتری از این فرآیند داشته باشید اولین چیزی که باید بدونید ساختار قالب های وردپرسی است یعنی در وردپرس یکسری فایل ها از قبل برای بخش های مختلف مشخص شده که شما باید صفحات خود را به این شکل به وردپرس بفهمونید در ادامه با تصویر مثالی رو توضیح خواهم داد که بهتر متوجه شوید
در تصویر بالا شما شاهد یکسری فایل ها هستید که مربوط به قالب های وردپرسی است و قبل از تبدیل قالب HTML به وردپرس باید با این فایل ها آشنا شوید اگر از بالا بخواهیم شروع کنیم و تک تک فایل هارو توضیح دهیم به شکل زیر است
- پوشه assets : فایل های css و دیگر فایل ها در این پوشه قرار می گیرد که دل به خواهی است
- پوسه fonts : فونت های سایت رو می تونید در این پوشه اضافه کنید
- پوسه lang : ترجمه های سایت در زبان های مختلف در این پوشه قرار می گیرد
- پوشه woocommerce : تمام فایل های ضروری افزونه ووکامرس در این پوشه قرار می گیرد
- فایل 404 : کدهای خطای پیدا نشد یا 404 سایت ها در این فایل قرار می گیرد
- فایل comments.php : کدهای بخش فرم نظرات در این قسمت قرار می گیرد
- فایل footer.php : کدهای فوتر در این بخش قرار می گیرد
- فایل functions.php : توابع php قالب در این فایل قرار می گیرد یک جورایی مغز قالب است
- فایل header.php : کدهای بالای سایت یا هدر در این بخش قرار می گیرد
- فایل home.php : کدهای صفحه اصلی قالب در این فایل قرار می گیرد
- فایل index.php : این فایل جکم تمام فایل های دیگر رو دارد و اگر بخشی رو مشخص نکرده باشید از این فایل فراخوانی می شود
- فایل ltr.css : کدهای چپ چین کردن قالب برای زبان های انگلیسی در این فایل قرار می گیرد
- فایل page.php : کدهای صفحات یا برگه های سایت در این فایل قرار می گیرد
- فایل post.php : تمام کدهای نوشته های سایت رو باید در این بخش قرار دهید
- فایل screenshot.png : تصویر قالب است که در بخش نمایش -> پوسته ها نمایش داده می شود
- فایل sidebar.php : کدهای سایدبار رو باید در این بخش قرار دهید
- فایل single.php : کدهای صفحات تکی مانند صفحه محصولات و صفحه نوشته در این قسمت قرار می گیرد
- فایل style.css : کدهای استایل اصلی قالب رو باید در این فایل قرار دهید
- فایل woocommerce.php : کدهای php مربوط به ووکامرس رو در این فایل اضافه کنید
پس تا اینجای کار ما با تمام فایل های مهم یک قالب وردپرسی برای تبدیل قالب HTML به وردپرس آشنا شدیم حالا می خواهیم وارد جزئیات شویم و نحوه انتقال کدهای html به php رو توضیح دهیم.
تمام تغییراتی که از این به بعد انجام خواهیم داد در پوشه themes وردپرس است یعنی شما باید پوشه قالب html رو به آدرس wp-content/themes کپی کنید یعنی مثلا اگر قالبتون نام پوشه آن kitwp است آن را کلاً کپی کنید و به مسیر گفته شده قرار دهید و آموزش های زیر رو دنبال کنید.
نکته :
تبدیل قالب html به قالب وردپرس
برای شروع تبدیل قالب HTML به وردپرس شما باید کدهای زیر رو در ابتدای فایل style.css قرار دهید دلیل آن هم این است که قالب شما در بخش پوسته های وردپرس نمایش داده شود
/*
Theme Name: نام قالب
Author: نویسنده قالب
Author URI: آدرس سایت نویسنده
Description: توضیحات قالب
Version: 1.0 نسخه قالب مثلا ورژن
License: GNU General Public License v2 or later توضیحات لایسنس
License URI: http://www.gnu.org/licenses/gpl-2.0.html آدرس توضیحات لایسنس
*/انتقال کدهای html به بخش های مربوطه
حالا نوبت به قرار دادن کدهای html به بخش های مربوطه در وردپرس رسیده یعنی شما باید تمام کدهای سایدبار رو در فایل مربوطه یعنی فایل sidebar.php قرار دهید. زمانی که شما قالب html می نویسید در فایل index.html یا فایل های دیگه بخش هایی مثل فوتر، هدر و سایدبار تکرار شده است شما می تونید کدهای هر کدوم از این بخش هارو کپی کنید و در فایل مربوط که در بالا هرکدوم رو توضیح دادیم قرار دهید در ادامه مقاله تبدیل قالب HTML به وردپرس نحوه نوشتن کدهای php در بین کدهای html رو توضیح خواهیم داد.
نوشتن کدهای php در بین کدهای html
یکی از قابلیت های فوق العاده زبان php امکان code embedded آن است یعنی شما می تونید ترکیبی از کدهای html و php داشته باشید و در بین کدهای اچ تی ام ال هر جا نیاز داشتید از کدهای پی اچ پی برای داینامیک کردن استفاده کنید اما نکته ای که برای این باید رعایت کنید استفاده از علامت زیر است یعنی تمام کدهای php رو باید در بلاک متنی زیر قرار دهید در غیر اینصورت کدهای شما کار نخواهد کرد
<?php کدهای پی اچ پی رو اینجا بنویسید ?>فراخوانی بخش های مختلف سایت در صفحات
بعد از تبدیل قالب html به قالب وردپرس شما نیازی نیست مثل اچ تی ام ال بارها کدهای سایدبار، هدر و… رو در صفحات مختلف کپی کنید کافی است هر جا به هدر نیاز داشتید از تابع زیر استفاده کنید تا کدهای هدر در بخشی که این تابع رو فراخوانی کردید اجرا و نمایش داده شود
<?php get_sidebar(); ?>کد زیر برای فراخوانی سایدبار استفاده می شود
<?php get_sidebar(); ?>و کد زیر برای فراخوانی فوتر استفاده می شود
<?php get_footer(); ?>پس بعد از اینکه کدهای html خود را در فایل های sidebar.php, header.php, footer.php قرار دادید دیگه نیازی نیست همون کدهارو در صفحات post.php, page.php و صفحات دیگه کپی کنید فقط کافیه تابعی که خود وردپرس قبلا ایجاد کرده رو مانند بالا که توضیح دادیم در جای درستش فراخوانی کنید.
جمع بندی آموزش تبدیل قالب html به وردپرس
خب دوستان عزیز در این مقاله تبدیل قالب html به وردپرس رو باهم بررسی کردیم و به صورت خلاصه این کار رو آموزش دادیم اگر صرفا می خواهید تغییرات کوچکی در صفحات وبسایت ایجاد کنید یا خودتان قبلاً دانشی داشتید این مقاله می تونه برای شما کاربردی باشه اما اگر کاربر تازه کار هستید حتما از دوره آموزش طراحی قالب وردپرس استفاده کنید این دوره یکی از کاملترین دوره های وب فارسی برای طراحی قالب است.