添加一个 class 到 wordpress submit_button

Question

有没有办法向这一行添加 "class" 以使其符合我的 CSS 样式表中的 .button 样式？

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

谢谢

Answer 1

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

这应该有效 :) 您可以在此处查看 submit_button() 的参数： https://developer.wordpress.org/reference/functions/submit_button/

如您所见，默认的class应该是"primary"。我不知道 Wordpress 是否需要，否则我想你可以试试：

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

Answer 2

您可以像这样简单地添加您的 class：

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

Answer 3

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 */
}

更新： made me take a closer look at the function referrence 和实现 ($type) 可以安全地用于将自定义 classes 添加到任何 WP 管理按钮。就这么简单：

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

请注意（根据函数参考）您的按钮仍将具有默认值 button class。这应该有效：

.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 中按钮的默认选择器）设置的任何规则覆盖。

添加一个 class 到 wordpress submit_button

Add a class to wordpress submit_button

php

css

wordpress

submit-button