终于在Themeforest上发布了我的第一个主题“ Classy WordPress Business Theme”之后，我决定分享一些教程和代码，说明如何在该主题中创建一些很棒的功能。

我不会一步一步地解释每一段代码，因为它很容易找出，相反，我将为您提供将短代码剪切/粘贴到您自己的主题中所需的一切（甚至更好！）

切换简码

创建Toggle简码非常简单。我们需要做的就是在我们的functions.php文件中添加一个简码函数，该函数具有2个选项：标题和颜色。这样，当您添加简码时，您可以选择可以单击以显示切换效果的标题和颜色，以便可以向切换添加各种颜色选项，就像您在上面的演示链接中看到的那样，其中我添加了白色和灰色样式，以便人们可以创建这种交替的颜色效果。

只需将简码复制并粘贴到您当前主题或子主题的functions.php函数文件中：

// Register the toggle shortcode
function toggle_shortcode( $atts, $content = null ) {
	
	extract( shortcode_atts( array(
		'title' => 'Click To Open',
		'color' => ''
	), $atts ) );

	return '<h3 class="toggle-trigger"><a href="#">' . esc_html( $title  ) . '</a></h3><div class="toggle_container">' . do_shortcode( wp_kses_post( $content ) ) . '</div>';

}
add_shortcode( 'toggle', 'toggle_shortcode' );

切换Javascript，CSS和图像

如果您想获得相同的外观，以下是我用来在高级WordPress主题上创建切换的所有代码。

Java脚本

这是Javascript。您可以将其放在custom.js文件中或主题的头部。

重要提示：请确保您已经包括jQuery库，因为其余js都需要使用jQuery库?

jQuery( function( $ ) {
	$( document ).ready(function() {
		$( ".toggle_container" ).hide();
		$( ".toggle-trigger" ).click( function() {
			$(this).toggleClass( "active" ).next().slideToggle( "normal" );
			return false;
		} );
	} );
} );

的CSS

这是CSS。只需将其放置在您的style.css文件中

/*toggle*/
.toggle-trigger {
	margin: 0px !important;
	font-size: 18px;
	padding: 10px;
	padding-left: 30px;
	background-color: #F5F5F5;
	background-image: url('images/shortcodes/toggle-plus.png');
	background-position: 10px center;
	background-repeat: no-repeat;
}

.toggle-trigger a {
	color: #333;
	text-decoration: none;
	display: block;
}

.toggle-trigger a:hover {
	color: #0489B7;
	text-decoration: underline;
}

.toggle-trigger.active{
	background-image: url('images/shortcodes/toggle-minus.png') !important;
	background-position: 10px center;
	background-repeat: no-repeat;
}

.toggle_container {
	overflow: hidden;
	padding: 20px 10px;
}

图片

以下是该短代码的两个图像。只需右键单击并单击“图像另存为”即可将图像保存到主题的图像文件夹中。

使用简码

现在，您已添加了简码所需的所有代码，您可以像下面这样轻松地将切换插入网站：

[toggle title="Your Toggle Title" color="white"]Toggle Content[/toggle]

太懒？获取主题！

单击下面的图片签出我的高级主题并购买。

---

---

需要提供WordPress主题/插件的汉化服务可以随时联系我们！另外成品WordPress网站以及半成品WordPress网站建设，海外Google SEO优化托管服务，百度SEO优化托管服务，Centos/Debian服务器WP专用环境搭建，WP缓存服务器搭建，我们都是你的首选，拥有多年WP开源程序服务经验，我们一直在坚持客户体验，没有最好，只有更好！