css 使用与您的主页相似的小部件创建自定义页面模板

Posted 2021-05-13

// Copy & Rename Register Widgets in Functions.php

// Next step is to copy the functions for registering the homepage widgets and rename them from home-top etc to custom-top etc.

/** Register widget areas */
genesis_register_sidebar( array(
	'id'			=> 'custom-top',
	'name'			=> __( 'Custom Top', 'magazine' ),
	'description'	=> __( 'This is the custom top section.', 'magazine' ),
) );
genesis_register_sidebar( array(
	'id'			=> 'custom-left',
	'name'			=> __( 'Custom Left', 'magazine' ),
	'description'	=> __( 'This is the custom left section.', 'magazine' ),
) );
genesis_register_sidebar( array(
	'id'			=> 'custom-right',
	'name'			=> __( 'Custom Right', 'magazine' ),
	'description'	=> __( 'This is the custom right section.', 'magazine' ),
) );
genesis_register_sidebar( array(
	'id'			=> 'custom-bottom',
	'name'			=> __( 'Custom Bottom', 'magazine' ),
	'description'	=> __( 'This is the custom bottom section.', 'magazine' ),
) );

// Copy & Rename Home.php File

// Here’s the code you can use in a new file named custom.php for your page template.

// It includes all the home page widgets which have been renamed to custom.

<?php
remove_action( 'genesis_loop', 'genesis_do_loop' );
add_action( 'genesis_loop', 'magazine_custom_loop_helper' );
/*
Template Name: Custom
*/

function magazine_custom_loop_helper() {

	if ( is_active_sidebar( 'custom-top' ) || is_active_sidebar( 'custom-left' ) || is_active_sidebar( 'custom-right' ) || is_active_sidebar( 'custom-bottom' ) ) {

		if ( is_active_sidebar( 'custom-top' ) ) {
			echo '<div class="custom-top">';
			dynamic_sidebar( 'custom-top' );
			echo '</div><!-- end .custom-top -->';
		}

		if ( is_active_sidebar( 'custom-left' ) || is_active_sidebar( 'custom-right' ) ) {

			echo '<div class="custom-middle">';

			if ( is_active_sidebar( 'custom-left' ) ) {
				echo '<div class="custom-left">';
				dynamic_sidebar( 'custom-left' );
				echo '</div><!-- end .custom-left -->';
			}

			if ( is_active_sidebar( 'custom-right' ) ) {
				echo '<div class="custom-right">';
				dynamic_sidebar( 'custom-right' );
				echo '</div><!-- end .custom-right -->';
			}
		
			echo '</div><!-- end .custom-middle -->';
		
		}
		
		if ( is_active_sidebar( 'custom-bottom' ) ) {
			echo '<div class="custom-bottom">';
			dynamic_sidebar( 'custom-bottom' );
			echo '</div><!-- end .custom-bottom -->';
		}
		
	}
	
	else {
		genesis_standard_loop();
	}
	
}

genesis();

Creating a custom page template which is the same as your home page template isn’t difficult.

There’s different ways to do this depending on which child theme you are using.

Lets take a look a one method you can use to duplicate your home.php file and use a page template anywhere on your site.

Modifications

Clearly, you’ll need to modify the CSS code so it only effects the styling of your custom page template with widgets. Some of the styling for the home page is also used for styling sidebars so you may want to remove those classes from the code.
More Than One Slider

If you’re using the Genesis Responsive slider on the home page you won’t be able to use it on your custom page template unless you want it to output exactly the same images as your homepage.

Try using another slider plugin like Easing Slider or Slide Deck if you want to display videos or other custom content in your slider.

Using the Easing slider you can add another Slider which displays unique content by changing the is_home conditional tag to is_page (007) in the code and paste it into the Genesis Simple Hooks field in the location you want to display the slider.
Custom Sidebar For Custom Page Template

You could also easily display a custom sidebar with widgets on the same page you display your custom page template using Genesis Simple Sidebars or the custom Sidebars plugin.
More Widget Area’s

You could also add more custom widget area’s to your custom page template using conditional tags.

Here’s a tutorial about how to add a widget area before your content sidebar wrap (before custom-top widget). Simply change the conditional tag to is_page() and add the post i.d for your custom widgetized page template.

http://wpsites.net/web-design/add-widget-area-before-content/
Add Widget Area Before Content in Genesis

/*--- Copy Home CSS Classes & Rename to Custom

The final step is to use a text editor like Notepad++ and search and find all CSS code using the home class.

Paste this code into a new text file and search, find and replace home with custom. You can then paste the code at the end of your child themes style.css file. ---*/

/* Custom Page Template With Widgets
------------------------------------------------------------ */

.custom-bottom,
.custom-middle,
.custom-top {
	clear: both;
	font-size: 13px;
	line-height: 20px;
	margin: 0 0 20px;
	overflow: hidden;
	width: 610px;
}

.custom-bottom {
	margin: 0;
}

.custom-left {
	float: left;
	width: 290px;
}

.custom-right {
	float: right;
	width: 290px;
}

.custom h2 a,
.custom h2 a:visited {
	font-size: 20px;
	line-height: 24px;
}

.custom-middle h2 a,
.custom-middle h2 a:visited {
	font-size: 16px;
	line-height: 20px;
}

.custom-bottom h4,
.custom-middle h4 {
	margin: 0 0 10px;
}

.custom-middle .featuredpost img {
	margin: 0 0 10px;
}

.custom-middle .widget ul li {
	background: url(images/list.png) no-repeat top left;
	border-bottom: 1px dotted #ddd;
	list-style-type: none;
	margin: 0 0 7px;
	padding: 0 0 5px 18px;
	word-wrap: break-word;
}

.custom .featuredpost p {
	font-size: 13px;
	line-height: 20px;
}