php - 向 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's answer 让我更仔细地查看 function referrence 并意识到( $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 中按钮的默认选择器)设置的任何规则覆盖。