custom-theme-tour.php

<?php
/**
 * Theme Activation Tour
 *
 * This class handles the pointers used in the introduction tour.
 * @package Popup Demo
 * @see https://gist.github.com/DevinWalker/7595475
 *
 */
class WordImpress_Theme_Tour {

    private $pointer_close_id = 'wordpress_tour'; //value can be cleared to retake tour

    /**
     * construct
     *
     * If user is on a pre pointer version bounce out.
     */
    public function __construct() {
        global $wp_version;

        //pre 3.3 has no pointers
        if (version_compare($wp_version, '3.4', '<'))
            return false;

        //version is updated ::claps:: proceed
        add_action('admin_enqueue_scripts', array( $this, 'tour_enqueue'));
    }

    /**
     * Enqueue styles and scripts needed for the pointers.
     */

    public function tour_enqueue() {
        if (!current_user_can('manage_options'))
            return;
        // Assume pointer shouldn't be shown
        $enqueue_pointer_script_style = false;

        // Get array list of dismissed pointers for current user and convert it to array
        $dismissed_pointers = explode(',', get_user_meta( get_current_user_id(), 'dismissed_wp_pointers', true));

        // Check if our pointer is not among dismissed ones
        if (!in_array($this->pointer_close_id, $dismissed_pointers)) {
            $enqueue_pointer_script_style = true;

            // Add footer scripts using callback function
            add_action('admin_print_footer_scripts', array($this, 'intro_tour'));
            add_action('wp_footer', array($this, 'intro_tour'));
        }

        // Enqueue pointer CSS and JS files, if needed
        if ($enqueue_pointer_script_style) {
            wp_enqueue_style('wp-pointer');
            wp_enqueue_script('wp-pointer');
        }

    }


    /**
     * ツアー内容の呼出
     * 
     * $adminpages ツアー内容の配列
     */
    public function intro_tour() {
        $adminpages = array(
            //  管理画面ページのスクリーンIDを指定。@see : http://codex.wordpress.org/Function_Reference/get_current_screen
            'themes' => array(
                array(
                    'content' => "<h3>1. ようこそ！ホゲホゲへ</h3>
                                  <p>このテーマの使い方をツアー形式で体験していただけます。</p>", // ポインター内のコンテンツ
                    'id' => '.theme-actions .customize.load-customize', // ポインターを表示する要素のセレクターを表示
                    'position' => array(
                        'edge' => 'top', // 矢印の位置
                        'align' => 'center' // ポインターの位置
                    ) ,
                    'button2' => '次へ', // 次へボタンのテキスト
                    'function' => 'window.location="' . admin_url('customize.php?welcome_tour=1') . '";' // 次へボタンをクリックした時に実行する JS
                ) ,
            ) ,
            'customize' => array(
                array(
                    'content' => '<h3>2. テーマデザインのカスタマイズ</h3>
                                  <p>デザインのカスタマイズはテーマカスタマイザーの左メニューから行えます。<br />
                                  右側が実際のサイトページとなっています。 設定変更後は必ず保存ボタンをクリックしてください。</p>',
                    'id' => '#accordion-section-title_tagline',
                    'position' => array(
                        'edge' => 'left',
                        'align' => 'left'
                    ) ,
                    'button2' => __('次へ', 'textdomain') ,
                    'function' => 'window.location="' . admin_url('widgets.php?welcome_tour=2') . '";'
                ) ,
                array(
                    'content' => '<h3> 3. ウィジェットの設置</h3>
                                  <p>WordPress 3.9 からテーマカスタマイザーからウィジェットを設置できるようになりました。<br />
                                 「ウィジェットを追加」ボタンからウィジェットを選択し、設置することができます。<br />
                                  編集後は必ず画面上部の保存ボタンをクリックしてください。</p>',
                    'id' => '#accordion-section-nav',
                    'position' => array(
                        'edge' => 'left', // ポインターの → の位置
                        'align' => 'left' // ポインターの位置
                    ) ,
                    'button2' => '次へ',
                    'function' => 'page_scroller("#accordion-section-nav");'
                ) ,
            ) ,
        );


        $page = '';
        $screen = get_current_screen();

        //Check which page the user is on
        if (isset( $_GET[ 'page' ] ) ) {
            $page = $_GET[ 'page' ];
        }
        if (empty($page)) {
            $page = $screen->id;
        }

        $function = '';
        $button2 = '';
        $opt_arr = array();
        if ( !$adminpages[$page] ) return ;

        foreach ( $adminpages[$page] as $key => $option) {
          //Location the pointer points
          if (!empty($adminpages[$page][$key]['id'])) {
              $id[$key] = $adminpages[$page][$key]['id'];
          } else {
              $id[$key] = $screen->id;
          }
          //Options array for pointer used to send to JS
          if ('' != $page && in_array($page, array_keys($adminpages[$page]))) {

              $align = ( is_rtl() ) ? 'right' : 'left';
              $opt_arr[$key] = array(
                                  'content' => $adminpages[$page][$key]['content'],
                                  'position' => array(
                                      'edge' => (!empty($adminpages[$page][$key]['position']['edge'])) ? $adminpages[$page][$key]['position']['edge'] : 'left',
                                      'align' => (!empty($adminpages[$page][$key]['position']['align'])) ? $adminpages[$page][$key]['position']['align'] : $align
                                  ),
                                  'pointerWidth' => 500
                           );
              if (isset($adminpages[$page][$key]['button2'])) {
                  $button2[$key] = (!empty($adminpages[$page][$key]['button2'])) ? $adminpages[$page][$key]['button2'] : '';
              }
              if (isset($adminpages[$page][$key]['function'])) {
                  $function[$key] = $adminpages[$page][$key]['function'];
              }
          }
        }
        $this->print_scripts( $id , $opt_arr, __( "ツアーを終了" , 'textdomain'), $button2, $function);
    }


    /**
     * Prints the pointer script
     *
     * @param string $selector The CSS selector the pointer is attached to.
     * @param array $options The options for the pointer.
     * @param string $button1 Text for button 1
     * @param string|bool $button2 Text for button 2 (or false to not show it, defaults to false)
     * @param string $button2_function The JavaScript function to attach to button 2
     * @param string $button1_function The JavaScript function to attach to button 1
     */
    public function print_scripts( $selectors, $options, $button1, $button2 = array(), $button2_function = '', $button1_function = '') {
      foreach ( $selectors as $key => $selector) { ?>
        <script type="text/javascript">
            //<![CDATA[
            (function ($) {

                var wordimpress_pointer_options_<?php echo $key ?> = <?php echo json_encode( $options[$key] ); ?>, setup_<?php echo $key ?>;
                // Userful info here
                wordimpress_pointer_options_<?php echo $key ?> = $.extend(wordimpress_pointer_options_<?php echo $key ?>, {
                    buttons: function (event, t) {
                        button = jQuery('<a id="pointer-close_<?php echo $key;?>" style="margin-left:5px" class="button-secondary">' + '<?php echo $button1; ?>' + '</a>');
                        button.bind('click.pointer', function () {
                            t.element.pointer('close');
                        });
                        return button;
                    }
                });
                page_scroller = function( element ){
                  var target = $(element).offset().top;
                  $("html, body").animate({scrollTop:target}, 500);
                  event.preventDefault();
                  return false;
                }

                setup_<?php echo $key ?> = function () {
                    $('<?php echo $selector; ?>').pointer(wordimpress_pointer_options_<?php echo $key ?>).pointer('open');
                    <?php
                    if ( $button2[$key] ) { ?>
                    jQuery('#pointer-close_<?php echo $key;?>').after('<a id="pointer-primary_<?php echo $key;?>" class="button-primary">' + '<?php echo $button2[$key]; ?>' + '</a>');
                    <?php } ?>
                    jQuery('#pointer-primary_<?php echo $key;?>').click(function () {
                        <?php echo $button2_function[$key]; ?>
                    });
                    jQuery('#pointer-close_<?php echo $key;?>').click(function () {
                        <?php if ( $button1_function[$key] == '' ) { ?>
                        $.post(ajaxurl, {
                            pointer: '<?php echo $this->pointer_close_id; ?>',
                            action: 'dismiss-wp-pointer'
                        });
                        <?php } else { ?>
                        <?php echo $button1_function[$key]; ?>
                        <?php } ?>
                    });
                };
                if (wordimpress_pointer_options_<?php echo $key ?>.position && wordimpress_pointer_options_<?php echo $key ?>.position.defer_loading) {
                    $(window).bind('load.wp-pointers', setup_<?php echo $key ?>);
                } else {
                    $(document).ready(setup_<?php echo $key ?>);
                }

            })(jQuery);
            //]]>
        </script>
    <?php
      }
    }
}