เพิ่มวิดเจ็ตโฮมเพจที่กำหนดเอง

เผยแพร่แล้ว: 2013-02-15

เมื่อเร็ว ๆ นี้ฉันเขียนโพสต์เกี่ยวกับการคัดลอกวิดเจ็ตโฮมเพจและทำซ้ำในโฮมเพจธีมย่อยของ Genesis

สิ่งนี้ง่ายพอเพราะ PHP และ CSS เหมือนกันทุกประการ ยกเว้นการเปลี่ยนแปลงที่ทำกับรหัสวิดเจ็ตเฉพาะ

แต่จะเพิ่มวิดเจ็ตโฮมเพจจากธีมลูกอื่นได้อย่างไร

ฉันถูกถามคำถามจากนักออกแบบเว็บไซต์เกี่ยวกับวิธีการทำเช่นนี้หลังจากที่เธอพยายามทำลายโค้ด

รหัสนี้ใช้ hooks เฟรมเวิร์กของธีม Genesis ซึ่งคุณสามารถเปลี่ยนหรือลบได้ขึ้นอยู่กับธีมหลักที่คุณใช้

มาดูวิธีเพิ่มพื้นที่วิดเจ็ตที่กำหนดเอง 4 รายการจากธีม News ไปยังธีม Blissful

เราจะเพิ่ม:

  • วิดเจ็ตบนหน้าแรก
  • หน้าแรก วิดเจ็ตเด่นด้านซ้ายและขวา
  • วิดเจ็ตด้านล่างหน้าแรก

คัดลอกไฟล์ Home.php

ขั้นตอนแรกคือการคัดลอกไฟล์ home.php จากธีม News และเปลี่ยนอินสแตนซ์ของข่าวทั้งหมดเป็น Blissful หรือธีมย่อยที่คุณกำลังเพิ่มวิดเจ็ต

เหตุผลที่ธีมลูกของ News เป็นตัวเลือกที่ดี เพราะมีความกว้างของเนื้อหาเท่ากับ Blissful ดังนั้น CSS จึงไม่ต้องแก้ไขอะไรมาก

นี่คือรหัสทั้งหมดภายในไฟล์ home.php ใหม่

 <?php add_action( 'genesis_meta', 'blissful_home_genesis_meta' ); /** * Add widget support for homepage. If no widgets active, display the default loop. * */ function blissful_home_genesis_meta() { if ( is_active_sidebar( 'home-top' ) || is_active_sidebar( 'home-middle-left' ) || is_active_sidebar( 'home-middle-right' ) || is_active_sidebar( 'home-bottom' ) ) { remove_action( 'genesis_loop', 'genesis_do_loop' ); add_action( 'genesis_loop', 'news_home_loop_helper' ); add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_content_sidebar' ); add_filter( 'body_class', 'add_body_class' ); function add_body_class( $classes ) { $classes[] = 'blissful'; return $classes; } } } function news_home_loop_helper() { if ( is_active_sidebar( 'home-top' ) ) { echo '<div id="home-top"><div class="border wrap">'; dynamic_sidebar( 'home-top' ); echo '</div><!-- end .border wrap --></div><!-- end #home-top -->'; } if ( is_active_sidebar( 'home-middle-left' ) || is_active_sidebar( 'home-middle-right' ) ) { echo '<div id="home-middle"><div class="border wrap">'; echo '<div class="home-middle-left">'; dynamic_sidebar( 'home-middle-left' ); echo '</div><!-- end .home-middle-left -->'; echo '<div class="home-middle-right">'; dynamic_sidebar( 'home-middle-right' ); echo '</div><!-- end .home-middle-right -->'; echo '</div><!-- end .border wrap --></div><!-- end #home-middle -->'; } if ( is_active_sidebar( 'home-bottom' ) ) { echo '<div id="home-bottom"><div class="border wrap">'; dynamic_sidebar( 'home-bottom' ); echo '</div><!-- end .border wrap --></div><!-- end #home-bottom -->'; } } genesis();

ไฟล์ Functions.php

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

 genesis_register_sidebar( array( 'id' => 'home-top', 'name' => __( 'Home Top', 'blissful' ), 'description' => __( 'This is the home top section.', 'blissful' ), ) ); genesis_register_sidebar( array( 'id' => 'home-middle-left', 'name' => __( 'Home Middle Left', 'blissful' ), 'description' => __( 'This is the home middle left section.', 'blissful' ), ) ); genesis_register_sidebar( array( 'id' => 'home-middle-right', 'name' => __( 'Home Middle Right', 'blissful' ), 'description' => __( 'This is the home middle right section.', 'blissful' ), ) ); genesis_register_sidebar( array( 'id' => 'home-bottom', 'name' => __( 'Home Bottom', 'blissful' ), 'description' => __( 'This is the home bottom section.', 'blissful' ), ) );

ขั้นตอนต่อไปคือการสร้างขนาดภาพใหม่สำหรับวิดเจ็ตเด่น

 /** Add new image sizes */ add_image_size( 'mini-thumbnail', 75, 75, TRUE ); add_image_size( 'small-thumbnail', 110, 110, TRUE ); add_image_size( 'home-middle-left', 280, 165, TRUE ); add_image_size( 'home-middle-right', 50, 50, TRUE ); add_image_size( 'home-tabs', 150, 220, TRUE );

คุณอาจต้องการเพิ่มการสนับสนุนสำหรับการตัดโครงสร้างเนื่องจากสิ่งนี้ไม่รวมอยู่ในธีม Blissful ดังนั้นโปรดตรวจสอบเพื่อดูว่าขึ้นอยู่กับธีมของคุณ

 /** Add support for structural wraps */ add_theme_support( 'genesis-structural-wraps', array( 'header', 'nav', 'subnav', 'inner', 'footer-widgets', 'footer' ) );

ไฟล์ Style.css

และในการดำเนินการให้เสร็จสิ้น คุณจะต้องเพิ่ม CSS

 /* Home Top ------------------------------------------------------------ */ #home-top { border-bottom: 1px solid #d5d5d5; overflow: hidden; } #home-top .border { border-bottom: 4px solid #eee; overflow: hidden; } #home-top .wrap { overflow: hidden; padding: 20px 25px 15px; } #home-top .ui-tabs ul.ui-tabs-nav { border-bottom: 1px dotted #ddd; margin: 10px 0; padding: 0 0 13px; } #home-top .ui-tabs ul.ui-tabs-nav li a { background-color: #f5f5f5; font-weight: bold; } #home-top .ui-tabs ul.ui-tabs-nav li a:hover, #home-top .ui-tabs ul.ui-tabs-nav li.ui-tabs-selected a { background-color: #00a7ed; color: #fff; } #home-top .ui-tabs .post { background-color: #fff; margin: 0; padding: 0; } /* Home Middle ------------------------------------------------------------ */ #home-middle { border-bottom: 1px solid #d5d5d5; overflow: hidden; } #home-middle .border { border-bottom: 4px solid #eee; overflow: hidden; } #home-middle .wrap { overflow: hidden; padding: 25px 25px 15px; } .home-middle-left { float: left; width: 290px; } .home-middle-right { float: right; width: 285px; } .home-middle-left-2 { float: left; width: 290px; } .home-middle-right-2 { float: right; width: 285px; } /* Home Bottom ------------------------------------------------------------ */ #home-bottom { overflow: hidden; } #home-bottom .wrap { overflow: hidden; padding: 20px 25px 15px; }

ตอนนี้มันดูเป็นอย่างไร?

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

เนื่องจากเป็นธีมที่เฉพาะเจาะจงมาก คุณจะต้องทำงานส่วนนี้ด้วยตัวเอง แต่ก็ไม่ได้ท้าทายมากนัก

ดังนั้นคุณมีมัน

โค้ดจำนวนมากแต่ส่วนใหญ่เป็นการคัดลอกและวางโดยไม่จำเป็นต้องแก้ไข เขียน หรือเรียนรู้การเขียนโปรแกรม PHP

บทแนะนำที่เกี่ยวข้อง

  • เทมเพลตหน้าแรกของ Genesis พร้อมแถบด้านข้างที่กำหนดเอง