Tambahkan Widget Halaman Beranda Kustom

Diterbitkan: 2013-02-15

Baru-baru ini saya menulis posting tentang menyalin widget halaman beranda dan menggandakannya di halaman beranda tema anak Genesis tertentu.

Ini cukup mudah karena PHP dan CSS sama persis kecuali untuk perubahan yang dibuat pada id widget unik.

Tapi bagaimana dengan menambahkan widget halaman rumah dari tema anak lain?

Saya ditanya pertanyaan dari seorang desainer web tentang bagaimana melakukan ini setelah dia mencoba dan memecahkan kodenya.

Kode ini menggunakan kait kerangka kerja tema Genesis yang dapat Anda ubah atau hapus tergantung pada tema induk yang Anda gunakan.

Mari kita lihat cara menambahkan 4 area widget khusus dari tema Berita ke tema Blissful.

Kami akan menambahkan:

Widget atas rumah
Beranda menampilkan widget kiri dan kanan
Widget bawah rumah

Salin File Home.php

Langkah pertama adalah menyalin file home.php dari tema Berita dan mengubah semua contoh berita menjadi Blissful atau tema anak tempat Anda menambahkan widget.

Alasan mengapa tema anak Berita adalah pilihan yang baik adalah karena lebar kontennya sama dengan Blissful sehingga CSS tidak perlu banyak diedit.

Berikut seluruh kode di dalam file home.php baru.

 <?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();

File Functions.php

Langkah selanjutnya adalah menambahkan dukungan untuk semua 4 area widget khusus ke file functions.php tema anak Anda.

 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' ), ) );

Langkah selanjutnya adalah membuat ukuran gambar baru untuk widget unggulan.

 /** 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 );

Anda mungkin juga ingin menambahkan dukungan untuk pembungkus struktural karena ini tidak termasuk dalam tema Blissful jadi periksa untuk melihat tergantung pada tema Anda.

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

File Style.css

Dan untuk menyelesaikannya, Anda harus menambahkan 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; }

Jadi bagaimana penampilannya sekarang?

Bergantung pada tema yang Anda sesuaikan, Anda mungkin perlu mengedit lebar untuk widget kiri dan kanan tengah rumah.

Karena ini sangat spesifik untuk tema, Anda harus mengerjakan bagian ini sendiri tetapi sebenarnya tidak terlalu sulit.

Jadi di sana Anda memilikinya.

Banyak kode tetapi kebanyakan menyalin dan menempel tanpa perlu mengedit, menulis, atau belajar pemrograman PHP.

Tutorial Terkait

Templat Halaman Depan Genesis Dengan Bilah Sisi Kustom