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

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

هاست وردپرس ایران‌سرور

زیرساختی حرفه‌ای، پرسرعت و پایدار بر پایه پردازنده‌های Intel و NVMe، مخصوص کسانی که می‌خواهند وردپرس را در اوج توانش اجرا کنند.

تهیه هاست وردپرس

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

برای ساخت تم خود، ابتدا یک فولدر نوین بسازید و نام مورد نظرتان برای تم را به عنوان اسم فایل وارد کنید. سپس ۵ فایل درون این فولدر بسازید:

این فایل‌ها را درون ادیتور کد باز نگه دارید، زیرا بزودی آن‌ها را ادیت خواهید کرد. در صورت تمایل می‌توانید برای آغاز، این فایل‌ها را با پسوند txt. بسازید و سپس پسوند را به php. و css. تغییر دهید.

در ادامه روند تبدیل قالب HTML به وردپرس، نصب نهایی پوسته در محیط وردپرس از اهمیت زیادی برخوردار است. با طی مراحل نصب قالب وردپرس، پوسته به‌روز روی وب‌سایت فعال شده و فرصتات طراحی‌شده در قالب، قابل استفاده می‌شوند.

برای شروع کار طراحی تم خود، تمرکز را روی فایل CSS بگذارید. اگر از سایتی دیگر به وردپرس می‌آیید، کد CSS سایت قدیمی را کپی و درون فایل style.css که به تازگی ساخته‌اید، جای‌گذاری کنید. CSS نقشی مهم در ظاهر کلی سایت دارد. با آوردن کد CSS به فایل style.css، طراحی خود را اعمال خواهید کرد و سایت وردپرس دقیقا به همان شکلی درمی‌آید که می‌خواهید. 

/*
Theme Name: Replace with your Theme's name.
Theme URI: Your Theme's URI
Description: A brief description.
Version: 1.0
Author: You
Author URI: Your website address.
*/

برای نهایی کردن تم، تبیینات ضروری راجع به تم مورد استفاده خود را اضافه کنید و خطوط باقی‌مانده CSS را هم از یاد نبرید. سپس فایل را ذخیره کنید و ببندید. 

حالا باید سند HTML را به بخش‌های گوناگون تقسیم و هر یک از این بخش‌ها را به فایل‌های PHP تبدیل کنید. اگرچه چنین کاری به نظر دشوار می‌رسد، اما صرفا باید بخش‌هایی از سند HTML را کپی و درون فایل‌های مختلف PHP جای‌گذاری کنید. 

</span>









 
 
Website Title
 

 
menu item #1
 
menu item #2
 
menu item #3
 
 
 
 
 
 
 
 
 
Article
 
 
Test text right here..
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Etiam ullamcorper lorem dapibus velit suscipit ultrices. 
© ۲۰۲۴ My Test Site
همان‌طور که می‌توانید ببینید، یک قالب HTML استاندارد داریم که حاوی هدر (Header)، سایدبار (Sidebar) و فوتر (Footer) است. اگر طراحی شما متفاوت است، احتمالا لازم باشد برخی گام‌ها را متفاوت طی کنید. اما فرایند اصلی یکسان باقی می‌ماند. 
برای ادامه کار روی تم خود، فایل index.html را باز کنید که فایل اصلی سایت HTML شما به حساب می‌آید. سپس به دنبال فایل‌های وردپرسی بگردید که همین حالا ساخته‌اید و بخش‌های بعدی را با دقت دنبال کنید. 
هرآنچه در فایل HTML خود در محیط اصلی محتوا 
 یا <“div class=”main> می‌یابید، درون فایل Header.php قرار می‌گیرد. کد را با عبارت 
 می‌بندیم و ();php wp_head?> را کپی و پیست می‌کنیم. برای اینکه پلاگین‌های وردپرس به درستی کار کنند، ضروری است که در این مرحله به درستی پیش برود.
</span>












Website Title


nav item #1
nav item #2
nav item #3






تمام محتوا موجود در بخش 

Sidebar
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices.
گام خاتمهی، افزودن داده‌ها فوتر موجود در سایدبار (Sidebar) به انتهای فایل است. بعد از این، ;()php wp_footer?> را درست پیش از تگ  قرار می‌دهیم، درست همان‌طور که wp_head به هدر (Header) اضافه شد. 
 
 


© ۲۰۱۹ My Imaginary Website
پیش از این فایل header.php را اضافه کرده‌ایم، اما همچنان لازم است چند کار دیگر نیز انجام دهیم. در واقع لازم است فراخوان استایل‌شیت (Stylesheet) از HTML را به‌گونه‌ای تغییر دهیم که با استانداردهای فرمت WordPress PHP سازگار باشد. 
در فایل header.php، بخش  را بیابید و استایل‌شیت را فراخوانی کنید. خروجی کار چنین شمایلی خواهد داشت:

فایل index.php که به تازگی ساخته شده را باز کنید. خواهید دید که این فایل جامعا خالی است. کد زیر را کپی و درون فایل index.php جای‌گذاری کنید:






Posted on  by 
زمانی که این گام‌ها را پشت سر گذاشتید، تم وردپرسی مطابق با قالب اصلی سایت HTML خواهید داشت که برای آپلود در سایت وردپرس آماده است. 
حالا باید یک اسکرین‌شات بسازید که به خوبی نشان‌دهنده ظاهر تم شما باشد. این اسکرین‌شات در کنار گزارش‌ها موجود در هدر استایل‌شیت، پیش‌نمایشی از وب‌سایت شما در داشبورد وردپرس به تصویر می‌کشد. 
برای تهیه اسکرین‌شات تم، وب‌سایت خود را در مرورگر باز کنید و از آن عکس بگیرید. تصویر را به‌گونه‌ای برش بزنید که ابعاد ۸۸۰×۶۶۰ پیکسل داشته باشد و نام آن را screenshot.png بگذارید. سپس این اسکرین‌شات را درون فولدر تم قرار دهید. حالا می‌توانید تم وردپرس تازه خود را به دو روش آپلود کنید.
روش اول، استفاده از FTP و انتقال مستقیم فایل‌های تم به مسیر wp-content/themes است. در این حالت نیازی نیست فایل را فشرده‌سازی کنید و به فرمت zip تغییر دهید. صرفا به سراغ یک کلاینت FTP مانند FileZilla بروید و فولدر را در مسیر wp-content/themes قرار دهید. 
اگر می خواهید بدانید چطور FTP  را راه اندازی کنید مقاله راه اندازی ftp سرور ویندوز را بخوانید.
در روش دوم ابتدا باید تمام فولدر را به فایلی با فرمت zip. تبدیل کنید. سپس در داشبورد وردپرس خود به بخش Appearance و بعد Themes بروید. 
هاست وردپرس یک سرویس میزبانی بهینه‌سازی‌شده مخصوص سایت‌های وردپرسی است که با منابع پردازشی قوی، کشینگ اختصاصی و سازگاری دقیق با ساختار این CMS، سرعت و پایداری بالاتری نسبت به هاست‌های معمولی ارائه می‌دهد؛ به همین دلیل هنگام مرور تفاوت هاست وردپرس وو کامرس، این سرویس به‌عنوان انتخاب پایه و استاندارد برای سایت‌های محتوامحور و وبلاگ‌ها مطرح می‌شود و بهترین نحوه عملکرد را برای اغلب پروژه‌های وردپرسی فراهم می‌کند.
در این روش به جای آغاز کار با سایتی که همین حالا در اختیار دارید، از یک تم وردپرس پیش‌ساخته به عنوان فونداسیون کمک می‌گیریم. مراحل کار را در ادامه تبیین داده‌ایم. 
برای ابتدا، تم یا قالبی را انتخاب کنید که با طراحی HTML شما سازگار است. چشم‌تان باید به دنبال «قالب فرزند» یا «Child Theme» هایی باشد که با ساختار کلی سایت کنونی‌تان سازگاری دارند و به آن شبیه هستند.
حالا نیاز به ساخت فولدری نوین برای قالب دارید. این بار نام قالب والد که قالب فرزند مطابق آن ساخته شده را وارد و پسوند child- را به آن اضافه می‌کنیم. 
برای مثال اگر تم مورد نظرتان inshal-wordpress-theme نام دارد، نام فولدر باید inshal-wordpress-theme-child باشد. مطمئن شوید نام فولدر حاوی Space یا فضای خالی نباشد. 
بعد از این باید فایلی به نام style.css درون فولدر بسازیم و این کدها را به آن اضافه کنیم:
/*

Theme Name: inshal-wordpress-theme-child

Theme URI: http://example.com/inshal-wordpress-theme-child/

Description: inshal-wordpress-theme Child Theme

Author: WPZOOM

Author URI: http://example.com

Template: inshal-wordpress-theme

Version: 1.0.0

License: GNU General Public License v2 or later

License URI: http://www.gnu.org/licenses/gpl-2.0.html

Tags: one-column, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-Idea, translation-ready

*/
ساخت فایل Functions.php و وراثت از والد
برای استفاده از قالب فرزند همراه با استایل‌شیت و جلوگیری از پدید آمدن صفحات HTML بدون استایل، لازم است یک فایل به نام functions.php بسازید تا استایل را از قالب والد به ارث ببرد. بنابراین فایل functions.php را با این کدها بسازید و درون فولدر قالب فرزند قرار دهید:
/*
Theme Name: inshal-wordpress-theme-child
Theme URI: http://example.com/inshal-wordpress-theme-child/
Description: inshal-wordpress-theme Child Theme
Author: WPZOOM
Author URI: http://example.com
Template: inshal-wordpress-theme
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: one-column, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-Idea, translation-ready

*/
فعال‌سازی قالب فرزند
در مرحله بعدی تبدیل قالب HTML به وردپرس باید قالب فرزند را فعال کنیم. ابتدا فولدر قالب را به فایلی با پسوند zip. تغییر می‌دهیم. سپس به داشبورد وردپرس می‌رویم و از بخش Appearance و بعد Themes، روی گزینه Add New کلیک می‌کنیم.
روی دکمه Choose File کلیک و فایل zip خود را آپلود کنید.
بعد از آپلود، دکمه Activate را فشار دهید.
نکته: می‌توانید فولدر را به صورت دستی نیز بکشید و در آدرس wp-content/themes بیندازید. 
برای ساخت سایت وردپرسی که شبیه به طرح اصلی سایت HTML-تان باشد، در گام آخر باید محتوا HTML را به صورت دستی به وردپرس منتقل کنید. اگرچه پلاگین‌های متعددی داریم که این فرایند را به صورت خودکار پیش می‌برند، اما ممکن است با آخرین نسخه جدید‌های وردپرس سازگار نباشد. بنابراین انجام دادن این کار به صورت دستی، ریسک کمتری خواهد داشت. 
در نهایت به ساده‌ترین روش تبدیل کردن قالب HTML به قالب وردپرس می‌رسیم.
نکته: پلاگین ممکن است با آخرین ادیشن از وردپرس سازگار نباشد، زیرا چند وقتی است که آپدیت دریافت نکرده. با این حال تست‌ها نشان می‌دهند که با ادیشن WordPress 6.x سازگار است. 
این قسمت هم مانند بخش Content است، هرچند که این بار با تایتل‌های صفحه (Page Titles) سر و کار داریم. 
در صورتی که داده‌ای برای افزودن به کاستوم فیلدها دارید، می‌توانید از این بخش اقدام کنید. 
در اینجا می‌توانید دسته‌بندی‌ها (Categories)، تگ‌ها (Tags) و جنس محتوایی که ایمپورت می‌کنید را انتخاب کنید. پلاگین نیز طبقه‌بندی‌های کنونی (Taxonomies) سایت را حاکی از آن است تا فرایندی آسان‌تر را پشت سر بگذارید.
در این صفحه شاهد فهرستی از ابزارهای مختلف هستیم که برای تبدیل قالب HTML به وردپرس به کمک‌مان می‌آیند. 
به همین سادگی کار به خاتمه می‌رسد. سایت وردپرس شما اکنون محتوا را با قالب و فرمت به‌روز به نمایش درمی‌آورد. 
بعد از اینکه قالب HTML خود را به وردپرس تبدیل کردید و ساختار سایت شکل گرفت، مرحله بعدی بهینه‌سازی محتوا و تجربه کاربری است؛ در این مسیر استفاده از افزونه هوش مصنوعی وردپرس می‌تواند فرآیند تولید محتوا، تحلیل سئو و شخصی‌سازی صفحات را به شکل چشمگیری ساده‌تر و هوشمندتر کند.
در فرایند تبدیل قالب‌های HTML به قالب وردپرس ممکن است با مشکلات گوناگون روبه‌رو شوید. در ادامه برخی از رایج‌ترین مشکلات و راهکار آن‌ها را آورده ایم. 
در نهایت باید گفت تبدیل کردن قالب سایت HTML به تم وردپرس مزایا متعدد به همراه می‌آورد. برای مثال می‌توانید سایت خود را آسان‌تر سفارشی‌سازی کنید و بهره‌وری بالاتری در مدیریت آن داشته باشید. در این گزارش با سه روش مختلف برای تبدیل قالب استاتیک HTML به قالب داینامیک وردپرس آشنا شدیم، اما پیش از اینکه فرایند را آغاز کنید، خوب است که از بهینه‌ بودن کد HTML، ساختارمندی محتوا و همینطور سازگاری با ابعاد مختلف نمایشگر مطمئن شوید. در نهایت کار را با پاسخ دادن به چند سوال پرتکرار به خاتمه می‌رسانیم.
در فرآیند انتقال قالب به وردپرس، مدیریت سرور (سطح دسترسی فایل‌ها، تنظیمات PHP و محدودیت‌های پردازش) تاثیر مستقیم بر بازده دارد؛ بنابراین پیش از فعال‌سازی پوسته تازه، گزینه‌های مناسب برای خریداری هاست را مقایسه کنید تا از سازگاری و بازده مطلوب مطمئن شوید.
۱. فرایند تبدیل قالب HTML به وردپرس چند مرحله دارد؟
این فرایند در مجموع شامل شش مرحله است:
۲. چطور به سایت وردپرس، کد HTML اضافه کنیم؟
برای افزودن کدهای HTML به پست‌ها و صفحات وردپرس، به همان پست یا صفحه به‌خصوص بروید و کدها را به زبانه Text اضافه کنید. 
۱. چطور یک فایل HTML را در وردپرس باز کنیم؟
برای باز کردن فایل‌های HTML ابتدا باید فایل زیپ‌شده را درون سرورهای وردپرس آپلود کنید و سپس در ابزار File Manager سرور به سراغ آن‌ها بروید. 
۳. آیا وردپرس از HTML استفاده می‌کند؟
بله، وردپرس اتکا فراوان بر HTML دارد و از آن‌ برای رندر و قالب‌بندی بیانات در صفحات و پست‌های گوناگون کمک می‌گیرد. 
منبع:
CloudWays 

سوالات متداول

مهم‌ترین نکات درباره html چیست؟

جزئیات مهم و نکات قابل توجه درباره html در متن مقاله بررسی شده است.

آخرین اطلاعات درباره فایل چیست؟

جدیدترین اطلاعات و تغییرات مربوط به فایل در این گزارش ارائه شده است.

چرا آموزش تبدیل قالب HTML به وردپرس تصویری و مرحله به مرحله اهمیت دارد؟

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