Intereting Posts
qtranslate (определение языка), когда перевод для выбранного языка не существует WP-CLI не может перекомпилировать переменные PHP / среды PHP на Ubuntu Функциональные ссылки Документирование шаблонов Тэги для использования в пользовательских шаблонах тем? Почему is_page не работает, когда я помещаю его в файл functions.php? Правило перезаписи для пользовательских типов сообщений Ежемесячный и годовой архив Категории ссылок внезапно начали давать 404 ошибки сообщения запроса и разделять метаинформацию на отдельные div Как получить отдельное детское меню? Фоновый образ не отображается? Как удалить возможность для пользователя оставлять комментарии или сообщения на странице? Объединение функциональности плагина в тему Shortcode для создания и сохранения пароля в файле Как создавать коллекции, которые редактируются администратором? Статическая страница для рабочего стола или мобильного телефона Как показывать только родительские категории на боковой панели

Как влиять на информацию, отображаемую в виджетах внутри wp-admin

Во-первых, я хочу уточнить – это не вопрос CSS.

Я хочу изменить данные, отображаемые виджетами, когда он находится в закрытом / открытом режиме внутри wp-admin, на боковой панели или в построителе страниц. Вот изображение, чтобы лучше объяснить.

введите описание изображения здесь

Я хочу, чтобы иметь возможность добавить что-то / удалить из названия виджета динамически и использовать widget $ instance для этого

Желаемый результат:
Добавьте небольшую информационную метку с указанием мобильного / рабочего стола / обоих – это опция, выбранная внутри этого конкретного виджета

Идеи кто-нибудь?

ОБНОВИТЬ
Так как я вижу некоторое затруднение в решении этого вопроса:
Решение @cjbj работает красиво, но только в боковой панели и только частично:

add_filter ('dynamic_sidebar_params','wpse261042_change_widget_title'); function wpse261042_change_widget_title ($params) { $widget_id = $params[0]['widget_id']; $widget_instance = strrchr ($widget_id, '-'); $wlen = strlen ($widget_id); $ilen = strlen ($widget_instance); $widget_name = substr ($widget_id,0,$wlen-$ilen); $widget_instance = substr ($widget_instance,1); // get the data $widget_instances = get_option('widget_' . $widget_name); $data = $widget_instances[$widget_instance]; $use_mobile = $data['use_mobile']; // option inside my widget if($use_mobile == 'yes') {$string = 'desktop / mobile';} else {$string = 'desktop only';} $params[0]['widget_name'] .= $string; return $params; } 

Однако .. вы не можете вставить какой-либо html в эту строку (или, по крайней мере, я не смог)

Будет обновление, если я найду рабочее решение.

Solutions Collecting From Web of "Как влиять на информацию, отображаемую в виджетах внутри wp-admin"

Задний план:

Причина, по которой фильтрация с dynamic_sidebar_params не работает с HTML заключается в том, что WordPress wp_widget_control() HTML wp_widget_control() Widget Heading в функции wp_widget_control() следующим образом:

 $widget_title = esc_html( strip_tags( $sidebar_args['widget_name'] ) ); 

WordPress также разбивает HTML по умолчанию на JavaScript в wp-admin/js/widgets.js

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

Пользовательское решение для PHP:

Возможно создание настраиваемого PHP-решения, которое будет работать только в wp-admin -> Appearance -> Widgets , но не в Customizer -> Widgets .

WordPress добавляет wp_widget_control() (которая генерирует пользовательский интерфейс управления виджетами) с помощью dynamic_sidebar_params , поэтому его можно переопределить с помощью этого фильтра. Однако в customizer WordPress wp_widget_control() вызывает wp_widget_control() , поэтому это решение не будет работать для настраивателя.

Решение работает следующим образом (добавьте этот код в пользовательский плагин):

 add_filter( 'dynamic_sidebar_params', 'wpse261042_list_widget_controls_dynamic_sidebar', 20 ); function wpse261042_list_widget_controls_dynamic_sidebar( $params ) { global $wp_registered_widgets; // we only want this in wp-admin (may need different check to enable page builder) if( is_admin() ) { if ( is_array( $params ) && is_array( $params[0] ) && $params[0]['id'] !== 'wp_inactive_widgets' ) { $widget_id = $params[0]['widget_id']; if ( $wp_registered_widgets[$widget_id]['callback'] === 'wp_widget_control' ) { // here we are replacing wp_widget_control() function // with our custom wpse261042_widget_control() function $wp_registered_widgets[$widget_id]['callback'] = 'wpse261042_widget_control'; } } } return $params; } function wpse261042_widget_control( $sidebar_args ) { // here copy everything from the core wp_widget_control() function // and change only the part related to heading as you need } 

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

Пользовательское решение JavaScript (рекомендуется):

К счастью, эту настройку можно настроить с помощью JavaScript. WordPress обновляет Widget Control Заголовок с JavaScript в любом случае. Для этого WordPress сохраняет класс CSS-заполнителя in-widget-title стиле виджета и обновляет его с помощью значения поля title виджета из JavaScript CODE. Мы можем манипулировать этим, чтобы достичь нашей цели.

Связанные основные файлы JS:

Сначала вам нужно знать, что WordPress загружает файл wp-admin/js/customize-widgets.js (с дескриптором customize-widgets ) в wp-admin -> Customize -> Widgets (customizer) и wp-admin/js/widgets.js файл (с дескриптором admin-widgets ) в wp-admin -> Appearance -> Widgets для управления интерфейсом управления admin-widgets . Эти два файла выполняют аналогичные операции для разметки пользовательских интерфейсов Widget и манипулирования пользовательским интерфейсом Widget Heading, но также много разных вещей. Поэтому мы должны учитывать это для нашего решения на основе JavaScript.

Соображения для Customizer:

Customizer не загружает разметку Uid Uid сразу после загрузки страницы, вместо этого он загружается с помощью JavaScript, когда открыта соответствующая Widgets -> Sidebar . Поэтому нам нужно манипулировать интерфейсом Widget после того, как WordPress загрузит его. Например, поскольку customizer CODE основан на событиях, я использовал следующую строку CODE для установки обработчика события в нужный момент:

 section.expanded.bind( onExpanded ); 

Кроме того, customizer использовал AJAX для немедленной загрузки изменений, поэтому я использовал следующую строку для изменения данных:

 control.setting.bind( updateTitle ); 

Кроме того, мне нужно было задействовать событие с widget-added со следующей строкой CODE:

 $( document ).on( 'widget-added', add_widget ); 

Обычный для Customizer & wp-admin -> Appearance -> Widgets :

Оба вышеупомянутых файла JavaScript запускают widget-updated виджета, когда виджет обновляется. Хотя customizer делает это сразу с AJAX, в то время как традиционный администратор Widget делает это после нажатия кнопки « Сохранить» . Для этого я использовал следующую строку CODE:

 $( document ).on( 'widget-updated', modify_widget ); 

Соображения для wp-admin -> Appearance -> Widgets :

В отличие от пользовательского интерфейса, традиционный администратор Widgets загружает интерфейс управления Widget с помощью PHP, поэтому я прошел HTML-код пользовательского интерфейса, чтобы сделать начальные изменения следующим образом:

 $( '#widgets-right div.widgets-sortables div.widget' ).each( function() { // code } ); 

Пользовательский плагин КОД:

Ниже приведен полный плагин с поддержкой JavaScript, который будет работать как в wp-admin -> Appearance -> Widgets и в Customizer -> Widgets :

wpse-widget-control.php Плагин PHP-файл:

 <?php /** * Plugin Name: Widget Control * Plugin URI: https://wordpress.stackexchange.com/questions/261042/how-to-influence-the-information-displayed-on-widget-inside-wp-admin * Description: Display additional info on Widget Heading in wp-admin & customizer using JS * Author: Fayaz * Version: 1.0 * Author URI: http://fmy.me/ */ if( is_admin() ) { add_action( 'current_screen', 'wpse261042_widget_screen' ); } function wpse261042_widget_screen() { $currentScreen = get_current_screen(); if( $currentScreen->id === 'customize' ) { add_action( 'customize_controls_enqueue_scripts', 'wpse261042_customizer_widgets', 99 ); } else if( $currentScreen->id === 'widgets' ) { add_action( 'admin_enqueue_scripts', 'wpse261042_admin_widgets', 99 ); } } function wpse261042_customizer_widgets() { wp_enqueue_script( 'custom-widget-heading', plugin_dir_url( __FILE__ ) . 'custom-widget-heading.js', array( 'jquery', 'customize-widgets' ) ); } function wpse261042_admin_widgets() { wp_enqueue_script( 'custom-widget-heading', plugin_dir_url( __FILE__ ) . 'custom-widget-heading.js', array( 'jquery', 'admin-widgets' ) ); } 

custom-widget-heading.js Файл JavaScript:

 (function( wp, $ ) { var compare = { // field to compare field: 'title', // value to be compared with value: 'yes', // heading if compare.value matches with compare.field value heading: ' <i>(mobile/desktop)</i> ', // alternate heading alt_heading: ' <i>(desktop only)</i> ', // WP adds <span class="in-widget-title"></span> in each widget heading by default heading_selector: '.in-widget-title' }; var widgetIdSelector = '> .widget-inside > form > .widget-id'; // heading is added as prefix of already existing heading, modify this as needed function modify_heading( $elm, isMain ) { var html = $elm.html(); if ( html.indexOf( compare.heading ) == -1 && html.indexOf( compare.alt_heading ) == -1 ) { if( isMain ) { $elm.html( compare.heading + html ); } else { $elm.html( compare.alt_heading + html ); } } }; function parseFieldSelector( widgetId ) { return 'input[name="' + widgetIdToFieldPrefix( widgetId ) + '[' + compare.field + ']"]'; }; // @note: change this function if you don't want custom Heading change to appear for all the widgets. // If field variable is empty, then that means that field doesn't exist for that widget. // So use this logic if you don't want the custom heading manipulation if the field doesn't exist for a widget function modify_widget( evt, $widget, content ) { var field = null; var field_value = ''; if( content ) { field = $( content ).find( parseFieldSelector( $widget.find( widgetIdSelector ).val() ) ); } else { field = $widget.find( parseFieldSelector( $widget.find( widgetIdSelector ).val() ) ); } if( field ) { field_value = ( ( field.attr( 'type' ) != 'radio' && field.attr( 'type' ) != 'checkbox' ) || field.is( ':checked' ) ) ? field.val() : ''; } modify_heading( $widget.find( compare.heading_selector ), field_value == compare.value ); } function parseWidgetId( widgetId ) { var matches, parsed = { number: null, id_base: null }; matches = widgetId.match( /^(.+)-(\d+)$/ ); if ( matches ) { parsed.id_base = matches[1]; parsed.number = parseInt( matches[2], 10 ); } else { parsed.id_base = widgetId; } return parsed; } function widgetIdToSettingId( widgetId ) { var parsed = parseWidgetId( widgetId ), settingId; settingId = 'widget_' + parsed.id_base; if ( parsed.number ) { settingId += '[' + parsed.number + ']'; } return settingId; } function widgetIdToFieldPrefix( widgetId ) { var parsed = parseWidgetId( widgetId ), settingId; settingId = 'widget-' + parsed.id_base; if ( parsed.number ) { settingId += '[' + parsed.number + ']'; } return settingId; } var api = wp.customize; if( api ) { // We ate in the customizer widgetIdSelector = '> .widget-inside > .form > .widget-id'; api.bind( 'ready', function() { function add_widget( evt, $widget ) { var control; control = api.control( widgetIdToSettingId( $widget.find( widgetIdSelector ).val() ) ); function updateTitle( evt ) { modify_widget( null, $widget ); }; if ( control ) { control.setting.bind( updateTitle ); } updateTitle(); }; api.control.each( function ( control ) { if( control.id && 0 === control.id.indexOf( 'widget_' ) ) { api.section( control.section.get(), function( section ) { function onExpanded( isExpanded ) { if ( isExpanded ) { section.expanded.unbind( onExpanded ); modify_widget( null, control.container.find( '.widget' ), control.params.widget_content ); } }; if ( section.expanded() ) { onExpanded( true ); } else { section.expanded.bind( onExpanded ); } } ); } } ); $( document ).on( 'widget-added', add_widget ); } ); } else { // We are in wp-admin -> Appearance -> Widgets // Use proper condition and CODE if you want to target any page builder // that doesn't use WP Core Widget Markup or Core JavaScript $( window ).on( 'load', function() { $( '#widgets-right div.widgets-sortables div.widget' ).each( function() { modify_widget( 'non-customizer', $( this ) ); } ); $( document ).on( 'widget-added', modify_widget ); } ); } $( document ).on( 'widget-updated', modify_widget ); })( window.wp, jQuery ); 

Использование плагина:

Примечание. С приведенным выше примером CODE для плагинов, если вы установите для title виджета « yes , он покажет (мобильный / рабочий стол) в заголовке пользовательского интерфейса Widget Control, все остальные виджеты будут иметь (только для настольных компьютеров) в заголовке. В настройке изменение будет немедленно, в wp-admin -> widgets изменение изменится после save изменений. Конечно, вы можете изменить это поведение, изменив CODE (в JavaScript), чтобы изменить заголовок для другого field_name или показать только определенный заголовок для некоторых виджетов, а не для всех из них.

Например, скажем, что у вас есть поле с именем use_mobile , и вы хотите установить заголовок (мобильный / рабочий стол), когда он установлен на « yes . Затем установите для переменной compare значение:

 var compare = { field: 'use_mobile', value: 'yes', heading: ' <i>(mobile/desktop)</i> ', alt_heading: ' <i>(desktop only)</i> ', heading_selector: '.in-widget-title' }; 

Кроме того, если вы хотите изменить весь заголовок (а не только .in-widget-title ), вы можете изменить настройку heading_selector вместе с правильной разметкой для heading & alt_heading чтобы сделать это. Возможности бесконечны, но убедитесь, что основной код CODE WordPress не вызывает ошибок, если вы хотите быть слишком креативными с полученной разметкой.

Интеграция построителя страниц:

Независимо от того, будет ли какое-либо из этих решений работать для построителя страниц, будет зависеть от реализации этого проекта. Если он использует предоставленные WordPress методы для загрузки пользовательского интерфейса Widget Control, он должен работать без каких-либо изменений, иначе подобная (но модифицированная) импликация может быть возможна и для разработчиков страниц.

Давайте сначала посмотрим, можно ли изменить информацию, отображаемую в заголовках виджетов в admin. Этот список генерируется wp_list_widget_controls , который вызывает dynamic_sidebar , который содержит фильтр dynamic_sidebar_params для изменения параметров в элементах управления, включая заголовок. Попробуем:

 add_filter ('dynamic_sidebar_params','wpse261042_change_widget_title'); function wpse261042_change_widget_title ($params) { $string = ' Added info'; $params[0]['widget_name'] .= $string; return $params; } 

$string не точно в том месте, где вы указываете, но я бы сказал, что это достаточно хорошо.

Теперь нам нужно заменить $string некоторой информацией из текущего виджета. К счастью, мы знаем, какой виджет мы находимся, потому что $params также содержит widget_id . Я расскажу об этом ответе для объяснения того, как вы используете widget_id для извлечения данных виджетов. Вот так:

  // we need to separate the widget name and instance from the id $widget_id = $params[0]['widget_id']; $widget_instance = strrchr ($widget_id, '-'); $wlen = strlen ($widget_id); $ilen = strlen ($widget_instance); $widget_name = substr ($widget_id,0,$wlen-$ilen); $widget_instance = substr ($widget_instance,1); // get the data $widget_instances = get_option('widget_' . $widget_name); $data = $widget_instances[$widget_instance]; 

Теперь массив $data содержит экземпляры виджета, и вы можете выбрать, какой из них вы хотите передать в $string в функции.

У WordPress уже есть аналогичная функция, встроенная в интерфейс виджета. См. Например, как значение «Название», введенное пользователем, добавляется к заголовку этого виджета поиска:

Виджет поиска с прикрепленным заголовком

Код, который делает это, находится в wp-admin/js/widgets.js :

 appendTitle : function(widget) { var title = $('input[id*="-title"]', widget).val() || ''; if ( title ) { title = ': ' + title.replace(/<[^<>]+>/g, '').replace(/</g, '&lt;').replace(/>/g, '&gt;'); } $(widget).children('.widget-top').children('.widget-title').children() .children('.in-widget-title').html(title); }, 

Он находит элемент input внутри виджета с атрибутом id заканчивающимся на -title , и добавляет значение, введенное в этот ввод текста в строку заголовка виджета.

Итак, если настройки, которые вы имеете в виду, основаны на поле input (независимо от того, является ли text или radio и т. Д.), Вам просто нужно -title ему id заканчивающийся на -title , и WordPress позаботится о отдых.

И таким образом строка в строке заголовка будет автоматически обновляться, когда пользователь изменит настройку.