css 添加Genesis中间标题小部件区域

Posted 2021-05-13

<?php
//do not copy the opening php tag above
 
/**
 * Add Middle Header Widget
 * 
 * @package   Middle Header Widget
 * @author    Neil Gee
 * @link      https://wpbeaches.com/create-middle-header-widget-genesis-child-theme/
 * @copyright (c) 2014, Neil Gee
 */
//Add in a Middle Header Widget Area that sites between the .title-area and header right widget area.

add_action( 'widgets_init', 'genesischild_extra_widgets' );
// Register in new Widget area
function genesischild_extra_widgets() {	
	genesis_register_sidebar( array(
	'id'            => 'header-middle',
	'name'          => __( 'Header Middle', 'genesischild' ),
	'description'   => __( 'This is the Header Middle area', 'genesischild' ),
	'before_widget' => '<div class="header-middle-area">',
	'after_widget'  => '</div>',
	) );
}
	

remove_action( 'genesis_header','genesis_do_header' );
add_action( 'genesis_header', 'themeprefix_genesis_do_header' );
// Add in the new header with the middle widget header
function themeprefix_genesis_do_header() {

	global $wp_registered_sidebars;

	genesis_markup( array(
		'html5'   => '<div %s>',
		'xhtml'   => '<div id="title-area">',
		'context' => 'title-area',
	) );
	
	do_action( 'genesis_site_title' );
	do_action( 'genesis_site_description' );
	echo '</div>';

	genesis_widget_area( 'header-middle', array(
	'before' => '<div class="header-middle widget-area">',
	'after'  => '</div>',
	) );


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

		genesis_markup( array(
			'html5'   => '<div %s>' . genesis_sidebar_title( 'header-right' ),
			'xhtml'   => '<div class="widget-area header-widget-area">',
			'context' => 'header-widget-area',
		) );

			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( 'header-right' );
			remove_filter( 'wp_nav_menu_args', 'genesis_header_menu_args' );
			remove_filter( 'wp_nav_menu', 'genesis_header_menu_wrap' );

		echo '</div>';

	}

}

/*
 *Edit Alignment and percentage values to suit, add in CSS attributes like padding
 */

 .site-header .title-area {
	width:25%;
}

.site-header  .header-middle {
	width:25%;
	text-align: center;
	float: left;
}

.site-header  .header-widget-area  {
	width:50%;	
}


@media only screen and (max-width: 767px) {
	 
	.site-header .title-area, 
	.site-header .header-middle,
	.site-header .header-widget-area {
		width:100%;
}