对于functions.php
/* Shortcode to display an action button. */
add_shortcode( 'action-button', 'action_button_shortcode' );
function action_button_shortcode( $atts ) {
extract( shortcode_atts(
array(
'color' => 'blue',
'title' => 'Title',
'subtitle' => 'Subtitle',
'url' => ''
),
$atts
));
return '<span class="action-button ' . $color . '-button"><a href="' . $url . '">' . $title . '<span class="subtitle">' . $subtitle . '</span>' . '</a></span>';
}
在文章编辑器中使用
[action-button color="blue" title="Download Now" subtitle="Version 1.0.1 – Mac OSX" url="#"]
style.css 文件的CSS
仅包含“蓝色”样式,您可以根据需要添加其他样式。
.action-button a:link, .action-button a:visited {
border-radius: 5px;
display: inline-block;
font: 700 16px Arial, Sans-Serif;
margin: 0 10px 20px 0;
-moz-border-radius: 5px;
padding: 14px 18px;
text-align: center;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0,0,0,0.3);
text-transform: uppercase;
-webkit-border-radius: 5px;
}
.action-button .subtitle {
display: block;
font: 400 11px Arial, Sans-Serif;
margin: 5px 0 0;
}
.blue-button a:link, .blue-button a:visited {
background-color: #5E9CB9;
background-image: -moz-linear-gradient(top, #5E9CB9, #4E7E95);
background-image: -webkit-gradient(linear, left top, left bottom, from(#5E9CB9), to(#4E7E95));
color: #FFF;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#5E9CB9', EndColorStr='#4E7E95');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#5E9CB9', EndColorStr='#4E7E95')";
}
.blue-button a:hover {
background-color: #68A9C8;
background-image: -moz-linear-gradient(top, #68A9C8, #598EA8);
background-image: -webkit-gradient(linear, left top, left bottom, from(#68A9C8), to(#598EA8));
color: #FFF;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#68A9C8', EndColorStr='#598EA8');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#68A9C8', EndColorStr='#598EA8')";
}
由 Matt Adams 提交。
感谢分享!效果很好……
很棒。即使在这里评论这个网站也让我很疯狂......因为这个评论系统。很棒的网站。
谢谢,但在IE8中无法使用。有什么想法吗?
这在Google Chrome中不起作用,有没有解决方法?谢谢
很棒的代码片段!
为什么您没有看到脚本的演示?
此致
如果您能向我们展示一些演示,那就太好了 :)
是的,我也在寻找一些演示,但我猜我将尝试更新主题,祝我好运 :)
嗨,它确实有效,但是如果我需要动态怎么办?
我是否需要为每种颜色编写完整的 CSS?
你能帮我为短代码创建一个动态颜色选择器吗?