Crie tutorial do WP para usuários com ponteiro administrativo usando o próximo botão para navegação

8

Eu pretendo criar um tutorial sobre meus usuários para a área de administração. Para conseguir isso, estou usando os ponteiros de administração disponíveis no núcleo do WP. Meu objetivo:

Estouquaselá.Oqueeutenhoatéagora...

Enfileirarscriptsdeponteirowp:

add_action('admin_enqueue_scripts','custom_admin_pointers_header');functioncustom_admin_pointers_header(){if(custom_admin_pointers_check()){add_action('admin_print_footer_scripts','custom_admin_pointers_footer');wp_enqueue_script('wp-pointer');wp_enqueue_style('wp-pointer');}}

Funçõesauxiliares,incluindoverificaçãocondicionalescriptderodapé:

functioncustom_admin_pointers_check(){$admin_pointers=custom_admin_pointers();foreach($admin_pointersas$pointer=>$array){if($array['active'])returntrue;}}functioncustom_admin_pointers_footer(){$admin_pointers=custom_admin_pointers();?><scripttype="text/javascript">
        /* <![CDATA[ */
        ( function($) {
            <?php
            foreach ( $admin_pointers as $pointer => $array ) {
               if ( $array['active'] ) {
                  ?>
            $( '<?php echo $array['anchor_id']; ?>' ).pointer( {
                content: '<?php echo $array['content']; ?>',
                position: {
                    edge: '<?php echo $array['edge']; ?>',
                    align: '<?php echo $array['align']; ?>'
                },
                close: function() {
                    $.post( ajaxurl, {
                        pointer: '<?php echo $pointer; ?>',
                        action: 'dismiss-wp-pointer'
                    } );
                }
            } ).pointer( 'open' );
            <?php
         }
      }
      ?>
        } )(jQuery);
        /* ]]> */
    </script>
<?php
}

Agora estamos prontos para reunir a matriz de ponteiros:

function custom_admin_pointers() {
    $dismissed = explode( ',', (string) get_user_meta( get_current_user_id(), 'dismissed_wp_pointers', true ) );
    $version = '1_0'; // replace all periods in 1.0 with an underscore
    $prefix = 'custom_admin_pointers' . $version . '_';

    $new_pointer_content = '<h3>' . __( 'Add New Item' ) . '</h3>';
    $new_pointer_content .= '<p>' . __( 'Easily add a new post, media item, link, page or user by selecting from this drop down menu.' ) . '</p>';

    $story_pointer_content = '<h3>' . __( 'Another info' ) . '</h3>';
    $story_pointer_content .= '<p>' . __( 'Lorem ipsum...' ) . '</p>';


    return array(
        $prefix . 'new_items' => array(
            'content' => $new_pointer_content,
            'anchor_id' => '#wp-admin-bar-new-content',
            'edge' => 'top',
            'align' => 'left',
            'active' => ( ! in_array( $prefix . 'new_items', $dismissed ) )
        ),
        $prefix.'story_cover_help' => array(
            'content' => $story_pointer_content,
            'anchor_id' => '#save-post',
            'edge' => 'top',
            'align' => 'right',
            'active' => ( ! in_array( $prefix . 'story_cover_help', $dismissed ) )
        )
    );

}

O código é auto-explicativo. Podemos facilmente adicionar mais ponteiros, estendendo o array. Tudo funciona bem no WP4.

Agora, para o problema: Todos os indicadores pop-up aparecem ao mesmo tempo, tornando essa interface ruim para um tutorial.

Meu objetivo é mostrar os ponteiros um por um e permitir que o usuário clique em um botão Avançar para navegar pelo tutorial. O próximo botão deve abrir o próximo ponteiro e fechar o último.

Como posso fazer isso?

    
por Christine Cooper 27.09.2014 / 16:20

2 respostas

9

Você está chamando a função .pointer( 'open' ); javascript em todos os objetos de ponteiros, portanto não é surpresa que todos os ponteiros apareçam ao mesmo tempo ...

Dito isso, não entendo por que você retorna todos os ponteiros (mesmo os não ativos) de custom_admin_pointers() e, em seguida, adiciona uma função adicional para verificar se há alguns ponteiros ativos e um check dentro do loop de ponteiros ( if ( $array['active'] ) { ) para escolher adicionar ponteiro de javascript ou não. Não é mais simples apenas retornar apenas ponteiros ativos?

Além disso, você está adicionando javascript em todas as páginas de administração, não é demais? Considere também que alguns elementos como "# save-post" estão disponíveis apenas na nova página do post, então não é melhor adicionar os ponteiros apenas na nova página do pot?

Por fim, o quão confuso é o javascript misturado com o PHP, acho que você deve usar wp_localize_script para passar dados para o javascript.

O plano:

  1. Mova as definições de ponteiros em PHP para um arquivo separado, desta forma é fácil editar e também remover a marcação do código PHP, tudo resulta mais legível e fácil de usar
  2. Na configuração de ponteiros, adicione uma propriedade "where" que será usada para definir em qual página de administração um pop-up deve aparecer: post-new.php , index.php ...
  3. Escreva uma classe que manipule o carregamento, a análise e a filtragem de informações de ponteiros
  4. Escreva alguma bondade js que nos ajude a mudar o botão padrão "Remover" para "Próximo"

O # 4 pode (provavelmente) ser feito facilmente sabendo bem o plug-in do ponteiro, mas não é o meu caso. Então, eu vou usar o código geral do jQuery para obter o resultado, se alguém puder melhorar meu código, eu aprecio.

Editar

Eu editei o código (principalmente js) porque há coisas diferentes que eu não tinha considerado: alguns ponteiros podem ser adicionados à mesma âncora, ou os mesmos ponteiros podem ser adicionados a âncoras não existentes ou não visíveis. Em todo esse caso, o código anterior não funcionou, a nova versão parece resolver bem esses problemas.

Eu também configurei um Gist com todo o código que eu usei teste.

Vamos começar com os pontos # 1 e # 2 : crie um arquivo chamado pointers.php e escreva lá:

<?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; 

A configuração de todos os ponteiros está aqui. Quando você precisar alterar algo, basta abrir esse arquivo e editá-lo.

Observe a propriedade "where" que é uma matriz de páginas onde o ponteiro deve estar disponível.

Se você quiser exibir ponteiros em uma página gerada por um plug-in, procure esta linha descrita abaixo em public function filter( $page ) { e adicione die($page); imediatamente abaixo dela. Em seguida, abra a respectiva página do plug-in e use essa cadeia na propriedade where .

Ok, agora o ponto # 3 .

Antes de escrever a aula, quero apenas codificar uma interface: lá, colocarei comentários para que você possa entender melhor o que a classe fará.

<?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 );

}

Eu acho que deveria ser bem claro. Agora vamos escrever a classe, ela conterá os 2 métodos da interface mais o construtor.

<?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;
  }
}

O código é muito simples e faz exatamente o que a interface espera.

No entanto, a classe não faz nada por si só, precisamos de um gancho onde instanciar a classe e lançar os dois métodos passando argumentos apropriados.

O 'admin_enqueue_scripts' é perfeito para nosso escopo: lá teremos acesso à página de administração atual e nós também podemos enfileirar scripts e estilos necessários.

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 );
} );

Nada de especial: apenas usar a classe para obter dados de ponteiros e se alguns ponteiros passarem pelos estilos e scripts de enfileiramento dos filtros. Em seguida, passe os dados dos ponteiros para o script junto ao rótulo "Próximo" localizado para o botão.

Ok, agora a parte "mais difícil": o js. Novamente eu quero destacar que eu não sei o plugin de ponteiro que o WordPress usa, então o que eu faço no meu código pode ser feito melhor se alguém souber disso, no entanto meu código faz seu trabalho e, em geral, não é tão ruim. / p>

( 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'

Com a ajuda de comentários, o código deve ficar bem claro, pelo menos, espero que sim.

Ok, terminamos. Nosso PHP é mais simples e melhor organizado, nosso javascript mais legível, ponteiros são mais fáceis de editar e, o mais importante, tudo funciona.

    
por gmazzap 28.09.2014 / 07:36
6

Ahhh .. sim. Ponteiros do WordPress. Você sabe, há muitos sentimentos contraditórios quando se trata de usar ponteiros;)

Você estava no caminho certo com o código acima. Mas há alguns problemas.

@ G.M. está correto sobre o comando pointer('open') abrir todos os seus ponteiros de uma só vez. Além disso, você não está fornecendo um método para avançar nos ponteiros.

Eu lutei com esse mesmo problema ... e desenvolvi minha própria abordagem. Eu uso uma variável de consulta no URL, recarrego a página para a página de administração onde quero exibir o próximo ponteiro e deixo o jQuery manipular o resto.

Classe de ponteiros do WP

Eu decidi escrever isso como uma aula. Mas vou mostrá-lo em incrementos no começo para ajudá-lo a entender melhor o que está acontecendo.

Começando a aula

// Create as a class
class testWPpointers {

    // Define pointer version
    const DISPLAY_VERSION = 'v1.0';

    // Initiate construct
    function __construct () {
        add_action('admin_enqueue_scripts', array($this, 'admin_enqueue_scripts'));  // Hook to admin_enqueue_scripts
    }

    function admin_enqueue_scripts () {

        // Check to see if user has already dismissed the pointer tour
        $dismissed = explode (',', get_user_meta (wp_get_current_user ()->ID, 'dismissed_wp_pointers', true));
        $do_tour = !in_array ('test_wp_pointer', $dismissed);

        // If not, we are good to continue
        if ($do_tour) {

            // Enqueue necessary WP scripts and styles
            wp_enqueue_style ('wp-pointer');
            wp_enqueue_script ('wp-pointer');

            // Finish hooking to WP admin areas
            add_action('admin_print_footer_scripts', array($this, 'admin_print_footer_scripts'));  // Hook to admin footer scripts
            add_action('admin_head', array($this, 'admin_head'));  // Hook to admin head
        }
    }

    // Used to add spacing between the two buttons in the pointer overlay window.
    function admin_head () {
        ?>
        <style type="text/css" media="screen">
            #pointer-primary {
                margin: 0 5px 0 0;
            }
        </style>
        <?php
    }
  1. Definimos a classe.
  2. Criamos a classe e adicionamos uma ação a admin_enqueue_scripts .
  3. Determinamos se nossos ponteiros já foram descartados.
  4. Se não, continuaremos a enfileirar os scripts necessários.

Você NÃO precisa alterar nada nessas primeiras funções.

Configurando a matriz de itens de ponteiro

O próximo passo é definir cada um dos ponteiros. Há cinco itens que precisamos definir (excpept para o último ponteiro). Nós faremos isso usando matrizes. Vamos dar uma olhada na função:

// Define footer scripts
function admin_print_footer_scripts () {

    // Define global variables
    global $pagenow;
    global $current_user;

    //*****************************************************************************************************
    // This is our array of individual pointers.
    // -- The array key should be unique.  It is what will be used to 'advance' to the next pointer.
    // -- The 'id' should correspond to an html element id on the page.
    // -- The 'content' will be displayed inside the pointer overlay window.
    // -- The 'button2' is the text to show for the 'action' button in the pointer overlay window.
    // -- The 'function' is the method used to reload the window (or relocate to a new window).
    //    This also creates a query variable to add to the end of the url.
    //    The query variable is used to determine which pointer to display.
    //*****************************************************************************************************
    $tour = array (
        'quick_press' => array (
            'id' => '#dashboard_quick_press',
            'content' => '<h3>' . __('Congratulations!', 'test_lang') . '</h3>'
                . '<p><strong>' . __('WP Pointers is working properly.', 'test_lang') . '</strong></p>'
                . '<p>' . __('This pointer is attached to the "Quick Draft" admin widget.', 'test_lang') . '</p>'
                . '<p>' . __('Our next pointer will take us to the "Settings" admin menu.', 'test_lang') . '</p>',
            'button2' => __('Next', 'test_lang'),
            'function' => 'window.location="' . $this->get_admin_url('options-general.php', 'site_title') . '"'  // We are relocating to "Settings" page with the 'site_title' query var
            ),
        'site_title' => array (
            'id' => '#blogname',
            'content' => '<h3>' . __('Moving along to Site Title.', 'test_lang') . '</h3>'
            . '<p><strong>' . __('Another WP Pointer.', 'test_lang') . '</strong></p>'
            . '<p>' . __('This pointer is attached to the "Blog Title" input field.', 'test_lang') . '</p>',
            'button2' => __('Next', 'test_lang'),
            'function' => 'window.location="' . $this->get_admin_url('index.php', 'quick_press_last') . '"'  // We are relocating back to "Dashboard" with 'quick_press_last' query var
            ),
        'quick_press_last' => array (
            'id' => '#dashboard_quick_press',
            'content' => '<h3>' . __('This concludes our WP Pointers tour.', 'test_lang') . '</h3>'
            . '<p><strong>' . __('Last WP Pointer.', 'test_lang') . '</strong></p>'
            . '<p>' . __('When closing the pointer tour; it will be saved in the users custom meta.  The tour will NOT be shown to that user again.', 'test_lang') . '</p>'
            )
        );

    // Determine which tab is set in the query variable
    $tab = isset($_GET['tab']) ? $_GET['tab'] : '';
    // Define other variables
    $function = '';
    $button2 = '';
    $options = array ();
    $show_pointer = false;

    // *******************************************************************************************************
    // This will be the first pointer shown to the user.
    // If no query variable is set in the url.. then the 'tab' cannot be determined... and we start with this pointer.
    // *******************************************************************************************************
    if (!array_key_exists($tab, $tour)) {

        $show_pointer = true;
        $file_error = true;

        $id = '#dashboard_right_now';  // Define ID used on page html element where we want to display pointer
        $content = '<h3>' . sprintf (__('Test WP Pointers %s', 'test_lang'), self::DISPLAY_VERSION) . '</h3>';
        $content .= __('<p>Welcome to Test WP Pointers admin tour!</p>', 'test_lang');
        $content .= __('<p>This pointer is attached to the "At a Glance" dashboard widget.</p>', 'test_lang');
        $content .= '<p>' . __('Click the <em>Begin Tour</em> button to get started.', 'test_lang' ) . '</p>';

        $options = array (
            'content' => $content,
            'position' => array ('edge' => 'top', 'align' => 'left')
            );
        $button2 = __('Begin Tour', 'test_lang' );
        $function = 'document.location="' . $this->get_admin_url('index.php', 'quick_press') . '";';
    }
    // Else if the 'tab' is set in the query variable.. then we can determine which pointer to display
    else {

        if ($tab != '' && in_array ($tab, array_keys ($tour))) {

            $show_pointer = true;

            if (isset ($tour[$tab]['id'])) {
                $id = $tour[$tab]['id'];
            }

            $options = array (
                'content' => $tour[$tab]['content'],
                'position' => array ('edge' => 'top', 'align' => 'left')
            );

            $button2 = false;
            $function = '';

            if (isset ($tour[$tab]['button2'])) {
                $button2 = $tour[$tab]['button2'];
            }
            if (isset ($tour[$tab]['function'])) {
                $function = $tour[$tab]['function'];
            }
        }
    }

    // If we are showing a pointer... let's load the jQuery.
    if ($show_pointer) {
        $this->make_pointer_script ($id, $options, __('Close', 'test_lang'), $button2, $function);
    }
}

Ok .. vamos dar uma olhada em algumas coisas aqui.

Primeiro, nossa matriz $tour . Esta é a matriz que contém todos os ponteiros, EXCEPTO o primeiro ponteiro que é exibido para o usuário (mais sobre isso mais tarde). Então, você vai querer começar com o segundo ponteiro que você pretende mostrar ... e continuar até o último ponteiro.

Em seguida, temos alguns itens que são muito importantes.

  1. As chaves da matriz $tour devem ser exclusivas (quick_press, site_title, quick_press_last; como exemplos acima).
  2. O comando 'id' DEVE corresponder ao id do elemento html do item que você deseja anexar ao ponteiro.
  3. O comando function recarregará / realocará a janela. Isto é o que é usado para mostrar o próximo ponteiro. Temos que recarregar a janela ou realocá-la na próxima página de administração, onde um ponteiro será exibido.
  4. Executamos a função get_admin_url() com duas variáveis; a primeira é a página de administração em que queremos ir a seguir; e a segunda é a chave de matriz única do ponteiro que desejamos exibir.

Mais abaixo, você verá o código que começa com if (!array_key_exists($tab, $tour)) { . É aqui que determinamos se uma variável de consulta de URL foi definida. Se não tiver, então precisamos definir o primeiro ponteiro a ser exibido.

Esse ponteiro usa exatamente os mesmos id, content, button2, and function itens usados em nossa matriz $tour acima. Lembre-se, o segundo argumento da função get_admin_url() DEVE ser exatamente igual à chave da matriz na variável $tour . É isso que diz ao script para ir para o próximo ponteiro.

O restante da função é usado se uma variável de consulta já estiver definida na URL. Não há necessidade de ajustar mais a função.

Como obter o URL de administrador A próxima função é na verdade uma função auxiliar ... usada para obter o URL do administrador e avançar o ponteiro.

// This function is used to reload the admin page.
// -- $page = the admin page we are passing (index.php or options-general.php)
// -- $tab = the NEXT pointer array key we want to display
function get_admin_url($page, $tab) {

    $url = admin_url();
    $url .= $page.'?tab='.$tab;

    return $url;
}

Lembre-se, existem dois argumentos; a página de administração para a qual vamos ... e a guia. A guia será a chave da matriz $tour para a qual queremos ir a seguir. ESTES DEVEM CORRESPONDER .

Então, quando chamamos a função get_admin_url() e passamos as duas variáveis; a primeira variável determina a próxima página de administração .. e a segunda variável determina qual ponteiro exibir.

Por fim ... podemos finalmente imprimir o script de administração no rodapé.

// Print footer scripts
function make_pointer_script ($id, $options, $button1, $button2=false, $function='') {

    ?>
    <script type="text/javascript">

        (function ($) {

            // Define pointer options
            var wp_pointers_tour_opts = <?php echo json_encode ($options); ?>, setup;

            wp_pointers_tour_opts = $.extend (wp_pointers_tour_opts, {

                // Add 'Close' button
                buttons: function (event, t) {

                    button = jQuery ('<a id="pointer-close" class="button-secondary">' + '<?php echo $button1; ?>' + '</a>');
                    button.bind ('click.pointer', function () {
                        t.element.pointer ('close');
                    });
                    return button;
                },
                close: function () {

                    // Post to admin ajax to disable pointers when user clicks "Close"
                    $.post (ajaxurl, {
                        pointer: 'test_wp_pointer',
                        action: 'dismiss-wp-pointer'
                    });
                }
            });

            // This is used for our "button2" value above (advances the pointers)
            setup = function () {

                $('<?php echo $id; ?>').pointer(wp_pointers_tour_opts).pointer('open');

                <?php if ($button2) { ?>

                    jQuery ('#pointer-close').after ('<a id="pointer-primary" class="button-primary">' + '<?php echo $button2; ?>' + '</a>');
                    jQuery ('#pointer-primary').click (function () {
                        <?php echo $function; ?>  // Execute button2 function
                    });
                    jQuery ('#pointer-close').click (function () {

                        // Post to admin ajax to disable pointers when user clicks "Close"
                        $.post (ajaxurl, {
                            pointer: 'test_wp_pointer',
                            action: 'dismiss-wp-pointer'
                        });
                    })
                <?php } ?>
            };

            if (wp_pointers_tour_opts.position && wp_pointers_tour_opts.position.defer_loading) {

                $(window).bind('load.wp-pointers', setup);
            }
            else {
                setup ();
            }
        }) (jQuery);
    </script>
    <?php
}
} 
$testWPpointers = new testWPpointers();

Mais uma vez, não há necessidade de alterar nada acima. Este script irá definir e produzir os dois botões na janela de sobreposição do ponteiro. Um será sempre o botão "Fechar"; e atualizará a opção atual do usuário meta dismissed_pointers .

O segundo botão (o botão de ação) executará a função (nosso método de realocação de janela).

E nós fechamos a aula.

Aqui está o código em sua totalidade. WP Pointer Class

Você pode copiar / colar em seu site de desenvolvimento e visitar a página "Painel". Ele guiará você pelo passeio.

Lembre-se, é um pouco confuso que o primeiro ponteiro seja definido por último no código. É assim que deve funcionar. A matriz manterá todos os demais ponteiros que você deseja usar.

Lembre-se de que o item da matriz 'id' DEVE corresponder ao segundo argumento da função get_admin_url() do comando 'function' do item da matriz anterior. É assim que os ponteiros 'falam' uns com os outros e sabem como avançar.

Aprecie !! :)

    
por josh 30.09.2014 / 10:57

Tags