از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
روش تبدیل 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
حالا همه چیز تا انتهای فایل باید اطلاعات پاورقی باشد که داخل این فایل می رود.
درست قبل از بسته شدن براکت