Ajouter des widgets de page d'accueil personnalisés

Publié: 2013-02-15

Récemment, j'ai écrit un article sur la copie des widgets de la page d'accueil et leur duplication sur une page d'accueil spécifique des thèmes pour enfants Genesis.

C'était assez facile car le PHP et le CSS étaient exactement les mêmes, à l'exception des modifications apportées aux identifiants uniques du widget.

Mais que diriez-vous d'ajouter des widgets de page d'accueil à partir d'un autre thème enfant ?

On m'a posé une question d'un concepteur de sites Web sur la façon de procéder après avoir essayé et cassé le code.

Ce code utilise les crochets du framework de thème Genesis que vous pouvez modifier ou supprimer en fonction du thème parent que vous utilisez.

Voyons comment ajouter 4 zones de widgets personnalisés du thème News au thème Blissful.

Nous ajouterons :

  • Widget haut de page d'accueil
  • Accueil en vedette widgets gauche et droit
  • Widget en bas de la page d'accueil

Copier le fichier Home.php

La première étape consiste à copier le fichier home.php du thème News et à changer toutes les instances de news en Blissful ou le thème enfant auquel vous ajoutez les widgets.

La raison pour laquelle le thème enfant News est un bon choix est qu'il a la même largeur de contenu que Blissful, de sorte que le CSS ne devrait pas nécessiter beaucoup d'édition.

Voici le code entier à l'intérieur du nouveau fichier 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();

Fichier Functions.php

L'étape suivante consiste à ajouter la prise en charge des 4 zones de widgets personnalisés à votre fichier functions.php de thèmes enfants.

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

L'étape suivante consiste à créer de nouvelles tailles d'image pour les widgets présentés.

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

Vous pouvez également ajouter la prise en charge des enveloppes structurelles car cela n'est pas inclus dans le thème Blissful, alors vérifiez pour voir en fonction de votre thème.

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

Style.css Fichier

Et pour finir, vous devrez ajouter le 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; }

Alors comment ça se présente maintenant ?

Selon le thème que vous personnalisez, vous devrez peut-être modifier la largeur des widgets d'accueil au milieu à gauche et à droite.

Comme il s'agit d'un thème très spécifique, vous devrez résoudre cette partie vous-même, mais ce n'est vraiment pas un défi.

Alors voilà.

Un tas de code mais c'est surtout du copier-coller sans avoir besoin d'éditer, d'écrire ou d'apprendre la programmation PHP.

Tutoriels associés

  • Modèle de page d'accueil Genesis avec barre latérale personnalisée