Dodaj niestandardowe widżety strony głównej

Opublikowany: 2013-02-15

Niedawno napisałem post o kopiowaniu widżetów strony głównej i duplikowaniu ich na konkretnej stronie głównej motywów potomnych Genesis.

Było to dość łatwe, ponieważ PHP i CSS były dokładnie takie same, z wyjątkiem zmian wprowadzonych w unikalnych identyfikatorach widżetów.

Ale co powiesz na dodanie widżetów strony głównej z innego motywu podrzędnego?

Po tym, jak próbowała i złamała kod, zadano mi pytanie od projektanta stron internetowych, jak to zrobić.

Ten kod używa zaczepów frameworka Genesis, które możesz zmienić lub usunąć w zależności od używanego motywu nadrzędnego.

Przyjrzyjmy się, jak dodać 4 niestandardowe obszary widżetów z motywu Wiadomości do motywu Blissful.

Dodamy:

Strona główna górny widżet
Strona główna zawierała widżety lewe i prawe
Widżet na dole domu

Skopiuj plik Home.php

Pierwszym krokiem jest skopiowanie pliku home.php z motywu Wiadomości i zmiana wszystkich wystąpień wiadomości na Blissful lub motyw potomny, do którego dodajesz widżety.

Powodem, dla którego motyw potomny News jest dobrym wyborem, jest to, że ma taką samą szerokość treści jak Blissful, więc CSS nie powinien wymagać dużej edycji.

Oto cały kod w nowym pliku 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();

Plik Functions.php

Następnym krokiem jest dodanie obsługi wszystkich 4 niestandardowych obszarów widżetów do pliku podrzędnego 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' ), ) );

Następnym krokiem jest utworzenie nowych rozmiarów obrazów dla polecanych widżetów.

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

Możesz również dodać obsługę owijania strukturalnego, ponieważ nie jest to zawarte w motywie Blissful, więc sprawdź, czy zależy to od motywu.

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

Plik Style.css

Na koniec musisz dodać 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; }

Więc jak teraz wygląda?

W zależności od dostosowywanego motywu może być konieczna edycja szerokości widżetów po lewej i prawej stronie głównej.

Ponieważ jest to bardzo specyficzne dla tematu, musisz wypracować tę część samodzielnie, ale tak naprawdę nie jest to duże wyzwanie.

Więc masz to.

Kupa kodu, ale głównie kopiowanie i wklejanie bez potrzeby edytowania, pisania lub nauki programowania PHP.

Powiązane samouczki

Szablon strony głównej Genesis z niestandardowym paskiem bocznym