Как добавить атрибуты в шорткод

Question

Как добавить атрибуты в шорткод

13 июл. 2016 г., 20:36:35

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

Голосов: 4

Читая документацию, у меня есть:

function btn_shortcode( $atts, $content = null ) {
    $a = shortcode_atts( array(
        'class' => 'button',
    ), $atts );

    return '<a class="' . esc_attr($a['class']) . '">' . $content . '</a>';
}
add_shortcode( 'button', 'btn_shortcode' );

В редакторе WYSIWIG я ставлю [button class="btn btn-lg btn-default"]Узнать больше[/button] и это работает как нужно, но я хочу изменить мой шорткод, чтобы он делал следующее:

[button href="foo" class="btn btn-lg btn-default"]Узнать больше[/button]

Как мне изменить мою функцию, чтобы это позволить?

Darren Bachan

375

функции шорткод

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

Комментарии

Как бы вы реализовали стили?

Darren Bachan

13 июл. 2016 г. 21:58:33

Под стилями вы имеете в виду что-то вроде [button href="foo" class="btn btn-lg btn-default" style="font-weight:bold"]Узнать больше[/button] или что-то другое (если что-то другое, пожалуйста, приведите пример)?

Sledge Hammer

13 июл. 2016 г. 22:08:49

Да, например, такие свойства как font-weight, margin-top, background-color.

Darren Bachan

13 июл. 2016 г. 22:20:46

Посмотрите мой отредактированный ответ. Для каждого нового атрибута, который вам нужен, просто добавьте еще один элемент в массив (и используйте его позже, конечно).

Sledge Hammer

13 июл. 2016 г. 22:54:01

так в массиве я добавляю 'background-color' => 'whatever', но как мне добавить это в стиль? Я все еще немного запутался.

Darren Bachan

13 июл. 2016 г. 23:59:59

Показать остальные 8 комментариев

Sledge Hammer 238 · Accepted Answer · 2016-07-13T21:16:36Z

Вам просто нужно добавить еще один элемент в массив (а затем вывести его):

function btn_shortcode( $atts, $content = null ) {
    $a = shortcode_atts( array(
        'class' => 'button',
        'href'  =>  '#'
    ), $atts );

    return '<a class="' . esc_attr($a['class']) . '" href="' . esc_attr($a['href']) . '">' . $content . '</a>';
}
add_shortcode( 'button', 'btn_shortcode' );

//РЕДАКТИРОВАНИЕ:

Чтобы добавить пользовательские стили, вам также просто нужно добавить еще один элемент в массив:

function btn_shortcode( $atts, $content = null ) {
    $a = shortcode_atts( array(
        'class' => 'button',
        'href'  =>  '#',
        'style' =>  ''
    ), $atts );

    return '<a class="' . esc_attr($a['class']) . '" href="' . esc_attr($a['href']) . '" style="' . esc_attr($a['style']) . '">' . $content . '</a>';
}
add_shortcode( 'button', 'btn_shortcode' );

Пример использования:

[button href="foo" class="btn btn-lg btn-default" style="font-weight:bold; margin-top:50px; background-color: #999"]Узнать больше[/button]

//РЕДАКТИРОВАНИЕ 2:

Вы можете добавить различные атрибуты стиля в шорткод, а затем вывести их все внутри атрибута style HTML-тега, но это ограничит пользовательские CSS только этими предопределенными атрибутами, и вам также нужно иметь некоторые предопределенные значения для каждого из них на случай, если пользователь оставит их пустыми. Если некоторые из них останутся пустыми, а у вас нет предопределенных значений, вы можете получить что-то вроде этого - <a href="#foo" class="button" style="font-weight:; margin-top: 20px; background-color:;"

function btn_shortcode( $atts, $content = null ) {
    $a = shortcode_atts( array(
        'class' => 'button',
        'href'  =>  '#',
        'background-color' =>  '#999',
        'font-weight' => 'normal',
        'margin-top' => '10px'

    ), $atts );

    return '<a class="' . esc_attr($a['class']) . '" href="' . esc_attr($a['href']) . '" style="font-weight:' . esc_attr($a['font-weight']) . '; background-color' . esc_attr($a['background-color']). '; margin-top:' . esc_attr($a['margin-top']) . ';">' . $content . '</a>';
}

Пример использования:

[button href="foo" class="btn btn-lg btn-default" font-weight="bold" margin-top="50px" background-color="#999"]Узнать больше[/button]