เมื่อเราพบเห็นความจำเป็นในการเปลี่ยนแปลงเป็นครั้งแรก ดูเหมือนว่างานนี้จะง่าย: “เปลี่ยนบล็อกด้านบนและทำให้การเรียกร้องให้ดำเนินการมีประสิทธิภาพมากขึ้น” หากดูเผินๆ อาจดูเหมือนเป็นการแก้ไขปัญหาอย่างรวดเร็ว แต่ในไม่ช้า เราก็ตระหนักได้ว่างานเล็กๆ น้อยๆ นี้เผยให้เห็นปัญหาพื้นฐานที่ใหญ่กว่ามากเกี่ยวกับโครงสร้างและการออกแบบของไซต์ ปัญหาไม่ได้อยู่ที่บล็อกเดียว แต่เป็นสถาปัตยกรรมทั้งหมดของไซต์ที่จำเป็นต้องได้รับการปรับปรุง
เว็บไซต์ของเราถูกสร้างขึ้นมาตามกาลเวลา โดยมีการเพิ่มหน้าต่างๆ เข้ามาโดยใช้การออกแบบและเลย์เอาต์ที่หลากหลาย โดยไม่มีธีมหรือเทมเพลตที่เชื่อมโยงกัน แต่ละหน้ามีการออกแบบที่ไม่เหมือนกัน ซึ่งอาจฟังดูสร้างสรรค์ แต่กลับนำไปสู่ปัญหาสำคัญอย่างหนึ่ง นั่นคือ ความไม่สอดคล้องกัน หากเราเดินหน้าต่อไปและสร้างการออกแบบใหม่สำหรับบล็อกด้านบนเท่านั้นในขณะที่ยังคงรักษาส่วนที่เหลือของเว็บไซต์ไว้ตามเดิม นั่นหมายความว่าเราต้องอัปเดตบล็อกนั้นด้วยตนเองในกว่า 700 หน้าและโพสต์ต่างๆ ที่แย่กว่านั้นก็คือจะต้องทำซ้ำขั้นตอนด้วยตนเองนี้ทุกครั้งที่ต้องการเปลี่ยนแปลงในอนาคต ลองนึกภาพว่าการต้องค้นหาหน้าต่างๆ หลายร้อยหน้าเพื่อให้แน่ใจว่าแต่ละหน้ามีการอัปเดตล่าสุดนั้นไร้ประสิทธิภาพเพียงใด ในไม่ช้าก็ชัดเจนขึ้นว่าการทำงานกับเว็บไซต์เดิมต่อไปนั้นไม่ยั่งยืน
นอกเหนือจากการจัดการด้านลอจิสติกส์ในการอัปเดตแต่ละหน้าแล้ว เรายังต้องพิจารณาถึงประสบการณ์โดยรวมของผู้ใช้ด้วย ผู้ใช้ในปัจจุบันคาดหวังประสบการณ์ที่ราบรื่นและเชื่อมโยงกันเมื่อเข้าชมเว็บไซต์ หากเลื่อนลงมาในหน้าหนึ่งและพบว่าการออกแบบไม่สอดคล้องกัน โดยแต่ละบล็อกใช้รูปแบบที่แตกต่างกัน ก็จะให้ความรู้สึกไม่ต่อเนื่องและไม่เป็นมืออาชีพ และแย่กว่านั้น เมื่อผู้ใช้เลื่อนจากหน้าหนึ่งไปยังอีกหน้าหนึ่งและสังเกตเห็นว่าเค้าโครงและการออกแบบแตกต่างกันโดยสิ้นเชิง ก็จะยิ่งทำให้รู้สึกไม่เป็นระเบียบมากขึ้น
ความไม่สอดคล้องกันขยายออกไปเกินขอบเขตของเค้าโครง รูปภาพจำนวนมากบนเว็บไซต์นั้นล้าสมัย มีสไตล์ที่ไม่ดี หรือแม้แต่สร้างขึ้นโดยเครือข่ายประสาทที่ไม่เหมาะสม รูปภาพเหล่านี้ไม่เป็นไปตามมาตรฐานการออกแบบสมัยใหม่ และการหารูปภาพใหม่มาแทนที่ก็เป็นอีกงานที่น่ากังวล การใช้รูปภาพที่ไม่ดีนั้นสะท้อนถึงคุณภาพโดยรวมของเว็บไซต์ในทางลบ ทำให้ผู้ใช้มีความประทับใจเชิงลบต่อผลิตภัณฑ์หรือบริการที่เรานำเสนอ
ไม่มีวิธีง่ายๆ ในการอัปเดตไซต์อย่างครอบคลุมโดยใช้เครื่องมืออย่าง Elementor แต่ละหน้าและแต่ละบล็อกจะมีรูปแบบอินไลน์ของตัวเอง ซึ่งหมายความว่าไม่สามารถทำการเปลี่ยนแปลงได้ทั่วโลก หากเราต้องการอัปเดตรูปแบบของไซต์ เราจะต้องดูทุกหน้าและอัปเดตแต่ละบล็อกด้วยตนเอง ซึ่งจะใช้เวลานานและไม่มีประสิทธิภาพ เมื่อคำนึงถึงสิ่งนี้ จึงเห็นได้ชัดว่าวิธีแก้ปัญหาเดียวของเราคือการสร้างเว็บไซต์ใหม่ตั้งแต่ต้น วิธีนี้จะช่วยให้เราสามารถถ่ายโอนเนื้อหาทั้งหมดได้ในขณะที่ยังคงใช้ URL เดิม แต่มีการออกแบบใหม่ สอดคล้อง และอัปเดตได้ง่าย
Elementor เป็นหนึ่งในโปรแกรมสร้างเพจที่ได้รับความนิยมมากที่สุดสำหรับ WordPress เมื่อมองเผินๆ ดูเหมือนเป็นเครื่องมือที่ยอดเยี่ยมที่ช่วยให้สร้างเพจได้อย่างรวดเร็วและง่ายดาย อย่างไรก็ตาม หลังจากใช้งานโปรแกรมนี้มาอย่างยาวนาน เราพบข้อจำกัดหลายประการที่ทำให้เราตัดสินใจเลิกใช้ Elementor และเลือกใช้เว็บไซต์ที่สร้างขึ้นเองแทน
ข้อจำกัดและความท้าทายของ Elementor:
ภาชนะภายในอื่น ๆ องค์ประกอบแต่ละองค์ประกอบมีรูปแบบของตัวเอง ส่งผลให้โครงสร้างมีขนาดใหญ่เกินไป ซึ่งส่งผลเสียต่อความเร็วในการโหลด ประสิทธิภาพของหน้าเว็บ และอันดับ SEO ของเว็บไซต์ในที่สุด เมื่อเราทำการทดสอบความเร็ว ผลลัพธ์ที่ได้มักจะออกมาแย่ และโค้ดขนาดใหญ่ที่สร้างโดย Elementor เป็นสาเหตุหลัก
เมื่อพิจารณาถึงความท้าทายเหล่านี้ทั้งหมดแล้ว จึงชัดเจนว่าเราต้องการโซลูชันที่แข็งแกร่งกว่านี้ เราจึงตัดสินใจสร้างเว็บไซต์อิสระใหม่โดยไม่ใช้ Elementor โดยเลือกใช้แนวทางที่ยั่งยืนและยืดหยุ่นกว่า
การสร้างไซต์ใหม่ตั้งแต่ต้นทำให้เรามีโอกาสสร้างกระบวนการสร้างเพจที่เรียบง่ายและคล่องตัว ในระบบใหม่ การสร้างเพจเป็นเรื่องง่าย:
กระบวนการนี้เรียบง่ายแต่ยืดหยุ่นได้ แทนที่จะพึ่งพาระบบบล็อกที่ซับซ้อนของ Elementor ตัวแก้ไขเนื้อหาใน WordPress จะสะอาดกว่ามาก ทำให้อัปเดตได้รวดเร็วและปรับแต่งได้ง่าย ด้านล่างตัวแก้ไขมีการตั้งค่าสำหรับ Advanced Custom Fields (ACF) ซึ่งได้รับการกำหนดค่าไว้แล้วเพื่อรักษาความสม่ำเสมอทั่วทั้งไซต์
ACF ช่วยให้เราสร้างส่วนเนื้อหาที่ยืดหยุ่นได้ โดยใช้บล็อก เช่น เนื้อหา 1…เนื้อหา 15 ซึ่งคุณสามารถกำหนดชื่อ ข้อความ รูปภาพ และป้ายชื่อปุ่มสำหรับแต่ละส่วนของหน้าได้อย่างง่ายดาย บล็อกเหล่านี้จะสลับตำแหน่งของรูปภาพและข้อความโดยอัตโนมัติ ทำให้เค้าโครงยังคงดึงดูดสายตาโดยไม่ต้องปรับแต่งด้วยมือ
สำหรับรูปภาพ เราได้นำระบบจับคู่สีมาใช้ซึ่งจะทำการไล่เฉดสีให้กับสีหลักของเว็บไซต์โดยอัตโนมัติ วิธีนี้จะช่วยให้รูปภาพทั้งหมดสอดคล้องกับรูปลักษณ์โดยรวม สำหรับโลโก้หรือภาพหน้าจอที่จำเป็นต้องคงสีไว้ จะมีตัวเลือก "คงสีไว้" ที่จะแทนที่การไล่เฉดสี
ระบบนี้ช่วยลดความซับซ้อนในการจัดการเนื้อหาในขณะที่ยังคงความสอดคล้องของการออกแบบในทุกหน้า
การสร้างโพสต์บนไซต์ใหม่จะปฏิบัติตามกระบวนการเดียวกันกับการสร้างเพจ โดยมีความแตกต่างที่สำคัญบางประการดังนี้:
เทมเพลตสำหรับโพสต์ทั้งหมดอยู่ในไฟล์ template-parts/content/content-single.php ซึ่งจัดการโครงสร้างและเค้าโครงของโพสต์บล็อกแต่ละโพสต์ เทมเพลตที่สอดคล้องกันนี้ช่วยให้อัปเดตได้ง่ายและรับรองว่าโพสต์ทั้งหมดปฏิบัติตามแนวทางการออกแบบเดียวกัน
ACF เป็นส่วนสำคัญในการพัฒนาเว็บไซต์ใหม่ของเรา ช่วยให้เราสร้างฟิลด์ที่กำหนดเองได้ ซึ่งสามารถจัดการได้ง่ายผ่านแผงควบคุมผู้ดูแลระบบ WordPress ฟิลด์เช่น content_1 จะถูกอ้างอิงในโค้ด PHP ช่วยให้เราดึงเนื้อหาที่ถูกต้องสำหรับแต่ละหน้าและโพสต์ได้อย่างไดนามิก
ความยืดหยุ่นนี้เป็นสิ่งสำคัญเพื่อให้แน่ใจว่าเราสามารถจัดการและอัปเดตไซต์ได้อย่างมีประสิทธิภาพ ในขณะที่ยังคงมีพื้นที่สำหรับการปรับแต่งเมื่อจำเป็น
การปรับปรุงที่สำคัญที่สุดอย่างหนึ่งที่เราทำกับไซต์ใหม่คือการใช้การทดสอบ A/B การทดสอบ A/B ช่วยให้เราเปรียบเทียบไซต์สองเวอร์ชันเพื่อดูว่าเวอร์ชันใดทำงานได้ดีกว่ากับผู้ใช้ ซึ่งอาจรวมถึงการทดสอบสี รูปร่างปุ่ม พื้นหลัง หรือแม้แต่เลย์เอาต์ที่แตกต่างกัน
เราใช้งานฟังก์ชันนี้โดยใช้ พารามิเตอร์ GET ใน URL ตัวอย่างเช่น สามารถสร้างแคมเปญโฆษณาที่เหมือนกันสองแคมเปญได้ แต่มี URL ที่แตกต่างกัน:
https://www.conveythis.com/?param=1
https://www.conveythis.com/?param=2
เมื่อผู้ใช้คลิกลิงก์เหล่านี้ พารามิเตอร์จะถูกบันทึกในคุกกี้ โดยเว็บไซต์จะแสดงหน้าเว็บในเวอร์ชันต่างๆ เช่น สีปุ่มหรือรูปภาพพื้นหลังที่แตกต่างกัน ขึ้นอยู่กับค่าของพารามิเตอร์ วิธีนี้ช่วยให้เราสามารถรวบรวมข้อมูลอันมีค่าเกี่ยวกับการตั้งค่าและพฤติกรรมของผู้ใช้ได้
เหตุการณ์ทั้งหมดถูกบันทึกไว้ใน.csv
ไฟล์ดังกล่าวรวมถึงฐานข้อมูล MySQL ช่วยให้เราวิเคราะห์ข้อมูลและตัดสินใจอย่างรอบรู้เกี่ยวกับการปรับปรุงเว็บไซต์ได้
การใช้งานที่สำคัญอย่างหนึ่งของไฟล์ functions.php คือการสร้างประเภทโพสต์และอนุกรมวิธานแบบกำหนดเอง ซึ่งช่วยให้เราจัดระเบียบเนื้อหาได้อย่างมีประสิทธิภาพมากขึ้น แทนที่จะพึ่งพาโครงสร้าง WordPress เริ่มต้นเพียงอย่างเดียว (หน้าและโพสต์) เราได้แนะนำประเภทแบบกำหนดเองสำหรับเนื้อหาเฉพาะ เช่น กรณีศึกษา คำรับรอง หรือคุณลักษณะของผลิตภัณฑ์ ซึ่งไม่เพียงแต่ทำให้เนื้อหาของเราจัดระเบียบได้ดีขึ้นเท่านั้น แต่ยังปรับปรุงประสบการณ์ของผู้ใช้ด้วยการทำให้การนำทางและค้นหาข้อมูลที่เกี่ยวข้องง่ายขึ้นอีกด้วย
ตัวอย่างเช่น หากต้องการสร้างประเภทโพสต์แบบกำหนดเองสำหรับกรณีศึกษา เราได้เพิ่มโค้ดต่อไปนี้ใน functions.php :
ฟังก์ชัน create_case_study_post_type() {
register_post_type('กรณีศึกษา',
อาร์เรย์(
'ป้ายกำกับ' =>
อาร์เรย์(
'ชื่อ' => __( 'กรณีศึกษา' ),
'singular_name' => __( 'กรณีศึกษา' )
),
'สาธารณะ' => จริง,
'has_archive' => จริง,
'เขียนใหม่' => อาร์เรย์('slug' => 'กรณีศึกษา')
)
);
}
add_action('init', 'สร้าง_กรณีศึกษา_โพสต์_ประเภท');
ซึ่งจะสร้างประเภทโพสต์ใหม่ที่เรียกว่า "Case Studies" ซึ่งมีลักษณะคล้ายคลึงกับโพสต์ทั่วไป แต่มีโครงสร้างไฟล์เก็บถาวรและอนุกรมวิธานของตัวเองการใช้งานที่สำคัญอีกประการหนึ่งของ functions.php คือการโหลดสคริปต์และรูปแบบภายนอก เพื่อให้แน่ใจว่าเว็บไซต์ของเรามีไลบรารีและเฟรมเวิร์กที่จำเป็นทั้งหมด ตัวอย่างเช่น เราได้รวมไลบรารีอย่าง Slick.js สำหรับสไลเดอร์และ AOS (Animate on Scroll) เพื่อสร้างแอนิเมชั่นที่ราบรื่น โดยการโหลดทรัพยากรเหล่านี้เฉพาะเมื่อจำเป็นเท่านั้น (เช่น บนหน้าหรือเทมเพลตเฉพาะ) เราลดความไม่จำเป็นและเพิ่มความเร็วในการโหลดหน้า
นี่คือวิธีที่เราจัดการการโหลดสไตล์และสคริปต์:
ฟังก์ชัน load_custom_scripts() {
// โหลดสไลเดอร์ Slick สำหรับเทมเพลตเฉพาะ
ถ้า( is_page_template('template-slider.php') ) {
wp_enqueue_style('slick-css', get_template_directory_uri() . '/css/slick.css' );
wp_enqueue_script('slick-js', get_template_directory_uri() . '/js/slick.min.js', array('jquery'), '', true );
}
// โหลดแอนิเมชั่น AOS ทั่วทั้งไซต์
wp_enqueue_style('aos-css', get_template_directory_uri() . '/css/aos.css' );
wp_enqueue_script('aos-js', get_template_directory_uri() . '/js/aos.js', array('jquery'), '', true );
}
เพิ่มการดำเนินการ('wp_enqueue_scripts', 'load_custom_scripts');
โดยใช้การตรวจสอบแบบมีเงื่อนไข (เช่นเป็นเทมเพลตหน้าเพจ()
) เรามั่นใจว่าสคริปต์ที่ไม่จำเป็นจะไม่ถูกโหลดลงทั่วทั้งไซต์ จึงทำให้ประสิทธิภาพการทำงานดีขึ้นเพื่อปรับปรุงความยืดหยุ่นให้กับผู้ใช้ที่ไม่ใช่ช่างเทคนิคในการจัดการเนื้อหาไซต์ เราได้เพิ่มรหัสย่อแบบกำหนดเองผ่าน functions.php รหัสย่อเหล่านี้ช่วยให้ผู้ใช้สามารถแทรกฟังก์ชันที่ซับซ้อนหรือองค์ประกอบที่มีรูปแบบต่างๆ ได้อย่างง่ายดายโดยไม่ต้องแตะต้องรหัส ตัวอย่างเช่น เราได้สร้างรหัสย่อสำหรับเพิ่มปุ่มแบบกำหนดเองที่ใดก็ได้ในไซต์:
ฟังก์ชัน custom_button_shortcode($atts) {
$atts = รหัสย่อ_atts(
อาร์เรย์(
'ป้ายกำกับ' => 'คลิกที่นี่'
'url' => '#',
),
อัฐ,
'ปุ่มที่กำหนดเอง'
);
ส่งคืน ' ' . esc_html( $atts['label'] ) . ' ';
}
add_shortcode('custom_button', 'custom_button_shortcode');
ชอร์ตโค้ดนี้ช่วยให้บรรณาธิการสามารถเพิ่มปุ่มที่มีข้อความและ URL ที่กำหนดเองได้อย่างง่ายดาย ช่วยให้ปรับเปลี่ยนได้อย่างรวดเร็วโดยไม่ทำลายการออกแบบจุดเน้นหลักระหว่างการปรับปรุงเว็บไซต์คือการปรับปรุง SEO และประสิทธิภาพโดยรวมของเว็บไซต์ เว็บไซต์เดิมซึ่งสร้างโดยใช้ Elementor มีปัญหาเรื่องเวลาโหลดช้าและแนวทาง SEO ที่ไม่เหมาะสมเนื่องมาจากโค้ดที่ใหญ่เกินไปและรูปภาพที่ไม่ได้รับการปรับให้เหมาะสม
เพื่อให้แน่ใจว่าไซต์ใหม่ของเราเป็นมิตรกับ SEO เราได้นำแนวทางปฏิบัติที่ดีที่สุดหลายประการมาใช้ตั้งแต่เริ่มต้น:
-
ฯลฯ) เพื่อให้แน่ใจว่าเครื่องมือค้นหาสามารถวิเคราะห์และทำความเข้าใจลำดับชั้นของเนื้อหาได้อย่างง่ายดาย ซึ่งถือเป็นสิ่งสำคัญโดยเฉพาะอย่างยิ่งสำหรับการจัดอันดับ SEO และการเข้าถึงฟังก์ชัน add_schema_markup() {
เสียงสะท้อน '
{
"@บริบท": "http://schema.org",
"@type": "องค์กร",
"ชื่อ": "ConveyThis",
"url": "https://www.conveythis.com",
"โลโก้": "https://www.conveythis.com/logo.png",
"เหมือนกับ": [
"https://www.facebook.com/conveythis",
"https://twitter.com/conveythis"
]
}
';
}
add_action( 'wp_head', 'add_schema_markup' );
ประสิทธิภาพเป็นปัจจัยสำคัญไม่เพียงแต่สำหรับประสบการณ์ของผู้ใช้เท่านั้น แต่ยังรวมถึงการจัดอันดับ SEO ด้วย เราได้ดำเนินการหลายขั้นตอนเพื่อปรับปรุงความเร็วของไซต์:
เว็บไซต์เก่ามีข้อมูลขยะจำนวนมากเนื่องจากโครงสร้างฐานข้อมูล Elementor มีขนาดใหญ่เกินไปและไม่มีประสิทธิภาพ เพื่อให้แน่ใจว่าเว็บไซต์ใหม่จะทำงานได้อย่างราบรื่น เราจึงทำการล้างข้อมูลและปรับแต่งฐานข้อมูลอย่างละเอียด
ดังที่กล่าวไว้ก่อนหน้านี้ แม้ว่าจะปิดใช้งาน Elementor แล้ว แต่รูปแบบและการตั้งค่าต่างๆ ของ Elementor ยังคงฝังอยู่ในฐานข้อมูล เราใช้แบบสอบถามแบบกำหนดเองเพื่อลบข้อมูลส่วนเกินนี้และทำความสะอาดฐานข้อมูล นอกจากนี้ เรายังลบไฟล์สื่อที่ไม่ได้ใช้ โพสต์การแก้ไข และทรานเซียนต์ที่หมดอายุซึ่งสะสมมาเป็นเวลานาน
นอกจากนี้ เรายังเพิ่มประสิทธิภาพฐานข้อมูลด้วยการเพิ่มดัชนีลงในคอลัมน์ที่ค้นหาบ่อยครั้ง เพื่อให้แน่ใจว่าการค้นหาฐานข้อมูลจะเร็วขึ้นและมีประสิทธิภาพมากขึ้น ตัวอย่างเช่น การเพิ่มดัชนีลงในวันที่โพสต์
คอลัมน์นี้ช่วยเร่งความเร็วในการค้นหาที่เกี่ยวข้องกับโพสต์ล่าสุด เพื่อปรับปรุงประสิทธิภาพของหน้าบล็อกของเรา
การตัดสินใจสร้างเว็บไซต์ใหม่ตั้งแต่ต้นนั้นเกิดจากข้อจำกัดและความไม่มีประสิทธิภาพของเว็บไซต์เดิม การเปลี่ยนธีมเพียงอย่างเดียวไม่ใช่ทางเลือกที่เหมาะสม เนื่องจากการออกแบบไม่สม่ำเสมอ สไตล์ที่มากเกินไป และปัญหาด้านประสิทธิภาพที่เกิดจาก Elementor การสร้างเว็บไซต์ใหม่โดยใช้การพัฒนาแบบกำหนดเองและฟิลด์กำหนดเองขั้นสูง ทำให้เราสามารถสร้างเว็บไซต์ที่มีประสิทธิภาพมากขึ้น เชื่อมโยงกัน และเป็นมืออาชีพมากขึ้น ซึ่งช่วยยกระดับประสบการณ์ของผู้ใช้ ขณะเดียวกันก็เปิดใช้งานการอัปเดตที่คล่องตัวและฟังก์ชันการทดสอบ A/B เว็บไซต์ใหม่นี้สร้างรากฐานที่มั่นคงสำหรับการเติบโตและการปรับปรุงในอนาคต
การแปลเป็นมากกว่าแค่การรู้ภาษา แต่เป็นกระบวนการที่ซับซ้อน
หากปฏิบัติตามเคล็ดลับของเราและใช้ ConveyThis หน้าที่คุณแปลแล้วจะเข้าถึงกลุ่มเป้าหมายและให้ความรู้สึกเหมือนเป็นภาษาเป้าหมายจริงๆ
แม้ว่าจะต้องใช้ความพยายาม แต่ผลลัพธ์ที่ได้ก็คุ้มค่า หากคุณกำลังแปลเว็บไซต์ ConveyThis จะช่วยประหยัดเวลาให้คุณได้หลายชั่วโมงด้วยการแปลด้วยเครื่องอัตโนมัติ
ทดลองใช้ ConveyThis ฟรี 7 วัน!