php - How to use images as nav buttons in Wordpress? -
here navbar in header.php
<!-- nav --> <div id="nav"> <ul> <li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/navbar/home.png" alt="ad image" /></a></li> <li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/navbar/nav2.png" alt="ad image" /></a></li> <li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/navbar/nav3.png" alt="ad image" /></a></li> <li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/navbar/nav4.png" alt="ad image" /></a></li> <li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/navbar/nav5.png" alt="ad image" /></a></li> <li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/navbar/nav6.png" alt="ad image" /></a></li> <?php wp_list_categories('title_li='); ?> </ul> </div> <!-- end nav -->
how each button go there respected pages? if add in category through dashboard adds in text based link. want images represent different categories, thoughts?
i think have 2 options:
manipulate wp_list_categories() function display images
manipulate text links via css hide text, , show background image instead (
color: transparent; display: block; height: xyz; width: xyz; background-image: url(...)
) depends on how list rendered, , whether there characteristics identify each list item.
the cleanest way rewriting wp_list_categories() or using plugin provides replacement. see wordpress forum entry: how customize wp_list_categories()?
Comments
Post a Comment