将一个类添加到wordpress submit_button

Is there a way to add a "class" to this line to make it adhere to the .button styling in my CSS stylesheet?

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

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

Thanks

3 个解决方案

#1

submit_button() is a core admin utility function. It's one of the many elements making up the WordPress admin theme and it's supposed not to be styled, so it will gracefully change when WP core developers decide to change the admin theme.

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

However, if you really want to style that particular button, here's what I suggest: add a custom attribute to your button, called data-style:

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

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

And, in your CSS you can now style your button with:

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

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

UPDATE: Trix's answer made me take a closer look at the function referrence and realized ($type) can safely be used to add custom classes to any WP admin button. It's as simple as:

更新:Trix的回答让我仔细看看函数referrence并实现($ type)可以安全地用于向任何WP管理按钮添加自定义类。它很简单:

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

Note that (according to the function reference) your button will still have the default button class. This should work:

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

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

UPDATE 2: I've done some more testing and apparently, the function works as advertised. The actual output of

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

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

was:

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

Most of the rules applying to the buttons in WP admin area are prefixed with .wp-core-ui. In this case, they come from .wp-core-ui .button or .wp-core-ui .button:hover. So the following selectors should work:

适用于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 */
}

For example, adding this to the dashboard CSS changed the appearance of my button, without affecting other buttons:

例如,将其添加到仪表板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;
}

Made it look like this:

看起来像这样:

Please note that .custom-class rules will be overridden by any rules set with .wp-core-ui .button (the default selector for buttons in WP Admin).

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

#2

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

This should work :) You can view the parameters of submit_button() here: https://developer.wordpress.org/reference/functions/submit_button/

这应该工作:)你可以在这里查看submit_button()的参数:https://developer.wordpress.org/reference/functions/submit_button/

As you can see, the default class should be "primary". I dont know if Wordpress requires that, otherwise I guess you could just try:

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

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

#3

You may simply ,add your class like this:

你可以简单地添加你的类,如下所示:

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

#1