如何以选项卡作为链接的形式在所有子域中共享 Multisite 主域的非主菜单？

如何解决如何以选项卡作为链接的形式在所有子域中共享 Multisite 主域的非主菜单？

我有一个多站点，其中包含一个主域 (www.valleysgroup.co.uk) 和多个子域（brickslipsdirect.valleysgroup.co.uk、Tradeporcelain .valleysgroup.co.uk 等）。

我想共享一个自定义顶部栏，其中包含一个不是主域主菜单的菜单，来自所有子域的主域。此菜单将是指向每个子域的简单链接，但采用选项卡的形式。标签 1 将导致 brickslipsdirect.valleysgroup.co.uk，标签 2 将导致 Tradeporcelain.valleysgroup.co.uk 等

我花了几天时间尝试各种解决方案，然后我发现了插件：Multisite Shared Menu

这很好用，除了它只会应用主域的主菜单，而没有其他菜单。理想情况下，我想在主域和所有子域上创建一个名为 Global Top Bar 的新菜单位置，创建名为 Global Menu 的菜单strong> 在主域上，然后将菜单拉入所有子域。

我也不确定如何在主域和子域上将其作为选项卡而不是一般的水平菜单、下拉菜单或列表菜单来实现。

请查看图片以清楚了解我正在寻找的主域和子域的外观：

任何帮助将不胜感激！

解决方法

不幸的是，我没有太多时间花在这上面，但希望您或您认识的人可以帮助充实这一点。

我添加了一堆评论，希望可以解释大多数事情。您只需要插入您在多站点后端中找到的每个站点的 ID。这段代码将踢出一个无序列表，每个站点一个条目，当前站点有一个特殊的类。您可能想要添加一些额外的类，但希望这足以让您至少到达某个地方。

// Just the Site IDs from WordPress
$siteIds = [2,3,4];

// This will hold <li> tags for each
$menuItems = [];
foreach ($siteIds as $siteId) {

    // Get the WordPress WP_Site object
    $site = get_site($siteId);

    // Sanity check that it was found and public
    if (!$site || !$site->public) {
        continue;
    }

    // Optional attributes classes on the <li>,default none
    $extraAttributes = '';

    // For the current site,add a class
    if ($siteId === get_current_blog_id()) {
        $extraAttributes = ' class="current-site"';
    }

    // Append an HTML node
    $menuItems[] = sprintf(
        '<li %3$s><a href="%2$s">%1$s</a></li>',esc_html($site->blogname),esc_attr($site->siteurl),$extraAttributes
    );
}

// Make sure the above worked
if ($menuItems) {
    // Output wrapped
    echo '<ul>' . implode('',$menuItems) . '</ul>';
}

我现在已经在我的主要域中使用以下内容添加了名为 Global Top Bar 的新菜单位置 子主题 > Functions.php 文件：

function register_new_menu_location() {
   register_nav_menu('global-menu-location',__( 'Global Top Bar' ));
}
add_action( 'init','register_new_menu_location' );

我还创建了名为 Global Menu 的菜单，并将其标记为在新创建的位置显示。

然后我进入了我的 Child Theme > Header.php 文件并添加了以下似乎有效的内容：

switch_to_blog(1);
wp_nav_menu( array(
    'menu' => '16','container_class' => 'GlobalMenuContainerClass','menu_class' => 'GlobalMenuClass'
) );
restore_current_blog();

Menu '16' 是在我的主域中找到的菜单 ID。这会显示所有子域上的菜单，如下所示：

我使用以下 CSS 代码添加了一些 CSS 以使其看起来更像标签：

.GlobalMenuContainerClass {
  height: 45px;
  padding-top: 8px;
  padding-right: 100px;
  padding-left: 100px;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  background: #cc2325;
}

.GlobalMenuClass {
  list-style: none;
  margin: 0;
  padding: 0;
}

.GlobalMenuClass li a {
  text-decoration: none;
  float: left;
  margin-right: 5px;
  color: white;
  border: 1px solid #777777;
  padding: 5px 10px 5px 10px;
  min-width: 100px;
  text-align: center;
  display: block;
  background: #777777;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.GlobalMenuClass li a:hover:not(.active) {
  background: #4e4e4e;
  border: 1px solid #4e4e4e;
}

.active {
  background: white;
  color: black;
  border: 1px solid white;
}

这是它现在的样子：

您可以看到深灰色选项卡的悬停颜色不同，但我还没有实现 .active 选项卡 CSS。我还不太确定我将如何做到这一点。

希望这可以帮助其他处于类似情况的人。