از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
روش تبدیل HTML به وردپرس

سرفصلهای مطلب
بنابراین، شما به موارد اخیر نگاه کرده اید آمار، گفت که وردپرس در حال حاضر 33 درصد از وب سایت ها را قدرت می دهد روی اینترنت. به عنوان مالک وب سایت، ممکن است در نظر داشته باشید که وب سایت HTML ایستا خود را به وردپرس تبدیل کنید.
در حالی که داشتن یک وب سایت مبتنی بر HTML هنوز مشکلی ندارد زیرا HTML5 بسیار قدرتمند است، به خصوص برای یک سایت ویترین. اما برای هر چیز دیگری، وردپرس راه حل های راحت تری ارائه می دهد. وردپرس تم ها، افزونه ها و ویجت های زیادی را برای بهبود وب سایت و افزودن ویژگی های مفید ارائه می دهد.
مدیریت آن نیز آسان است. می توانید بدون کدنویسی محتوا را اضافه و حذف کنید. با یک سایت HTML، داستان متفاوت است. مگر اینکه شما روش کدنویسی را بلد باشید، به روز رسانی محتوا با HTML ممکن است دشوار باشد.
در این مقاله با روش تبدیل HTML ایستا به وردپرس و روش های مختلف انجام آن آشنا می شوید. بیا شروع کنیم.
مواردی که هنگام حرکت باید به آنها توجه کرد
قبل از ترک خانه، باید چند نکته را در نظر بگیرید.
- خدمات میزبانی. قبل از شروع باید یک برنامه میزبانی داشته باشید، زیرا الزامات می تواند با یک سایت HTML متفاوت باشد. برای سایت وردپرسی خود به هاست نیاز دارید. متناوبا، شما می توانید host وب سایت خود را به صورت محلی، و در مرحله بعد آن را زنده کنید.
- ویرایشگر کد. برای تغییر کد HTML وب سایت خود به یک ویرایشگر کد مانند Notepad++، Atom، Sublime و غیره نیاز دارید.
- زمان و پول. باید زمان و پولی را که می خواهید سرمایه گذاری کنید در نظر بگیرید. اگر آماده و متعهد به یادگیری هستید، این آموزش برای شما عالی است. همچنین می توانید توسعه دهندگان را استخدام کنید یا از برنامه های مهاجرت وردپرس برای کمک به تبدیل استفاده کنید. استخدام یک نفر بسیار ساده تر است، اما شما فرصت یادگیری را از دست خواهید داد، و این process ممکن است گران باشد
روش های مختلف برای تبدیل HTML به وردپرس
روشهای مختلفی برای تبدیل HTML به وردپرس وجود دارد و سطح سختی آنها متفاوت است. آنها به شرح زیر هستند:
- ایجاد یک قالب وردپرس از یک سایت HTML ثابت. اگر طراحی وب سایت HTML قدیمی خود را دست نخورده ترجیح می دهید، این گزینه برای شما مناسب است. همچنین چالش برانگیزترین مسیر است و نیاز به کدنویسی دارد. اما، نترسید. تنها کاری که باید انجام دهید این است که کد HTML قدیمی را در چندین فایل PHP کپی/پیست کنید.
- از دست دادن طرح و حفظ محتوا فقط. اگر با پشت سر گذاشتن طراحی وب سایت قدیمی خود مشکلی ندارید و یک تم وردپرس برای شروعی تازه پیدا می کنید، این گزینه برای شما مناسب است. شما فقط باید محتوا را به خانه جدید آن منتقل کنید.
- استفاده از طرح زمینه کودک اقتباس شده از یک موضوع موجود. اگر میخواهید طراحی وبسایت قدیمی را حفظ کنید، احتمالاً این سادهترین راه است. با این روش، از یک تم وردپرس از قبل موجود استفاده میکنید و بر اساس آن میسازید. به عنوان یک امتیاز، می توانید فوراً از ویژگی های قدرتمند وردپرس استفاده کنید.

ایجاد یک تم وردپرس از یک سایت HTML ثابت
اگر هدف شما ایجاد یک وب سایت وردپرسی است که از ابتدا شبیه سایت HTML قدیمی شما باشد، می توانید از اینجا شروع کنید. در این آموزش از a استفاده می کنیم قالب HTML ایستا توسط راشل مک کولین
1. یک پوشه تم و فایل های پایه ایجاد کنید
یک پوشه تم جدید ایجاد کنید روی دسکتاپ خود را و نام آن را. ما پوشه خود را به عنوان نامگذاری می کنیم موضوع من. پس از آن، ویرایشگر کد خود را باز کنید و فایل های زیر را ایجاد کنید:
- style.css
- index.php
- header.php
- نوار کناری.php
- footer.php
ویرایشگر را باز بگذارید. بعداً به آن باز خواهیم گشت.
2. CSS وب سایت قدیمی را به شیوه نامه وردپرس تغییر دهید
اکنون، با کپی کردن کد CSS قدیمی شما در آن، یک شیوه نامه وردپرس ایجاد می کنیم. رفتن به style.css فایل کنید و این کد را قرار دهید:
/* Theme Name: My Theme Author: LakiGarang Author URI: https://hostinger.com/tutorials/author/luqman Description: A development theme, from static HTML to WordPress Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html */
این کد اطلاعاتی را در اختیار وردپرس قرار می دهد که یک سرصفحه صفحه قالب است. می توانید جزئیاتی مانند نام موضوع، نویسنده و URL، توضیحات و غیره را ویرایش کنید.
درست بعد از هدر، کد CSS قدیمی خود را کپی و در فایل قرار دهید. ذخیره کنید و ببندید.
3. HTML وب سایت قدیمی خود را تقسیم کنید
وردپرس از PHP برای استخراج اطلاعات از پایگاه داده خود استفاده می کند. بنابراین، شما باید HTML وب سایت قدیمی خود را به قطعات مختلف تقسیم کنید تا مطمئن شوید که می تواند آنها را به درستی کنار هم قرار دهد.

اگر این پیچیده به نظر می رسد، زیاد نگران نباشید process کاملا سرراست است ابتدا بیایید ببینیم وب سایت استاتیک و کد آن چگونه به نظر می رسد.
<!DOCTYPE html> <!--[if lt IE 7]><html lang="en-US" class="ie6"><![endif]--> <!--[if IE 7]><html lang="en-US" class="ie7"><![endif]--> <!--[if IE 8]><html lang="en-US" class="ie8"><![endif]--> <!--[if IE 9]><html lang="en-US" class="ie9"><![endif]--> <!--[if gt IE 9]><html lang="en-US"><![endif]--> <!--[if !IE]><html lang="en-US"><![endif]--> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width" /> <title>WordPress Writer and Instructor | RACHEL McCOLLIN</title> <link rel="stylesheet" type="text/css" media="all" href="https://www.hostinger.com/tutorials/style.css" /> <link href="https://fonts.googleapis.com/css؟family=Assistant|Oswald" rel="stylesheet"> </head> <body> <div class="header-bg"> <header role="banner"> <hgroup class="site-name three-quarters left"> <!-- site name and description - site name is inside a div element روی all pages execpt the front page and/or main blog page, where it is in a h1 element --> <h1 id="site-title" class="one-half-left"> <a href="https://rachelmccollin.com/" title="RACHEL McCOLLIN" rel="home">RACHEL McCOLLIN</a> </h1> <h2 id="site-description">Fiction and Technical Writer</h2> </hgroup> <div class="right quarter"> <a class="toggle-nav" href="#">☰</a> </div> <!-- .right quarter --> </header><!-- header --> </div><!-- header-bg--> <!-- full width navigation menu --> <nav class="menu main"> <div class="skip-link screen-reader-text"><a href="#content" title="Skip to content">Skip to content</a></div> <div class="main-nav"> <ul class="menu"> <li class="menu-item"><a href="https://rachelmccollin.com/">Home</a></li> <li class="menu-item"><a href="https://rachelmccollin.com/about-me/">About Me</a></li> <li class="menu-item"><a href="https://rachelmccollin.com/books/">Books</a></li> <li class="menu-item"><a href="https://rachelmccollin.com/bookclub/">Book Club</a></li> <li class="menu-item"><a href="https://rachelmccollin.com/blog/">Blog</a></li> <li class="menu-item"><a href="https://rachelmccollin.com/contact/">Contact</a></li> </ul> </div> </nav><!-- .main --> <div class="main"> <div id="content" class="two-thirds left"> <article class="post"> <h2 class="entry-title">Welcome to This Website</h2> <section class="entry-content"> <p>This site is comprised of one static HTML file.</p> <p>You will be able to add more content later via the WordPress admin screens. <h3>Here's a heading so you can check how it's styled</h3> <p>And another paragraph underneath.</p> <p>And a list:</p> <ul> <li>Item 1</li> <li>Item 2</li> <li>And so روی...</li> </ul> </section><!-- .entry-content --> </article><!-- #post-## --> </div><!-- #content --> <aside class="sidebar one-third right"> <aside class="widget-area"> <div class="widget-container"> <h3 class="widget-title">Buy My Book</h3> <img width="242" height="300" src="https://premium.wpmudev.org/wp-content/themes/wpmudev-2015-1/assets/img/projects/snapshot-hero@2x.png؟v=1" alt="WordPress: Pushing the Limits by Rachel McCollin" style="max-width: 100%; height: auto;" /> <p><em>WordPress: Pushing the Limits</em> will help you become a professional WordPress developer.</p> </div> </aside> </aside> </div><!-- .main --> <footer> <div class="fatfooter"> <p>Add footer content here with <a href="#">widget areas</a> - the tutorials will show you how.</p> </div> </footer> </body> </html>
اکنون، وب سایت استاتیک قدیمی خود را باز کنید index.html فایل، ما آن را به فایل های جدید وردپرس تقسیم می کنیم. (نمونه های زیر نشانه گذاری ما هستند).
header.php
همه چیز از ابتدای کد HTML قدیمی شما تا قسمت محتوای اصلی در این فایل قرار می گیرد. منطقه محتوای اصلی معمولا با بیان می شود <اصلی> یا
علاوه بر این، درست قبل از عنصر، این کد را کپی و جایگذاری کنید . این اطمینان حاصل می کند که افزونه های وردپرس به درستی کار می کنند. پس از اتمام، فایل را ذخیره کنید.
<!DOCTYPE html> <!--[if lt IE 7]><html lang="en-US" class="ie6"><![endif]--> <!--[if IE 7]><html lang="en-US" class="ie7"><![endif]--> <!--[if IE 8]><html lang="en-US" class="ie8"><![endif]--> <!--[if IE 9]><html lang="en-US" class="ie9"><![endif]--> <!--[if gt IE 9]><html lang="en-US"><![endif]--> <!--[if !IE]><html lang="en-US"><![endif]--> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width" /> <title>WordPress Writer and Instructor | RACHEL McCOLLIN</title> <link rel="stylesheet" type="text/css" media="all" href="https://www.hostinger.com/tutorials/style.css" /> <link href="https://fonts.googleapis.com/css؟family=Assistant|Oswald" rel="stylesheet"> <?php wp_head();?> </head> <body> <div class="header-bg"> <header role="banner"> <hgroup class="site-name three-quarters left"> <!-- site name and description - site name is inside a div element روی all pages execpt the front page and/or main blog page, where it is in a h1 element --> <h1 id="site-title" class="one-half-left"> <a href="https://rachelmccollin.com/" title="RACHEL McCOLLIN" rel="home">RACHEL McCOLLIN</a> </h1> <h2 id="site-description">Fiction and Technical Writer</h2> </hgroup> <div class="right quarter"> <a class="toggle-nav" href="#">☰</a> </div> <!-- .right quarter --> </header><!-- header --> </div><!-- header-bg--> <!-- full width navigation menu --> <nav class="menu main"> <div class="skip-link screen-reader-text"><a href="#content" title="Skip to content">Skip to content</a></div> <div class="main-nav"> <ul class="menu"> <li class="menu-item"><a href="https://rachelmccollin.com/">Home</a></li> <li class="menu-item"><a href="https://rachelmccollin.com/about-me/">About Me</a></li> <li class="menu-item"><a href="https://rachelmccollin.com/books/">Books</a></li> <li class="menu-item"><a href="https://rachelmccollin.com/bookclub/">Book Club</a></li> <li class="menu-item"><a href="https://rachelmccollin.com/blog/">Blog</a></li> <li class="menu-item"><a href="https://rachelmccollin.com/contact/">Contact</a></li> </ul> </div> </nav><!-- .main -->
نوار کناری.php
همه چیز متعلق به بخش < کنار…
در کد HTML قدیمی شما، به این فایل می رود. پس از اتمام، فایل را ذخیره کنید.
<aside class="sidebar one-third right"> <aside class="widget-area"> <div class="widget-container"> <h3 class="widget-title">Buy My Book</h3> <img width="242" height="300" src="https://premium.wpmudev.org/wp-content/themes/wpmudev-2015-1/assets/img/projects/snapshot-hero@2x.png؟v=1" alt="WordPress: Pushing the Limits by Rachel McCollin" style="max-width: 100%; height: auto;" /> <p><em>WordPress: Pushing the Limits</em> will help you become a professional WordPress developer.</p> </div> </aside> </aside>
footer.php
حالا همه چیز تا انتهای فایل باید اطلاعات پاورقی باشد که داخل این فایل می رود.
درست قبل از بسته شدن براکت ، این کد را به همان دلیل اضافه کنید header.php. وقتی تمام کردید، آن را ذخیره کنید.
</div><!-- .main --> <footer> <div class="fatfooter"> <p>Add footer content here with <a href="#">widget areas</a> - the tutorials will show you how.</p> </div> </footer> <?php wp_footer();?> </body> </html>
حالا کار شما تمام شده است index.html فایل. می توانید آن را همراه با سایر فایل های موجود در پوشه تم خود ببندید به جز header.php و index.php. آنها هنوز کمی کار دارند.
4. استایل را به فرمت وردپرس تغییر دهید
در هدر، تنها کاری که باید انجام دهید این است که شیوه نامه را از HTML به فرمت وردپرس تغییر دهید. به دنبال پیوند موجود در <سر> بخش. در مورد من، چیزی شبیه به این است:
<link rel="stylesheet" type="text/css" media="all" href="https://www.hostinger.com/tutorials/style.css" />
آن را با این خط جایگزین کنید:
<link rel="stylesheet" href="https://www.hostinger.com/tutorials/<?php echo get_template_directory_uri(); ?>/style.css" type="text/css" media="all" />
اکنون میتوانید آن را ذخیره کرده و ببندید header.php فایل.
بیایید به index.php فایل. در حال حاضر باید خالی باشد، بنابراین این خطوط کد را کپی و جایگذاری کنید:
<?php get_header(); ?> <?php get_sidebar(); ?> <?php get_footer(); ?>
این کد بقیه فایل های وردپرس شما را فراخوانی می کند. باید به فضای بین هدر و نوار کناری توجه کنید. این جایی است که شما اضافه خواهید کرد حلقه.
حلقه خواهد شد process هر پست را برای نمایش، و آن را بر اساس روش مطابقت محتوا با معیارهای درون تگ های حلقه قالب بندی کنید. این یک جنبه مهم است که محتوای پویا به سایت وردپرس خود اضافه کنید.
برای انجام این کار، کد زیر را بلافاصله بعد از آن قرار دهید :
<?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 روی <?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; ?>
پس از اتمام، خود را ذخیره کنید index.php فایل کنید و ببندید شما با موفقیت یک تم وردپرس ایجاد کردید. اکنون می توانید آن را به سایت وردپرس خود اضافه کنید.
5. قالب خود را در وردپرس آپلود کنید
پس از اتمام ایجاد تم اصلی، می توانید آن را در وردپرس آپلود کنید. همه فایل های داخل پوشه تم شما باید در یک مکان باشند. برای انجام این کار، می توانید آنها را زیپ کنید.
به داشبورد مدیریت وردپرس خود بروید. سر به ظاهر -> تم ها. کلیک اضافه کردن جدید -> آپلود تم.

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

حالا قسمت جلویی شما باید شبیه سایت قدیمی باشد. باید توجه داشته باشید که در حالی که طراحی اولیه یکسان به نظر می رسد، کارهای بیشتری وجود دارد که باید انجام دهید تا ادغام بهتر شود.
به عنوان مثال، شما نمی توانید از ویژگی های وردپرس مانند ناحیه ویجت استفاده کنید. همچنین باید نشانه گذاری CSS را تنظیم کنید تا بخشی از طراحی اصلی وردپرس باشد.
چشم پوشی از طراحی و حفظ فقط محتوا
اگر با پشت سر گذاشتن طراحی وب سایت HTML قدیمی مشکلی ندارید و می خواهید به جای آن از یک تم جدید استفاده کنید، این گزینه شماست. این روش همچنین واردات محتوا را بسیار آسان تر می کند.
تنها کاری که باید انجام دهید این است که تم مورد نظر خود را نصب کرده و آن را فعال کنید، سپس مراحل زیر را دنبال کنید.
مهم! همیشه backup سایت وردپرس خود را قبل از هر تغییری انجام دهید.
1. افزونه Import 2 را نصب کنید
شما باید نصب کنید وارد کردن افزونه 2. رفتن به پلاگین -> افزودن جدید و با نام آن را جستجو کنید. شما آن را کمی پایین تر خواهید یافت زیرا یک افزونه کاملاً قدیمی است اما هنوز هم کار بسیار خوبی انجام می دهد. کلیک نصب و فعال کردن آی تی.

2. آماده سازی واردات
حالا به وردپرس بروید تنظیمات -> واردات HTML. تو می توانی import چندین صفحه در یک زمان یا یکی در یک زمان.

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

پس از اتمام کار، کلیک کنید تنظیمات را ذخیره کن.
3. وارد کردن محتوای خود را شروع کنید
را وارد کردن فایل ها پس از ذخیره تنظیمات، دکمه در دسترس خواهد بود. اگر آن را از دست دادید، می توانید از طریق آن نیز به آن دسترسی داشته باشید ابزار -> واردات و کلیک کنید Importer را اجرا کنید در زیر گزینه های HTML

اگر می خواهید انتخاب کنید import فهرستی از فایل ها یا یک فایل واحد، سپس کلیک کنید ارسال. پس از اتمام، تمام محتوای موجود شما در دسترس خواهد بود روی سایت وردپرس جدید شما
استفاده از یک تم کودک اقتباس شده از یک موضوع موجود
اگر میخواهید برخی از طراحیهای قدیمی وبسایت خود را حفظ کنید، اما احساس میکنید که روش اول کمی دشوار است، استفاده از تم کودک میتواند جایگزین سادهای باشد.
طرحهای زمینه کودک به شما امکان میدهند از هزاران طرح زمینه موجود (که تمهای اصلی نامیده میشوند) استفاده کنید. روی وردپرس و سایت جدید خود را بسازید روی بالای آنها
همچنین می توانید بدون ایجاد مزاحمت در هسته اصلی موضوع، در ظاهر سایت خود تغییراتی ایجاد کنید. هنگام بهروزرسانی طرح زمینه، هیچ تغییری را از دست نخواهید داد.
ما یک مقاله پیشرفته تر نوشته ایم روی چگونه یک تم کودک وردپرس ایجاد کنیم. در این آموزش، ما استفاده خواهیم کرد من را بچه دار کن برای ساده کردن process برای مبتدی ها.
مهم! همیشه backup سایت وردپرس خود را قبل از هر گونه تغییر.
1. یک تم مناسب انتخاب کنید
شما باید یک تم مناسب به عنوان پایه ای برای ساختن خود پیدا کنید روی. بسیار عالی خواهد بود اگر بتوانید موضوعی را پیدا کنید که به طراحی وب سایت قدیمی شما نزدیک باشد، بنابراین لازم نیست بعداً چیزهای زیادی را تغییر دهید.
را مرور کنید دایرکتوری قالب وردپرس برای یافتن کاندیدای مناسب در این آموزش، ما از بیست و هفده موضوع به عنوان نقطه شروع ما.
2. Childify Me را نصب کنید
رفتن به پلاگین -> افزودن جدید و با نام آن را جستجو کنید. نصب و فعال کردن آی تی.

نکته حرفه ای
پلاگین Childify Me ایجاد می کند style.css و function.php فایل ها. اگر می خواهید توابع سفارشی را در a اضافه کنید functions.php فایل، پوشه ها/فایل های جدید، می توانید آنها را با استفاده از یک سرویس گیرنده FTP آپلود کنید. اگر استفاده می کنید هاستینگer، ما مدیر فایل به مدیریت فایل های شما از طریق کنترل پنل کمک می کند.
3. تم والدین را سفارشی کنید
حالا برو به ظاهر -> تم ها. مطمئن شوید که تم والد فعال است. کلیک شخصی سازیو به پنل سفارشی سازی تم فعال خود بروید.

4. Childify the Parent Theme
کلیک کنید بر روی من را بچه دار کن را فشار دهید، و به تم فرزندتان یک نام بدهید. پیشنهاد می کنیم نام آن را مشابه موضوع اصلی بگذارید. کلیک ایجاد کردن. پس از اتمام کار، کلیک کنید فعال و پیش نمایش.

5. وارد کردن محتوای خود را شروع کنید
اکنون که سایت جدید وردپرس شما شبیه نسخه HTML استاتیک قدیمی است، تنها چیزی که باقی مانده است import محتوای. در اینجا می توانید از روش قبلی استفاده کنید.
شما با موفقیت وب سایت HTML ایستا خود را به وردپرس منتقل کردید. تبریک می گویم!
راه های دیگر مهاجرت به وردپرس را بیابید
Wix به وردپرس
Squarespace به وردپرس
بلاگر به وردپرس
جوملا به وردپرس
وردپرس را از زیر پوشه به روت منتقل کنید
نتیجه
ما آنچه را که باید قبل از تبدیل یک سایت HTML ایستا به وردپرس و روش های مختلف تکمیل process.
یک جمع بندی سریع – می توانید یک تم وردپرس از ابتدا ایجاد کنید. این یک روش دشوار است، اما اگر میدانید چگونه کدنویسی کنید و وقت خالی برای سرمایهگذاری دارید، یک گزینه عالی است.
از طرف دیگر، میتوانید از افزونهها نیز استفاده کنید تا تبدیل را بسیار آسانتر کنید، و import تمام محتوای شما به خانه جدیدش می رسد.
امیدواریم که این مقاله به سهولت این مشکل کمک کند process. در قسمت بعدی می بینمت!
لطفا در صورت وجود مشکل در متن یا مفهوم نبودن توضیحات، از طریق دکمه گزارش نوشتار یا درج نظر روی این مطلب ما را از جزییات مشکل مشاهده شده مطلع کنید تا به آن رسیدگی کنیم
زمان انتشار: 1402-12-31 05:47:03