Добавить класс в WordPress submit_button

Question

Есть ли способ добавить "класс" в эту строку, чтобы он соответствовал стилю.button в моей таблице стилей CSS?

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

---

ОБНОВЛЕНИЕ: ответ Трикс заставил меня поближе взглянуть на функцию ссылки и понял ($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).

Answer 2

Вы можете просто добавить свой класс следующим образом:

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

Answer 3

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

Это должно работать:) Вы можете просмотреть параметры submit_button() здесь: https://developer.wordpress.org/reference/functions/submit_button/

Как видите, класс по умолчанию должен быть "первичным". Я не знаю, если Wordpress требует этого, в противном случае я думаю, вы могли бы просто попробовать:

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