Додавання div для загортання вмісту віджетів після заголовка віджета


10

Я намагаюся додати div до вмісту віджета на своїй динамічній бічній панелі.

Ось код реєстру;

register_sidebar(array(
        'name' => "Sidebar1",
        'id' => 'home-sidebar-1',
        'before_widget' => '<div class="sidebar-box">',
        'after_widget' => '</div>',
        'before_title' => '<div class="title">',
        'after_title' => '</div>',
    ));

Але цей код викликає подібне;

<div class="sidebar-box">
    <div class="title">{WIDGET TITLE}</div>
     {WIDGET CONTENT}
</div>

Ось що я намагаюся зробити;

<div class="sidebar-box">
    <div class="title">{WIDGET TITLE}</div>
    <div class="content">
           {WIDGET CONTENT}
    </div> 
</div>

Як це можна зробити?

Відповіді:


18

Окрім відповіді Тошо, ось що вам потрібно для надійного рішення:

// if no title then add widget content wrapper to before widget
add_filter( 'dynamic_sidebar_params', 'check_sidebar_params' );
function check_sidebar_params( $params ) {
    global $wp_registered_widgets;

    $settings_getter = $wp_registered_widgets[ $params[0]['widget_id'] ]['callback'][0];
    $settings = $settings_getter->get_settings();
    $settings = $settings[ $params[1]['number'] ];

    if ( $params[0][ 'after_widget' ] == '</div></div>' && isset( $settings[ 'title' ] ) && empty( $settings[ 'title' ] ) )
        $params[0][ 'before_widget' ] .= '<div class="content">';

    return $params;
}

З відповіді Тошо:

register_sidebar(array(
    'name' => "Sidebar1",
    'id' => 'home-sidebar-1',
    'before_widget' => '<div class="sidebar-box">',
    'after_widget' => '</div></div>',
    'before_title' => '<div class="title">',
    'after_title' => '</div><div class="content">',
));

Що це робить:

  • перевіряємо параметри для зареєстрованої бічній панелі для віджетів , що закінчуються на 2 закривають <div>з
  • перевіряє, чи немає назви
  • якщо ні, то він модифікує before_widgetвихід, щоб відобразити відкриваючий вміст віджета div

Ви можете використовувати цей підхід, щоб змінити аргументи бічної панелі іншими способами на основі параметрів екземпляра віджета.


У мене є проблема з цим: деякі віджети (наприклад, WP за замовчуванням, наприклад) встановлюють за замовчуванням заголовок, якщо ви залишаєте це порожнім. Таким чином, ваша функція додає div, тому що в парамах у цьому пункті немає заголовка, але віджет додає його згодом і код змішується. Чи знаєте ви, як перевірити заголовок віджета "в межах"? Спасибі
Cmorales

Не без додавання віджету за допомогою перевірки віджетів або якогось жахливо складного коду, щоб віджет мовчки вийшов, а потім розібрав його на заголовок ... Подумайте
sanchothefat

Можливо, підключення до цього codex.wordpress.org/Function_Reference/the_widget допоможе? Вони використовують його (з інших причин) у цій статті wp.smashingmagazine.com/2012/12/11/…
Cmorales

1
the_widget()не використовується у dynamic_sidebar()функції, це засіб виклику будь-якого віджета з опціями, які ви вказали на місці. Це ще одне місце для фільтрації, хоча моє рішення не охоплює цю подію. Ура
sanchothefat

2

Додайте другий divдо параметра заголовка:

register_sidebar(array(
        'name' => "Sidebar1",
        'id' => 'home-sidebar-1',
        'before_widget' => '<div class="sidebar-box">',
        'after_widget' => '</div></div>',
        'before_title' => '<div class="title">',
        'after_title' => '</div><div class="content">',
    ));

Це не вдається, якщо немає заголовка віджета - це можна зробити, хоча
sanchothefat

Так, це не вдається, коли немає титулу ..
MBraiN

Я додав відповідь з кодом, щоб вирішити проблему з заголовками. Напевно, слід об'єднати його з Тошо, але у нього вже є епічна
реппа

2

Мені сподобалася ідея відповідей @tosco і @sanchothefat - однак я боровся з цією комбінацією, оскільки, empty( $settings[ 'title' ]справді, може бути повернути справжнє, сам віджет може вивести заголовок за замовчуванням, якщо жоден не встановлений. Ця назва потім загорнуті в before_titleі after_titleрозмітці і знову розривах сторінок. Це так і є з деякими віджетами за замовчуванням.

Простіше просто дотримуватися стандартних параметрів реєстрації віджетів;

register_sidebar(array(
    'id' => 'sidebar1',
    'name' => __( 'Sidebar 1', 'bonestheme' ),
    'description' => __( 'The first (primary) sidebar.', 'bonestheme' ),
    'before_widget' => '<div class="block">',
    'after_widget' => '</div>',
    'before_title' => '<div class="block-title">',
    'after_title' => '</div>',
));

а потім додайте сюди дію фільтра відповідно до відповіді Марвентуса;

http://wordpress.org/support/topic/add-html-wrapper-around-widget-content

function widget_content_wrap($content) {
    $content = '<div class="block-content">'.$content.'</div>';
    return $content;
}
add_filter('widget_text', 'widget_content_wrap');

3
і це працює лише для "Текстових віджетів"
Silver Moon

1

Ось що ви робите для досягнення цього:

register_sidebar(array(
        'name' => "Sidebar1",
        'id' => 'home-sidebar-1',
        'before_widget' => '<div class="sidebar-box"><div class="content">',
        'after_widget' => '</div></div>',
        'before_title' => '</div><div class="title">',
        'after_title' => '</div><div class="content">',
    ))

Коли титулу немає, ви отримаєте:

<div class="sidebar-box"><div class="content">
{CONTENT}
</div></div>

Коли буде назва, ви отримаєте:

<div class="sidebar-box"><div class="content">
</div><div class="title">
{TITLE}
<div class="content">
{CONTENT}
</div></div>

Щоб переконатися, що перший порожній вміст-div не відображається, в останньому випадку ви додасте це до свого css:

.sidebar-box .content:empty {display:none !important;}

0

Переглянувши попередні відповіді, я думаю, що я вирішив проблему Cmorales, ототожнювану з відповіддю sanchothefat. Визначте свій віджет наступним чином:

register_sidebar( array(
    'name' => 'Sidebar',
    'id' => 'sidebar',
    'before_widget' => '<div class="panel panel-default %2$s" id="%1$s">',
    'after_widget' => '</div>',
    'before_title' => '',
    'after_title' => ''
) );

Важливо, щоб before_titleі after_titleзначення за замовчуванням були видалені. Після деяких спроб та помилок я зазначив, що перший фільтр, який показав заголовок за замовчуванням, був widget_title. Потім використовуйте widget_titleфільтр так:

function widget_title( $title ) {
    if ( $title )
        $title = '<div class="panel-heading"><h3 class="panel-title">' . $title . '</h3></div>';
    $title .= '<div class="panel-body">';
    return $title;
}

В основному, <div class="panel-heading"><h3 class="panel-title">це моє before_titleі </h3></div>є моїм after_title. Нарешті, скористайтесь, dynamic_sidebar_paramsщоб додати закриваючий div для нашого контенту:

function dynamic_sidebar_params( $params ) {
    $params[0]['after_widget'] = '</div>' . $params[0]['after_widget'];
    return $params;
}

Це не дуже, але це працює.


Спочатку був дуже схвильований таким підходом, але я зіткнувся з проблемою із віджетами, які використовують esc_html ($ title) (тобто BuddyPress). У такому випадку доданий HTML відображається у формі, що не відображається, а не виводиться на передній частині.
Райан

0

Я просто трохи змінив код, щоб не потрібно торкатися до_утову register_sidebar . Реєстрація бічної панелі звичайним способом:

register_sidebar(array(
    'name' => "Sidebar1",
    'id' => 'home-sidebar-1',
    'before_widget' => '<div class="sidebar-box">',
    'after_widget' => '</div>',
    'before_title' => '<div class="title">',
    'after_title' => '</div>',
));

А нижче - модифікований код із рішення Санчотефата:

/**
 * If no title given then add widget-content wrapper to before_widget
 * If title given then add content wrapper to before_widget
*/
add_filter('dynamic_sidebar_params', 'check_widget_template');
function check_widget_template($params){
    global $wp_registered_widgets;

    $settings_obj = $wp_registered_widgets[$params[0]['widget_id']]['callback'][0];
    $the_settings = $settings_obj->get_settings();
    $the_settings = $the_settings[$params[1]['number']];

    if (isset($params[0]['id']) && $params[0]['id'] == 'home-sidebar-1') {
        if (!isset($the_settings['title']) && empty($the_settings['title'])) {
            $params[0]['before_widget'] .= '<div class="widget-inner">';
            $params[0]['after_widget']  .= '</div>';
        } else {
            $params[0]['after_widget']  .= '</div>';
            $params[0]['after_title']   .= '<div class="widget-inner">';
        }
    }

    return $params;
}

0

Як зазначалося в коментарях, деякі основні віджети додають їм власний заголовок, який потім двічі перегортається вмістом div. Щоб видалити їх, ви можете просто повернути порожній рядок. Єдиним недоліком є ​​те, що потрібно вводити всі заголовки вручну.

function remove_default_widget_title( $title, $instance = [], $id = '' ) {
    if ( isset($instance['title']) && trim($instance['title']) == '' ) {
        return '';
    }
    return $title;
};
add_filter( 'widget_title', 'remove_default_widget_title', 10, 3 );

Виправте мене, якщо я щось тут пропускаю, але я думаю, що це досить солідно.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.