使用 ACF 的 WordPress 自定义菜单选项页面

使用 Advanced Custom Fields（ACF）和 WordPress 自定义菜单，可以创建一个自定义的选项页面，用于在 WordPress 后台中扩展菜单项的功能。在这篇文章中，我们将介绍如何创建一个完全自定义的 WordPress 自定义菜单。

前置条件

在开始之前，需要确保你已经安装并启用了 Advanced Custom Fields 插件。此外，你需要了解一些基本的 PHP 和 WordPress 开发知识。

步骤

1. 创建一个自定义菜单选项

使用 ACF，我们可以很容易地创建一个自定义的选项页面。进入 WordPress 后台，依次选择“自定义字段”-“添加新字段组”，创建一个新的字段组。

为这个字段组添加一个标题和一个位置，以便在选项卡中显示。接下来，添加一个选项字段，以用来存储菜单中选定的项目的信息。

2. 将 ACF 的选项添加到菜单页面

现在，我们需要将 ACF 的选项添加到菜单页面中。打开 WordPress 的菜单页面，选择菜单，并在选项中添加一个新的选项卡。

将 ACF 选项页面中的字段组添加到这个新选项卡中。

3. 向菜单页面添加自定义 JavaScript

现在，我们已经将 ACF 选项添加到菜单页面中，下一步是添加自定义 JavaScript。这将允许我们在 WordPress 后台菜单编辑器中添加自定义 JavaScript 和 CSS。

首先，我们要创建一个新的 JavaScript 文件，用于处理 ACF 的选项。在主题的 JavaScript 目录中创建一个新的文件，例如 acf-menu-options.js。

该文件可以包含用于处理 ACF 选项的 JavaScript 代码，例如：

(function($){
  // 获取菜单选项
  var acfMenuOptions = acf.getField('acf_menu_options').data;
 
  // 将选项添加到 WordPress 菜单
  $.each(acfMenuOptions, function(key, option){
    var navMenuItem = $('#menu-to-edit li.menu-item[class*="menu-item-depth-0"]').first().clone();
    var navMenuItemID = navMenuItem.attr('id').replace(/-(\d+)$/, '-'+option.id);
    navMenuItem.attr('id', navMenuItemID);
    navMenuItem.find('.item-title').text(option.title);
    navMenuItem.find('.item-url').val(option.url);
 
    $('#menu-to-edit li.menu-item:last').after(navMenuItem);

    // 定义选项菜单转跳函数
    navMenuItem.find('.item-title, .item-url').on('click', function(){
      // 获取选项
      var optionID = $(this).closest('li.menu-item').attr('id').replace(/^menu-item-(\d+)$/, '$1');
      var option = acfMenuOptions.find(function(option){
        return option.id == optionID;
      });
 
      // 跳转到选项的 URL
      window.location.href = option.url;
 
      return false;
    });
  });
})(jQuery);

现在，我们需要在 WordPress 菜单页面中将这个 JavaScript 文件添加到菜单页。

<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/acf-menu-options.js"></script>

4. 创建菜单项目

现在，我们已经准备好为 WordPress 创建自定义菜单项目了。这里我们可以使用 ACF 选项定义一个新的菜单项目的详细信息。

使用 WordPress 后台的菜单编辑器，创建一个新的菜单本身，并将新的自定义菜单项目添加到菜单中。

5. 输出菜单

最后，我们需要在 WordPress 主题的菜单代码中输出我们创建的新菜单。

在主题代码的菜单输出部分添加以下代码即可输出这个新增的菜单。

wp_nav_menu( array(
  'theme_location' => 'primary',
  'menu_class'     => 'nav',
  'menu_id'        => 'nav-menu',
) );

至此，我们已经创建了一个使用 ACF 的完全自定义 WordPress 自定义菜单选项页面。通过使用 ACF，我们可以非常容易地扩展 WordPress 后台的菜单功能，使其更适合我们的需要。