Есть ли способ добавить «класс» в эту строку, чтобы он соответствовал стилю .button в моей таблице стилей CSS?
<?php submit_button(__('Update Profile')); ?>
Спасибо
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).
<?php submit_button(__('Update Profile', 'button')); ?>
Это должно работать 🙂 Вы можете посмотреть параметры submit_button () здесь:
https://developer.wordpress.org/reference/functions/submit_button/
Как видите, класс по умолчанию должен быть «первичным». Я не знаю, требует ли WordPress этого, в противном случае, я думаю, вы могли бы просто попробовать:
<?php submit_button(__('Update Profile', 'button primary')); ?>
Вы можете просто добавить свой класс следующим образом:
submit_button( __('Update Profile'), 'my-custom-class' );