在WordPress中创建Intro.js驱动的导览-CSDN博客

在上一篇文章Intro.js产品导览中，我们讨论了创建产品导览的重要性以及如何使用Intro.js创建很棒的产品导览。不幸的是，我们手动配置了每个步骤，这种方法不适用于编程知识有限的用户。但是，Intro.js的真正功能来自于无需过多编程即可在动态内容上创建产品导览的能力。本教程将教您如何将Intro.js集成到WordPress中。

构建一个Intro.js WordPress插件

推荐使用插件将自定义行为添加到WordPress。我们将使用一个插件将Intro.js集成到WordPress中。首先在wp-content/plugins文件夹中创建一个新文件夹，并将其命名为wpintrojs 。接下来，创建主插件文件index.php ，并使用以下代码定义插件。

<?php
/*
Plugin Name: Introjs Tours
Plugin URI: 
Description: Integrating intro.js powered product tours into WordPress
Author: Your Name
Version: 1.0
Author URI: http://www.innovativephp.com/
*/

接下来，以admin身份登录并在“插件”部分中激活插件。

创建产品浏览步骤

在上一教程中，我们通过分配必要的data-attributes和值来手动配置每个步骤。在这里，我们需要一种更简单的方法来配置游览步骤，因为内容是在WordPress中动态生成的。因此，必须构建一个特定于插件的页面来配置步骤。首先，使用以下代码添加新的插件特定页面。

add_action( 'admin_menu', 'wpintro_menu_page' );

function wpintro_menu_page(){
  add_menu_page( 'Product Tours', 'Product Tours', 'manage_options', 'wpintro_tour', 'wpintro_menu_page_display', plugins_url( 'myplugin/images/icon.png' ), 6 ); 
  add_submenu_page( 'wpintro_tour', 'Manage Steps', 'Manage Steps', 'manage_options', 'wpintro_tour_steps', 'wpintro_manage_steps_display' ); 
}

在这段代码中，我们有一个主管理页面和一个子菜单页面。主菜单页面用于配置步骤，而子菜单页面用于配置游览中步骤的顺序。首先，我们将通过实现上一个代码块中使用的wpintro_menu_page_display函数来查看产品步骤创建页面。该功能如下所示。

function wpintro_menu_page_display() {
  global $wip_message;
  $pages = get_pages();
  $html = '';

  if ($wip_message != '') {
    $html .= '<div style="background:#9FD09F;padding:5px;">' . $wip_message . '</div>';
  }

  $html .= '<h2>Create Product Tour</h2>';
  $html .= '<form action="" method="post">';
  $html .= '<table class="form-table"><tbody>';
  $html .= '  <tr valign="top">
  <th scope="row"><label>Select Page</label></th>
  <td><select class="regular-text" id="wpi_page" name="wpi_page">';

  foreach ($pages as $page) {
    $html .= '<option value="' . get_page_link($page->ID) . '">';
    $html .= $page->post_title;
    $html .= '</option>';
  }

  $html .= '      </select></td>
</tr>';
  $html .= '  <tr valign="top">
  <th scope="row"><label>Intro Text</label></th>
  <td><textarea class="regular-text" id="wpi_intro_text" name="wpi_intro_text"></textarea></td>
</tr>';
  $html .= '  <tr valign="top">
  <th scope="row"><label>Element ID</label></th>
  <td><input type="text" class="regular-text"  id="wpi_element_id" name="wpi_element_id"/></td>
</tr>';
  $html .= '  <tr valign="top">
  <th scope="row"><label></label></th>
  <td><input type="hidden" class="regular-text"  id="wpi_action" name="wpi_action" value="save_steps" />
  <input type="submit" class="regular-text"  id="wpi_submit" name="wpi_submit" value="Save" /></td>
</tr>';
  $html .= '</tbody></table></form>';
  echo $html;
}

此功能用于显示菜单页面的内容。该页面包含一个标题和一个用于生成步骤的HTML表单。该表单包含三个用于添加新步骤的字段。

元素ID –用于定义用于步骤的HTML元素的ID。
选择页面–用于选择包含分配的元素ID的页面。
简介文本–用于定义要在产品浏览的每个步骤中显示的描述。

一旦实现，步骤创建屏幕将类似于下图。

创建产品步骤

您可以使用“产品浏览”页面向该浏览添加任意数量的步骤。接下来，让我们进入数据保存过程。

add_action('init', 'wpintro_save_steps');

function wpintro_save_steps() {
  global $wip_message;

  if (isset($_POST['wpi_action']) && $_POST['wpi_action'] == 'save_steps') {
    $intro_text = $_POST['wpi_intro_text'];
    $page = $_POST['wpi_page'];
    $element_id = $_POST['wpi_element_id'];
    $step_data = get_option('wpi_step_data', '');

    if ($step_data != '') {
      $step_data = unserialize($step_data);
      $step_data["wip" . rand(1000, 1000000)] = array("desc" => $intro_text, "url" => $page, "id" => $element_id);
    } else {
      $step_data = array("wip" . rand(1000, 1000000) => array("desc" => $intro_text, "url" => $page, "id" => $element_id));
    }

    $step_data = serialize($step_data);
    update_option('wpi_step_data', $step_data);
    $wip_message = "Step saved successfully";
  } else {
    $wip_message = "";
  }
}

在这里，我们使用了init操作来定义一个名为wpintro_save_steps的函数。通常， init操作用于通过$_GET或$_POST拦截用户提交的数据。我们在表单内部使用了一个隐藏字段来定义保存过程的操作。我们必须检查操作，因为此功能可以通过其他形式拦截用户提交的数据。然后，我们将$_POST数据分配给变量。

接下来，我们使用wp_options表中的wpi_step_data键检查数据库中现有的步骤数据。由于我们保存了第一步，因此wpi_step_data键在数据库中将不可用。因此，我们将这些值分配给具有随机唯一键的数组，并将其作为序列化值保存到数据库。对于剩余的步骤，我们可以反序列化现有值，添加新值，然后再次将这些值另存为序列化值。最后，我们向用户显示一条成功消息。

到目前为止，我们研究了如何创建产品步骤并将其保存到数据库中。接下来，我们将在子菜单页面上查看订购步骤。

配置步骤顺序

我们可以使用以前的表格添加任意数量的步骤，默认情况下，它们将按照创建顺序保存。除非您有一个很好的产品计划，否则很难以正确的顺序创建步骤。而且，在某些情况下，您可能需要在游览的中间添加新的步骤。在这种情况下，具有配置步骤顺序的能力很重要。拖放是启用步骤重新排序的最简单方法。我们可以使用jQuery UI的可排序功能来创建步骤的排序顺序。

让我们在前面创建的子菜单页面中显示所有可用的排序步骤。

function wpintro_manage_steps_display() {
  $step_data = get_option('wpi_step_data', '');

  if ($step_data != '') {
    $step_data = unserialize($step_data);
  }

  echo "<div id='sortable'>";

  foreach ($step_data as $key => $data) {
    echo "<div class='wip_sort' style='margin:5px; border:2px solid; background: #fff;' data-identifier=" . $key . "  >
<ul>
  <li>" . $data['url'] . "</li>
  <li>" . $data['desc'] . "</li>
  <li>" . $data['id'] . "</li>
</ul>
    </div>";
  }

  echo "</div>";
}

wpi_step_data选项用于从数据库检索现有步骤。将数据反序列化之后，我们使用div容器显示ID为sortable的容器内的步骤。现在，您的屏幕应类似于下图。

订购产品步骤

接下来，我们必须集成jQuery UI以启用拖放功能。让我们转到用于插入必要的JavaScript文件的代码块。

function wpintro_admin_scripts() {
  wp_enqueue_script('jquery-ui-core');
  wp_enqueue_script('jquery-ui-sortable');
  wp_register_script('wpintro_admin', plugin_dir_url(__FILE__) . 'admin.js', array('jquery'));
  wp_enqueue_script('wpintro_admin');

  $config_array = array(
    'ajaxURL' => admin_url('admin-ajax.php'),
  );

  wp_localize_script('wpintro_admin', 'conf', $config_array);
}

add_action('admin_enqueue_scripts', 'wpintro_admin_scripts');

优良作法是使用admin_enqueue_scripts操作挂钩来分配admin部分所需的脚本和样式。在这里，我们将wp_enqueue_script用于jQuery UI核心和可排序的源文件，因为它们在WordPress核心中默认可用。我们必须同时使用wp_register_script和wp_enqueue_script函数，因为admin.js是自定义JavaScript文件。最后，我们使用wp_localize_script函数将必需的配置数据添加到admin.js 。

让我们看一下用于处理步骤排序顺序的admin.js文件（如下所示）。

jQuery(document).ready(function() {
  jQuery("#sortable").sortable({
    update: function() {
      var selected_ids = "";

      jQuery(".wip_sort").each(function() {
        selected_ids += jQuery(this).attr("data-identifier")+"@";
      });

      jQuery.post(conf.ajaxURL, { 
        action: "wpintro_update_step_order", 
        data: selected_ids,
      }, function(data) { }, "json");
    }
  });

  jQuery("#sortable").disableSelection();
});

我们在#sortable容器上启用了sortable功能。 #sortable容器中的所有主要div元素都将具有拖放功能。我们可以移动div元素以设置正确的步骤顺序。每次我们通过拖放移动元素时，jQuery UI都会执行update功能。

一旦执行了update功能，我们就可以使用之前分配的随机ID来获得元素顺序。然后，我们使用ID向服务器发出AJAX请求。在服务器端，我们必须使用从AJAX请求接收到的ID的顺序重新排列步骤数据。

add_action( 'wp_ajax_nopriv_wpintro_update_step_order', 'wpintro_update_step_order');
add_action('wp_ajax_wpintro_update_step_order', 'wpintro_update_step_order');

function wpintro_update_step_order() {
  $step_data = get_option('wpi_step_data', '');
  $step_data = unserialize($step_data);
  $updates_step_order = array();
  $step_order = explode('@', $_POST['data']);
  array_pop($step_order);

  for ($i = 0; $i < count($step_order); $i++) {
    $updates_step_order[$step_order[$i]] = $step_data[$step_order[$i]];
  }

  $step_data = serialize($updates_step_order);
  update_option('wpi_step_data', $step_data);
  echo json_encode($updates_step_order);
  exit;
}

wpintro_update_step_order函数用于处理服务器端的AJAX请求。首先，我们从数据库中检索现有的步骤数据。然后，我们遍历步骤ID，并根据更新的顺序重新排列步骤数据。最后，我们将更新的步骤数据保存到数据库中。

我们已经完成了产品导览的后端功能。至此，我们已经有了用于实施导览的所有产品步骤数据。在下一节中，我们将研究前端的产品导览的实现。

将步骤数据与Intro.js集成

现在是时候通过将现有步骤数据与Intro.js结合使用来构建产品导览了。首先，我们必须在配置数据中包含JavaScript和CSS文件。我认为您已经阅读了上一教程并下载了Intro.js相关文件。将intro.js和introjs.css文件复制到wpintrojs文件夹中。以下代码显示了脚本文件在前端的包含。

add_action('wp_enqueue_scripts', 'wpintro_enqueue_script');

function wpintro_enqueue_script() {
  wp_enqueue_script('jquery');
  wp_register_script('introjs', plugin_dir_url(__FILE__) . 'intro.js');
  wp_enqueue_script('introjs');
  wp_register_style('introjscss', plugin_dir_url(__FILE__) . 'introjs.css');
  wp_enqueue_style('introjscss');
  wp_register_script('wpintro_custom', plugin_dir_url(__FILE__) . 'custom.js', array('jquery'));
  wp_enqueue_script('wpintro_custom');
  $step_data = get_option('wpi_step_data', '');
  $step_data = unserialize($step_data);
  $step_data = array_values($step_data);
  $stepdata_array = array(
    'steps' => json_encode($step_data),
  );
  wp_localize_script('wpintro_custom', 'stepData', $stepdata_array);
}

我们将admin_enqueue_scripts用于后端脚本包含。建议将wp_enqueue_scripts包括在前端脚本中。在上一部分中，我们从数据库中获取步骤数据，并将其作为JSON编码的字符串分配给名为custom.js的新JavaScript文件。最后，我们必须创建custom.js文件，并包含以下代码来初始化产品浏览。

jQuery(document).ready(function() {
  var currentstep = 0;

  if(QueryString.currentstep){
    currentstep = QueryString.currentstep;
  }

  var steps_json = stepData.steps;
  var wip_index=0;

  steps_json = jQuery.parseJSON(steps_json);

  jQuery.each(steps_json, function(k, v) {
    wip_index++;
    jQuery("#"+v.id).attr("data-step", wip_index).attr("data-intro", v.desc).attr("data-url", v.url);
  });

  jQuery("#flexi_form_start").click(function() {
    introJs().setOption("doneLabel", "Next page").start().oncomplete(function() {
      window.location.href = steps_json[currentstep].url + "?multipage=true&currentstep=" + currentstep;
    }).onbeforechange(function(targetElement) {
      currentstep = jQuery(targetElement).attr("data-step");    
    });
  });
});

首先，我们将当前步长设置为零。我们使用一个名为QueryString的自定义函数来从URL中检索查询参数。您可以在源代码文件夹中找到QueryString函数的实现。

然后，我们通过jQuery.parseJSON函数传递步骤数据以创建一个JavaScript对象。接下来，我们必须将Intro.js特定的数据属性添加到step元素。在遍历步骤数据时，我们找到具有给定ID的元素，并使用steps_json对象中的值分配数据属性。

最后，我们像在上一个教程中一样，在单击按钮时初始化Intro.js。在这里，它与以前的教程略有不同，因为我们使用跨多个页面而不是独立页面的产品浏览。因此，我们设定与Intro.js页面的URL multipage的第一页完成后属性。同样，我们在每次步进更改时都会更改currentstep的值。

用户完成首页上的产品浏览步骤后，将使用multipage参数将其重定向到下一页。让我们看看如何使用以下代码处理后续页面的步骤。

if (RegExp("multipage", "gi").test(window.location.search)) {
  var introObj =  introJs();

  introObj.setOption("doneLabel", "Next page").start().oncomplete(function() {
    if (steps_json[currentstep]) {
      window.location.href = steps_json[currentstep].url + "?multipage=true&currentstep=" + currentstep;
    }
  }).onbeforechange(function(targetElement) {
    currentstep = jQuery(targetElement).attr("data-step");

    if (steps_json.length <= (parseInt(currentstep) + 1)) {
      introObj.setOption("doneLabel", "Done");
    }
  });
}

我们必须使用正则表达式来过滤multipage属性作为Intro.js取决于该参数用于启用多页的支持。在if语句内部，我们必须使用与以前相同的代码来启用递归页面支持。我们将完成按钮用作下一页 。我们必须检查游览的最后一步，并使用代码的最后一部分将标签设置为“完成” 。

现在是时候观看产品导览了。请按照此处给出的步骤生成产品导览并进行实际操作。