Ви викликаєте .pointer( 'open' );функцію javascript на всіх об'єктах покажчиків, тому не дивно, що всі вказівники з’являються одночасно ...
З custom_admin_pointers()цього приводу я не розумію, чому ви повертаєте всі вказівники (навіть неактивні) з цього пункту, а потім додаєте додаткову функцію, щоб перевірити, чи є якісь активні вказівники та перевірку всередині циклу покажчиків ( if ( $array['active'] ) {), щоб вибрати, щоб додати покажчик javascript чи ні. Чи не простіше просто повернути лише активні покажчики?
Більше того, ви додаєте, що JavaScript на всіх сторінках адміністратора - це не надто багато? Також врахуйте, що деякі елементи на зразок "# save-post" доступні лише на новій сторінці публікацій, тож чи не краще додати покажчики лише на новій сторінці горщика?
Нарешті, наскільки брудним є те, що javascript змішується з PHP, я думаю, ви повинні розглянути можливість використання wp_localize_scriptдля передачі даних у JavaScript.
План:
- Перемістіть визначення покажчиків у PHP в окремий файл, таким чином легко редагувати, а також видаляти розмітку з PHP-коду, все призводить до більш читабельності та обслуговування
- В покажчиках конфігурації додати властивість «де» , який буде використовуватися для набору , в якому адміністратор сторінки має з'явитися спливаюче вікно:
post-new.php, index.php...
- Напишіть клас, який буде обробляти завантаження, синтаксичний аналіз та фільтрацію інформації покажчиків
- Напишіть трохи js доброти, яка допоможе нам змінити типову кнопку «Видалити» на «Далі»
# 4 може (ймовірно) легко зробити , знаючи покажчик плагін добре, але це не мій випадок. Тож я буду використовувати загальний код jQuery для отримання результату, якщо хтось може покращити мій код, я буду вдячний.
Редагувати
Я редагував код (головним чином js), тому що я не розглядав різні речі: деякі покажчики можуть бути додані до того ж якоря, або ті ж покажчики можуть бути додані до неіснуючих або невидимих якорів. У всьому випадку, колишній код не працював, нова версія, схоже, вирішує цю проблему чудово.
Я також налаштував Gist із усім кодом, який я використовував для тестування.
Почнемо з пунктів №1 та №2 : створимо файл з ім’ям pointers.phpі напишіть туди:
<?php
$pointers = array();
$pointers['new-items'] = array(
'title' => sprintf( '<h3>%s</h3>', esc_html__( 'Add New Item' ) ),
'content' => sprintf( '<p>%s</p>', esc_html__( 'Easily add a new post..' ) ),
'anchor_id' => '#wp-admin-bar-new-content',
'edge' => 'top',
'align' => 'left',
'where' => array( 'index.php', 'post-new.php' ) // <-- Please note this
);
$pointers['story_cover_help'] = array(
'title' => sprintf( '<h3>%s</h3>', esc_html__( 'Another info' ) ),
'content' => sprintf( '<p>%s</p>', esc_html__( 'Lore ipsum....' ) ),
'anchor_id' => '#save-post',
'edge' => 'top',
'align' => 'right',
'where' => array( 'post-new.php' ) // <-- Please note this
);
// more pointers here...
return $pointers;
Усі налаштування покажчиків тут. Коли вам потрібно щось змінити, просто відкрийте цей файл і відредагуйте його.
Зверніть увагу на властивість "where", яка є масивом сторінок, де має бути доступний покажчик.
Якщо ви хочете відобразити покажчики на сторінки , що генерується плагін, погляд для цього рядка описані нижче public function filter( $page ) {і додати die($page);безпосередньо під ним. Потім відкрийте відповідну сторінку плагіна і використовувати цей рядок в whereвласності.
Добре, тепер точка # 3 .
Перш ніж писати клас, я просто хочу кодувати інтерфейс: там я розміщую коментарі, щоб ви могли краще зрозуміти, що робитиме клас.
<?php
interface PointersManagerInterface {
/**
* Load pointers from file and setup id with prefix and version.
* Cast pointers to objects.
*/
public function parse();
/**
* Remove from parse pointers dismissed ones and pointers
* that should not be shown on given page
*
* @param string $page Current admin page file
*/
public function filter( $page );
}
Думаю, має бути досить зрозуміло. Тепер запишемо клас, він буде містити 2 методи з інтерфейсу плюс конструктор.
<?php namespace GM;
class PointersManager implements PointersManagerInterface {
private $pfile;
private $version;
private $prefix;
private $pointers = array();
public function __construct( $file, $version, $prefix ) {
$this->pfile = file_exists( $file ) ? $file : FALSE;
$this->version = str_replace( '.', '_', $version );
$this->prefix = $prefix;
}
public function parse() {
if ( empty( $this->pfile ) ) return;
$pointers = (array) require_once $this->pfile;
if ( empty($pointers) ) return;
foreach ( $pointers as $i => $pointer ) {
$pointer['id'] = "{$this->prefix}{$this->version}_{$i}";
$this->pointers[$pointer['id']] = (object) $pointer;
}
}
public function filter( $page ) {
if ( empty( $this->pointers ) ) return array();
$uid = get_current_user_id();
$no = explode( ',', (string) get_user_meta( $uid, 'dismissed_wp_pointers', TRUE ) );
$active_ids = array_diff( array_keys( $this->pointers ), $no );
$good = array();
foreach( $this->pointers as $i => $pointer ) {
if (
in_array( $i, $active_ids, TRUE ) // is active
&& isset( $pointer->where ) // has where
&& in_array( $page, (array) $pointer->where, TRUE ) // current page is in where
) {
$good[] = $pointer;
}
}
$count = count( $good );
if ( $good === 0 ) return array();
foreach( array_values( $good ) as $i => $pointer ) {
$good[$i]->next = $i+1 < $count ? $good[$i+1]->id : '';
}
return $good;
}
}
Код дуже простий і робить саме те, що очікує інтерфейс.
Однак клас нічого не робить сам, нам потрібен гачок, де інстанціювати клас над запуском 2-х методів, передаючи належні аргументи.
Це 'admin_enqueue_scripts'ідеально підходить для нашої сфери: там ми матимемо доступ до поточної сторінки адміністрування, і ми також можемо передати необхідні сценарії та стилі.
add_action( 'admin_enqueue_scripts', function( $page ) {
$file = plugin_dir_path( __FILE__ ) . 'pointers.php';
// Arguments: pointers php file, version (dots will be replaced), prefix
$manager = new PointersManager( $file, '5.0', 'custom_admin_pointers' );
$manager->parse();
$pointers = $manager->filter( $page );
if ( empty( $pointers ) ) { // nothing to do if no pointers pass the filter
return;
}
wp_enqueue_style( 'wp-pointer' );
$js_url = plugins_url( 'pointers.js', __FILE__ );
wp_enqueue_script( 'custom_admin_pointers', $js_url, array('wp-pointer'), NULL, TRUE );
// data to pass to javascript
$data = array(
'next_label' => __( 'Next' ),
'close_label' => __('Close'),
'pointers' => $pointers
);
wp_localize_script( 'custom_admin_pointers', 'MyAdminPointers', $data );
} );
Нічого особливого: просто використовуйте клас для отримання даних вказівників, а якщо деякі вказівники передають фільтри, що задають стилі та сценарії. Потім передайте дані покажчиків до сценарію разом із локалізованою міткою "Далі" для кнопки.
Гаразд, зараз "найважча" частина: js. Ще раз хочу підкреслити, що я не знаю, що плагін покажчика використовує WordPress, тому те, що я роблю в своєму коді, можна зробити краще, якщо хтось це знає, проте мій код виконує свою роботу і, загалом кажучи, - це не так вже й погано.
( function($, MAP) {
$(document).on( 'MyAdminPointers.setup_done', function( e, data ) {
e.stopImmediatePropagation();
MAP.setPlugin( data ); // open first popup
} );
$(document).on( 'MyAdminPointers.current_ready', function( e ) {
e.stopImmediatePropagation();
MAP.openPointer(); // open a popup
} );
MAP.js_pointers = {}; // contain js-parsed pointer objects
MAP.first_pointer = false; // contain first pointer anchor jQuery object
MAP.current_pointer = false; // contain current pointer jQuery object
MAP.last_pointer = false; // contain last pointer jQuery object
MAP.visible_pointers = []; // contain ids of pointers whose anchors are visible
MAP.hasNext = function( data ) { // check if a given pointer has valid next property
return typeof data.next === 'string'
&& data.next !== ''
&& typeof MAP.js_pointers[data.next].data !== 'undefined'
&& typeof MAP.js_pointers[data.next].data.id === 'string';
};
MAP.isVisible = function( data ) { // check if anchor for given pointer is visible
return $.inArray( data.id, MAP.visible_pointers ) !== -1;
};
// given a pointer object, return its the anchor jQuery object if available
// otherwise return first available, lookin at next property of subsequent pointers
MAP.getPointerData = function( data ) {
var $target = $( data.anchor_id );
if ( $.inArray(data.id, MAP.visible_pointers) !== -1 ) {
return { target: $target, data: data };
}
$target = false;
while( MAP.hasNext( data ) && ! MAP.isVisible( data ) ) {
data = MAP.js_pointers[data.next].data;
if ( MAP.isVisible( data ) ) {
$target = $(data.anchor_id);
}
}
return MAP.isVisible( data )
? { target: $target, data: data }
: { target: false, data: false };
};
// take pointer data and setup pointer plugin for anchor element
MAP.setPlugin = function( data ) {
if ( typeof MAP.last_pointer === 'object') {
MAP.last_pointer.pointer('destroy');
MAP.last_pointer = false;
}
MAP.current_pointer = false;
var pointer_data = MAP.getPointerData( data );
if ( ! pointer_data.target || ! pointer_data.data ) {
return;
}
$target = pointer_data.target;
data = pointer_data.data;
$pointer = $target.pointer({
content: data.title + data.content,
position: { edge: data.edge, align: data.align },
close: function() {
// open next pointer if it exists
if ( MAP.hasNext( data ) ) {
MAP.setPlugin( MAP.js_pointers[data.next].data );
}
$.post( ajaxurl, { pointer: data.id, action: 'dismiss-wp-pointer' } );
}
});
MAP.current_pointer = { pointer: $pointer, data: data };
$(document).trigger( 'MyAdminPointers.current_ready' );
};
// scroll the page to current pointer then open it
MAP.openPointer = function() {
var $pointer = MAP.current_pointer.pointer;
if ( ! typeof $pointer === 'object' ) {
return;
}
$('html, body').animate({ // scroll page to pointer
scrollTop: $pointer.offset().top - 30
}, 300, function() { // when scroll complete
MAP.last_pointer = $pointer;
var $widget = $pointer.pointer('widget');
MAP.setNext( $widget, MAP.current_pointer.data );
$pointer.pointer( 'open' ); // open
});
};
// if there is a next pointer set button label to "Next", to "Close" otherwise
MAP.setNext = function( $widget, data ) {
if ( typeof $widget === 'object' ) {
var $buttons = $widget.find('.wp-pointer-buttons').eq(0);
var $close = $buttons.find('a.close').eq(0);
$button = $close.clone(true, true).removeClass('close');
$buttons.find('a.close').remove();
$button.addClass('button').addClass('button-primary');
has_next = false;
if ( MAP.hasNext( data ) ) {
has_next_data = MAP.getPointerData(MAP.js_pointers[data.next].data);
has_next = has_next_data.target && has_next_data.data;
}
var label = has_next ? MAP.next_label : MAP.close_label;
$button.html(label).appendTo($buttons);
}
};
$(MAP.pointers).each(function(index, pointer) { // loop pointers data
if( ! $().pointer ) return; // do nothing if pointer plugin isn't available
MAP.js_pointers[pointer.id] = { data: pointer };
var $target = $(pointer.anchor_id);
if ( $target.length && $target.is(':visible') ) { // anchor exists and is visible?
MAP.visible_pointers.push(pointer.id);
if ( ! MAP.first_pointer ) {
MAP.first_pointer = pointer;
}
}
if ( index === ( MAP.pointers.length - 1 ) && MAP.first_pointer ) {
$(document).trigger( 'MyAdminPointers.setup_done', MAP.first_pointer );
}
});
} )(jQuery, MyAdminPointers); // MyAdminPointers is passed by `wp_localize_script`
За допомогою коментарів код повинен бути досить зрозумілим, принаймні, я сподіваюся, що так.
Гаразд, ми зробили. Наш PHP простіший і краще організований, наш JavaScript читає, покажчики легше редагувати, і, що важливіше, все працює.
