Fügen Sie benutzerdefinierte Startseiten-Widgets hinzu

Veröffentlicht: 2013-02-15

Kürzlich schrieb ich einen Beitrag über das Kopieren von Homepage-Widgets und deren Duplizierung auf einer bestimmten Genesis-Child-Theme-Homepage.

Dies war einfach genug, da PHP und CSS bis auf Änderungen an den eindeutigen Widget-IDs genau gleich waren.

Aber wie wäre es mit dem Hinzufügen von Startseiten-Widgets aus einem anderen Child-Theme?

Mir wurde eine Frage von einer Webdesignerin gestellt, wie man das macht, nachdem sie versucht hatte, den Code zu knacken.

Dieser Code verwendet die Genesis-Design-Framework-Hooks, die Sie ändern oder entfernen können, je nachdem, welches übergeordnete Design Sie verwenden.

Werfen wir einen Blick darauf, wie Sie 4 benutzerdefinierte Widget-Bereiche aus dem News-Design zum Blissful-Design hinzufügen.

Wir werden hinzufügen:

  • Startseite Top-Widget
  • Auf der Startseite wurden linke und rechte Widgets angezeigt
  • Startseite unten Widget

Kopieren Sie die Home.php-Datei

Der erste Schritt besteht darin, die Datei home.php aus dem News-Theme zu kopieren und alle Nachrichteninstanzen in Blissful oder das untergeordnete Thema zu ändern, zu dem Sie die Widgets hinzufügen.

Der Grund, warum das News Child Theme eine gute Wahl ist, liegt darin, dass es die gleiche Inhaltsbreite wie Blissful hat, sodass das CSS nicht viel bearbeitet werden muss.

Hier ist der gesamte Code in der neuen home.php-Datei.

 <?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-Datei

Der nächste Schritt besteht darin, Unterstützung für alle 4 benutzerdefinierten Widget-Bereiche zu Ihrer Datei functions.php für untergeordnete Themen hinzuzufügen.

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

Der nächste Schritt besteht darin, neue Bildgrößen für die vorgestellten Widgets zu erstellen.

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

Möglicherweise möchten Sie auch Unterstützung für strukturelle Wraps hinzufügen, da dies nicht im Blissful-Design enthalten ist. Überprüfen Sie daher, ob dies in Ihrem Design möglich ist.

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

Style.css-Datei

Und zum Schluss müssen Sie das CSS hinzufügen

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

Also, wie sieht es jetzt aus?

Je nachdem, welches Thema Sie anpassen, müssen Sie möglicherweise die Breite für die Widgets für die linke und rechte Startseite in der Mitte bearbeiten.

Da dies sehr themenspezifisch ist, müssen Sie diesen Teil selbst ausarbeiten, aber es ist wirklich keine große Herausforderung.

Da haben Sie es also.

Ein Haufen Code, aber hauptsächlich Kopieren und Einfügen, ohne dass Sie PHP-Programmierung bearbeiten, schreiben oder lernen müssen.

Verwandte Tutorials

  • Genesis-Startseitenvorlage mit benutzerdefinierter Seitenleiste