Добавляем ссылку на удобное редактирование виджета в wordpress

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

Для этого понадобилось воспользоваться всего одним фильтром widget_display_callback внутрь которого я просто добавил ссылку на редактирование перед начально закрывающего элемента в after_widget.

/**
 * Add link edit widget.
 */
function htmlandcms_widget_display_callback( $instance, WP_Widget $widget, $args ) {
    if ( current_user_can( 'edit_theme_options' ) ) {
        $args[ 'after_widget' ] = htmlandcms_get_edit_widget_link( $widget->id, __( 'Edit' ), '', '', 'edit-link' ) . $args[ 'after_widget' ];
        $widget->widget($args, $instance);
        return FALSE;
    }
    return $instance;
}

add_filter( 'widget_display_callback', 'htmlandcms_widget_display_callback', 20, 3 );

/**
 * Return link edit widget.
 *
 * @param int $id Widget ID.
 * @param string $link Optional. Anchor text.
 * @param string $before Optional. Display before edit link.
 * @param string $after Optional. Display after edit link.
 */
function htmlandcms_get_edit_widget_link( $id, $link = NULL, $before = '', $after = '', $link_class = '' ) {
    if ( !current_user_can( 'edit_theme_options' ) ) {
        return;
    }

    if ( NULL === $link ) {
        $link = __( 'Edit This' );
    }
    if ( !empty( $link_class ) ) {
        $link_class = ' ' . esc_attr( $link_class );
    }

    $link = '<a href="' . admin_url( 'widgets.php' ) . '?edit_widget=' . $id . '" title="' . __( 'Edit widget' ) . '">' . $link . '</a>';
    return $before . apply_filters( 'edit_widget_link', $link, $id ) . $after;
}

В ссылке, которая ведет на страницу редактирования в админку, добавил GET параметр с уникальным идентификатором виджета, чтобы потом в админке с помощью скрипта раскрыть нужный виджет в нужном сайдбаре. Сохраняем следующий код в .js файле, я выбрал название easy-widgets-edit.admin.js в папке js/ в корне темы.

(function ( $ ) {
    function getUrlVars() {
        var vars = {};
        var parts = window.location.href.replace( /[?&]+([^=&]+)=([^&]*)/gi, function ( m, key, value ) {
            vars[key] = value;
        } );
        return vars;
    }

    $( document ).ready( function () {
        var vars = getUrlVars();
        var widget = $( 'div.widget[id$="' + vars['edit_widget'] + '"]' );
        if ( widget.length > 0 ) {
            var widgetsHolder = widget.parents( '.widgets-holder-wrap' );
            if ( widgetsHolder.hasClass( 'closed' ) ) {
                widgetsHolder.find( '.sidebar-name-arrow' ).click();
            }
            $( '.widget-liquid-right' ).find( '.widgets-holder-wrap' ).not( widgetsHolder ).addClass( 'closed' );
            if ( widget.find( '.widget-inside' ).is( ':hidden' ) ) {
                widget.find( '.widget-title-action a.widget-action' ).click();
            }
        }
    } );
})( jQuery );

Тут на самом деле все просто, берем все GET параметры и строки адреса, находим виджет id которого заканчивается на переданный параметр edit_widget, дальше находим родителя виджета, т.е. сайдбар и раскрываем его если он закрыт, далее скрываем все остальные садбары и раскрываем наш виджет. Теперь осталось подключить скрипт.

/**
 * Add script to admin pages
 */
function htmlandcms_admin_init() {
    wp_enqueue_script( 'easy_widgets_edit', get_stylesheet_directory_uri() . '/js/easy-widgets-edit.admin.js', array( 'jquery' ), '0.1', TRUE );
}

add_action( 'admin_init', 'htmlandcms_admin_init' );

Вот и все, теперь заказчик будет наслаждаться удобным редактированием виджетов. Хотя ссылку на редактирование все-таки лучше сделать чуточку красивее с помощью CSS.

Спасибо за чтение, с радостью отвечу на вопросы в комментариях.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *