在wordpress submit_button中添加一个类

Question

有没有办法在这一行中添加一个"类",使其符合我的CSS样式表中的.button样式？

<?php submit_button(__('Update Profile')); ?>

谢谢

Answer 1

submit_button()是一个核心管理实用程序功能.它是组成WordPress管理主题的众多元素之一,它应该不被设计样式,因此当WP核心开发人员决定更改管理主题时它会优雅地改变.

但是,如果你真的想要设置特定按钮的样式,我建议这样做:为你的按钮添加一个自定义属性,名为data-style:

<?php 
$attributes = array( 'data-style' => 'custom' );
submit_button ( 'Update Profile', 'primary', 'submit', true, $attributes );
?>

而且,在CSS中,您现在可以使用以下方式设置按钮的样式:

[data-style="custom"] {
     /* style your button here */
}

更新:Trix的回答让我仔细研究了函数引用,并且realize($type)可以安全地用于向任何WP管理按钮添加自定义类.它很简单:

submit_button ( 'Update Profile', 'custom-class' );

请注意(根据函数参考),您的按钮仍将具有默认button类.这应该工作:

.button.custom-class {
     /* styles here */
}

更新2:我已经做了一些测试,显然,该功能与广告一样有效.实际输出

submit_button(__('Update Stuff'), "custom-class");

是:

<p class="submit">
    <input type="submit" 
           name="submit" 
           id="submit" 
           class="button custom-class" 
           value="Update Stuff">
</p>

适用于WP管理区域中按钮的大多数规则都带有前缀.wp-core-ui.在这种情况下,他们来自.wp-core-ui .button或.wp-core-ui .button:hover.所以以下选择器应该工作:

.wp-core-ui .button.custom-class {
     /* normal state rules here */
}
.wp-core-ui .button.custom-class:hover {
     /* hover state rules here */
}
.wp-core-ui .button.custom-class:focus,
.wp-core-ui .button-custom-class:active {
     /* active/focus state rules here */
}

例如,将其添加到仪表板CSS会更改我的按钮的外观,而不会影响其他按钮:

.wp-core-ui .button.custom-class {
    background-color: #272727;
    border-color: #666;
    color: #ddd;
}
.wp-core-ui .button.custom-class:hover {
    background: #212121;
    border-color: #666;
    color: white;
}

看起来像这样:

请注意,.custom-class规则将被设置的任何规则.wp-core-ui .button(WP Admin中按钮的默认选择器)覆盖.