ทำไมคุณควรแปลงเว็บไซต์ HTML ของคุณเป็นธีม WordPress

ยังคงใช้เว็บไซต์ HTML โบราณอยู่ใช่หรือไม่ ถึงเวลาที่คุณจะแปลงเว็บไซต์ HTML ของคุณเป็นเว็บไซต์ WordPress และได้รับประโยชน์จากคุณสมบัติมากมายที่นำเสนอโดยระบบจัดการเนื้อหายอดนิยมนี้ เราจะเน้นที่เหตุผลที่คุณควรเปลี่ยนมาใช้ WordPress และวิธีที่คุณจะบรรลุเป้าหมายนั้น

บทนำ

Pure vanilla HTML เป็นมาตรฐานทองคำสำหรับการพัฒนาเว็บไซต์มาเป็นเวลานาน อย่างไรก็ตาม เว็บไซต์ในสมัยก่อนมีโครงกระดูก ไม่มีเสียงระฆังและนกหวีดที่ซับซ้อน และการใช้ HTML สำหรับเว็บไซต์เหล่านั้นก็สมเหตุสมผลแล้ว

ด้วยแนวโน้มและความต้องการของตลาดในปัจจุบัน ตอนนี้คุณสามารถแปลง HTML เป็น WordPress และใช้ประโยชน์จาก ระบบจัดการเนื้อหา เพื่อใช้งานเว็บไซต์ของคุณ แทนที่จะต้องเขียนโค้ด อ่านเพิ่มเติมเพื่อให้เข้าใจถึงการพัฒนา WordPress ในวงกว้างขึ้น

เหตุผลในการอัปโหลดหรือแปลงเว็บไซต์ HTML เป็น WordPress

นี่คือสาเหตุหลักบางประการที่ทำให้การย้ายจากเว็บไซต์ HTML แบบคงที่ไปยังเว็บไซต์ WordPress เป็นขั้นตอนที่เหมาะสม:

1. WordPress เป็นเครื่องมือที่ยอดเยี่ยมในการสร้างและจัดการส่วนต่อประสานผู้ใช้ที่ไม่ซ้ำแบบใครซึ่งไม่สามารถทำได้ง่ายด้วยเทมเพลต HTML แบบคงที่สำหรับการออกแบบเว็บไซต์
2. WordPress มีชุมชนนักพัฒนาที่แข็งแกร่งที่สามารถช่วยเหลือคุณเกี่ยวกับไซต์ของคุณและแนะนำความท้าทายในอดีตของผู้มาใหม่
3. หากคุณต้องการปรับแต่งเลย์เอาต์อย่างรวดเร็ว วิธีนี้ไม่สามารถทำได้ด้วยเลย์เอาต์ HTML ธรรมดา เครื่องมือสร้างเพจของ WordPress ช่วยให้ผู้ใช้ปรับแต่งเลย์เอาต์และรูปลักษณ์ของเว็บไซต์ได้ทุกที่
4. ในกรณีที่คุณไม่ต้องการใช้ไฟล์ HTML ที่มีอยู่ คุณสามารถเลือกจากธีมที่มีอยู่มากมาย มีโอกาสสูงมากที่คุณอาจพบธีมที่คล้ายกับรูปลักษณ์ HTML ของคุณ วิธีนี้ช่วยให้คุณประหยัดต้นทุนและความพยายามในการแปลงเค้าโครง HTML ที่มีอยู่เป็น WordPress และใช้ประโยชน์จากเทมเพลตสำเร็จรูป
5. WordPress มีวิวัฒนาการตลอดระยะเวลาและในช่วงวิวัฒนาการ ชุมชน WordPress ได้ตรวจสอบให้แน่ใจว่าเป็นมิตรกับ SEO มันมีปลั๊กอินเสริม SEO ที่น่าทึ่ง ปลั๊กอินตัวหนึ่งคือ YOAST SEO มาตรฐานทองคำสำหรับการจัดการ SEO ใน WordPress ช่วยในการบรรลุอันดับของเครื่องมือค้นหามากขึ้น ซึ่งเป็นเป้าหมายสูงสุดในการสร้างเว็บไซต์ธุรกิจ

วิธีต่างๆ ในการแปลงเว็บไซต์ HTML เป็น WordPress

หลังจากพูดคุยกันว่าทำไมจึงแนะนำให้แปลง HTML เป็น WordPress เราจะเจาะลึกลงไปเพื่อทำความเข้าใจวิธีการทำสิ่งนั้นให้สำเร็จ

มีให้เลือก 3 แบบ

• วิธีการแบบแมนนวลซึ่งต้องสร้างทั้งหมดตั้งแต่เริ่มต้น
• วิธีการธีมลูกประกอบด้วยการใช้ธีม WordPress พื้นฐานและปรับแต่งตามข้อกำหนดของคุณ
• เทคนิคปลั๊กอิน

วิธีที่คุณเลือกขึ้นอยู่กับความรู้ในการเขียนโค้ดของคุณ ระยะเวลาที่คุณตั้งใจจะทุ่มเทให้กับโครงการนี้ และความชอบของคุณ

การแปลงเว็บไซต์ HTML เป็น WordPress ด้วยตนเอง

รหัส HTML ของไซต์ปัจจุบันของคุณอาจเป็นจุดอ้างอิงสำหรับการแปลงด้วยตนเอง ผู้เชี่ยวชาญแนะนำว่าคุณมีความรู้ด้านการเขียนโค้ดเพียงพอก่อนที่จะลองขั้นตอนการแปลนี้ คุณควรคุ้นเคยกับ HTML, CSS และ PHP โดยเฉพาะ

ต่อไปนี้คือวิธีการแปลง HTML เป็น WordPress ด้วยตนเอง:

ขั้นตอนที่ 1: สร้างโฟลเดอร์ธีมใหม่

สร้างไฟล์ใหม่บนพีซีของคุณเพื่อจัดเก็บไฟล์ธีมของคุณ คุณสามารถตั้งชื่อหมวดหมู่นี้ได้ตามต้องการ (จะทำหน้าที่เป็นชื่อแอตทริบิวต์) สร้างไฟล์ที่เหมาะสมและเปิดไว้ในโปรแกรมแก้ไขการเข้ารหัสที่คุณต้องการ:

1. Style.css
2. Index.php
3. Header.php
4. Sidebar.php

ขั้นตอนที่ 2: คัดลอกโค้ด CSS ไปยังสไตล์ชีตใหม่

คุณจะคัดลอกโค้ด CSS ซ้ำได้เมื่อสร้างไฟล์แล้ว ผู้ที่ต้องการทำซ้ำไซต์ของตนและย้ายไปยัง WordPress จะต้องค้นหาและแยกโค้ด 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 */

ขั้นตอนที่ 3: แยกโค้ด HTML ปัจจุบัน

ในการเริ่มต้น ให้เปิดไฟล์ index.html

คัดลอกโค้ดจากไฟล์ WordPress ที่ผลิตและวางลงในพื้นที่ต่อไปนี้:

1. Header.php — ไฟล์นี้มีทุกอย่างตั้งแต่โค้ด HTML เบื้องต้นไปจนถึงเนื้อหาหลัก คุณจะต้องคัดลอกและวาง <?php wp_head();?> ก่อนส่วน </head>
2. Sidebar.php — นี่คือที่ที่คุณจะแทรกโค้ดทั้งหมดจากส่วน <aside>
3. Footer.php — ส่วนนี้ทำงานจากด้านล่างของแถบด้านข้างไปยังด้านบนของไฟล์ เพิ่มการเรียก <?php wp_footer();?> ก่อนจบวงเล็บด้วย </body>

ขั้นตอนที่ 4: เปลี่ยน Header.php และ Index.php สำหรับ WordPress

จากนั้นคุณจะแก้ไข header.php และ index.php เพื่อให้สอดคล้องกับรูปแบบของ WordPress

 <?php if (have_posts()) : ?> <?php while have_posts()) : the_post(); ?> <div <?php post_class(); ?>> <div class="post-header"> <div class="date"X?php the_time( 'My'); ?X/div> <h2><a href="<?php the permalink(); ?>" rel="bookmark" title="Permanent link to <?php the_title_attribute(); ?>"X?php the_title(); ?X/ax/h2> <div class="author"X?php the_author(); ?></div> </divx!--end post header--> <div class="entry clear"> <?php if ( Eunction_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?> <?php the_content(); ?> <?php edit_post_link(); ?> <?php wp_link_pages(); ?X/div> <!--end entry--> <div class="post-Footer"> <div class="comments"X?php comments_popup_link( 'Leave a Comment', '1 Comment', '? Comments! ); ?X/div> </divX!--end post footer--> </div><!--end post--> <?php endwhile; /* rewind or continue if all posts have been fetched */ ? > <div class="navigation index"> <div class="alignleft"><?php next_post_link( 'Older Entries'); ? X/div> <div class="alignright"X?php previous_posts_link( 'Newer Entries' ); ?></div> </divx<!--end navigation--> <?php else : ?> <?php endif; ?>

ในการทำเช่นนั้น ให้มองหาลิงก์ที่มีลักษณะดังนี้ในส่วน <head>:

 <link rel=”stylesheet” href=”style.css”>.

แทนที่ URL ก่อนหน้าด้วยสิ่งนี้:

 <link rel=”stylesheet” href=”<?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(); ?>

ขั้นตอนที่ 5: ดาวน์โหลดธีมใหม่ของคุณ

เมื่อโฟลเดอร์ธีมของคุณเสร็จสมบูรณ์แล้ว ให้อัปโหลดไปยังเว็บไซต์ของคุณและทำการแปลง HTML เป็น WordPress ให้เสร็จสมบูรณ์ โดยไปที่ตำแหน่งที่คุณดาวน์โหลด WordPress และเพิ่มโฟลเดอร์ที่สร้างขึ้นใหม่ลงใน / wp-content / ธีม

ตรวจสอบรายการแอ็ตทริบิวต์ในหน้า WP-Admin, ธีม และธีม เพื่อดูว่ามีชื่อแอ็ตทริบิวต์หรือไม่ หากเป็นกรณีนี้ แสดงว่าคุณทำทุกอย่างถูกต้องและสามารถเปิดใช้งานได้ในขณะนี้

การแปลงเว็บไซต์ HTML ผ่าน WordPress Child Theme

ขั้นตอนที่ 1: เลือกธีม

ก่อนอื่น เลือกธีมการออกแบบ HTML ที่เหมาะสม มองหาหัวข้อย่อยที่คล้ายกับเว็บไซต์ปัจจุบันของคุณ หากคุณพบรูปแบบที่มีอยู่ คุณจะไม่แสวงหาการเข้ารหัสมากนัก

คุณควรจัดหาคุณสมบัติเริ่มต้นเพราะมันสร้างขึ้นจากบรรทัดพื้นฐานของรหัส

ขั้นตอนที่ 2: สร้างโฟลเดอร์ธีมใหม่

ในทำนองเดียวกัน คุณทำในวิธีสุดท้าย และคุณจะสร้างโฟลเดอร์ใหม่บนเดสก์ท็อปของคุณ

โฟลเดอร์ควรมีชื่อเหมือนกับรูปแบบหลัก แต่มีการเพิ่ม "-child" ต่อท้าย โปรดทราบว่าไม่ควรมีช่องว่างในชื่อ

ขั้นตอนที่ 3: สร้างสไตล์ชีตใหม่

จากนั้นภายในโฟลเดอร์ ให้สร้างไฟล์ style.css และเพิ่มบรรทัดของโค้ดเพิ่มเติม:

จำไว้ว่านี่เป็นเพียงตัวอย่าง คุณจะต้องเริ่มต้นใหม่ด้วยรายละเอียดของคุณ เมื่อกระบวนการเสร็จสิ้น ให้บันทึกไฟล์

 Theme Name: Twenty Nineteen Child Theme URI: http://example.com/twenty-nineteen-child/ Description: Twenty Nineteen Child Theme Author: John Doe Author URI: http://example.com Template: twentynineteen Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gp1-2.0.html Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: twenty-nineteen-child */

ขั้นตอนที่ 4: สร้าง Functions.php

จากนั้นสำหรับธีมลูก คุณจะต้องเขียนไฟล์ functions.php และคัดลอกสไตล์พาเรนต์

สร้างไฟล์ใหม่ชื่อ functions.php เพื่อทำสิ่งนี้ให้สำเร็จ ตรวจสอบให้แน่ใจว่า เริ่มต้นด้วย <?php. แท็ก

ตอนนี้พิมพ์รหัสต่อไปนี้ลงในช่อง:

 function child_theme_enqueue_styles() { $parent_style = 'parent-style'; wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ), wp_get_theme()->get('Version') ); } add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_styles' );

รหัสนี้บอกให้ WordPress ไปที่ธีมหลักและใช้รูปแบบของธีมย่อยที่ระบุไว้ที่นั่น

ขั้นตอนที่ 5: เปิดใช้งานเรื่องของลูก

สุดท้าย คุณต้องกำหนดค่าธีม ก่อนส่งโฟลเดอร์ไปยัง WordPress ให้เปิดเครื่องรูดโดยใช้เมนูลักษณะที่ปรากฏ ธีม แล้วคลิก "เพิ่มใหม่" จากตรงนั้น คุณสามารถดึงไฟล์ zip ได้ ดูในโฟลเดอร์ wp-content / theme เป็นอีกทางเลือกหนึ่ง

นำเข้าเนื้อหาของคุณจากเว็บไซต์ HTML ไปยัง WordPress โดยใช้ Plugin

ขั้นตอนที่ 1: ตั้งค่าไซต์ใหม่

ดาวน์โหลดธีม WordPress ตามที่คุณต้องการบนเว็บไซต์ใหม่ของคุณ ตรวจสอบให้แน่ใจว่าเป็นเทมเพลตที่คุณต้องการและเปลี่ยนแปลงได้อย่างรวดเร็ว คุณจะต้องอัปเดตรูปลักษณ์เพื่อให้เหมาะกับตัวตนของคุณ

ขั้นตอนที่ 2: ติดตั้ง Plugin

ขั้นตอนแรกคือการดาวน์โหลดและติดตั้งปลั๊กอิน HTML Import 2 (ปลั๊กอิน WordPress ปลอดภัยต่อการใช้งานหรือไม่ อ่านต่อเพื่อทราบข้อมูลเพิ่มเติม) วิธีที่ง่ายที่สุดในการทำเช่นนี้คือไปที่ Plugins > Add New และพิมพ์ชื่อปลั๊กอินใน WordPress Admin Panel ของคุณ คลิก ติดตั้งทันที เมื่อคุณค้นหามันบนหน้าจอ (อาจอยู่ใกล้ด้านล่างสุด) เมื่อเสร็จแล้วให้เปิดมัน

ขั้นตอนที่ 3: อัปโหลดหน้า

เผยแพร่หน้าของคุณไปยังเซิร์ฟเวอร์เดียวกันกับการติดตั้ง WordPress เมื่อติดตั้งปลั๊กอินแล้ว

ข้อมูลที่คุณจะต้องกรอก:

• ไดเรกทอรีที่จะนำเข้า
• URL ไซต์เก่า
• ไฟล์เริ่มต้น
• นามสกุลไฟล์ที่จะรวม
• ไดเรกทอรีที่จะไม่รวม
• รักษาชื่อไฟล์

หลังจากนั้น ไปที่แท็บเนื้อหาและกำหนดค่าองค์ประกอบ HTML ที่มีเนื้อหาของเว็บไซต์ของคุณ

ขั้นตอนที่สองคือการตั้งค่าการเปลี่ยนเส้นทางจาก URL เก่าไปยัง URL ใหม่ คุณจะไม่สูญเสียมูลค่า SEO ที่มีอยู่ด้วยวิธีนี้

บันทึกตัวเลือกของคุณแล้วคลิกนำเข้าไฟล์หลังจากที่คุณผ่านแต่ละแท็บแล้ว

บทสรุป

ในตลาดการแข่งขันที่เปลี่ยนแปลงตลอดเวลาในปัจจุบัน การมีเว็บไซต์ WordPress ที่ยืดหยุ่นเป็นวิธีที่มีประสิทธิภาพมากที่สุดสำหรับบริษัทของคุณในการพัฒนา

ด้วยเทคนิคที่มีประโยชน์ในการปรับปรุงความเร็วของเว็บไซต์ WordPress และวิธีขยายขนาดเว็บไซต์ WordPress ของคุณสำหรับการเข้าชมสูง WordPress สามารถพัฒนาไปพร้อมกับธุรกิจของคุณได้ไม่ว่าจะใหญ่หรือเล็ก

แม้ว่าปลั๊กอินตัวแปลง HTML เป็น WordPress อาจดูเหมือนเป็นโซลูชันที่ทำงานได้ แต่ก็ไม่สามารถเปรียบเทียบกับผลลัพธ์ที่ได้จากการเข้ารหัสของมนุษย์ โดยเฉพาะอย่างยิ่งเมื่อแปลงเว็บไซต์ HTML เป็นธีม WordPress

การโอนย้ายจากไซต์ HTML แบบคงที่ไปยังระบบจัดการเนื้อหาที่มีประสิทธิภาพมากขึ้นพร้อมความสามารถที่มีอยู่ เช่น แพลตฟอร์ม WordPress เป็นตัวเลือกที่ดีหากคุณมี โดยเฉพาะอย่างยิ่งเมื่อเทียบกับแพลตฟอร์มอื่นๆ ที่คล้ายคลึงกัน เช่น Wix เมื่อคุณแปลง HTML เป็น WordPress จะทำให้ไซต์ของคุณง่ายต่อการจัดการและจัดการเนื่องจากธีม WordPress และคุณลักษณะ WordPress ที่ใช้งานง่าย ติดต่อเราสำหรับโซลูชัน WordPress แบบกำหนดเองท่ามกลางบริการอื่น ๆ มากมายและทำให้ความคิดของคุณเป็นจริงด้วย Creole Studios!