ขั้นตอนง่าย ๆ ในการเข้ารหัสหน้า Landing Page ของ WordPress ที่กำหนดเอง

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

ความสำคัญของแลนดิ้งเพจ

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

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

การเข้ารหัสหน้า Landing Page ของ WordPress ที่กำหนดเอง

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

สร้างธีมลูก

แม้ว่าในทางทฤษฎีคุณสามารถสร้างธีมหลักใหม่ได้ แต่คุณควรเลือกใช้ธีมย่อย เหมาะสมกว่ามากสำหรับการปรับแต่ง ซึ่งทำให้คุณมีอิสระมากขึ้นในการสร้างหน้า Landing Page ที่ไม่ซ้ำใคร เนื่องจากเราได้กล่าวถึงวิธีสร้างธีมย่อยไปแล้ว เราจะไม่พูดถึงเรื่องนี้อีกที่นี่ สิ่งเดียวที่เราจะพูดถึงคือ คุณต้องมีทั้งไฟล์ style.css และ functions.php ในไดเร็กทอรีธีมลูกของคุณเพื่อดำเนินการต่อ

สร้างไฟล์ Style.css

ในไฟล์ style.css คุณเพียงแค่เพิ่มโค้ดต่อไปนี้:

/*

ชื่อธีม: ธีมหน้า Landing Page

คำอธิบาย: ธีมลูกพร้อมหน้า Landing Page ที่กำหนดเอง

ผู้แต่ง: Default Writer

ผู้เขียน URI: https://www.wpfullcare.com

*/

สร้างไฟล์ Functions.php

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

<?php

// รูปแบบธีมหลัก //

// https://codex.wordpress.org/Child_Themes //

ฟังก์ชัน theme_enqueue_styles () {

$parent_style = 'รูปแบบผู้ปกครอง';

wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );

wp_enqueue_style( 'สไตล์เด็ก',

get_stylesheet_directory_uri() . '/style.css',

อาร์เรย์( $parent_style )

);

}

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

ติดตั้งและเปิดใช้งานธีมลูกของคุณ

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

สร้างเพจที่กำหนดเอง

หากทุกอย่างเรียบร้อยดี คุณสามารถสร้างหน้าที่กำหนดเองในธีมย่อยของคุณได้ คุณต้องสร้างไฟล์ใหม่ในธีมของบุตรหลาน เมื่อคุณทำแล้ว ให้บันทึกเป็น page-landing.php ในไฟล์นั้นคุณต้องเพิ่มรหัสต่อไปนี้:

<?php

/**

ชื่อเทมเพลต: Landing Page

**/

?>

ไปที่เมนูแบบเลื่อนลงของเทมเพลตและเลือกหน้า Landing Page จากเมนู คุณจะต้องเลือกรูปภาพเด่นเพื่อใช้เป็นพื้นหลังของคุณ ( เลือกสิ่งที่ใหญ่และเรียบง่ายสำหรับตอนนี้ เนื่องจากคุณสามารถทดลองได้ในภายหลัง ) จากนั้นเพิ่มสำเนาของคุณและเผยแพร่หน้าที่เพิ่ม การพยายามตรวจสอบหน้าของคุณตอนนี้จะนำคุณไปยังหน้าจอสีดำเท่านั้น เนื่องจากคุณยังไม่ได้เพิ่มมาร์กอัปต่อไปนี้ใน page-landing.php

<div id=”landing-page” class=”hfeed site”>

<div class="site-branding">

<p class=”site-title aligncenter”><a href=”<?php echo esc_url( home_url( '/' ) ); ?>” rel=”home”><?php bloginfo( 'name' ); ?></a></p>

</div><!– .site-branding –>

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

เนื้อหาที่แสดง

หากต้องการแสดงเนื้อหาที่เหลือในหน้า Landing Page คุณต้องเพิ่มมาร์กอัปต่อไปนี้ใน page-landing.php คุณต้องทำด้านล่างบรรทัด <!– .site-branding –> เพื่อให้ทำงานได้อย่างถูกต้อง

<div class="sidebar sidebar-bribe">

<?php if (have_posts()) : ?>

<?php ในขณะที่ (have_posts()) : the_post(); ?>

<h1 class=”landing-title”><?php the_title(”); ?></h1>

<?php the_content(); ?>

<!– https://codex.wordpress.org/Function_Reference/wp_link_pages –>

<?php เมื่อสิ้นสุด; ?>

<?php endif; ?> <!– mdl-cell-8 //#primary –>

</div>

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