การแปลงเทมเพลต HTML เป็นธีม WordPress

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

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

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

การแปลง HTML ด้วยตนเอง

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

โดยทั่วไป คุณจะใช้แอปพลิเคชัน Secure File Transfer Protocol (SFTP) เพื่อจุดประสงค์นี้ เมื่อคุณเข้าถึงเว็บไซต์ของคุณแล้ว คุณสามารถดำเนินการตามขั้นตอนต่อไปนี้

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

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

• style.css
• index.php
• header.php
• ส่วนท้าย.php
• sidebar.php

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

ขั้นตอนที่ 2: คัดลอกและวาง CSS ที่มีอยู่ของคุณ

ลำดับความสำคัญต่อไปของคุณคือการปรับแต่งไฟล์ Cascading Style Sheet (CSS) นี่คือที่ที่คุณจะร่างองค์ประกอบสไตล์ต่างๆ ทั้งหมดสำหรับไซต์ของคุณ

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

ด้านล่างข้อมูลนั้น คุณจะต้องวางสไตล์ CSS ใดๆ ที่มีอยู่จากเว็บไซต์เดิมของคุณที่คุณต้องการนำไปใช้กับธีมใหม่ของคุณ

ขั้นตอนที่ 3: แยก HTML ที่มีอยู่

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

ตัวอย่างเช่น ในไฟล์ index.html ของเว็บไซต์เดิมของคุณ คุณสามารถระบุตำแหน่งแท็ก <div> แท็กแรกด้วยคลาส 'main' ทุกสิ่งที่อยู่ก่อนหน้าแท็กนี้สามารถคัดลอกและวางลงในไฟล์ header.php ใหม่ของคุณได้

จากนั้น คุณจะทำขั้นตอนนี้ซ้ำสำหรับแท็ก 'แถบด้านข้าง' และ 'ส่วนท้าย' คัดลอกโค้ดที่มีอยู่ในแต่ละองค์ประกอบ แล้ววางลงในไฟล์ PHP ที่เกี่ยวข้อง

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

ขั้นตอนที่ 4: กำหนดค่าไฟล์ Index.php ของคุณ

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

ตัวอย่างเช่น คุณสามารถให้เทมเพลตของคุณแสดงไฟล์ส่วนหัวที่คุณสร้างขึ้นโดยใช้แท็กต่อไปนี้:

get_header();

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

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

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

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

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

การนำเข้าเนื้อหา HTML ด้วยปลั๊กอิน

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

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

การใช้ธีมลูก

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

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

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

อย่างไรก็ตาม คุณไม่จำเป็นต้องเปิดใช้งานธีมหลักนี้

ขั้นตอนที่ 2: สร้างโฟลเดอร์สำหรับธีมลูกของคุณ

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

ตัวอย่างเช่น หากคุณกำลังจะสร้างธีมย่อยสำหรับ Twenty Nineteen คุณสามารถสร้างโฟลเดอร์ ชื่อ

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

ขั้นตอนที่ 3: ตั้งค่าสไตล์ชีต

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

ขั้นตอนที่ 4: ตั้งค่าไฟล์ Function.php

ตอนนี้คุณมีสองธีมหลักที่คุณกำลังใช้งานอยู่ คุณจะต้องบอก WordPress ว่าธีมลูกของคุณขึ้นอยู่กับ CSS ของพาเรนต์ สำหรับสิ่งนั้น คุณสามารถใช้การเรียก PHP wp_enqueue_style()

ก่อนอื่นคุณต้องสร้างไฟล์ function.php และวางไว้ในโฟลเดอร์ของธีมลูกของคุณ นี่คือไฟล์ที่คุณจะเรียกใช้ฟังก์ชันเข้าคิวที่สะกดการขึ้นต่อกันของธีมและลำดับชั้น

ขั้นตอนที่ 5: เปิดใช้งานธีมลูกของคุณ

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

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

ซื้อบริการแปลงไซต์

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

1. จ้าง WPGeeks

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

2. โซลูชั่น FantasTech

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

ปรับแต่งประสบการณ์เว็บไซต์ของคุณด้วย WP Engine

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

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