Классы основной и вторичной кнопок

Question

Классы основной и вторичной кнопок

2 сент. 2014 г., 22:14:42

Просмотры: 44K

Голосов: 7

Я пытаюсь стилизовать некоторые кнопки в функции (ниже) с помощью стандартных классов кнопок WordPress, но кнопки не отображаются (показывается только текст гиперссылки).

Я также попробовал деактивировать все плагины и переключиться на стандартную тему WP, чтобы проверить, будут ли отображаться кнопки, но проблема все равно сохраняется. Возможно, проблема в тегах a или самих классах?

Вот функция:

// Добавляем фильтр для панели редактирования профиля
add_filter( 'upme_profile_edit_bar','upme_profile_edit_bar', 10, 3 );
function upme_profile_edit_bar( $edit_buttons , $id, $params ) {
    $edit_buttons .= '<a class="button button-primary" href="http://myurlhere.com" >Пользовательская кнопка 1</a>';   
    $edit_buttons .= '<a class="button button-secondary" href="http://myotherurlhere.com" >Пользовательская кнопка 2</a>';
    return $edit_buttons;
}

Спасибо за любую помощь.

irishrunner16

107

кнопки

Комментарии

Пожалуйста, добавляйте дополнительную информацию в виде [правок] к вашему вопросу - вместо комментариев.

kaiser

3 сент. 2014 г. 18:28:35

Все ответы на вопрос

Комментарии

Ага, именно это мне и было нужно! Я уже начал рвать на себе волосы, пытаясь понять, почему они не загружаются. Огромное спасибо, что нашли время так подробно объяснить решения. Я искренне это ценю!

irishrunner16

4 сент. 2014 г. 23:34:19

mrwweb 10.3K · Accepted Answer · 2014-09-04T18:53:28Z

Похоже, вы пытаетесь использовать классы стилей из админки WordPress на фронтенде. Однако эти стили не загружаются. У вас есть два варианта, один из которых я не рекомендую.

Способ №1: Рекомендуемый вариант

Я рекомендую просто скопировать и вставить нужные стили кнопок в ваш дочернюю тему или плагин для кастомных CSS (пример, один из многих).

Вот готовый код с выбранными и очищенными стилями:

.button,
.button-primary,
.button-secondary {
    display: inline-block;
    text-decoration: none;
    font-size: 13px;
    line-height: 26px;
    height: 28px;
    margin: 0;
    padding: 0 10px 1px;
    cursor: pointer;
    border-width: 1px;
    border-style: solid;
    -webkit-appearance: none;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    white-space: nowrap;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.button,
.button-secondary {
    color: #555;
    border-color: #cccccc;
    background: #f7f7f7;
    -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba(0,0,0,.08);
    box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba(0,0,0,.08);
    vertical-align: top;
}

p .button {
    vertical-align: baseline;
}

.button:hover,
.button-secondary:hover,
.button:focus,
.button-secondary:focus {
    background: #fafafa;
    border-color: #999;
    color: #222;
}

.button:focus,
.button-secondary:focus {
    -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.2);
    box-shadow: 1px 1px 1px rgba(0,0,0,.2);
}

.button:active,
.button-secondary:active {
    background: #eee;
    border-color: #999;
    color: #333;
    -webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
    box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
}

.button-primary {
    background: #2ea2cc;
    border-color: #0074a2;
    -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.5), 0 1px 0 rgba(0,0,0,.15);
    box-shadow: inset 0 1px 0 rgba(120,200,230,0.5), 0 1px 0 rgba(0,0,0,.15);
    color: #fff;
    text-decoration: none;
}

.button-primary:hover,
.button-primary:focus {
    background: #1e8cbe;
    border-color: #0074a2;
    -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6);
    box-shadow: inset 0 1px 0 rgba(120,200,230,0.6);
    color: #fff;
}

.button-primary:focus {
    border-color: #0e3950;
    -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 1px 1px 2px rgba(0,0,0,0.4);
    box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 1px 1px 2px rgba(0,0,0,0.4);
}

.button-primary:active {
    background: #1b7aa6;
    border-color: #005684;
    color: rgba(255,255,255,0.95);
    -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
    box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
    vertical-align: top;
}

Преимущества этого подхода:

Гарантия, что даже если WordPress изменит имена классов или стили, ваши кнопки сохранят внешний вид.
Если WordPress переместит файлы стилей, ваши стили останутся.
Вы получаете именно то, что нужно, без лишних стилей.

Способ №2: Не рекомендую

Не уверен, зачем я вообще включил этот вариант, но возможно кому-то пригодится. Альтернатива — загружать стили кнопок WordPress на фронтенде. Это имеет все недостатки, противоположные преимуществам Способа №1.

Для реализации потребуется: 1. Загрузить таблицу стилей. 1. Изменить разметку, так как все стили работают только если они обёрнуты в элемент с классом wp-core-ui. (Что уже говорит о том, что загрузка этих стилей не предназначена для этого и является плохой идеей!)

Для загрузки стилей добавьте в functions.php дочерней темы, кастомный плагин или mu-plugin:

function wpse159952_load_wp_button_styles() {
    wp_enqueue_style( 'wpse159952_wp_button_styles', includes_url() . 'css/buttons.css', array(), get_bloginfo( 'version' ) );
}
add_action( 'wp_enqueue_scripts', 'wpse159952_load_wp_button_styles' );