Adicionar widgets de página inicial personalizados

Publicados: 2013-02-15

Recentemente, escrevi um post sobre como copiar widgets da página inicial e duplicá-los em uma página inicial específica de temas infantis do Genesis.

Isso foi bastante fácil porque o PHP e o CSS eram exatamente os mesmos, exceto pelas alterações feitas nos IDs exclusivos do widget.

Mas que tal adicionar widgets de página inicial de outro tema filho?

Me fizeram uma pergunta de um web designer sobre como fazer isso depois que ela tentou e quebrou o código.

Este código usa os ganchos da estrutura do tema Genesis que você pode alterar ou remover dependendo de qual tema pai você está usando.

Vamos dar uma olhada em como adicionar 4 áreas de widget personalizadas do tema Notícias ao tema Blissful.

Vamos adicionar:

Widget superior inicial
Widgets esquerdo e direito em destaque
Widget inferior inicial

Copiar arquivo Home.php

O primeiro passo é copiar o arquivo home.php do tema News e alterar todas as instâncias de news para Blissful ou o tema filho ao qual você está adicionando os widgets.

A razão pela qual o tema filho News é uma boa escolha é porque tem a mesma largura de conteúdo que Blissful, então o CSS não precisa de muita edição.

Aqui está todo o código dentro do novo arquivo 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();

Arquivo Functions.php

O próximo passo é adicionar suporte para todas as 4 áreas de widget personalizadas ao seu arquivo functions.php de temas filhos.

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

O próximo passo é criar novos tamanhos de imagem para os widgets em destaque.

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

Você também pode adicionar suporte para envoltórios estruturais, pois isso não está incluído no tema Blissful, portanto, verifique para ver dependendo do seu tema.

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

Arquivo Style.css

E para finalizar, você precisará adicionar o 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; }

Então, como está olhando agora?

Dependendo de qual tema você está personalizando, pode ser necessário editar a largura dos widgets do meio esquerdo e direito da página inicial.

Como isso é muito específico do tema, você precisará resolver essa parte sozinho, mas não é um grande desafio.

Então aí está.

Um monte de código, mas é principalmente copiar e colar sem a necessidade de editar, escrever ou aprender programação PHP.

Tutoriais relacionados

Modelo de página inicial do Genesis com barra lateral personalizada