آموزش تبدیل قالب html به قالب وردپرس + ویدیو آموزشی
بدون پرداخت هیچگونه هزینه ای، انتقال قالب html به وردپرس را انجام دهید. اگر طراحی سایت شخصی خود را با کد های html تمام کرده اید و میخواهید آن را به وردپرس منتقل کنید، در ادامه با ما همراه باشید. در مقاله تبدیل html به وردپرس، قصد داریم بصورت گام به گام به شما یاد دهیم که چگونه قالب html را به وردپرس تبدیل کنید.
تبدیل قالب از html به وردپرس یک کار به نسبت راحتی است. برای این کار کافیست با کد های html آشنا باشید. اگر طراحی وبسایت شخصی خود را انجام داده اید نیاز به یک سیستم مدیریت محتوا دارید، درنگ نکنید، وردپرس را انتخاب کنید.
چرا تبدیل قالب html به وردپرس؟
سایت هایی که به وسیله کدهای html ساخته شده اند، در دسته بندی سایت های استاتیک قرار می گیرند. در این سایت ها برای ایجاد هر تغییری در آنها، باید با کوهی از کدها دست و پنجه نرم کنید! و همانطور که اطلاع دارید، همه اشخاص توانایی کار با کد های html را ندارند. از طرفی دیگر مدیریت سایت هایی که در این دسته قرار دارند بسیار مشکل است. پس بهترین کار، تبدیل html به وردپرس است.
هر چند تنوع قالب های وردپرس بسیار زیاد است اما ممکن است یک قالب html نظر شما را جلب گرده یا بخواهید قالبی که خودتان طراحی کرده اید را به وردپرس تبدیل کنید تا آخر همراه ما باشید.
مزیت استفاده از وردپرس
در بالا با ایرادات سایت های html را تا حدودی بررسی کردیم. اما وردپرس چیست و چرا باید وردپرس را انتخاب کرد؟ وردپرس یک سیستم داینامیک و منبع باز است که به وسیله آن می توانید انواع تغییرات ظاهری و زیر ساختی در سایت دسترسی داشته باشید. اگر بخواهیم به طور کامل تر توضیح دهیم، وردپرس یک سیستم مدیریت محتوای رایگان است که از قالب و افزونه های وردپرس متنوعی تشکیل شده است. با این تعاریف، هر شخص بدون داشتن دانش برنامه نویسی می تواند با این سیستم کار کند. در سیستم مدیریت محتوا وردپرس، می توانید قابلیت های جدید را بدون نیاز به نوشتن حتی 1 خط کد، به وبسایت اضافه کنید. به همین دلیل انتقال قالب از html به وردپرس بهترین گزینه انتخابی می باشد.
تبدیل دستی قالب html به قالب وردپرس
کارآمدترین روش تبدیل قالب HTML به قالب wordpress شیوه دستی است. در این روش می توانید مراحل را بصورت گام به گام پیش ببرید تا در نهایت سایت html تان را به وردپرس تبدیل کنید. ویدئو آموزشی در هر بخش قرار گرفته است تا خیلی راحت تر، سایت تان را راه اندازی کنید.
قدم اول: نصب وردپرس
برای تبدیل قالب html به وردپرس، باید نصب وردپرس روی لوکال هاست را انجام دهید تا در گام های بعدی به بخش های مختلف وردپرس دسترسی داشته باشید.
-
نصب xampp
لوکال هاست یک فضای داخلی و محلی در کامپیوتر شخصی شما است که مانند هاست عمل می کند. اما با این تفاوت که برای تهیه آن نیاز به هیچ گونه هزینه ای نخواهید داشت و اطلاعاتی هم که قرار است ذخیره شوند، تماماً بر روی سیستم و درایو شخصی شما قرار می گیرند انواع مختلف لوکال هاست مانند LAMP، MAMP، WAMP و XAMPP وجود دارد، قبل از هرکاری بایستی نسبت به دانلود و نصب لوکال هاست اقدام کنید.
زمانی که نصب برنامه xampp به اتمام رسید، آنرا اجرا کنید. در قسمت control panel بخش های apache و mysql را فعال کنید تا دسترسی شما به سرور مجازی تکمیل شود. هم اکنون دسترسی شما کامل شده و سرور مجازی به خوبی برای شما فعال شده است.
⛔ زمانی که بخش های apache و mysql فعال شود که تیک آن ها به رنگ سبز می شود در غیر این صورت اتصال شما بدرستی برقرار نشده است.
بعد از فعال سازی xamp و اجرای صحیح آن به مسیر xampp>htdocs بروید و تمامی فایل هایی که در این بخش قرار دارند را حذف می کنید.
-
دانلود و نصب وردپرس
قدم بعدی برای تبدیل قالب html به وردپرس، دانلود وردپرس است. ما به شما پیشنهاد می کنیم که این وردپرس را حتماً به صورت اورجینال از مخزن وردپرس دانلود و نصب کنید تا در ادامه سایت شما به مشکلات امنیتی برنخورد.
زمانی که دانلود وردپرس به اتمام رسید، فایل دانلود شده را در مسیر فایل پروژه<xampp>htdocs از حالت فشرده خارج کنید. حالا نوبت به نصب وردپرس بر روی سیستم است آدرس نام پروژه/localhost را در مرورگر سرچ کنید در این مرحله اطلاعاتی که وردپرس از شما میخواهد را وارد می کنید. در قسمت بعد نیاز به یک پایگاه داده یا database دارید.
برای ساخت پایگاه داده به آدرس localhost/phpmyadmin بروید در این بخش از طریق منوهای بالا، وارد databases شوید و creat database را بزنید تا دیتابیس شما ایجاد شود.
زمانی که دیتابیس ساخته شد به پنجره نصب وردپرس برگردید و در این قسمت، اطلاعات دیتابیس را وارد کنید در قسمت نام کاربری، حتماً root را قرار دهید. در قسمت بعد، اطلاعاتی از قبیل نام کاربری و عنوان سایت خود را وارد کنید. در قسمت بعد، نام کاربری و رمز عبور به وردپرس را انتخاب کنید “این اطلاعات را به خاطر داشته باشید”. اگر کمی گیج شدید نگران نباشید تمامی مراحل را می توانید در ویدئو مشاهد کنید
✔️ نصب وردپرس با موفقیت به اتمام رسید! شما هم اکنون به پیشخوان کاربری خود دسترسی خواهید داشت.
قدم دوم: تبدیل قالب html به وردپرس
در این مرحله از تبدیل قالب HTML به قالب وردپرس نیاز است تغییراتی را در فایل قالب انجام دهید تا برای انتقال به وردپرس آماده شود.
-
تغییرات در فایل html
برای اینکه فایل html خود را برای بارگذاری و انتقال به وبسایت وردپرسی آماده کنید، اولین قدم تغییر پسوند فایل های index از html به php است. در مرحله بعد فایل style.css را از پوشه پیش فرض، به کف پوشه پروژه منتقل می کنید.
زمانی که مکان فایل استایل را تغییر دادید، برمی گردیم و مسیر معرفی آن را در فایل index تغییر می دهیم.
در قسمت header فایل index به دنبال کدی مانند
را پیدا کنید و آنرا به کد زیر تغییر دهید تا مسیر فایل style را به روز شود.
⚡سربرگ یا توضیحات، بخش معرفی قالب می باشد؛ به نوعی شناسنامه قالب است که به وردپرس و کاربران نشان داده میشود.⚡
در ابتدای فایل style، کد زیر را قرار می دهیم:
/*
Theme Name: jobio
Author: rastchin
Author URI: https://www.rtl-theme.com
این یک وبسایت وردپرسی است. :Description
Version: 1.0.0
*/
اگر میخواهید که قالب شما یک تصویر شاخص داشته باشد، از صفحه اصلی قالبتان یک عکس بگیرید و به پوشه پروژه تان (همانجایی که فایل style و index قراردارند) انتقال دهید.
نام فایل تصویر سایت حتماً screenshot و پسوند فایل png را قرار دهید.
-
تبدیل قالب Html به Zip
تا اینجا فایل قالب ما برای تبدیل html به وردپرس آماده شده است در این مرحله، تمام فایل پروژه را به فشرده کنید، یادتان باشد که پسوند فایل شما باید zip باشد.
حالا در مسیر نمایش> پوسته> افزودن فایل زیپ خود را آپلود می کنیم.
✔️ پوسته به خوبی نصب شد و می توانید در بخش بازدید سایت، نوشته ها را ببنید که کاملاً بهم ریخته هستند. حالا باید بریم و تمام محتوای سایت را ریسپانسیو یا تنظیم کنیم.
قدم سوم: اصلاحات نهایی قالب!
درست است که توانستید قالب را بر روی وردپرس نصب کنید اما توقع ندارید که در همین ابتدا همه چیز زیبا باشد! یادتان هست که مسیر فایل style را تغییر دادیم؟ به همین دلیل مسیر فراخوانی باکس ها، فونت ها و عکس های سایت تغییر کرده است و در نهایت، این بخش ها به درستی در وب سایت ما نشان داده نمیشود. پس برویم و سایت را بطور کامل لود کنیم.
-
رسپانسیو کردن تمام بخش های سایت
برای اجرا شدن تمام آدرس های موجود در فایل index، کد زیر را قرار دهید تا تمام کد های بخش این بخش اجرا شوند.
<?();php echo get_template_directory_uri?>
⭐کد بالا یک تابع وردپرسی است که مقادیر متنوعی را دریافت میکند و آدرس فایل هایی که بعد از آن قرار می گیرد را لود میکند.⭐
در قسمت header فایل index کد هایی که به صورت زیر قرار دارند را پیدا میکنید:
<‘link rel=’icon’ type=’image/png’ href=’assets/img/favicon.png’ sizes=’16×1>
<‘link href=’https://fonts.googleapis.com/css?family=Ubuntu:400,500,700’ rel=’stylesheet>
<‘link href=’assets/css/bootstrap.min.css’ rel=’stylesheet>
<‘link href=’assets/css/font-awesome.min.css” rel=’stylesheet>
<‘link href=’assets/css/flaticon.css’ rel=’stylesheet>
<‘link href=’style.css’ rel=’stylesheet>
<‘link href=’assets/css/responsive.css’ rel=’stylesheet>
و به کد های
<‘link rel=’icon’ type=’image/png’ href='<?php echo get_template_directory_uri();?>/assets/img/favicon.png’ sizes=’16×16>
<‘link href=’https://fonts.googleapis.com/css?family=Ubuntu:400,500,700’ rel=’stylesheet>
<‘link href='<?php echo get_template_directory_uri();?>/assets/css/bootstrap.min.css’ rel=’stylesheet>
<‘link href='<?php echo get_template_directory_uri();?>/assets/css/font-awesome.min.css’ rel=’stylesheet>
<‘link href='<?php echo get_template_directory_uri();?>/assets/css/flaticon.css’ rel=’stylesheet>
<‘link href='<?php echo get_template_directory_uri();?>/style.css’ rel=’stylesheet>
<‘link href='<?php echo get_template_directory_uri();?>/assets/css/responsive.css’ rel=’stylesheet>
حتما این مرحله را با دقت انجام دهید طراحی سایت ریسپانسیو به خاطر افزایش کاربران موبایل بسیار ضروری است. بعد از انجام این مرحله به صفحه اصلی وبسایت بر گردید و تغییراتی را که ایجاد کردید را ببینید تا حدود زیادی موارد اصلاح شدند اما باز هم نیاز به ریزه کاری هایی مانند آپلود تصاویر و بارگذاری فونت قالب است.
-
آپلود تصاویر سایت
برای بارگذاری تصاویر قالب کافیست به دنبال رشته کد هایی مانند
بگردیم و آنها را به
تغییر دهید. این کار را برای تمامی کد هایی که در فایل index قرار دارند را تکرار کنید.
فایل index را ذخیره کنید و در نهایت به صفحه اصلی وبسایت بر می گردید و تغییرات را مشاهده کنید.
-
بارگذاری فونت در قالب index
بعد از تبدیل قالب html به وردپرس، اگر فونت قالب شما لود نشده است، باید مسیر تعریف فونت در فایل style یا index را بررسی کنید.
در فایل style قالب مسیر معرفی فونت به صورت زیر بود:
;font-style: normal
;font-weight: bold
;src:url(‘../font/IRANSansWeb_Light.eot’)
*/src: url(‘../font/IRANSansWeb_Lightd41d.eot?#iefix’) format(’embedded-opentype’), /* IE6-8
*/+url(‘../font/IRANSansWeb_Light.woff2’) format(‘woff2’), /* FF39+,Chrome36+, Opera24
*/+url(‘../font/IRANSansWeb_Light.woff’) format(‘woff’), /* FF3.6+, IE9, Chrome6+, Saf5.1
;url(‘../font/IRANSansWeb_Light.ttf’) format(‘truetype’)
و آن را به
;font-family: IRANSan
;font-style: normal
;font-weight: bold
;src:url(‘assets/font/IRANSansWeb_Light.eot’)
*/src: url(‘ assets /font/IRANSansWeb_Lightd41d.eot?#iefix’) format(’embedded-opentype’), /* IE6-8
*/+url(‘ assets /font/IRANSansWeb_Light.woff2’) format(‘woff2’), /* FF39+,Chrome36+, Opera24
*/+url(‘ assets /font/IRANSansWeb_Light.woff’) format(‘woff’), /* FF3.6+, IE9, Chrome6+, Saf5.1
;url(‘ assets /font/IRANSansWeb_Light.ttf’) format(‘truetype’)
تغییر دهید.
-
فایل بندی بخش های مختلف کد های index
برای دسترسی سریع تر به بخش های مختلف سایت مانند header, footer و sidebar و همچنین سبک تر کردن فایل index، بخش های فوق را فایل بندی کنید.
در روت پوشه پروژه فایل های header.php، footer.php، sidebar.php را ایجاد کنید . به فایل index برگردید، بخش هایی که شامل کد های header است را به فایل header.php انتقال دهید در فایل index، بخشی که شامل کد header بود را کد زیر قراردهید.
دستور بالا به این معناست که وردپرس برای خواندن کد های header از این به بعد به فایل header.php رجوع کند.
برای دو بخش footer و sidebar نیز همین عمل را تکرار کنید و در جایی که قرار داشتند، کد های
و
را قرار دهید و در نهایت هر کدام از فایل ها را ذخیره کنید. کدهای بیشتر را می توانبد در مقاله آموزش قالب وردپرس مشاهده کنید.
توجه: برای اینکه خودتان یک قالب یا افزونه وردپرس را از صفر برنامه نویسی کنید توصیه می کنم در دوره برنامه نویسی وردپرس راست چین آکادمی شرکت کنید.
✔️تبدیل قالب html به وردپرس با موفقیت انجام شد!
تبریک! هم اکنون تبدیل قالب html به وردپرس به اتمام رسید. اگر آموزشات را قدم به قدم با ما طی کرده باشید، مطمئناً قالب html تان را بدون هیچگونه دردسری به وردپرس منتقل کرده اید. اگر هم در مراحل انتقال قالب html به وردپرس دچار مشکل شدید و یا نیاز به راهنمایی داشتید در پایین همین مقاله از ما بپرسید.
برای رفع این خطا می تونید سطح دسترسی پوشه‌ها را یا پوشه آپلود را تغییر دهید
سلام من یه قالب html از سایت راستچین خریداری کردم اما به دلیل تعداد زیاد فایلها نتونستم همه فایلها رو تبدیل کنم فقط تونستم قالب رو بر روی وردپرس نصب کنم امکانش هست شما به من کمک کنید
دوست عزیز هر سوالی دارید بپرسبد تا راهنمایی کنم
پیشنهاد میشه قالب را تا جایی که می تونید قسمت قسمت کنید و فایل ها را انتقال بدید
سلام خسته نباشید برای تبدیل قالبی که چنتا فایل html دارد میشه بیشتر توضیح بدید
سلام دوست عزیز
اگر قالب شما چند بخش هست باید فایل ها را جدا جدا انتقال بدید
سلام وقت بخیر
ممنون از آموزش مفیدتون
خواستم بپرسم قالب نهایی قابلیت تغییر و ویرایش توی خود وردپرس هم داره؟
سلام دوست عزیز
بله می تونید تغییر بدید
سلام
حجم فایل xampp زیاده و برای دانلود مشکل دارم ، نمیشه همین کارهارو در دایرکت ادمین انجام بدیم ؟
سلام دوست عزیز مشکلی نداره و می تونید در هاست اتون این تغییرات را اعمال کنید
سلام و خسته نباشین
اگر قالب چن صفحه ایی باشه چیکار کنیم؟چن صفحه html
سلام
تک تک صفحات را باید تبدیل به قالب وردپرس کنید
سلام برای من در مرحله لود میمونه و بالا نمیاد مشکل از کجاست
سلام
آدرس دهی فایل ها به درستی انجام نشده
سلام وقت بخیر
لطف می کنید آموزش ساخت افزونه وردپرس رو هم بزارین .
ممنون از شما
سلام دوست عزیز
دوره آموزش برنامه نویسی وردپرس یک دوره جامع هست و طراحی قالب و افزونه آموزش داده میشه طریق لینک زیر می تونید جزئیات دوره را مشاهده کنید:
https://academy.rtl-theme.com/course/become-wordpress-developer-php-javascript/
حداکثر تا 15 اسفند بخش طراحی افزونه را هم به سرفصل های دوره اضافه میشه
سلام وقت بخیر آموزش عالی ، مبتدی هستم و گام به گام پیش رفتم و تقریبا خوب بود ، هرچند قالب در مرحله لودینگ موند و فقط لود میکرد ، ولی راضی هستم و خوب پیش رفتم و باید قالب های دیگه امتحان کنم .
فقط یک سوال مهم و اساسی دارم : بعد از تبدیل قالب و راه اندازی ورد پرس ، امکان انتشار مطالب در بخش های مختلفی که در قالب طراحی شده ، بدون نیاز به کدنویسی و ادیت index , style مقدور هست ؟ اگر نباشه ، عملا این کار ( تبدیل قالب ) چه فایده ای داره ؟
ممنون میشم به این سوال اساسی و پایه ای بنده جواب کامل بدید تشکر
سلام
خوشحالیم که این مطلب برای شما مفید هست
هدف این آموزش این هست که قالب را داینامیک کنیم و امکان انتشار مطالب هم وجود داشته باشه البته آموزش نیاز به تکمیل دارد و موردی مانند برگه ها در آموزش قرار داده نشده اما در مورد نوشته ها درست است و داینامیک است
با سلام
آموزش خیلی قوی و کاربردی بود. مشتاقانه منتظر ادامه مقاله هستم
ممنون از نگاه زیباتون.
بله؛ در آینده نزدیک این آموزش تبدیل به یک دوره کامل انتقال قالب html به وردپرس میشه.
چه زمانی منتشر میشه؟
سلام وقت بخیر ، خداقوت
خیلی عالی و راحت آموزش داده شده است . و مطمنن برای افراد مبتدی میتونه خیلی ارزشمند باشه و دوره ای هست برای خودش .
سلام
ممنون از شما خوشحالیم که این آموزش مورد توجه شما قرار گرفته است.
این مقاله در حال توسعه است و آموزشات بیشتری درباره خصوصی سازی بخش ها و سکشن های مختلف در این مقاله ارائه خواهد شد، و در نهایت تبدیل به یک دوره کامل تبدیل قالب html به وردپرس خواهد شد.
سلام من تا مرحله اپلود انجام دادم تو قسمت اپلود با این ارور مواجه شدم وقتی اپلود میخام بکنم . امکان ایجاد شاخه wp-content/uploads/2024/04 نیست. آیا شاخه مادر آن با سرور قابل نوشتن است؟
ممنون میشم راهنمایی کنید.