admin管理员组文章数量:1406222
I'd like to use Semantic UI to aid development of a Wordpress template for a project.
For a submenu I intend to use one of the Secondary sub menus found just at the bottom of the Pointing section.
The problem I'm facing is that WP doesn't seem to allow customization of the tag.
In Semantic UIs example, this is the code they use to generate a secondary sub menu, how would I implement this with WP?
<div class="ui secondary vertical pointing menu">
<a class="active item">
<i class="home icon"></i> Home
</a>
<a class="item">
<i class="mail icon"></i> Messages
</a>
<a class="item">
<i class="user icon"></i> Friends
</a>
</div>
So far I've implemented a menu by using the following code:
<div class="ui secondary vertical pointing menu">
<a class="item">
<?php wp_nav_menu( array( 'theme_location' => 'about-menu' ) ); ?>
</a>
</div>
Though by doing this, WP displays the menu without any styling underneath the rest of the menu items. Almost as though they're being pushed out.
Can anyone help me with this?
I'd like to use Semantic UI to aid development of a Wordpress template for a project.
For a submenu I intend to use one of the Secondary sub menus found just at the bottom of the Pointing section.
The problem I'm facing is that WP doesn't seem to allow customization of the tag.
In Semantic UIs example, this is the code they use to generate a secondary sub menu, how would I implement this with WP?
<div class="ui secondary vertical pointing menu">
<a class="active item">
<i class="home icon"></i> Home
</a>
<a class="item">
<i class="mail icon"></i> Messages
</a>
<a class="item">
<i class="user icon"></i> Friends
</a>
</div>
So far I've implemented a menu by using the following code:
<div class="ui secondary vertical pointing menu">
<a class="item">
<?php wp_nav_menu( array( 'theme_location' => 'about-menu' ) ); ?>
</a>
</div>
Though by doing this, WP displays the menu without any styling underneath the rest of the menu items. Almost as though they're being pushed out.
Can anyone help me with this?
Share Improve this question asked Jan 14, 2014 at 8:27 JoshJosh 731 gold badge1 silver badge11 bronze badges2 Answers
Reset to default 3You are definitely on the right track, but wp_nav_menu
will output a menu with a lot of containers and classnames; to keep it semantic in the terms of Semantic UI, you'll be in good hands if you build the structure yourself.
Get the name of the registered menu in the menu manager. Check register_nav_menu
in your functions.php
if you're unsure. This is for example what it looks like in the Twenty Thirteen-Theme:
register_nav_menu( 'primary', __( 'Navigation Menu', 'twentythirteen' ) );
(In your case it is probably about-menu
.)
You can use the snippet below to generate your custom menu via the menu name (we'll be able to get all the details (e.g. location, id,...) of the registered menu automatically)
<?php
$menu_name = 'primary'; // this is the registered menu name
if ( ( $locations = get_nav_menu_locations() ) && isset( $locations[ $menu_name ] ) ) :
$menu = wp_get_nav_menu_object( $locations[ $menu_name ] );
$menu_items = wp_get_nav_menu_items($menu->term_id);
echo '<div class="ui secondary vertical pointing menu">';
foreach ( (array) $menu_items as $key => $menu_item ) :
$title = $menu_item->title;
$class = $menu_item->classes; // get array with class names
if ( get_the_ID() == $menu_item->object_id ) { // check for current page
echo '<a class="item active">';
} else {
echo '<a class="item">';
}
echo '<i class="item ' . implode(' ', $class) . '"></i>' . $title;
echo '</a>';
endforeach;
echo '</div>';
else :
echo '<div class="ui error message"><p>Menu "' . $menu_name . '" not defined.</p></div>';
endif;
?>
Take a closer look at the code above. We're looping through the menu items of the defined menu. Make sure to add classnames (for the icons) within the menu manager. Inserting class names (separate multiple class names with a space) is optional and hidden by default; you can activate the input field via the Screen Options at the top.
Update: You can also output the menu with links to the pages:
<?php
$menu_name = 'primary'; // this is the registered menu name
if ( ( $locations = get_nav_menu_locations() ) && isset( $locations[ $menu_name ] ) ) :
$menu = wp_get_nav_menu_object( $locations[ $menu_name ] );
$menu_items = wp_get_nav_menu_items($menu->term_id);
echo '<div class="ui vertical menu">';
foreach ( (array) $menu_items as $key => $menu_item ) :
$title = $menu_item->title;
$url = $menu_item->url;
$class = $menu_item->classes; // get array with class names
if ( get_the_ID() == $menu_item->object_id ) { // check for current page
echo '<a class="item active" href="' . $url . '">';
} else {
echo '<a class="item" href="' . $url . '">';
}
echo '<i class="item ' . implode(' ', $class) . '"></i>' . $title;
echo '</a>';
endforeach;
echo '</div>';
else :
echo '<div class="ui error message"><p>Menu "' . $menu_name . '" not defined.</p></div>';
endif;
?>
If you want your Wordpress menu with sub menus in Semantic UI structure, you can use the following code.
Put the code to your template file, where the menu should be displayed.
You just need to adjust your Menu ID (if you hover the "delete menu" link in wordpress, it will be displayed in the URL).
You can also adapt the code for other Semantic UI menus.
<?php
$menuID = 'your menu ID';
$primaryNav = wp_get_nav_menu_items($menuID);
<div class="ui secondary vertical menu">
<?php
$count = 0;
$submenu = false;
foreach( $primaryNav as $item ) {
$link = $item->url;
$title = $item->title;
// item does not have a parent
if ( !$item->menu_item_parent ) {
$parent_id = $item->ID; ?>
<?php } ?>
<?php // item is parent of next element ?>
<?php if ( $parent_id == $item->menu_item_parent ) { ?>
<?php if ( !$submenu ) {
$submenu = true; ?>
<div class="ui dropdown item"><i class="dropdown icon"></i><?php echo get_the_title($parent_id); ?><div class="menu">
<?php } ?>
<a href="<?php echo $link; ?>" class="item"><?php echo $title; ?></a>
<?php if ( $primaryNav[ $count + 1 ]->menu_item_parent != $parent_id && $submenu ) { ?>
</div> <!-- menu --> </div> <!-- item -->
<?php $submenu = false;
} ?>
<?php }
else { // item is not parent of next element ?>
<?php if ( !$primaryNav[ $count + 1 ]->menu_item_parent ) { ?>
<a href="<?php echo $link; ?>" class="item"><?php echo $title; ?></a>
<?php } ?>
<?php } ?>
<?php $count++;
} ?>
</div> <!-- menu -->
?>
本文标签: menusCustomizing the a tag with Semantic UI
版权声明:本文标题:menus - Customizing the a tag with Semantic UI 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1744987480a2636178.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论