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

How can I share a non-primary menu of a Multisite's main domain across all sub-domains in the form of tabs as links?

我有一个包含主域 (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 的新菜单位置,创建名为 主域上的全局菜单,然后将菜单拉入所有子域。

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

请查看图片以清楚地了解我在主域和子域中寻找的内容:

如有任何帮助,我们将不胜感激!

很遗憾,我没有太多时间花在这上面,但希望你或你认识的人能帮助充实这一点。

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

// 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' );

我还创建了名为 全局菜单 的菜单,并标记为在新创建的位置显示。

然后我进入了我的 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。不太确定我要怎么做。

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