所以我想知道是否有可能像现在一样在页脚中显示我的页面链接,但在4个链接之后,创建一个新的ul
并填充另外4个链接。此外,还将显示的链接总数限制为8。所以基本上在两个列表上是允许的。
这可能吗?我的代码。。
// the footer menu (should you choose to use one)
function bones_footer_links() {
// display the wp3 menu if available
wp_nav_menu(array(
'container' => '', // remove nav container
'container_class' => 'footer-links clearfix', // class of container (should you choose to use it)
'menu' => __( 'Footer Links', 'bonestheme' ), // nav name
'menu_class' => 'nav footer-nav clearfix', // adding custom nav class
'theme_location' => 'footer-links', // where it's located in the theme
'before' => '', // before the menu
'after' => '', // after the menu
'link_before' => '', // before each link
'link_after' => '', // after each link
'depth' => 4, // limit the depth of the nav
'fallback_cb' => 'bones_footer_links_fallback' // fallback function
));
} /* end bones footer link */
// this is the fallback for footer menu
function bones_footer_links_fallback() {
wp_page_menu( array(
'show_home' => true,
'menu_class' => 'nav bottom-nav clearfix', // adding custom nav class
'include' => '',
'exclude' => '',
'echo' => true,
'link_before' => '', // before each link
'link_after' => '' // after each link
) );
}
这给了我:
<ul>
<li><a href="#" title="">Link</a></li>
<li class="page_item page-item-9 current_page_item"><a href="#">Link</a></li>
<li class="page_item page-item-46"><a href="#">Link</a></li>
<li class="page_item page-item-42"><a href="#">Link</a></li>
<li class="page_item page-item-44"><a href="#">Link</a>
</ul>
我想要的是在4个链接之后,一个新的ul
,如下所示:
<ul class="list_third">
<li><a href="#">link text</a></li>
<li><a href="#">link text</a></li>
<li><a href="#">link text</a></li>
<li><a href="#">link text</a></li>
</ul>
<ul class="list_third">
<li><a href="#">link text</a></li>
<li><a href="#">link text</a></li>
<li><a href="#">link text</a></li>
<li><a href="#">link text</a></li>
</ul>
总共最多显示8个链接。
我相信这个问题早就得到了答案,但我在试图找出类似的东西时遇到了它,所以我想我会发布我的发现。
虽然它并不是你想要的,但可以使用CSS列计数来接近它。你可以看看我在这里找到的同一个Fiddle。这确实对我有帮助,所以我想我会把它传下去。
干杯!Daniel
div#multiColumn {
-moz-column-count: 2;
-moz-column-gap: 20px;
-webkit-column-count: 2;
-webkit-column-gap: 20px;
column-count: 2;
column-gap: 20px;
}