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

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

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

تبدیل قالب html به وردپرس می‌تواند شما را از شر دردسرهای این‌چنینی HTML خلاص و مدیریت سایت‌تان را ساده‌تر کند.

اگر حس می‌کنید مدیریت وب‌سایت با HTML برایتان دشوار است، این مطلب را از دست ندهید! زیرا قصد داریم ۳ روش عالی برای تبدیل html به وردپرس را به شما آموزش دهیم.

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

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

هاست مناسب

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

برای نمونه، هاست وردپرس لیموهاست برای سایت‌های وردپرسی بهینه‌سازی شده و بیشترین سازگاری را با قالب، ابزارها و قابلیت‌های وردپرس دارد.

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

با بهترین عملکرد میزبان سایت وردپرسی شما هستیم. بهینه‌سازی شده برای بالاترین سطح سرعت!

شروع قیمت از
۱۹۸ هزار تومان

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

ویرایشگر کد

در صورتی که بخواهید سایت HTML را به وردپرس تبدیل کنید، باید بخشی از کدها را تغییر دهید یا کپی کنید. در این شرایط، به ویرایشگر کد نیاز خواهید داشت. ابزارهایی همچون Notepad++، Atom، Sublime و سایر ابزارهای مشابه می‌توانند در این کار به شما کمک کنند. 

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

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

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

روش اول) تبدیل قالب HTML به قالب وردپرس

اولین و البته چالشی‌ترین روش، این است که وب‌سایت HTML خود را بدون هیچ تغییری به سایت وردپرسی تبدیل کنید. مزیت استفاده از این تکنیک، این است که هیچ چیزی در سایت شما تغییر نخواهد کرد، نه طراحی و نه محتوا. 

این روش از این نظر چالش برانگیز است که تا حدودی به کدنویسی نیاز دارد؛ بنابراین اگر با اصول کدنویسی HTML و البته php آشنا باشید، دچار مشکل نخواهید شد. 

برای استفاده از این روش، باید مراحل زیر را پشت سر بگذارید:

۱. یک پوشه برای فایل‌های اولیه درست کنید

در اولین قدم باید تمام فایل‌های مورد نیاز خود را به‌درستی سازماندهی کنید تا هنگام انتقال، دچار مشکل نشوید. برای این کار، ابتدا یک پوشه با نام دلخواه روی دسکتاپ خود بسازید. سپس ویرایشگر کد را باز کنید و فایل‌های زیر را بسازید:

• style.css
• Index.php
• header.php
• sidebar.php
• Footer.php

البته بسته به طراحی، ممکن است به برخی از این فایل‌ها نیازی نداشته باشید. مثلا برخی‌ سایت‌ها، سایدبار ندارند، بنابراین نیازی هم به فایل sidebar.php نخواهند داشت. 

۲. کدهای Css سایت قدیمی را جای‌گذاری کنید

فایل style.css را که در مرحله پیش ساخته بودید باز کنید. کد دستوری زیر را در بالاترین بخش (Header) بنویسید:

/*

Theme Name: (نام تم)

Author: (نام خود شما)

Author URI:(آدرس URL)

Description: (توضیح درباره تم)

Version: 1.0

License: GNU General Public License v2 or later

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

*/

پس از این کد، می‌توانید کد CSS قدیمی خود را کپی کنید و در همین فایل قرار دهید. با این کار، وردپرس کدهای Css را به‌درستی درک می‌کند و آن‌ها را در جای مناسب قرار می‌دهد. پس از انجام تمامی مراحل، فایل را Save کنید و صفحه را ببندید. 

۳. Html سایت قبلی را دسته‌بندی کنید

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

ابتدا کدهای بخش هدر سایت را در فایل header.php، کدهای مربوط به نوارهای کناری یا سایدبار را در بخش sidebar.php و کدهای دستوری فوتر را در فایل footer.php جای‌گذاری کنید. 

با این کار کدهای هر بخش به‌طور منظم در جای خود قرار می‌گیرند و در مراحل بعدی، می‌توانید آن‌ها را برای اجرا، فراخوانی کنید. در این مرحله، همه فایل‌های قبلی را ذخیره کنید و ببندید؛ فقط فایل‌های header.php و index.php فعلا باید باز باشند تا کارهای بعدی روی آن‌ها انجام شود. 

۴. استایل سایت را به فرمت وردپرس تبدیل کنید

در مرحله بعدی باید استایل سایت را تغییر دهید تا با فرمت وردپرس منطبق شود. برای این کار، ابتدا وارد فایل Header.php شوید. سپس، سراغ کدهای دستوری که در مرحله پیش کپی کرده بودید بروید و لینک‌های موجود در تگ <head> را پیدا کنید. سپس آن‌ها را با این تکه کد جایگزین کنید:

echo get_template_directory_uri(); ?>/style.css” type=”text/css” media=”all” />

در این مرحله، کار شما با بخش هدر تمام می‌شود. می‌توانید فایل Header.php را ذخیره کنید و آن را ببندید تا حین انجام سایر مراحل، مزاحمتی ایجاد نکند. 

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

<?php get_header(); ?>

<?php get_sidebar(); ?>

<?php get_footer(); ?

توجه داشته باشید که بین خط اول و دوم حتما باید فاصله باشد، زیرا قرار است بین آن‌ها، کد دستوری دیگری هم قرار بگیرد. کد زیر را کپی کنید و بلافاصله پس از کد <?php get_header(); ?> قرار دهید:

<?php while ( have_posts() ) : the_post(); ?>

 <article class="<?php post_class(); ?>" id="post-<?php the_ID(); ?>">

 <h2 class="entry-title"><?php the_title(); ?></h2>

 <?php if ( !is_page() ):?>

 <section class="entry-meta">

 <p>Posted on <?php the_date();?> by <?php the_author();?></p>

 </section>

 <?php endif; ?>

 <section class="entry-content">

 <?php the_content(); ?>

 </section>

 <section class="entry-meta"><?php if ( count( get_the_category() ) ) : ?>

 <span class="category-links">

 Posted under: <?php echo get_the_category_list( ', ' ); ?>

 </span>

 <?php endif; ?></section>

 </article>

<?php endwhile; ?>

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

۵. قالب اصلی را در وردپرس آپلود کنید

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

پیش از ورود به وردپرس، همه فایل‌ها را به شکل فایل فشرده (Zip) درآورید تا بتوانید به شکل یک جا آن‌ها را بارگذاری کنید. 

سپس، پنل مدیریت وردپرس را باز کنید و از بخش Appearances، گزینه themes را انتخاب کنید. گزینه Add new را بزنید و در نهایت، روی Upload theme کلیک کنید تا بخش بارگذاری فایل برایتان باز شود. فایل Zip را در این بخش بارگذاری کنید و پس از اتمام آپلود، روی گزینه Install Now بزنید تا قالب نصب شود. 

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

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

روش دوم) تغییر قالب سایت با حفظ محتوای فعلی

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

برای این کار، ابتدا تم مورد نظر خود را از میان تم‌های آماده وردپرس انتخاب و نصب کنید. سپس، مراحل زیر را قدم به قدم انجام دهید:

۱. نصب پلاگین HTML Import 2 

در نخستین قدم، وارد بخش Plugins یا همان افزونه‌ها شوید. گزینه Add new را بزنید و سپس، نام افزونه Import Plugin 2 را جست‌و‌جو کنید. این افزونه کمی قدیمی است و ممکن است برای یافتن آن، لازم شود به قسمت‌های پایین لیست بروید؛ با این حال، این موضوع تاثیری روی عملکرد سریع و فوق‌العاده آن نخواهد گذاشت! 

۲. آماده‌سازی فایل‌ها برای آپلود

از پنل مدیریت وردپرس، گزینه Settings را انتخاب کنید و سپس سراغ گزینه HTML Import بروید. با انتخاب این گزینه صفحه‌ای برایتان باز خواهد شد که باید در آن، فایل‌ها را به‌صورت تکی یا یکجا بارگذاری کنید. در صفحه‌ای که باز می‌شود، مراحل زیرا را انجام دهید:

• از قسمت بالای صفحه، گزینه Files را بزنید و در بخش Directory to Import، مسیر فایل HTML را که در هاست بارگذاری شده‌است وارد کنید. دقت کنید مسیر درست باشد، زیرا فراخوانی فایل‌های محتوا از این مسیر صورت خواهد گرفت. 
• در صورت نیاز، در بخش Old site URL، آدرس سایت قدیمی را وارد کنید. اگر به ریدایرکت از سایت قدیمی نیازی ندارید، می‌توانید این بخش را خالی بگذارید. 
• در قسمت Default file باید نام فایل پیش‌فرض برای برداشتن اطلاعات را وارد کنید. بنابراین باید نام فایل index.html را در این بخش بنویسید. 
• در نهایت، در بخش File extensions to include پسوند تمامی فایل‌هایی را که قرار است ایمپورت شوند، وارد کنید. این پسوند‌ها می‌تواند شامل مواردی همچون Images، Includes یا Templates باشد. 

نکته مهم: در این روش، این است که از پیش باید فایل‌های خود را در قسمت سرور بارگذاری و نصب کرده باشید، در غیر این صورت وردپرس برای بارگذاری به آن‌ها دسترسی نخواهد داشت. 

در نهایت، از منوی بالای صفحه گزینه Content را انتخاب کنید. در این بخش، طبق تصویر زیر، تیک‌ گزینه‌ها را بزنید و در نهایت، گزینه Save settings را بزنید تا تغییرات ذخیره شوند. 

۳. بارگذاری محتوای سایت قبلی روی وردپرس

پس از انجام مراحل بالا، صفحه‌ای نمایش داده می‌شود که گزینه Import Files‏‏ روی آن مشخص شده است. با زدن این گزینه، می‌توانید محتواهای سایت Html را به وردپرس انتقال دهید. اگر ناخواسته صفحه بازشده را بستید، می‌توانید از پنل مدیریت، گزینه ‏‏Tools و سپس Import را انتخاب کنید. سپس، در زیرمجموعه‌های قسمت Html، گزینه Run Importer‏‏ را بزنید تا فرایند بارگذاری انجام شود. 

روش سوم) تغییر قالب html به وردپرس از طریق چایلد تم

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

در وردپرس، تم‌هایی با نام Child theme وجود دارند که به شما کمک می‌کنند سایت خود را به‌راحتی و بدون به هم ریختن طراحی، به این پلتفرم انتقال دهید. البته در این روش تم قبلی تا حدودی تغییر خواهد کرد، اما این تغییرات کاملا جزئی است. برای استفاده از این روش، باید مراحل زیر را پشت سر بگذارید:

۱. یک تم اصلی متناسب با موضوع سایت خود انتخاب کنید

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

۲. افزونه Childify Me را نصب کنید

برای اینکه بتوانید از تم اصلی، یک تم فرعی یا چایلد تم بسازید، به افزونه Childify Me نیاز دارید. برای استفاده از این افزونه، وارد بخش Plugins شوید و گزینه Add new را انتخاب کنید. سپس نام افزونه را جست‌وجو و آن را فعال کنید. 

۳. تم اصلی را سفارشی‌سازی کنید

پس از فعال‌سازی تم اصلی و نصب افزونه، نوبت به ایجاد تغییرات روی قالب می‌رسد. از پنل وردپرس، گزینه Appearance و سپس گزینه Themes‏‏ را انتخاب کنید. سپس روی گزینه Customise بزنید تا بخش سفارشی‌سازی قالب برایتان باز شود. در این بخش می‌توانید تغییرات لازم را روی تم خود اعمال کنید؛ از رنگ‌ها و فونت‌ها گرفته تا محل قرارگیری المان‌های مختلف. 

۴. چایلد تم خود را بسازید

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

۵. محتوای خود را به سایت جدید انتقال دهید

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

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

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

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

سوال و ابهامی دارید؟ حتماً در بخش نظرات بپرسید تا در اولین فرصت راهنمایی‌تان کنیم.

منابع: .hostinger