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

Question

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

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

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

Спасибо

2

css php submit-button wordpress

Решение

Другие решения

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

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

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

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

2

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

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

2

Источник

Accepted Answer

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).

5