17713433920 info@mac163.com

终于在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-plus

toggle-minus

使用简码

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

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

太懒?获取主题!

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

wordpress-toggles
wordpress-toggles

微信二维码

微信扫描二维码联系我们!
我们在微信上24小时期待你的声音
提供外贸路由器设备产品,轻松翻墙,解答:WP主题推荐,WP网站建设,Google SEO,百度SEO,专业服务器环境搭建等!


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