场外菜单有时具有ShiftNav不支持开箱即用的一个功能是滑动打开和滑动到关闭手势。

原因是这些触摸手势很容易导致与主题冲突，因此没有办法100％可靠地为每个主题做到这一点。此外，如果您的网站已经包含一个触摸库，那么将该库与ShiftNav Javascript API结合使用效率要高得多，而不是仅为这一小部分功能包含一个单独的触摸库。

但是，对于那些想要实现滑动手势来打开和关闭菜单的人，我们提供了安装Hammer.js的教程，这是一个非常好的触摸库，并将其连接到ShiftNav。

步骤1.安装Hammer.js
首先，您需要在您的网站上包含Hammer.js触摸库。

注意：您可能想知道为什么要包含整个触摸库而不是直接使用原生触摸事件？原因是触摸事件在浏览器中仍然是非标准的，而Hammer.js有助于将这些事件统一到一个简单易用的库中。你可以肯定只使用原生触摸事件，如果这是你喜欢的，但我们不会在这里讨论。

为了简单起见，我们将从github加载Hammer.js，但是如果您愿意，也可以在您的站点上安装脚本并将其加载到那里。
这段代码将放在WordPress主题或者子主题functions.php或自定义插件中：

function shiftnav_touch_gestures_load_assets(){

//Enqueue Hammer.js
wp_enqueue_script( 'hammer-js' ,'https://hammerjs.github.io/dist/hammer.js' , array( 'shiftnav' ), false, true );

}
add_action( 'wp_enqueue_scripts' , 'shiftnav_touch_gestures_load_assets' , 20 );

步骤2.设置shiftnav-touch-gestures.js文件
2.1创建自定义Javascript文件
在您的子主题中，创建一个名为的文件 shiftnav-touch-gestures.js
2.2加载自定义Javascript文件
然后，在子主题中functions.php，修改shiftnav_touch_gestures_load_assets()函数以包含我们的新自定义文件。完整的功能如下所示：

function shiftnav_touch_gestures_load_assets(){

//Enqueue Hammer.js
wp_enqueue_script( 'hammer-js' ,'https://hammerjs.github.io/dist/hammer.js' , array( 'shiftnav' ), false, true );

//Get the active theme directory
$dir = trailingslashit( get_stylesheet_directory_uri() );

//Enqueue the custom script, which is located in the active theme directory
wp_enqueue_script( 'shiftnav-touch-gestures-js' , $dir.'shiftnav-touch-gestures.js' , array( 'shiftnav' , 'hammer-js' ) , false , true );

}
add_action( 'wp_enqueue_scripts' , 'shiftnav_touch_gestures_load_assets' , 20 );

注意：如果您将文件放在子主题的子目录中或自定义插件中，请$dir根据需要调整变量赋值
2.3确认文件已正确加载
要确认您的新Javascript文件是否在您的网站上加载，请在以下内容中添加以下内容shiftnav-touch-gestures.js：

console.log( 'Loaded shiftnav-touch-gestures.js' );

然后加载您的站点并打开Developer Tools控制台并检查该消息Loaded shiftnav-touch-gestures.js是否已打印。

如果您在控制台中没有看到该消息，请查看您的源并查看您的新Javascript文件是否正确加载。检查URL，它实际上指向您创建的文件。

步骤3.添加触摸手势监听器
请注意，为简单起见，我们将假设一个ShiftNav实例，与我们网站的左侧对齐。要处理多个实例或右对齐菜单，可以使用此作为示例进行调整。

现在是时候编写将向我们的网站添加滑动手势检测的实际Javascript。

我们需要捕获两个滑动事件：

1.右侧滑动身体将打开菜单。

2.在菜单面板上向左滑动将关闭菜单。

所以让我们在我们的shiftnav-touch-gestures.js文件中使用Hammer.js设置一些脚手架：

(function($){

// Swipe Open Hammer Instance
// -- right swipe anywhere on the site body
var swipeOpenTarget = document.querySelector( 'body' );
var openHammer = new Hammer( swipeOpenTarget );
openHammer.on( 'swiperight' , function( e ){
console.log( 'open ShiftNav on swipe right' );
});

// Swipe Close Hammer Instance
// -- left swipe on the ShiftNav Panel
var swipeCloseTarget = document.querySelector( '.shiftnav .shiftnav-inner' );
var closeHammer = new Hammer( swipeCloseTarget );
closeHammer.on('swipeleft', function( e ) {
console.log( 'close ShiftNav on swipe left' );
});

})(jQuery);

在上面的代码中，我们设置了两个滑动侦听器，当检测到滑动手势时，会向控制台打印一条消息。

此时，您可以通过在Chrome中打开网站，转到DevTools并启用移动仿真（使用鼠标触摸事件）来测试代码，然后向右滑动身体并向左滑动ShiftNav面板并检查控制台输出。

步骤4.将触摸手势侦听器连接到ShiftNav API
现在，让我们用ShiftNav Javascript API函数调用我们的代码替换我们的console.logs，以将ShiftNav打开和关闭命令连接到滑动事件。

要打开菜单，我们将使用

$( '.shiftnav-shiftnav-main' ).shiftnav( 'openShiftNav' );

要关闭菜单，我们将使用

$( '.shiftnav-shiftnav-main' ).shiftnav( 'closeShiftNav' );

最终shiftnav-touch-gestures.js文件如下所示：

(function($){

// Swipe Open Hammer Instance
// -- right swipe anywhere on the site body
var swipeOpenTarget = document.querySelector( 'body' );
var openHammer = new Hammer( swipeOpenTarget );
openHammer.on( 'swiperight' , function( e ){
$( '.shiftnav-shiftnav-main' ).shiftnav( 'openShiftNav' );
});

// Swipe Close Hammer Instance
// -- left swipe on the ShiftNav Panel
var swipeCloseTarget = document.querySelector( '.shiftnav-shiftnav-main .shiftnav-inner' );
var closeHammer = new Hammer( swipeCloseTarget );
closeHammer.on('swipeleft', function( e ) {
$( '.shiftnav-shiftnav-main' ).shiftnav( 'closeShiftNav' );
});

})(jQuery);

就是这样！这是我们的结果：

注意事项
请注意，有许多主题会干扰触摸事件，例如身体上的事件。如果您尝试这个并且它不适用于您的主题，那可能就是问题所在。不幸的是，这不是一种100％万无一失的实现方式，但您可以将swiperight事件附加到您网站的其他位置，或者如果您需要进行此操作，则可能需要修改主题的Javascript。

另请注意，Javascript touch在许多设备上仍然很挑剔。我们建议将滑动手势视为一种不错的功能，但您不应该依赖它们（确保有另一种方法可以打开和关闭菜单）。

请注意，这是一个自定义，而不是ShiftNav支持的功能。虽然我们提供本教程希望它能帮助您，但请理解此功能不在支持范围内。

某些移动浏览器使用从视口边缘滑动来进行其他手势控制，这些将取代上面基于Javascript的控件。

---

---

需要提供WordPress主题/插件的汉化服务可以随时联系我们！另外成品WordPress网站以及半成品WordPress网站建设，海外Google SEO优化托管服务，百度SEO优化托管服务，Centos/Debian服务器WP专用环境搭建，WP缓存服务器搭建，我们都是你的首选，拥有多年WP开源程序服务经验，我们一直在坚持客户体验，没有最好，只有更好！