วิธีสร้างวิดเจ็ตที่กำหนดเองใน WordPress โดยใช้ Genesis Child Theme

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

ในบทความนี้ ฉันจะแสดงให้เห็นว่าการปรับแต่งธีมลูกของ Genesis นั้นง่ายเพียงใดโดยการสร้างวิดเจ็ต 4 ส่วนภายในชุดรูปแบบ Genesis Sample ที่มาพร้อมกับ Genesis Framework ฟรี

1. การตั้งค่าสภาพแวดล้อมการพัฒนา

ในการติดตั้ง Genesis Framework คุณต้องมีการติดตั้ง WordPress ไม่ว่าจะในเครื่องหรือบนเซิร์ฟเวอร์ ฉันถือว่าคุณได้ติดตั้ง WordPress บนเซิร์ฟเวอร์ของคุณแล้ว และหากไม่เป็นเช่นนั้น ให้เปิด WordPress ของคุณโดยใช้ Cloudways Platform

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

หมายเหตุ: สำหรับการปรับแต่งธีม Genesis ฉันใช้ Sublime Text 3 เป็นตัวแก้ไขข้อความของฉัน อย่างไรก็ตาม คุณมีทางเลือกในการเลือกโปรแกรมแก้ไขข้อความอื่นๆ

2. การปรับแต่งธีมลูก

เปิดตัวอย่างปฐมธีมในโปรแกรมแก้ไขข้อความของคุณและสร้างไฟล์ใหม่ด้านหน้า page.php ในไดเรกทอรีราก

ตอนนี้เปิด front-page.php และเพิ่มตัวอย่างต่อไปนี้

 <?php

กำเนิด ();

สิ่งนี้จะเริ่มต้น Genesis Framework

ธีมตัวอย่างไม่ได้มาพร้อมกับ front-page.php ดังนั้น ฉันต้องสร้างหน้านี้อย่างชัดเจนเพื่อลงทะเบียนพื้นที่วิดเจ็ตของเรา

พื้นที่วิดเจ็ตที่กำหนดเอง

ฉันจะเริ่มเพิ่มวิดเจ็ตโดยแก้ไขไฟล์ function.php ของธีม แต่ก่อนที่ฉันจะเริ่มเขียนโค้ดจริง ๆ ให้ฉันอธิบายตรรกะแบ็คเอนด์ก่อน

ที่นี่ฉันกำลังประกาศฟังก์ชันที่ใช้อาร์เรย์ของพารามิเตอร์:

1. id – เพื่อระบุรหัสของเรา
2. ชื่อ – คือสิ่งที่เราจะเห็นในแดชบอร์ด WordPress ของเรา
3. คำอธิบาย – สิ่งนี้จะแสดงในแดชบอร์ดของ WordPress ด้วย

หมายเหตุ: "id" และ "name" ของฟังก์ชันควรไม่ซ้ำกัน

ตอนนี้เปิด function.php และเพิ่มข้อมูลโค้ดต่อไปนี้ที่ส่วนท้ายของไฟล์

สำหรับวิดเจ็ตตัวเลื่อน

 Genesis_register_sidebar (อาร์เรย์ (
           'id' => 'หน้าแรก-1',
           'name' => __( 'Homepage Slider Widget', 'genesis-sample' ),
           'description' => __( 'นี่คือวิดเจ็ตที่ปรากฏในหน้าแรก', 'genesis-sample' ),
) );

สำหรับวิดเจ็ตเนื้อหา 1

 Genesis_register_sidebar (อาร์เรย์ (
   'name' => __( 'หน้าแรกเนื้อหาด้านซ้ายบน', 'genesis-sample' ),
   'id' => 'content-1',
   'description' => __( 'ซ้ายบนสุด', 'genesis-sample' ),
 ) );

สำหรับวิดเจ็ตเนื้อหา 2

 Genesis_register_sidebar (อาร์เรย์ (
   'name' => __( 'Home Content Top Middle', 'genesis-sample' ),
   'id' => 'เนื้อหา-2',
   'description' => __( 'Top Middle Home', 'genesis-sample' ),
 ) );

สำหรับวิดเจ็ตเนื้อหา 3

 Genesis_register_sidebar (อาร์เรย์ (
   'name' => __( 'หน้าแรกของเนื้อหาด้านบนขวา', 'genesis-sample' ),
   'id' => 'เนื้อหา-3',
   'description' => __( 'บนขวาหน้าแรก', 'genesis-sample' ),
 ) );

ดังที่แสดงด้านล่าง ฉันได้สร้างวิดเจ็ตที่แตกต่างกัน 3 แบบสำเร็จแล้ว ตอนนี้ ไปข้างหน้าและอัปโหลดธีมที่กำหนดเองใน WordPress Dashboard

โปรดทราบว่าวิดเจ็ตสามารถเห็นได้ในแท็บวิดเจ็ต อย่างไรก็ตาม การเปิดใช้งานจะไม่มีผลใดๆ กับส่วนหน้าของธีมของเรา นั่นเป็นเพราะฉันไม่ได้เพิ่มมาร์กอัปเพื่อแสดงวิดเจ็ตเหล่านี้ในไฟล์ front-page.php ของ เรา

ในการเพิ่มมาร์กอัปเพื่อแสดงวิดเจ็ต ฉันกำลังประกาศฟังก์ชันที่กำหนดเองในไฟล์ front-page.php ในฟังก์ชันนั้น ฉันกำลังเรียกใช้วิดเจ็ตจาก "id" ซึ่งเคยสร้างไว้ในไฟล์ function.php พร้อมกับมาร์กอัป HTML บางส่วน

แม้ว่าการเพิ่มฟังก์ชันนี้จะยังไม่ดำเนินการใดๆ เนื่องจากเรายังไม่ได้แนบฟังก์ชันนี้กับการดำเนินการใดๆ

ฉันกำลังประกาศการกระทำที่มี hook 'genesis-meta' และฉันกำลังเรียกใช้ฟังก์ชัน 'my_homepage_setup' ในฟังก์ชันนี้ ฉันกำลังตรวจสอบว่าพื้นที่วิดเจ็ตทำงานอยู่หรือไม่ ถ้าใช่ ฉันต้องขอวิดเจ็ตนั้นไปยังตำแหน่งที่ระบุ จากนั้นเรียกใช้ฟังก์ชันวิดเจ็ตนั้นเพื่อแสดงมาร์กอัปวิดเจ็ต

ตอนนี้ฉันจะเพิ่มข้อมูลโค้ดต่อไปนี้ในไฟล์ front-page.php

วิดเจ็ตตัวเลื่อน

 add_action( 'genesis_meta', 'my_homepage_setup' );

ฟังก์ชั่น my_homepage_setup() {

     if ( is_active_sidebar ( 'front-page-1' ) ) {
            //* เพิ่มวิดเจ็ตตัวเลื่อน
           add_action( 'genesis_after_header', 'display_front_page_1_widget' );
     }
}

// เพิ่มมาร์กอัปเพื่อแสดงวิดเจ็ตตัวเลื่อน

ฟังก์ชั่น display_front_page_1_widget() {
     Genesis_widget_area ('หน้าแรก-1', อาร์เรย์ (
           'before' => '<div class="front-page-1-widget"><div class="wrap">',
           'หลัง' => '</div></div>',
     ) );
}

วิดเจ็ตเนื้อหา (1, 2 และ 3)

 add_action( 'genesis_before_content', 'ng_home_page_widgets' );

//* เพิ่มวิดเจ็ตในบ้านเข้าที่

ฟังก์ชัน ng_home_page_widgets () {
           ถ้า ( is_front_page('') ​​)
           Genesis_widget_area ('เนื้อหา-1', อาร์เรย์ (
                'before' => '<div class="one-third first hometopcol toplefthome">',
                'หลัง' => '</div>',));
           ถ้า ( is_front_page('') ​​)
           Genesis_widget_area ('เนื้อหา-2', อาร์เรย์ (
                'before' => '<div class="one-third hometopcol topmiddlehome">',
                'หลัง' => '</div>',));
           ถ้า ( is_front_page('') ​​)
           Genesis_widget_area ('เนื้อหา-3', อาร์เรย์ (
                'before' => '<div class="one-third hometopcol toprighthome">',
                'หลัง' => '</div>',));
           }

ในที่สุด CSS บางตัวในไฟล์ style.css ของคุณ

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

เพื่อความง่าย ฉันแค่กำหนดขนาดและช่องว่างภายในของวิดเจ็ตเนื้อหา: เส้นขอบและสีพื้นหลังสำหรับคอนเทนเนอร์เว็บไซต์

 .first {margin-left:0px;}

.site-container {พื้นหลัง: #fff;}
.site-inner {padding-top:0px;}

เนื้อหาในบ้าน {
           สี:#7e7467;
           ขนาดตัวอักษร: 16px;
           ความสูงของเส้น: 1.3;
           กล่องเงา:1px 2px 5px 0px rgba(0, 0, 0, 1);
           ขอบบน: 25px;
           ตำแหน่ง: ญาติ;}

.textwidget {padding: 12%;การจัดตำแหน่งข้อความ: center;}

.hometopcol {
     ขอบบน: 0px;
     ความสูง:280px;
     เส้นขอบ: 4px ของแข็ง rgb (255,69,0);}

.widgettitle {
           สี:#c4421b;
           ช่องว่างภายใน: 15px 0px 0px 15px;
           ขอบล่าง: 4px ของแข็ง rgba (162, 152, 135, 1);
           ระยะขอบล่าง: 10px;
           การแปลงข้อความ: ไม่มี;
           ขนาดตัวอักษร: 16px;}

.widgettitle:หลัง {
           เนื้อหา: " ";
           ตำแหน่ง: สัมบูรณ์;
           ด้านบน: 43px;
           ซ้าย: 5px;
           ขวา: 5px;
           เส้นขอบ: 1px ของแข็ง rgba(162, 152, 135, 1);}

กลับไปที่เว็บไซต์ WordPress และดูการเปลี่ยนแปลง สำหรับ Slider Widget ฉันจะใช้ Smart Slider 3 คุณสามารถใช้วิดเจ็ตตัวเลื่อนใดก็ได้ที่คุณเลือก สำหรับ Content Widgets ฉันแค่จะใช้ข้อความ

ลุคสุดท้าย

ในตอนท้ายของบทความนี้ ฉันสามารถสร้างวิดเจ็ตที่กำหนดเองได้ 4 วิดเจ็ตสำหรับธีมย่อยของ Genesis Sample ตามค่าเริ่มต้น ธีม Genesis ไม่ได้มาพร้อมกับวิดเจ็ตส่วนหัว แต่ตอนนี้ ฉันมีวิดเจ็ตที่กำหนดเองซึ่งสามารถใช้สำหรับตัวเลื่อนหรือเพื่อแสดงข้อมูลอื่นๆ วิดเจ็ตเนื้อหาอีก 3 รายการสามารถใช้เพื่อเน้นผลิตภัณฑ์หรือบริการหรือคุณสมบัติอื่นๆ

หลังจากเปิดใช้งานวิดเจ็ตทั้งหมดแล้ว หน้าแรกควรมีลักษณะดังนี้:

สรุป

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

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