给wordpress每个页面设置制定的菜单导航

需要开发定制：定制wordpress插件

记录最近制作外贸站遇到的问题

在制作Wordpress多语言页面的时候，如果不使用翻译插件，又想使用系统自带的选单就需要为每一个页面自定义选单了。

需求是什么？

1.指定语言页面。
2.指定语言选单。
3.选单切换导航的时候更换指定语言页面。

写一个WP插件来实现它

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<?php
/*
Plugin Name: Custom Primary Menu Selector
Description: Allow users to set a custom primary menu for each page.
Version: 1.0
Author: ❄️2winter
License: GPL-2.0+
*/

// 首先在页面编辑的地方添加一个自定义的选择列表（需要使用经典编辑器）。
add_action('add_meta_boxes', 'custom_menu_positions_meta_boxes');

function custom_menu_positions_meta_boxes()
{
    // Define menu positions
    $menu_positions = array(
        'header_menu' => 'Header Menu'
    );

    foreach ($menu_positions as $position_key => $position_label) {
        add_meta_box(
            'custom-menu-selector-' . $position_key,
            'Custom Menu Selector - ' . $position_label,
            'custom_menu_selector_callback',
            'page',
            'side',
            'high',
            array('position' => $position_key)
        );
    }
}

// 输出到当前站点的菜单列表wp页面里面（根据语言提前设置好多个语言的选单）
function custom_menu_selector_callback($post, $metabox)
{
    $position = $metabox['args']['position'];
    $selected_menu = get_post_meta($post->ID, '_custom_menu_' . $position, true);
    $menus = get_terms('nav_menu', array('hide_empty' => false));

    echo '<label for="menu-selector-' . $position . '">Select Menu for ' . esc_html($position) . ':</label>';
    echo '<select id="menu-selector-' . $position . '" name="menu-locations[' . $position . ']">';
    echo '<option value="">Default (' . esc_html($position) . ') Menu</option>';

    foreach ($menus as $menu) {
        echo '<option value="' . esc_attr($menu->term_id) . '" ' . selected($selected_menu, $menu->term_id, false) . '>' . esc_html($menu->name) . '</option>';
    }

    echo '</select>';
    wp_nonce_field('custom_menu_positions_nonce', 'custom_menu_positions_nonce');
}

// 保存页面的时候，把设置的菜单类型保存到帖子里
add_action('save_post', 'save_custom_menu_positions');

function save_custom_menu_positions($post_id)
{
    // Check if nonce is set
    if (!isset($_POST['custom_menu_positions_nonce']) || !wp_verify_nonce($_POST['custom_menu_positions_nonce'], 'custom_menu_positions_nonce')) {
        return;
    }

    // 存储到meta信息里
    $menu_positions = array('header_menu');

    foreach ($menu_positions as $position) {
        if (array_key_exists($position, $_POST['menu-locations'])) {
            update_post_meta($post_id, '_custom_menu_' . $position, sanitize_text_field($_POST['menu-locations'][$position]));
        }
    }
}


// 页面在切换导航的时候，更新当前设置的选单。
add_action('template_redirect', 'update_primary_menu');

function update_primary_menu()
{
    
    $post_id = get_queried_object_id();

    $header_menu = get_post_meta($post_id, '_custom_menu_header_menu', true);
    //这里默认选择主选单
    $primary_menu_location = 'primary'; // Identifier for 
    $menu_locations = get_nav_menu_locations();

    if (isset($menu_locations[$primary_menu_location])) {

        $primary_menu_id = $menu_locations[$primary_menu_location];
        $selected_menu_id = $header_menu ? $header_menu : $primary_menu_id;

       //设置全局选单
        set_theme_mod('nav_menu_locations', array('primary' => $selected_menu_id));

    }
}

如何使用？

将这段代码复制到主题的function里面就可以了，也可以制作成wp插件安装使用，当然为了防止修改错误，你可以安装wpCode插件后自定义一个代码段，把这个放进去就可以了。

插件已开源:wp-custom-page-menu-selector