Colocar imagem como menu
-
Boa Tarde galera,
Estou desenvolvendo um site, e já mexi no layout dele e tudo mais, porém estou querendo colocar uma imagem como menu. tipo botões mesmos para subistituir o que está escrito.
ExemploTa la HOME CONTATO
eu gostaria de colocar uma imagem escrito home com um desenho, porém não estou achando aonde altera isso no CSS
Estou usando o thema panoramica
Peço a ajuda de vocês galera!
-
Veja no arquivo
header.phpdo seu tema, lá tem referências sobre o menu.Agora pra criar um menu com imagens vc pode simplesmente criar seu menu com css e depois criar os links dinâmicamente da seguinte forma:
<li> <a href="<?php bloginfo('home') ?>/quem-somos"> <img src="<?php bloginfo('template_directory') ?>/images/quem-somos.png"> </a> </li>Espero que tenha entendido.
Mas te deixo aqui também uma dica: Estude o Codex do WordPress.
Veja Sobre Navigator Menu aqui: http://codex.wordpress.org/Navigation_Menus
WP nav Menu: http://codex.wordpress.org/Function_Reference/wp_nav_menuMuito importante estudar isto, pois quando estiver desenvolvendo seus próprios temas estará usando isto constantemente.
Deixo aqui o link para meu site, onde estou escrevendo alguns artigos sore o WP: http://lucianobraga.com
Espero ter ajudado!!
Olá Luciano,
Primeiramente obrigado pela ajuda, estou testando aqui, mas não entendi onde eu coloco esse código?
No própio CSS na folha de estilo, ou no header.php?
Muito Obrigado pela atenção
AbraçoNo
header.php, não pode colocar código html dentro de um arquivo css.Se vc entende de CSS é só criar os elementos no
header.phpou em outros arquivos do tema, dependendo de onde queira que seu menu apareça e depois só estilizar comcss.Bom Dia amigo,
Desculpe a demora é que fiquei meio enrrolado com as coisas da faculdade, do trampo e tudo mais. Primeiramente gostaria muito de agradecer sua atenção.
Estou tentnanod colocar esse código que você passou mas não estou achando como colocar ele. meu header.php ta assim:
<!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo('charset'); ?>" /> <?php if(function_exists('cpotheme_description')) cpotheme_description(); ?> <?php if(function_exists('cpotheme_keywords')) cpotheme_keywords(); ?> <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'> <link rel="profile" href="http://gmpg.org/xfn/11" /> <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> <title><?php cpotheme_title(); ?></title> <?php if(is_singular() && get_option('thread_comments')) wp_enqueue_script('comment-reply'); ?> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <div class="outer" id="top"> <div class="wrapper wrapper_fixed"> <div id="topbar" > <div class="container"> <div id='topmenu'> <?php wp_nav_menu(array('menu_class' => 'nav_top', 'theme_location' => 'top_menu', 'depth' => 1, 'fallback_cb' => null)); ?> </div> <div class="clear"></div> </div> </div> <div id='header' class=""> <div class="container"> <div class="logo"> <?php if(cpotheme_get_option('cpo_general_texttitle') == 0): ?> <?php if(cpotheme_get_option('cpo_general_logo') == ''): ?> <a href="<?php echo home_url(); ?>"><img src="<?php echo get_template_directory_uri().'/images/logo.png'; ?>" alt="<?php echo bloginfo('name'); ?>" width="200" height="50"/></a> <?php else: ?> <a href="<?php echo home_url(); ?>"><img src="<?php echo cpotheme_get_option('cpo_general_logo'); ?>" alt="<?php echo bloginfo('name'); ?>"/></a> <?php endif; ?> <?php endif; ?> <?php if(is_singular() && !is_front_page()): ?> <span class="title<?php if(cpotheme_get_option('cpo_general_texttitle') == 0){ ?> hidden<?php } ?>"><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></span> <?php else: ?> <h1 class="title<?php if(cpotheme_get_option('cpo_general_texttitle') == 0){ ?> hidden<?php } ?>"><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></h1> <?php endif; ?> <span class="description"><?php bloginfo('description'); ?></span> </div> <div id='menu'> <?php if(has_nav_menu('main_menu')) wp_nav_menu(array('menu_class' => 'nav_main', 'theme_location' => 'main_menu', 'depth' => '3', 'walker' => new Cpotheme_Menu_Walker())); else wp_nav_menu(array('menu_class' => 'nav_main', 'depth' => '3', 'container' => false)); ?> <div class='clear'></div> </div> <div class='clear'></div> </div> </div> <div class="small_border primary_color_bg"></div> <?php if(cpotheme_get_option('cpo_slider_always') == 1 || is_home() || is_front_page()){ ?> <?php $slider_posts = new WP_Query('post_type=cpo_slide&posts_per_page=-1&order=ASC&orderby=menu_order'); ?> <?php if($slider_posts->post_count > 0): $slide_count = 0; ?> <div id='slider'> <ul class="cycle_slides"> <?php while($slider_posts->have_posts()): $slider_posts->the_post(); ?> <?php $slide_count++; ?> <?php $image_url = wp_get_attachment_image_src(get_post_thumbnail_id(get_the_ID()), array(1500, 7000), false, ''); ?> <li id="slide_<?php echo $slide_count; ?>" style="background:url(<?php echo $image_url[0]; ?>) no-repeat center;"> <?php if(get_post_meta(get_the_ID(), 'slide_position', true) == 'right') $slide_position = ' textbox_right'; else $slide_position = ''; ?> <div class="container"> <div class="textbox<?php echo $slide_position; ?>"> <h2 class="title"><?php the_title(); ?></h2> <?php the_content(); ?> </div> </div> </li> <?php endwhile; ?> </ul> <?php if($slider_posts->post_count > 1): ?> <div class='prev'></div> <div class='next'></div> <div class='pages'></div> <?php endif; ?> </div> <?php endif; ?> <?php } ?> <?php if(is_home() || is_front_page()){ ?> <?php if(cpotheme_get_option('cpo_home_tagline') != ''): ?> <div class="small_border primary_color_bg"></div> <div class="tagline"> <div class="item"> <div class="container"> <div><?php cpotheme_edit_link(); ?></div> <?php echo do_shortcode(stripslashes(cpotheme_get_option('cpo_home_tagline'))); ?> </div> </div> </div> <?php endif; ?> <div class="container"> <?php $feature_posts = new WP_Query('post_type=cpo_feature&posts_per_page=-1&order=ASC&orderby=menu_order'); ?> <?php if($feature_posts->post_count > 0): $feature_count = 0; ?> <div id="minifeatures"> <?php while($feature_posts->have_posts()): $feature_posts->the_post(); ?> <?php if($feature_count % 4 == 0 && $feature_count != 0) echo '<div class="separator"></div>'; $feature_count++; ?> <div class="feature column col4 <?php if($feature_count % 4 == 0) echo ' feature_right col_last'; ?>"> <?php $icon = get_post_meta(get_the_ID(), 'feature_icon', true); ?> <?php the_post_thumbnail(); ?> <h2 class="title"><?php the_title(); ?> <?php cpotheme_edit_link(); ?></h2> <div class="content"><?php the_content(); ?></div> </div> <?php endwhile; ?> <div class='clear'></div> </div> <?php endif; ?> </div> <div class="container"> <?php $feature_posts = new WP_Query('post_type=cpo_portfolio&order=ASC&orderby=menu_order&posts_per_page=6'); ?> <?php if($feature_posts->have_posts()): $feature_count = 0; ?> <div id="portfolio"> <div class="column col4 heading"> <?php echo do_shortcode(stripslashes(cpotheme_get_option('cpo_home_portfolio'))); ?> </div> <div class="column col4x3 col_last"> <?php while($feature_posts->have_posts()): $feature_posts->the_post(); ?> <?php if($feature_count % 3 == 0 && $feature_count != 0) echo '<div class="col_divide"></div>'; ?> <?php $feature_count++; ?> <div class="column col3<?php if($feature_count % 3 == 0 && $feature_count != 0) echo ' col_last'; ?>"> <?php get_template_part('element', 'portfolio'); ?> </div> <?php endwhile; ?> <div class='clear'></div> </div> </div> <?php endif; ?> <div class="clear"></div> </div> <?php } ?>Mais uma vez agradeço muito sua atenção, sou novato no wordpress, e estou aprendendo um pouco de css e php, mas estou com dúvida na hora de mexer ai, acredito que um ajudando o outro é a melhor opção, como vc está fazendo, obrigado
abraço
Igor Fastroni
Olá Igor, aqui tem um tutorial de blog, mas o mesmo funciona no worpdress. Faça a imagem no photoshop e faça o que mostra no tutorial 😀
www*cherryboomb*com/2012/07/menu-em-imagem-com-efeito-hover.html
- O tópico ‘Colocar imagem como menu’ está fechado para novas respostas.