当前位置:首页技术记录WordPress给网站右键添加自定义的按钮美化

WordPress给网站右键添加自定义的按钮美化

要给 WordPress 网站右键添加自定义按钮实现美化,可以按照以下步骤进行操作:

在 WordPress 后台添加功能代码:将以下代码添加到主题的 functions.php 文件中,这将在前端页面的 标签之间添加一段 JavaScript 代码。

function custom_right_click_menu() {
?>
<script type="text/javascript">
(function($) {
  $(document).ready(function() {
    $('body').on('contextmenu', function() {
      var top = event.pageY + 'px';
      var left = event.pageX + 'px';
      $('<div>').attr({
        id: 'my-custom-menu',
      }).css({
        display: 'none',
        position: 'fixed',
        top: top,
        left: left,
        border: '1px solid #ccc',
        background: '#fff',
        padding: '8px',
        'z-index': '9999'
      }).html('<ul><li><a href="#">自定义按钮1</a></li><li><a href="#">自定义按钮2</a></li></ul>').appendTo('body').fadeIn(200);
      return false;
    });
    $('body').click(function() {
      $('#my-custom-menu').fadeOut(200, function() {
        $(this).remove();
      });
    });
  });
})(jQuery);
</script>
<?php
}
add_action('wp_head', 'custom_right_click_menu');

修改自定义按钮:将上述代码中的自定义按钮名称和链接修改为你需要的名称和链接。你可以根据需求添加更多的按钮。
设计菜单样式:根据需求,将自定义按钮菜单样式进行修改。
保存并应用:最后,在 WordPress 后台将修改后的主题文件保存并应用即可。
通过以上步骤,就可以为 WordPress 网站添加自定义按钮实现美化。

个人中心
搜索