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

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

29 خرداد 1401

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

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

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

هر چند تنوع قالب های وردپرس بسیار زیاد است اما ممکن است یک قالب html  نظر شما را جلب گرده یا بخواهید قالبی که خودتان طراحی کرده اید را به وردپرس تبدیل کنید تا آخر همراه ما باشید.

مزیت استفاده از وردپرس

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

تبدیل دستی قالب html به wordpress

کارآمدترین روش تبدیل قالب HTML به قالب wordpress شیوه دستی است. در این روش می توانید مراحب را بصورت گام به گام پیش ببرید  تا در نهایت سایت html تان را به وردپرس تبدیل کنید. ویدئو آموزشی در هر بخش قرار گرفته است تا خیلی راحت تر، سایت تان را راه اندازی کنید.

قدم اول: نصب وردپرس

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

  • نصب xampp

لوکال هاست یک فضای داخلی و محلی در کامپیوتر شخصی شما است که مانند هاست عمل می کند. اما با این تفاوت که برای تهیه آن نیاز به هیچ گونه هزینه ای نخواهید داشت و اطلاعاتی هم که قرار است ذخیره شوند، تماماً بر روی سیستم و درایو شخصی شما قرار می گیرند انواع مختلف لوکال هاست مانند LAMP، MAMP، WAMP و XAMPP  وجود دارد، قبل از هرکاری بایستی نسبت به دانلود و نصب لوکال هاست اقدام کنید.

پیشنهاد: برای ایجاد لوکال هاست بر روی سیستم خود، برنامه 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 به دنبال کدی مانند

<‘link href=’assets/css/style.css’ rel=’stylesheet>

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

<‘link href=’style.css’ rel=’stylesheet>

⚡سربرگ یا توضیحات، بخش معرفی قالب می باشد؛ به نوعی شناسنامه قالب است که به وردپرس و کاربران نشان داده میشود.⚡

در ابتدای فایل 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>

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

  • آپلود تصاویر سایت

برای بارگذاری تصاویر قالب کافیست به دنبال رشته کد هایی مانند

<‘img src=’assets/img/home-1.jpg’ alt=’Page Details’>

بگردیم و آنها را به

<‘img src='<?php echo get_template_directory_uri();?>/assets/img/home-1.jpg’ alt=’Page Details’>

تغییر دهید. این کار را برای تمامی کد هایی که در فایل 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 بود را کد زیر قراردهید.

<?()php get_header?>

دستور بالا به این معناست که وردپرس برای خواندن کد های header از این به بعد به فایل header.php رجوع کند.

برای دو بخش footer و sidebar نیز همین عمل را تکرار کنید و در جایی که قرار داشتند، کد های

<?()php get_sidebar?>

و

<?()php get_footer?>

را قرار دهید و در نهایت هر کدام از فایل ها را ذخیره کنید.

✔️تبدیل قالب html به وردپرس با موفقیت انجام شد!

تبریک! هم اکنون تبدیل قالب html به وردپرس به اتمام رسید. اگر آموزشات را قدم به قدم با ما طی کرده باشید، مطمئناً قالب html تان را بدون هیچگونه دردسری به وردپرس منتقل کرده اید. اگر هم در مراحل انتقال قالب html به وردپرس دچار مشکل شدید و یا نیاز به راهنمایی داشتید در پایین همین مقاله از ما بپرسید.

 تا اینجا نحوه انتقال قالب html به وردپرس به صورت استاتیک را آموزش دادیم در ادامه قصد داریم نحوه داینامیک کردن هدر، فوتر، نوشته ها و … را آموزش دهیم منتظر ادامه آموزش باشید…
4 دیدگاه ها افزودن دیدگاه