在wordpress submit_button中添加一个类

Question

有没有办法添加＆＃34;类＆＃34;到这一行，使它坚持我的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管理员中按钮的默认选择器）设置的任何规则都会覆盖.wp-core-ui .button规则。

Answer 2

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

这应该可行:)你可以在这里查看submit_button（）的参数： https://developer.wordpress.org/reference/functions/submit_button/

如您所见，默认类应为“primary”。我不知道Wordpress是否需要，否则我想你可以试试：

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

Answer 3

您可以简单地添加您的课程：

prove -e "perl6 -Ilib" --norc -r t/