การแปลงไซต์ HTML เป็นไซต์ WordPress

เผยแพร่แล้ว: 2018-10-05

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

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

นี่คือเหตุผลที่ว่าทำไมผู้ใช้ WordPress ตัวยงเช่นฉันจึงแทบไม่น่าเชื่อว่าในปี 2018 อาจมีบางคนยังคงใช้งานเว็บไซต์ HTML แบบคงที่แทนที่จะเป็นเว็บไซต์ WordPress ที่มีธีมและปลั๊กอิน แต่ความจริงก็คือยังมีไซต์ HTML เท่านั้นที่ใช้งานอยู่จำนวนมาก (หรือ HTML ที่มี CSS เล็กน้อย)

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

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

โชคดีที่ WordPress มักมีหลายวิธีในการแก้ปัญหานี้ ฉันได้รวบรวมตัวเลือกบางอย่างไว้ด้านล่าง

สมัครสมาชิกช่อง Youtube ของเรา

ตัวเลือกของคุณในการแปลงไซต์ HTML แบบคงที่เป็นไซต์ WordPress

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

มีสามตัวเลือกหลัก:

1. สร้างธีม WordPress ด้วยตนเองตามไซต์ HTML แบบคงที่ปัจจุบันของคุณ

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

2. ติดตั้งธีมที่สร้างไว้ล่วงหน้าและเพียงแค่ย้ายเนื้อหาของคุณ

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

3. การจ่ายเงินเพื่อให้บริการแปลง HTML เป็น WordPress สร้างไซต์ของคุณขึ้นมาใหม่

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

การเตรียมการแปลง HTML เป็น WordPress

ไม่ว่าคุณจะเลือกเส้นทางใดด้านล่าง มีบางสิ่งที่คุณจะต้องทำก่อนดำน้ำ

อย่างแรกคือการเลือกแผนโฮสติ้ง คุณจะต้องพิจารณาตัวเลือกที่มีอยู่และตัดสินใจเลือกแพ็คเกจที่เหมาะสมกับความต้องการของคุณมากที่สุด หรือบางทีคุณอาจต้องการสร้างการติดตั้ง WordPress ในเครื่องแทน? คุณสามารถโยกย้ายไปยังบริการโฮสติ้งได้ในภายหลัง

เมื่อคุณเลือกแล้ว คุณจะต้องติดตั้ง WordPress และเข้าสู่ระบบ WP Admin นี่คือจุดที่เส้นทางที่เป็นไปได้ทั้งสองของเราแบ่งออก

การแปลงไซต์ HTML แบบคงที่ของคุณเป็น WordPress ด้วยตนเอง

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

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

ขั้นตอนที่ 1: สร้างโฟลเดอร์ธีมใหม่และไฟล์ที่จำเป็น

บนเดสก์ท็อปของคุณ ให้สร้างโฟลเดอร์ใหม่เพื่อเก็บไฟล์ธีมของคุณ ตั้งชื่อธีมตามที่คุณต้องการ

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

  • Style.css
  • Index.php
  • header.php
  • sidebar.php
  • footer.php

ขั้นตอนที่ 2: คัดลอก 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 ที่มีอยู่ของคุณด้านล่าง บันทึกและปิดไฟล์

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

ก่อนที่เราจะเข้าสู่ขั้นตอนที่สาม ให้ฉันให้คุณทราบสั้น ๆ เกี่ยวกับวิธีการทำงานของ WordPress WordPress ใช้ PHP เพื่อเรียกและดึงข้อมูลบางส่วนจากฐานข้อมูลพื้นฐาน ไฟล์แต่ละไฟล์ที่เราใช้อยู่ในบทช่วยสอนเล็กๆ นี้ ได้รับการออกแบบมาเพื่อบอก WordPress ว่าส่วนใดของเนื้อหาเว็บไซต์ของคุณที่จะแสดงและที่ใด

ดังนั้น เมื่อฉันบอกว่าเราจะ "สับ" HTML ที่มีอยู่ของคุณ สิ่งที่เราทำจริง ๆ คือเพียงแค่ตัดและวางบางส่วนของโค้ดที่มีอยู่ของคุณลงในไฟล์ต่างๆ ที่เราเพิ่งสร้างขึ้น เพื่อให้ WordPress รู้ว่าจะแสดงที่ใด พวกเขา.

ไปเลย.

ขั้นแรก เปิดไฟล์ index.html ของไซต์ปัจจุบันของคุณ เน้นทุกอย่างตั้งแต่ด้านบนของไฟล์ไปจนถึงแท็กเปิด div class=”main” คัดลอกและวางส่วนนี้ลงใน ไฟล์ header.php ของคุณ บันทึกและปิด

ประการที่สอง กลับไปที่ไฟล์ index.html ของคุณ เน้นองค์ประกอบ aside class=”sidebar” และทุกอย่างที่อยู่ภายใน คัดลอกและวางส่วนนี้ลงในไฟล์ sidebar.php ของคุณ บันทึกและปิด

ประการที่สาม ใน index.html ของคุณ เลือกทุกอย่างหลังจากแถบด้านข้างและคัดลอกและวางลงในไฟล์ footer.php ของคุณ บันทึกและปิด

สุดท้าย ในไฟล์ index.html ให้เลือกทุกอย่างที่เหลือ (ซึ่งควรเป็นส่วนเนื้อหาหลัก) แล้ววางลงในไฟล์ index.php บันทึก แต่ยังไม่ปิด

คุณ สามารถ ปิดไฟล์ index.html ของคุณตอนนี้และไปยังขั้นตอนสุดท้ายได้ เกือบเสร็จแล้ว!

ขั้นตอนที่ 4: จบไฟล์ Index.php ของคุณ

ในการทำให้ไฟล์ index.php ของธีมใหม่ของคุณเสร็จสมบูรณ์ คุณต้องแน่ใจว่าไฟล์นั้นสามารถเรียกส่วนอื่น ๆ (นอกเหนือจากเนื้อหาหลัก) ที่อยู่ในไฟล์อื่นๆ ที่คุณสร้างขึ้นได้ หรือพูดอีกอย่างก็คือ นำองค์ประกอบที่เราเพิ่ง "สับ" กลับมารวมกัน

ที่ด้านบนสุดของไฟล์ index.php ให้วาง php บรรทัดต่อไปนี้ 

<?php get_header(); ?>

จากนั้น ที่ด้านล่างสุดของไฟล์ index.php ให้วางบรรทัด php เหล่านี้ 

<?php get_sidebar(); ?>
<?php get_footer(); ?>

และสุดท้าย เราต้องเพิ่มสิ่งที่เรียกว่า The Loop นี่คือบิตหลักของ php ที่ WordPress ใช้เพื่อแสดงเนื้อหาโพสต์ของคุณต่อผู้เยี่ยมชม ดังนั้นขั้นตอนสุดท้ายในการสร้างไฟล์ index.php ของธีมใหม่คือการเพิ่มโค้ดด้านล่างในส่วนเนื้อหา 

<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
  <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <div class="post-header">
       <div class="date"><?php the_time( 'M j y' ); ?></div>
       <h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
       <div class="author"><?php the_author(); ?></div>
    </div><!--end post header-->
    <div class="entry clear">
       <?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?>
       <?php the_content(); ?>
       <?php edit_post_link(); ?>
       <?php wp_link_pages(); ?> </div>
    <!--end entry-->
    <div class="post-footer">
       <div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div>
    </div><!--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_posts_link( 'Older Entries' ); ?></div>
       <div class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div>
    </div><!--end navigation-->
<?php else : ?>
<?php endif; ?>

บันทึก index.php ของคุณและปิด ธีมของคุณเสร็จแล้ว! เหลือเพียงอัปโหลดไปยังเว็บไซต์ WordPress ของคุณ

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

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

วางโฟลเดอร์ธีมใหม่ของคุณไว้ภายใน /wp-content/themes/ จากนั้นกลับไปที่ WP Admin > Appearance > Themes และ ธีมที่ คุณสร้างขึ้นใหม่จะปรากฏขึ้นที่นั่น ไปข้างหน้าและเปิดใช้งาน!

สิ่งที่ต้องทำในตอนนี้คือเติมเว็บไซต์ WordPress ใหม่ของคุณด้วยเนื้อหาของเว็บไซต์เก่า ทำตามส่วนด้านล่าง (ข้ามส่วนเกี่ยวกับการใช้ธีมที่สร้างไว้ล่วงหน้า) เพื่อดูว่าดำเนินการอย่างไร

การใช้ธีม WordPress ที่สร้างไว้ล่วงหน้าและการนำเข้าเนื้อหา HTML

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

มีธีมฟรีและมีธีมพรีเมียม ก่อนตัดสินใจเลือกธีมที่เหมาะกับคุณที่สุด คุณอาจต้องการอ่านว่าธีมใดได้รับการออกแบบมาเพื่อตอบสนองความต้องการของคุณและเรียกดูตามหมวดหมู่ของธีมที่นี่ที่ Elegant Themes และที่อื่นๆ

เมื่อคุณเลือกธีมที่ต้องการแล้ว (และดาวน์โหลดไฟล์ซิปแล้ว) คุณจะต้องกลับไปที่ WP Admin > Appearance > Themes > Add New และติดตั้ง/เปิดใช้งานธีม WordPress ใหม่ของคุณ

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

ใน WP Admin ไปที่ Plugins > Add New และค้นหาปลั๊กอินชื่อ HTML Import 2 โดย Stephanie Leary เมื่อติดตั้งและเปิดใช้งานปลั๊กอินนี้แล้ว ให้ทำตามคู่มือผู้ใช้ที่มีประโยชน์เพื่อนำเข้าไดเรกทอรีทั้งหมดของหน้า HTML ครบเครื่องเรื่องภาพ!

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

สรุปแล้ว

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

หากคุณ “พบข้อบกพร่องของ WordPress” เว็บไซต์ทางการของ WordPress.org นั้นเต็มไปด้วยธีม ปลั๊กอิน และแหล่งข้อมูลอื่นๆ ที่เป็นประโยชน์ หากคุณต้องการปรับแต่งไฟล์ธีมของคุณเพิ่มเติม ให้สำรวจ Codex เพื่อดูเคล็ดลับ กลเม็ด และรูปแบบต่างๆ ที่ดูเหมือนไม่มีที่สิ้นสุด

และแน่นอน เราหวังว่าคุณจะยังคงพูดคุยกันในความคิดเห็นด้านล่าง และสมัครรับข้อมูลโพสต์บล็อกเพิ่มเติมในอนาคต

ภาพขนาดย่อของบทความโดย Max Griboedov / shutterstock.com