【问题标题】:Add a class to wordpress submit_button向 wordpress submit_button 添加一个类
【发布时间】:2016-05-16 20:11:44
【问题描述】:

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

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

谢谢

【问题讨论】:

  • 你能在 html 中显示这段代码会产生什么吗?
  • submit_button 不是原生 PHP。您在哪里使用此代码?
  • 为什么不在 HTML 文件中设置按钮样式?
  • @HebleV 她/他需要在 Wordpress 中使用submit_button

标签: php css wordpress submit-button


【解决方案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 管理中按钮的默认选择器)设置的任何规则覆盖。

【讨论】:

  • 不错的解决方案。这有效,并且不需要课程。
  • 这很好,但这不是问题的答案。
  • 他想要添加一个类的原因是为了给按钮设置样式,而不是给它一个唯一的标识符。我想我提供了方法,因为向这种类型的核心元素添加类并不简单。
  • 这可能是真的,但请考虑将来对这个问题的引用。作为问题标题,不描述您的评论
  • 好的,所以@AndreiGheorghiu 你的方法奏效了......有点......我添加了你的代码,它把按钮放大了大约两倍,使它比其他按钮高约 2px ......它没有添加任何类型的CSS样式......当我尝试添加样式时没有任何变化......即使在覆盖其他任何东西之后添加了“!important”......奇怪
【解决方案2】:

你可以简单地像这样添加你的类:

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

【讨论】:

  • 你说得对,$type 接受自定义类。这是向 WP 管理按钮添加类的正确方法。
【解决方案3】:
<?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')); ?>

【讨论】:

  • "$type (string) (可选)按钮的类型和 CSS 类。核心值包括 'primary'、'secondary'、'delete'。默认 'primary' 默认值: '主要'"
  • 请在此处阅读:codex.wordpress.org/Function_Reference/submit_button "注意:$type 可以是单个值,也可以是空格分隔的值列表或值数组。这些值决定了按钮的 HTML 类。 "我知道你在说什么 - primary 应该已经将“primary-button”和“button”都设置为类,但我回答了如何将自定义类添加到 submit_button 函数的问题;)
  • "任何其他类型值 'foo' 使类 'foo'"
猜你喜欢
  • 1970-01-01
  • 2018-01-07
  • 2017-02-11
  • 2011-12-03
  • 2012-02-02
  • 1970-01-01
  • 2020-05-11
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多