如何在WordPress中添加自定义css按钮作为快捷码?

时间:2013-06-17 作者:afang

如何将自定义CSS按钮添加为以下短代码:

[按钮class=“mybutton1”链接=“主页”]

我有来自here

.myButton {

    -moz-box-shadow:inset 0px 1px 0px 0px #cf866c;
    -webkit-box-shadow:inset 0px 1px 0px 0px #cf866c;
    box-shadow:inset 0px 1px 0px 0px #cf866c;

    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #d0451b), color-stop(1, #bc3315));
    background:-moz-linear-gradient(top, #d0451b 5%, #bc3315 100%);
    background:-webkit-linear-gradient(top, #d0451b 5%, #bc3315 100%);
    background:-o-linear-gradient(top, #d0451b 5%, #bc3315 100%);
    background:-ms-linear-gradient(top, #d0451b 5%, #bc3315 100%);
    background:linear-gradient(to bottom, #d0451b 5%, #bc3315 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\'#d0451b\', endColorstr=\'#bc3315\',GradientType=0);

    background-color:#d0451b;

    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;

    border:1px solid #942911;

    display:inline-block;
    color:#ffffff;
    font-family:arial;
    font-size:13px;
    font-weight:normal;
    padding:6px 24px;
    text-decoration:none;

    text-shadow:0px 1px 0px #854629;

}
.myButton:hover {

    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #bc3315), color-stop(1, #d0451b));
    background:-moz-linear-gradient(top, #bc3315 5%, #d0451b 100%);
    background:-webkit-linear-gradient(top, #bc3315 5%, #d0451b 100%);
    background:-o-linear-gradient(top, #bc3315 5%, #d0451b 100%);
    background:-ms-linear-gradient(top, #bc3315 5%, #d0451b 100%);
    background:linear-gradient(to bottom, #bc3315 5%, #d0451b 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\'#bc3315\', endColorstr=\'#d0451b\',GradientType=0);

    background-color:#bc3315;
}
.myButton:active {
    position:relative;
    top:1px;
}
我希望将此作为快捷码添加到我的WordPress站点。我该怎么做?

谢谢

1 个回复
最合适的回答,由SO网友:jhussey 整理而成

function myButton($atts, $content = \'\'){    

    extract(shortcode_atts(array(
        \'text\' => \'\',
        \'link\' => \'\'
    ), $atts)); 

    $html = \'<a href="\' . $link . \'"><div class="myButton">\' . $text . \'</div></a>\';
    return $html;    
}

add_shortcode(\'mybutton\', \'myButton\');
将此添加到您的函数中。php,您将能够使用所需的快捷码调用wordpress中的按钮。

正如您所看到的,您设置的类和链接成为要在短代码中使用的变量。

如果要向按钮添加文本,可以将html更改为以下内容:

$html = \'<a href="\' . $link . \'"><div class="\' . $class . \'" >\' . $content . \'</div></a>\';
像这样使用它

[button class=\'mybutton\' link=\'home\']mybuttonname[/button]
希望这有帮助

结束

相关推荐

禁用IE 8及更早版本的css。

我正在试图找到一种方法来禁用IE8或更少版本中的任何东西的212样式表。是否有一个条件代码可以放在我的函数php文件中,使默认的Twentylex样式表(及其子主题子表)在这些特定浏览器中被忽略?我想从一块空白的石板上开始我的IE only样式表,并且只应用非常非常简单的样式。提前感谢