css Genesis Swap将Primary Sidebar放入Secondary Sidebar位置(最好使用CSS)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css Genesis Swap将Primary Sidebar放入Secondary Sidebar位置(最好使用CSS)相关的知识,希望对你有一定的参考价值。

<?php
// don't add

/* 
 * Option 1:
 * This is better accomplished with CSS but this is the better option than whan I found doing a search
 * This will swap them and you don't have to concern yourself about changing the classes, ids, aria-labe, and the skip links
*/


remove_action ( 'genesis_after_content', 'genesis_get_sidebar', 10 );
remove_action ( 'genesis_after_content_sidebar_wrap', 'genesis_get_sidebar_alt', 10 );
add_action ( 'genesis_after_content', 'genesis_get_sidebar_alt', 10 );
add_action ( 'genesis_after_content_sidebar_wrap', 'genesis_get_sidebar', 10 );
<?php
// don't add

/* 
 * Option 2: Not a good idea (better is CSS or the one below)
 * This is the idea you see mostly doing a Google search except sometimes it misses swapping classes
 * and it never covers changing the id (which affects the skip links) and the aria label
 * This is why CSS or the first option is better.
*/

// Remove the Primary Sidebar from the Primary Sidebar area.
remove_action( 'genesis_sidebar', 'genesis_do_sidebar' );
// Remove the Secondary Sidebar from the Secondary Sidebar area.
remove_action( 'genesis_sidebar_alt', 'genesis_do_sidebar_alt' );
// Place the Secondary Sidebar into the Primary Sidebar area.
add_action( 'genesis_sidebar', 'genesis_do_sidebar_alt' );
// Place the Primary Sidebar into the Secondary Sidebar area.
add_action( 'genesis_sidebar_alt', 'genesis_do_sidebar' );


/**
 *
 * Change Secondary Sidebar with Primary Sidebar Atts
 * @since 1.0.0
 *
 */
function prefix_swap_secondary_w_primary_sidebar_atts( $attributes ) {
 
 	// add original plus extra CSS classes
	 $attributes['class'] = 'sidebar sidebar-primary aside-area';
	 $attributes['aria-label']  = __( 'Primary Sidebar', 'textdomain' );
	 $attributes['id'] = 'genesis-sidebar-primary';
 
	 // return the attributes
	return $attributes;
 
}
add_filter( 'genesis_attr_sidebar-secondary', 'prefix_swap_secondary_w_primary_sidebar_atts', 99 );


/**
 *
 * Change Primary Sidebar with Secondary Sidebar Atts
 *
 */
function prefix_swap_primary_w_secondary_sidebar_atts( $attributes ) {
 
 	// add original plus extra CSS classes
	 $attributes['class'] = 'sidebar sidebar-secondary aside-area';
	 $attributes['aria-label']  = __( 'Secondary Sidebar', 'textdomain' );
	 $attributes['id'] = 'genesis-sidebar-secondary';

	 // return the attributes
	return $attributes;
 
}
add_filter( 'genesis_attr_sidebar-primary', 'prefix_swap_primary_w_secondary_sidebar_atts', 99 );
/* CSS is best and forget the php : see image in the comments. This is only partial css for that layout. */

@media (min-width: 1200px) { 


	/* ## sidebar-content-sidebar
	--------------------------------------------- */

	.sidebar-content-sidebar .content-sidebar-wrap {
	    width: 80%;
	    float: left;
	}

	.sidebar-content-sidebar .content {
	    width: 75%;
	    padding-left: 5%;
	    padding-right: 5%;
	    float: right;
	}

	.sidebar-content-sidebar .sidebar-primary {
	    width: 23%;
	    float: left;
	}

	.sidebar-content-sidebar .sidebar-secondary {
	    width: 20%;
	    padding-left: 1%;
	    float: right;
	}

	
}

以上是关于css Genesis Swap将Primary Sidebar放入Secondary Sidebar位置(最好使用CSS)的主要内容,如果未能解决你的问题,请参考以下文章

css 将CSS 3动画添加到您的Genesis主题

css 将CSS 3动画添加到您的Genesis主题

css 将CSS 3动画添加到您的Genesis主题

css Genesis将标题移到内容之上

css Genesis示例CSS重置

css 用锚链接修复标题重叠(Genesis)