Agregar widgets de página de inicio personalizados

Publicado: 2013-02-15

Recientemente escribí una publicación sobre la copia de widgets de la página de inicio y su duplicación en una página de inicio específica de temas secundarios de Génesis.

Esto fue bastante fácil porque PHP y CSS eran exactamente iguales, excepto por los cambios realizados en las identificaciones únicas del widget.

Pero, ¿qué hay de agregar widgets a la página de inicio de otro tema secundario?

Una diseñadora web me hizo una pregunta sobre cómo hacer esto después de que ella intentó y descifró el código.

Este código utiliza los ganchos del marco del tema de Génesis que puede cambiar o eliminar según el tema principal que esté utilizando.

Echemos un vistazo a cómo agregar 4 áreas de widgets personalizados del tema Noticias al tema Dichoso.

Agregaremos:

  • Widget superior de inicio
  • Inicio destacados widgets izquierdo y derecho
  • Widget de fondo de inicio

Copie el archivo Home.php

El primer paso es copiar el archivo home.php del tema News y cambiar todas las instancias de noticias a Blissful o al tema secundario al que está agregando los widgets.

La razón por la que el tema secundario News es una buena opción es porque tiene el mismo ancho de contenido que Blissful, por lo que el CSS no debería necesitar mucha edición.

Aquí está el código completo dentro del nuevo archivo 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();

Archivo Funciones.php

El siguiente paso es agregar soporte para las 4 áreas de widgets personalizadas a su archivo child themes 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' ), ) );

El siguiente paso es crear nuevos tamaños de imagen para los widgets destacados.

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

También es posible que desee agregar soporte para envolturas estructurales, ya que esto no está incluido en el tema Blissful, así que verifique que dependa de su tema.

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

Archivo Style.css

Y para terminar, deberás agregar el 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; }

Entonces, ¿cómo se ve ahora?

Según el tema que estés personalizando, es posible que debas editar el ancho de los widgets izquierdo y derecho del centro de la casa.

Como se trata de un tema muy específico, tendrá que resolver esta parte usted mismo, pero en realidad no es un gran desafío.

Así que ahí lo tienes.

Un montón de código, pero en su mayoría es copiar y pegar sin necesidad de editar, escribir o aprender a programar PHP.

Tutoriales relacionados

  • Plantilla de portada de Génesis con barra lateral personalizada