آموزش تبدیل قالب HTML به وردپرس + فیلم آموزشی

آموزش تبدیل قالب HTML به وردپرس اصلا سخت نیست به شرط آنکه از قبل کدنویسی html css را بلد باشید، آشنایی مختصری هم با زبان php داشته باشید و نحوه کار با وردپرس را نیز بلد باشید در این صورت میتوانید براحتی نحوه تبدیل html به وردپرس را یاد بگیرید پس مهمترین نکته در مورد این موضوع، نقشه راهی است که برای آموزش تبدیل قالب html به وردپرس باید داشته باشید…

پیشنیاز های تبدیل قالب html به وردپرس

وقتی دنبال آموزش تبدیل قالب html به وردپرس هستید یعنی شما به کدنویسی html css مسلط هستید و قالب خود را با این دو زبان طراحی کردید، همچنین نحوه کار با وردپرس را نیز بلدید و حالا میخواهید قالب html خود را تبدیل به قالب وردپرس کنید تا از طریق پنل مدیریت وردپرس بتوانید بخش های مختلف قالب را کنترل و مدیریت کنید. نکته ای که در بحث تبدیل html به وردپرس وجود دارد این است که کدها و توابع وردپرسی با زبان PHP هستند بنابراین بهتر است آشنایی مختصری هم با زبان php داشته باشید در غیر این صورت نمیتوانید کدها و توابع وردپرسی را بخوبی درک کنید. اگر مهارت هایی که بعنوان پیشنیاز ذکر کردیم را ندارید پیشنهاد میکنم حتما آنها را یادبگیرید و سپس سراغ آموزش تبدیل قالب html به وردپرس بیایید. پیشنیاز هارا میتوانید از طریق لینک های زیر بصورت رایگان یاد بگیرید…

پیشنیاز اول : آموزش وردپرس

پیشنیاز دوم : آموزش html css

پیشنیاز سوم : آموزش PHP برای وردپرس

چرا تبدیل قالب html به وردپرس…؟

قالب html یک قالب استاتیک است یعنی دیتابیس ندارد و هیچگونه عملیاتی مثل ثبت و دریافت اطلاعات در آن انجام نمیشود بنابراین امکاناتی مثل ثبت نام کاربر، ثبت دیدگاه و کامنت، انتشار پست و… و بطور کلی هرگونه امکاناتی که مربوط به ثبت اطلاعات در دیتابیس است را ندارد بناراین ما برای اینکه بتوانیم این امکانات را به قالب html اضافه کنیم و همچنین یک پنل مدیریت داشته باشیم که بتوانیم از طریق آن، المان ها و محتواهای سایت را کنترل و مدیریت کنیم بهترین راه تبدیل قالب html به وردپرس است! با اینکار، بخش های مختلف سایت مثل منوها، مقالات، محصولات، نمونه کارها و… با پنل مدیریت وردپرس مچ میشود و حالا بعنوان مثال اگر بخواهیم یک منوی جدید به قالب اضافه کنیم میتوانیم از بخش فهرست ها در وردپرس این کار را انجام دهیم یا هر بخش دیگری از قالب که نیاز به تغییر داشته باشد بدون اینکه نیاز به دسترسی به کدها داشته باشیم صرفا از طریق پنل مدیریت وردپرس میتوانیم تغییرات لازم را اعمال کنیم.

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

تبدیل قالب html به wordpress با روش های مختلفی انجام میشود مثل استفاده از افزونه یا ابزارهای آنلاین که توصیه نمیشود اما بهترین روش و روش اصلی بصورت “دستی” است یعنی خودتان دست به کار شوید و به بهترین شکل قالب html را به وردپرس تبدیل کنید و امکاناتی که نیاز دارید را به آن اضافه کنید. پس با این پیشفرض که قالب html شما تکمیل و آماده هست در ادامه مراحل تبدیل قالب html به وردپرس را آموزش میدهیم…

مرحله اول : نصب وردپرس + ویدیو

اگر مراحل را از صفر بخواهیم توضیح دهیم اولین مرحله نصب وردپرس است، توجه کنید نیازی به هاست آنلاین ندارید و صرفا با نصب وردپرس روی لوکال هاست میتوانید کار را شروع کنید اگر نحوه نصب وردپرس را بلد نیستید ویدیو زیر را ببینید که در آن تمامی مراحل نصب وردپرس و ساختار وردپرس آموزش داده میشود. (ویدیو بالا بخشی از دوره آموزش طراحی قالب وردپرس است)

نصب نرم افزار XAMPP برای ایجاد لوکال هاست

نرم افزار xampp یک فضای داخلی شبیه به هاست در کامپیوتر شخصی شما ایجاد میکند یعنی آن فضارا تبدیل به یک سرور محلی میکند که شما میتوانید داخل آن پروژه های برنامه نویسی را اجرا کنید پس با توجه به اینکه وردپرس هم با زبان php نوشته شده نیاز به چنین فضایی دارد بنابراین نرم افزار xampp را نصب میکنیم تا بتوانیم وردپرس را داخل آن نصب و راه اندازی کنیم.  ضمنا برای ایجاد این فضا نرم افزار های مختلفی مثل WAMP – MAMP – LAMP – XAMPP وجود دارد که بهترین آن XAMPP است و ما از همین نرم افزار استفاده میکنیم.

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

دانلود و نصب وردپرس

وردپرس را از مخزن اصلی آن یعنی سایت https://fa.wordpress.org/download/ دانلود کنید و طبق ویدیو بالا در مسیر C>XAMPP>htdocs کپی کنید و آن را از حالت zip خارج کنید تا پوشه وردپرس در این مسیر قرار گیرد، شما میتوانید نام پوشه wordpress را با نام دلخواه تغییر دهید در نهایت برای نصب وردپرس در مرورگر خود آدرس localhost/wordpress را وارد کنید (دقت کنید اگر نام پوشه wordpress را تغییر دادید اینجا هم در مروگر همان نام را بعد از localhost وارد کنید) تا مراحل نصب وردپرس آغاز شود.

با شروع مراحل نصب وردپرس نیاز دارید یک دیتابیس ایجاد کنید برای ایجاد دیتابیس در مرورگر وارد آدرس localhost/phpmyadmin شوید و از منوی بالا database را باز کنید و یک نام برای دیتابیس خود انتخاب کنید و در نهایت create database را بزنید. (همه این مراحل در ویدیو بالا آموزش داده شده)

پس از اینکه دیتابیس را ایجاد کردید حالا به صفحه نصب وردپرس برگردید و اطلاعات دیتابیس را وارد کنید، نام دیتابیس همان نامی است که هنگام ایجاد دیتابیس انتخاب کردید، نام کاربری پیشفرض root است و فیلد پسورد را نیز خالی بگذارید.

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

مرحله دوم : انتقال قالب html به وردپرس + ویدیو

همانطور که در ویدیو بالا مشاهده کردید فالب ها در وردپرس در مسیر wp-content/themes قرار میگیرند بنابراین شما هم باید قالب html خود را در همین مسیر کپی کنید، حال اگر به پنل مدیریت وردپرس بروید و از منوی نمایش بخش پوسته هارا باز کنید یک پیغام تحت عنوان “پوسته های خراب” برای شما نمایش داده میشود که علت آن عدم وجود فایل index.php در قالب است

درواقع یک پوسته وردپرس باید حداقل 2 فایل index.php و style.css را داشته باشد تا بعنوان یک قالب وردپرس شناسایی و نصب شود حالا میتوانید فایل index.html را با تغییر فرمت به index.php تبدیل کنید و همچنین فایل style.css هم اگر در پوشه اصلی قالب نیست آن را به پوشه اصلی قالب منتقل کنید تا با وجود این دو فایل، قالب شما در وردپرس شناسایی و قابل فعال کردن میباشد. قالب را فعال کنید تا به مرحله بعد برویم…

مرحله سوم : تبدیل قالب html به وردپرس + ویدیو

تا اینجا قالب html را بعنوان یک قالب وردپرس در پنل مدیریت وردپرس فعال کردیم اما اگر سایت را با این قالب مشاهده کنید متوجه میشوید هیچکدام از فایل های خارجی قالب از جمله فایل های استایل و css فایل های js و همچنین تصاویر لود نشدند و سایت کاملا بهم ریخته است! اما نگران نباشد فقط کافیست این فایل ها را با توابع وردپرسی آدرس دهی کنید تا همه چیز سر جای خودش قرار گیرد.

آدرس دهی فایل style.css

اولین قدم برای اینکه ظاهر قالب شما در وردپرس اصلاح شود این است که فایل های css و js را در وردپرس آدرس دهی کنید برای اینکار روش های مختلفی وجود دارد اما بهترین و جدیدترین متد این است که در پوشه اصلی قالب یک فایل با نام functions.php ایجاد کنید و قطعه کد زیر را داخل آن قرار دهید :

<?php
function add_theme_scripts(){

wp_enqueue_style('style' , get_stylesheet_uri() , array() , false , 'all');

}
?>

با اضافه کردن قطعه کد بالا به فایل فانکشن استایل قالب شناسایی میشود اگر فایل های css دیگری در قالب دارید میتوانید طبق نمونه کد زیر آدرس دهی کنید

<?php
function add_theme_scripts(){

//فایل اصلی استایل style.css
wp_enqueue_style('style' , get_stylesheet_uri() , array() , false , 'all');

//فایل های css اضافه
wp_enqueue_style('swiper' , get_template_directory_uri() . '/css/swiper-bundle.min.css' , array() , false , 'all');
}
?>

آدرس دهی فایل های js

اگر در قالب Html خود از جاوااسکریپت استفاده کرده باشید فایل های js قالب نیز مانند فایل های css باید در وردپرس آدرس دهی شوند درغیر این صورت المان هایی که با جاوا اسکریپت نوشته شده اند کار نمیکنند مثل اسلایدر، پنجره لایت باکس و… برای آدرس دهی فایل های js میتوانید از نمونه کد زیر استفاده کنید و آن را در فانکشنی که در قطعه کد بالا معرفی کردیم قرار دهید. (ممکن است این توصیحات متنی برای شما خیلی واضح نباشد بخاطر همین پیشنهاد میکنم برای درک بهتر موضوع ویدیوها را ببینید)

wp_enqueue_script('jq' , get_template_directory_uri() . '/js/jquery.min.js' , array() , false , true);

ایجاد شناسنامه قالب در فایل style.css

یکی از موارد پایه که در تبدیل قالب html به وردپرس باید انجام دهید نوشتن مشخصات قالب است که در فایل style.css نوشته میشود، بعنوان مثال شما وقتی از پنل مدیریت وردپرس وارد بخش پوسته ها میشوید روی هر قالبی که کلیک کنید مشخصات آن قالب نظیر نام قالب – نام طراح – نسخه قالب – توضیحات قالب – لایسنس – آدرس سایت طراح و… را مشاهده میکنید این اطلاعات شناسنامه قالب است شما هم میتوانید این اطلاعات را برای قالب خود اضافه کنید  برای اینکار کافیست فایل 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
<img src="img/pic.jpg">

//اصلاح آدرس در وردپرس
<img src="get_template_ditectory_uri().'img/pic.jpg' ?>">

اضافه کردن توابع وردپرسی به قالب html + ویدیو

پس از اصلاح آدرس فایل های css و js و همچنین عکس های قالب حالا به سراغ اضافه کردن توابع وردپرسی به کدهای html میرویم. فایل index.php را باز کنید و از ابتدای کدها اولین تابع وردپرسی به تگ html باید اضافه شود بنابراین تگ <html> را در ابتدای کدها پیدا کنید و تابع language_attributes را طبق قطعه کد زیر به آن اضافه کنید (کافیست تگ html را پاک کنید و قطعه کد زیر را جایگزین آن کنید)

<html <?php language_attributes(); ?> >

در ادامه کدها متاتگ charset را پیدا کنید و تابع bloginfo(‘charset’); را به آن اضافه کنید (مانند قطعه کد زیر)

<meta charset="<?php bloginfo('charset'); ?>">

در ادامه یک تابع وردپرس بسیار مهم با نام wp_head() داریم که باید قبل از بسته شدن تگ <head> به قالب اضافه شود. اضافه شدن این قالب در عملکرد صحیح قالب تاثیر مستقیم دارد.

wp_head();

مشابه تابع بالا، یک تابع دیگر تحت عنوان wp_footer() داریم که باید قبل از بسته شدن تگ <body> به قالب اضافه شود، این تابع نیز مانند تابع wp_head() تاثیر مستقیم در عملکرد قالب دارد.

wp_footer();

در ادامه تزریق توابع وردپرسی به قالب html، لازم است یک سری امکانات پایه از طریق اضافه کردن توابع وردپرسی به فایل functions.php به قالب اضافه کنیم بنابراین فایل فانکشن را باز کنید و قطعه کد زیر را داخل آن قرار دهید…

function pishro_setup_theme(){
//پشتیبانی از عنوان ها
add_theme_support('title-tag');
//پشتیبانی از فید
add_theme_support('automatic-feed-links');
//پشتیبانی از تصویر شاخص
add_theme_support('post-thumbnails');
//پشتیبانی از ووکامرس
add_theme_support('woocommerce');
}

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

جداسازی بخش های مختلف قالب

بصورت پیشفرض تمامی کدهای صفحه اصلی قالب در فایل index هست که در وردپرس کدهای بخش های مختلف باید جداسازی شود به این صورت که کدهای مربوط به بخش بالایی سایت یا هدر باید از فایل index جدا و در فایلی با نام header.php قرار گیرد، کدهای مربوط به پایین سایت یا فوتر از فایل index جدا و در فایلی با نام footer.php قرار گیرد و اگر در قالب Html خود سایدبار دارید کدهای مربوط به سایدبار نیز باید از فایل index جدا و در فایلی با نام sidebar.php قرار گیرد دقت کنید اسامی این فایل ها یعنی header.php و footer.php و sidebar.php در وردپرس شناخته شده هستند و دقیقا باید با همین اسامی نامگذاری کنید.

برای فرخوانی این فایل ها نیز در وردپرس تابع مخصوصی وجود دارد بعنوان مثال برای فراخوانی فایل هدر کافیست از تابعی با نام get_header() استفاده کنید، مشابه همین تابع برای فراخوانی فایل فوتر و سایدبار نیز وجود دارد.

اضافه کردن تصویر شاخص به قالب

وقتی از پنل مدیریت وردپرس وارد بخش پوسته ها میشوید هر قالبی یک تصویر شاخص دارد اما قالب فعلی این تصویر را ندارد برای اضافه کردن تصویر شاخص به قالب کافیست فایلی با نام screenshot.png به پوشه اصلی قالب اضافه کنید تا این عکس بعنوان تصویر شاخص قالب شناخته شود.

تصویر پیش نمایش قالب

هزینه تبدیل قالب html به وردپرس

هزینه تبدیل قالب html به وردپرس چقدر است؟ شاید بنابه دلایلی خودتان نخواهید کار تبدیل html به وردپرس را انجام دهید و بخواهید این کار را برون سپاری کنید و میخواهید بدانید چقدر بابت این کار باید هزینه کنید! در مورد این موضوع تعرفه دقیقی وجود دارد و هر کسی با توجه به شرایط خود میتواند مبلغ را مشخص کند ضمن اینکه به حجم کار هم بستگی دارد بعنوان مثال هزینه قالب html ای که کلا 3 صفحه دارد با قالبی که بصورت فروشگاهی طراحی شده و 20 صفحه دارد متفاوت است اما بطور کلی هزینه تبدیل قالب html به وردپرس حداقل از 6 میلیون تومان شروع میشود و همانطور که اشاره کردیم بسته به حجم کار افزایش پیدا میکند

افزونه تبدیل قالب html به وردپرس

افزونه تبدیل قالب html به وردپرس چیست؟ شاید در بین جستجوهایتان دیده باشید که برای تبدیل html به وردپرس میتوان از افزونه هم استفاده کرد بله پلاگین هایی برای این موضوع وجود دارند که معروف ترین آن افزونه HTML To WordPress Converter است که در خوده سیستم وردپرس نصب میشود و عمل تبدیل html به وردپرس را انجام میدهد اما باید در نظر داشته باشید ماهیت این کار به هیچ وجه نمیتواند خودکار و اتوماتیک باشد و هیچ افزونه ای هم نمیتواند این کار را با کیفیت و دقیق انجام دهد چرا که امکانات و نیازمندی های هر قالب با دیگری متفاوت است بنابراین بهترین روش برای تبدیل html به وردپرس روش دستی است.

جمع بندی

آموزش تبدیل قالب html به وردپرس مهارتی است که حتما باید بصورت ویدیویی و عملی ببینید و یاد بگیرید در این مقاله 4 جلسه آموزش ویدیویی را بصورت رایگان تقدیم شما عزیزان کردیم و شما مراحل اولیه تبدیل html به وردپرس را یاد گرفتید. این 4 ویدیو بخشی از دوره تخصصی آموزش طراحی قالب وردپرس است که در آن ابتدا قالب html را از صفر طراحی میکنیم و سپس آن را تبدیل به قالب وردپرس میکنیم اگر میخواهید این مهارت ارزشمند را یاد بگیرید روی تصویر زیر کلیک کنید و توضیحات کامل آن + نظرات ویدیو هنرجویان دوره را ببینید :