Genesis Alt Teması için Orta Başlık Widget Alanı Oluşturun

Çerçeve/örnek tema dahil olmak üzere çoğu Genesis teması, çoğu başlık düzenini çözen bir ' sağ başlık ' pencere öğesi alanıyla birlikte gelir, ancak ek bir üstbilgi orta pencere öğesi alanının , özellikle bir müşteri teslim ederken, içeriği yönetmek zorunda.

Yukarıdaki düzende, işi halletmek için başlık sağ pencere aracı alanını kullanabilirsiniz, ancak çeşitli ortam sorgusu boyutlarında ve kayan noktalara sahip bir dizi CSS kuralının eklenmesi gerekir, bunun yerine kontrol etmek için ek bir başlık orta pencere aracı alanı ekleyebiliriz. orta şirket beyanı. Sağ üstbilgi , sosyal medya menüsünü ve iletişim bilgilerini barındırır ve soldaki .title-area div'i logoyla ilgilenir.

Yapmamız gereken ilk şey, yeni başlık orta widget'ını kaydetmek.

Widget Alanını Kaydedin

 add_action('widgets_init', 'genesischild_extra_widgets');
//Yeni Widget alanlarına kaydolun
function genesischild_extra_widgets() {
	genesis_register_sidebar( dizi(
	'id' => 'üstbilgi-orta',
	'name' => __( 'Başlık Ortası', 'genesischild'),
	'description' => __( 'Bu, Başlık Orta alanıdır', 'genesischild'),
	) );
}

Functions.php dosyanızda, yeni widget alanını kaydedin, yukarıdaki işaretlemede üstbilgi-orta kimliğini verdim, bu şimdi WordPress Dashboard>Görünüm>Widgets'taki widget alanında görünecektir.

Genesis Başlık İşaretlemesini Kopyala

Yeni widget alanını başlıkta konumlandırmak için orijinal başlığı yeniden oluşturmamız ve yeni başlık-orta alanı başlık-sağ alanından önce yerleştirmemiz gerekiyor. Orijinal Genesis başlık işaretlemesi, 885-915 satırları arasındaki /Lib/Structure/header.php içindeki çerçevede bulunabilir.

 function genesis_do_header() {

 global $wp_registered_sidebars;

 genesis_markup( dizi(
 'html5' => '<div %s>',
 'xhtml' => '<div>',
 'bağlam' => 'başlık alanı',
 ) );
 do_action('genesis_site_title');
 do_action('genesis_site_description');
 yankı '</div>';

 if ( ( isset( $wp_registered_sidebars['header-right'] ) && is_active_sidebar( 'header-right' ) ) || has_action( 'genesis_header_right' ) ) {

 genesis_markup( dizi(
 'html5' => '<div %s>' . genesis_sidebar_title('başlık-sağ'),
 'xhtml' => '<div class="widget-area başlık-widget-area">',
 'bağlam' => 'başlık widget alanı',
 ) );

 do_action('genesis_header_right');
 add_filter('wp_nav_menu_args', 'genesis_header_menu_args');
 add_filter('wp_nav_menu', 'genesis_header_menu_wrap');
 dynamic_sidebar('başlık-sağ');
 remove_filter('wp_nav_menu_args', 'genesis_header_menu_args');
 remove_filter('wp_nav_menu', 'genesis_header_menu_wrap');

 yankı '</div>';

 }

Bu kodu kopyalayın ve function.php dosyanıza yapıştırın ve şimdi onu düzenlememiz ve yeni üstbilgi-orta widget alanını eklememiz gerekiyor.

Yeni Genesis Orta Başlık Widget'ını ekleyin

 remove_action('genesis_header','genesis_do_header');
add_action('genesis_header', 'themeprefix_genesis_do_header');
// Ortadaki widget başlığıyla yeni başlığı ekleyin
işlev themeprefix_genesis_do_header() {

 global $wp_registered_sidebars;

 genesis_markup( dizi(
 'html5' => '<div %s>',
 'xhtml' => '<div>',
 'bağlam' => 'başlık alanı',
 ) );
 do_action('genesis_site_title');
 do_action('genesis_site_description');
 yankı '</div>';

	
	genesis_widget_area( 'üstbilgi-orta', dizi(
	'before' => '<div class="header-middle widget-area">',
	'sonra' => '</div>',
	) );
        


	if ( ( isset( $wp_registered_sidebars['header-right'] ) && is_active_sidebar( 'header-right' ) ) || has_action( 'genesis_header_right' ) ) {

 genesis_markup( dizi(
 'html5' => '<div %s>' . genesis_sidebar_title('başlık-sağ'),
 'xhtml' => '<div class="widget-area başlık-widget-area">',
 'bağlam' => 'başlık widget alanı',
 ) );

 do_action('genesis_header_right');
 add_filter('wp_nav_menu_args', 'genesis_header_menu_args');
 add_filter('wp_nav_menu', 'genesis_header_menu_wrap');
 dynamic_sidebar('başlık-sağ');
 remove_filter('wp_nav_menu_args', 'genesis_header_menu_args');
 remove_filter('wp_nav_menu', 'genesis_header_menu_wrap');

 yankı '</div>';

 }

}

Bu nedenle, yukarıdaki düzeltilmiş kodda, yeni pencere öğesi alanı, sağ üstbilgiden hemen önce konumlandırılmıştır. Yeni üstbilgi-orta pencere öğesi atanmış 3 CSS sınıfına sahiptir, bunlardan ikisi üstbilgi-sağ alanıyla ortaktır ve biri kendine özgüdür .header-middle

Kodun altında 2 eylem vardır, ilki eski başlığı kaldırır ve ikincisi yeni widget'ın dahil olduğu yeni başlığı ekler.

Ayrıca yeni başlık işlevinin benzersiz bir adı olmalıdır.

Bunu yapmanın başka bir yolu, koda yeni bir eylem eklemek ve ardından pencere aracını bu eylem kancasına yerleştirmek olabilir, bunun yararı, daha fazla içerik bağlayabilmenizdir – ancak bu özel örnek için, pencere öğesini doğrudan içine ekliyorum. başlık işaretlemesi – pencere öğesi boşsa, kod çıktısı alınmaz.

CSS Ayarı

2 başlık widget alanının yan yana oturmasını sağlamak için biraz CSS iyileştirmesi gerekiyor. Bunun style.css dosyanıza eklenmesi gerekiyor

 /*
 * Hizalama ve yüzde değerlerini uygun şekilde düzenleyin, dolgu gibi CSS özelliklerini ekleyin
 */

 .site-header .title-area {
 genişlik:%25;
}

.site-header .header-orta {
 genişlik:%25;
 metin hizalama: merkez;
 yüzer: sol;
}

.site-header .header-widget-alanı {
 genişlik: %50; 
}


@media yalnızca ekran ve (maksimum genişlik: 767 piksel) {
 
 .site-başlığı .başlık-alanı, 
 .site-header .header-orta,
 .site-header .header-widget-alanı {
 genişlik: %100;
}

Burada, 3 başlık alanı .title-area , .header-middle ve .header-widget-area toplamının %100'e eşit olduğu yüzde tabanlı genişlikleri kullanmayı seçtim

Genişlikler, hizalamalarını ve orantılarını 768 piksele kadar koruyacak ve ardından bu görüntü alanı boyutunun altında birbirinin üzerine yığılacak şekilde ayarlanır. Bu elemanların genişliklerinin yüzdesi tasarım tarafından belirlenir ve dolgu gibi diğer tasarım özelliklerinin eklenmesi gerekir.

İşte bu, başlıkta ek bir widget'lı alanı bu şekilde çalıştırabilirsiniz.

Tam Gist CSS ve PHP burada.

Örnek site.