我有一个WordPress页面，我正在努力，我不得不改变，以帮助优化页面的搜索引擎优化。作为此优化的一部分，我更改了页面标题，这导致标题中的菜单出现问题，因为它们最初将页面标题用作菜单项。
我制作了一个自定义菜单并使用wp_nav_menu将其填充到标题中，但是，原始的wp_list_pages菜单有一个功能，如果你在按钮上方盘旋，按钮颜色将变为背景颜色链接的父页面。
头文件代码是:(注意原始代码在ul id =“state-nav”注释掉）
<div id="slideshow" <?php if (is_page_template("page-state.php") OR is_page_template("page-state-2col.php")) { echo "class=\"subnav\"";} ?>>
<div class="image">
<?php
// Get featured image
get_the_image( array( 'link_to_post' => 0, 'the_post_thumbnail' => 'true', 'size' => 'full', 'default_image' => ''.get_bloginfo('template_url').'/images/img-masthead.jpg' ) );
// Get image caption
$args = array( 'post_type' => 'attachment', 'orderby' => 'menu_order', 'order' => 'ASC', 'post_mime_type' => 'image' ,'post_status' => null, 'numberposts' => null, 'post_parent' => $post->ID );
/*
$attachments = get_posts($args);
if ($attachments) {
foreach ( $attachments as $attachment ) {
//$alt = get_post_meta($attachment->ID, '_wp_attachment_image_alt', true);
$caption = $attachment->post_excerpt;
$description = $attachment->post_content;
echo "<p class=\"caption\">" .$caption. "</p>";
//echo "<p class=\"caption\">" .$description. "</p>";
}
}
*/
// Get featured image caption
echo the_post_thumbnail_caption();
?>
</div>
<ul id="state-nav">
<!--?php wp_list_pages('sort_column=menu_order&title_li=&depth=1&child_of=19'); ?-->
<?php wp_nav_menu(array( 'sort_column' => 'menu_order', 'menu' => 'state_menu', 'container_class' => 'state-nav', 'container_id' => 'header', 'theme_location' => 'header', 'child_of' => 19) ); ?>
</ul>
<?php
// Check if page is using the state template
if (is_page_template("page-state.php") OR is_page_template("page-state-2col.php")) { ?>
<ul id="state-subnav">
<?php
$id = $post->ID;
$pid = $post->post_parent;
?>
<?php if($pid != 19) { ?>
<li class="page_item"> <a href="<?php echo get_permalink( $pid ); ?>">Overview</a>
<? } else { ?>
<li class="current_page_item"> <a href="<?php echo get_permalink( $id ); ?>">Overview</a>
<?php } ?>
</li>
<?php
if($pid == 19)
wp_list_pages('sort_column=menu_order&title_li=&depth=1&child_of='.$id.'');
else
wp_list_pages('sort_column=menu_order&title_li=&depth=1&child_of='.$pid.''); ?>
</ul>
<?php
}
?>
</div>
原始CSS是：
#slideshow { position: relative; width: 981px; height: 279px; overflow: hidden; margin:0 0 20px 2px;}
#slideshow.subnav { height: 317px; width: 950px; }
#slideshow .image { position: relative; width: 982px; overflow: hidden; }
#slideshow .image .caption { position: absolute; top: 55px; left: 23px; padding: 10px 25px; margin: 0; background: url(images/bg-slideshow_caption.png); color: #fff; font: 38px/40px Rockwell, Verdana, "Times New Roman", Times, serif; max-width: 470px }
#slideshow #state-nav { position: absolute; right: 0; top: 0; margin: 0; }
#slideshow #state-nav li { border-bottom: 2px solid #36434d; padding: 0; text-align: center; width: 200px; height: 33px; line-height: 33px; }
#slideshow #state-nav li.last { border-bottom: none; }
#slideshow #state-nav li a { display: block; font-size: 14px; color: #fff; text-decoration: none; text-transform: uppercase; background: #586169 url(images/bg-state_nav.png) top center repeat-y; }
#slideshow #state-subnav { position: absolute; bottom: 1px; left: 0; background: #4dc1ff; overflow: hidden; width: 981px; }
#slideshow #state-subnav li { list-style: none; float: left; display: inline; }
#slideshow #state-subnav li a { display: block; font-size: 14px; color: #000; text-decoration: none; padding: 10px 20px; }
#slideshow #state-subnav li a:hover,
#slideshow #state-subnav li.current_page_item a { color: #fff; }
#slideshow #state-nav li a:hover,
#slideshow #state-nav li.current_page_item a,
#slideshow #state-nav li.current_page_parent a { background: #4dc1ff; color: #000; }
/*NSW*/
body.page-id-20 #content h2,
body.parent-pageid-20 #content h2 {color: #4dc1ff; }
/*VIC*/
#slideshow #state-nav li.page-item-31 a:hover,
#slideshow #state-nav li.page-item-31.current_page_item a,
#slideshow #state-nav li.page-item-31.current_page_parent a,
body.page-id-31 #slideshow #state-subnav,
body.parent-pageid-31 #slideshow #state-subnav
{ background: #87d853; color: #000; }
body.page-id-31 #content h2, body.parent-pageid-31 #content h2 {color: #87d853; }
/*QLD*/
#slideshow #state-nav li.page-item-33 a:hover,
#slideshow #state-nav li.page-item-33.current_page_item a,
#slideshow #state-nav li.page-item-33.current_page_parent a,
body.page-id-33 #slideshow #state-subnav,
body.parent-pageid-33 #slideshow #state-subnav{ background: #cd3337; color: #000; }
body.page-id-33 #content h2,
body.parent-pageid-33 #content h2 {color: #cd3337; }
/*SA*/
#slideshow #state-nav li.page-item-35 a:hover,
#slideshow #state-nav li.page-item-35.current_page_item a,
#slideshow #state-nav li.page-item-35.current_page_parent a,
body.page-id-35 #slideshow #state-subnav,
body.parent-pageid-35 #slideshow #state-subnav{ background: #f9b53a; color: #000; }
body.page-id-35 #content h2,
body.parent-pageid-35 #content h2 {color: #f9b53a; }
/*WA*/
#slideshow #state-nav li.page-item-37 a:hover,
#slideshow #state-nav li.page-item-37.current_page_item a,
#slideshow #state-nav li.page-item-37.current_page_parent a,
body.page-id-37 #slideshow #state-subnav,
body.parent-pageid-37 #slideshow #state-subnav{ background: #68b1ae; color: #000; }
body.page-id-37 #content h2,
body.parent-pageid-37 #content h2 {color: #68b1ae; }
/*NT*/
#slideshow #state-nav li.page-item-39 a:hover,
#slideshow #state-nav li.page-item-39.current_page_item a,
#slideshow #state-nav li.page-item-39.current_page_parent a,
body.page-id-39 #slideshow #state-subnav,
body.parent-pageid-39 #slideshow #state-subnav{ background: #cdb189; color: #000; }
body.page-id-39 #content h2,
body.parent-pageid-39 #content h2 {color: #cdb189; }
/*TAS*/
#slideshow #state-nav li.page-item-41 a:hover,
#slideshow #state-nav li.page-item-41.current_page_item a,
#slideshow #state-nav li.page-item-41.current_page_parent a,
body.page-id-41 #slideshow #state-subnav,
body.parent-pageid-41 #slideshow #state-subnav{ background: #2fb56c; color: #000; }
body.page-id-41 #content h2,
body.parent-pageid-41 #content h2 {color: #2fb56c; }
/*ACT*/
#slideshow #state-nav li.page-item-43 a:hover,
#slideshow #state-nav li.page-item-43.current_page_item a,
#slideshow #state-nav li.page-item-43.current_page_parent a,
body.page-id-43 #slideshow #state-subnav,
body.parent-pageid-43 #slideshow #state-subnav{ background: #986fae; color: #000; }
body.page-id-43 #content h2,
body.parent-pageid-43 #content h2 {color: #986fae; }
我曾尝试编辑CSS以包含新菜单中的类，但我无法弄清楚如何使其复制原始功能。
任何帮助都将不胜感激。
干杯
劳埃德
答案 0 :(得分：0)
好的，所以我找到了答案。
我的CSS引用了错误的部分。当使用wp_nav_menu将菜单更改为自定义菜单时，CSS需要引用.menu_item_ $ n。
示例：在我原来的CSS中，我引用了
#slideshow #state-nav li.page-item-31 a:hover,
#slideshow #state-nav li.page-item-31.current_page_item a,
#slideshow #state-nav li.page-item-31.current_page_parent a,
哪个没效果。为了引用自定义菜单项，我需要像这样引用li.menu-item- $ n：
#slideshow #state-nav li.menu-item-772 a:hover,
#slideshow #state-nav li.menu-item-772.current_page_item a,
#slideshow #state-nav li.menu-item-772.current_page_parent a,
我希望这有助于解决此问题的其他任何人。