Adăugați widgeturi personalizate pentru pagina de pornire

Publicat: 2013-02-15

Recent am scris o postare despre copierea widget-urilor paginii de pornire și duplicarea lor pe o anumită pagină de pornire a temelor Genesis child.

Acest lucru a fost destul de ușor, deoarece PHP și CSS erau exact aceleași, cu excepția modificărilor aduse id-urilor unice ale widgetului.

Dar ce zici de adăugarea widget-urilor de pe pagina de pornire dintr-o altă temă copil?

Mi s-a pus o întrebare de la un web designer despre cum să fac asta după ce a încercat și a spart codul.

Acest cod folosește cârligele cadrului temei Genesis pe care le puteți modifica sau elimina în funcție de tema părinte pe care o utilizați.

Să aruncăm o privire la cum să adăugați 4 zone de widget personalizate din tema Știri la tema Blissful.

Vom adauga:

Widget de sus de acasă
Acasă prezentau widget-uri din stânga și din dreapta
Widget de jos de acasă

Copiați fișierul Home.php

Primul pas este să copiați fișierul home.php din tema Știri și să schimbați toate cazurile de știri în Blissful sau tema copil la care adăugați widget-urile.

Motivul pentru care tema copil Știri este o alegere bună este că are aceeași lățime de conținut ca Blissful, astfel încât CSS nu ar trebui să aibă nevoie de multă editare.

Iată întregul cod din noul fișier 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();

Fișierul Functions.php

Următorul pas este să adăugați suport pentru toate cele 4 zone de widget personalizate în fișierul functions.php cu temele copilului dumneavoastră.

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

Următorul pas este să creați noi dimensiuni de imagine pentru widget-urile prezentate.

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

De asemenea, s-ar putea dori să adăugați suport pentru învelișuri structurale, deoarece acest lucru nu este inclus în tema Blissful, așa că verificați pentru a vedea în funcție de tema dvs.

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

Fișier Style.css

Și pentru a finaliza, va trebui să adăugați 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; }

Deci cum arată acum?

În funcție de tema pe care o personalizați, poate fi necesar să editați lățimea pentru widget-urile din mijloc, stânga și dreapta.

Deoarece aceasta este foarte specifică temei, va trebui să vă descurcați singuri această parte, dar nu este chiar o provocare.

Deci iată-l.

O grămadă de cod, dar mai ales se copiază și se lipește fără a fi nevoie să editezi, să scrii sau să înveți programarea PHP.

Tutoriale aferente

Șablon pentru prima pagină Genesis cu bară laterală personalizată