0

我正在尝试让 PanelSnap.js 在我的 wordpresssite 上工作。我的编码经验就像阅读手册和复制粘贴一样。所以如果基本的东西不正确，我很抱歉。

我下载了开发人员在 panelnap.com/panelsnap.js 上使用的 panelnap.js，并将文件上传到服务器（在子主题目录中）。之后，我将此行添加到子主题中的 functions.php 中。

wp_enqueue_script( 'panelSnap', get_template_directory_uri() . '/js/panelsnap.js', array ( 'jquery' ), 1.1, true);

下一步是使用“简单自定义 CSS 和 JS”-PlugIn 将一些 HTML 添加到 Header

      <script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.js"></script>
<script src="/wp-content/themes/kadence-child/assets/js/panelsnap.js"></script>
    
<script>
      jQuery(function () {
        new PanelSnap();
      })
    </script>

<script src="/wp-content/themes/kadence-child/assets/js/panelsnap.js" defer></script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
          new PanelSnap();
        });
    </script>
<script>
  var defaultOptions = {
    container: document.body,
    panelSelector: '> section',
    directionThreshold: 50,
    delay: 0,
    duration: 300,
    easing: function(t) { return t },
  };

  new PanelSnap(options);
</script>

和一些 JS 在页脚

 jQuery(document).ready(function( $ ){
var options = {
// jQuery object referencing a menu that contains menu items
$menu: false, 
// CSS selector to menu items (scoped within the menu)
menuSelector: 'a',
// css selector to panels (scoped within the container)
panelSelector: 'section', 
// jQuery event namespace that's being used
namespace: '.panelSnap',
// fired before a panel is being snapped
onSnapStart: function(){}, 
// fired after a panel was snapped
onSnapFinish: function(){}, 
// fired before a panel is being snapped.
onActivate: function(){},
// An integer specifying the number of pixels required to scroll 
// before the plugin detects a direction and snaps to the next panel.
directionThreshold: 50, 
// The number of milliseconds in which the plugin snaps to the desired panel
slideSpeed: 200,
// The jQuery easing animation to use.
easing: 'linear',
// An integer specifying the number of pixels to offset when snapping to a panel.
offset: 0,
// keyboard navigation.
keyboardNavigation: {
  enabled: false,
  nextPanelKey: 40,
  previousPanelKey: 38,
  wrapAround: true
},
strictContainerSelection: true
};
jQuery('body').panelSnap(options);
  });

如果我打开网站和控制台，它会给我这个

点击打开

我什至尝试构建类似于开发人员演示的站点之一。

https://mobeil.helfersyndrom-ev.de/522-2/

感谢您花时间阅读本文，我将不胜感激每一个帮助或批评。

4

0 回答 0