Özel Ana Sayfa Widget'ları Ekle

Yayınlanan: 2013-02-15

Geçenlerde ana sayfa widget'larını kopyalamak ve bunları belirli bir Genesis alt temaları ana sayfasında çoğaltmak hakkında bir yazı yazdım.

Bu yeterince kolaydı çünkü PHP ve CSS, benzersiz widget kimliklerinde yapılan değişiklikler dışında tamamen aynıydı.

Ancak başka bir alt temadan ana sayfa widget'ları eklemeye ne dersiniz?

Bir web tasarımcısından, kodu deneyip kırdıktan sonra bunun nasıl yapılacağı hakkında bir soru soruldu.

Bu kod, kullandığınız ana temaya bağlı olarak değiştirebileceğiniz veya kaldırabileceğiniz Genesis tema çerçeve kancalarını kullanır.

Haber temasından Blissful temasına 4 özel widget alanının nasıl ekleneceğine bir göz atalım.

Ekleyeceğiz:

Ana sayfa üst widget'ı
Ana sayfa özellikli sol ve sağ widget'lar
Ana sayfa alt widget'ı

Home.php Dosyasını Kopyala

İlk adım, Home.php dosyasını News temasından kopyalamak ve tüm haber örneklerini Blissful veya widget'ları eklediğiniz alt tema olarak değiştirmek.

News alt temasının iyi bir seçim olmasının nedeni, Blissful ile aynı içerik genişliğine sahip olmasıdır, bu nedenle CSS'nin fazla düzenlemeye ihtiyacı olmamalıdır.

İşte yeni home.php dosyasının içindeki kodun tamamı.

 <?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 Dosyası

Sonraki adım, 4 özel widget alanının tümü için alt temalar function.php dosyanıza destek eklemektir.

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

Sonraki adım, öne çıkan widget'lar için yeni görüntü boyutları oluşturmaktır.

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

Ayrıca Blissful temasına dahil olmadığından yapısal kaplamalar için destek eklemek isteyebilirsiniz, bu nedenle temanıza bağlı olarak kontrol edin.

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

Style.css Dosyası

Ve bitirmek için CSS'yi eklemeniz gerekecek

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

Peki şimdi nasıl görünüyor?

Hangi temayı özelleştirdiğinize bağlı olarak, ana sayfa orta sol ve sağ widget'larının genişliğini düzenlemeniz gerekebilir.

Bu çok temaya özgü olduğundan, bu kısmı kendi başınıza çözmeniz gerekecek, ancak bu gerçekten çok zor değil.

İşte orada.

Bir yığın kod, ancak çoğunlukla PHP programlamasını düzenlemeye, yazmaya veya öğrenmeye gerek kalmadan kopyalayıp yapıştırıyor.

İlgili Öğreticiler

Özel Kenar Çubuğu ile Genesis Ön Sayfa Şablonu