Modificar menu

[sebapulido]

Hola:

Estoy realizando una web en Wordpress (antes usaba joomla). Soy nuevo en WP.

Mi pagina en WP es: http://www.mendozagamers.com/wordpress/

Lo que quiero hacer es poder modificar el menu de la plantilla. Me gustaria armar algo como el que hay en: http://www.gamespotmx.com

Tienen la misma plantilla....

Ya se que asi a ciegas es dificil decirme... pero seria de gran ayuda si me podrian decir en que archivos meter mano... que modificar... etc...

Eh editado el archivo Style.css pero me parece que el error lo tengo en que tengo que meter mano en algun .php ..... creo que es el header.php Donde tengo las funciones:

<!-- Menu // -->
<ul class="menu">
<li><a href="<?php echo get_option('home'); ?>">Inicio</a></li>
<?php wp_list_categories('sort_column=menu_order&title_l i=&depth=0&show_count=0&include='.get_wpn_config(' submenu_include').'&exclude='.get_wpn_config('subm enu_exclude')); ?>
</ul>
<!-- // Menu -->

<!-- Submenu // -->
<ul class="submenu">
<?php wp_list_pages('sort_column=menu_order&title_li=&de pth=0&include='.get_wpn_config('menu_include').'&e xclude_tree='.get_wpn_config('menu_exclude')); ?>
</ul>
<!-- // Submenu -->

Espero respuestas... por favor.

Saludos!!!

[isaac_ben]

Hola,

Imagino que lo que quieres hacer es que cuando estés en alguna sección del blog, en el menú se note que está seleccionada esa sección en particular con una barra de otro color.

Si. El menú normalmente se coloca en el header de las plantillas de Wordpress, es decir en el archivo header.php y se maqueta con el archivo de estilos style.css

La función que tienes lista las categorías, y eso es lo que utiliza la plantilla como menú:

Código PHP:

wp_list_categories();
 

Lo que tienes que hacer en general es combinar algo de php, html y css, editando los dos archivos que te dije antes.

En mi blog yo utilizo una clase propietaria en el archivo de estilos:

Código CSS:

.menu .current_page_item {
    background: white;
    }
 

La clase .current_page_item ayuda a dar un estilo diferente al menú que corresponde a la página en que estás. Esto es para usar las páginas en el menú, no las categorías:

Código PHP:

wp_page_menu('show_home=1');
 

Si revisas el código html de tu blog, verás que el menú se genera con una lista:

Código HTML:

<li class="cat-item cat-item-8 current-cat">
  <a href="http://www.mendozagamers.com/wordpress/?cat=8">iPhone</a>
</li>
 

Y verás que el elemento <li> tiene la clase current-cat que puedes maquetar en tu archivo style.css

Así que creo que esa sería la respuesta. En tu archivo de estilos crea la clase y agrega los estilos que logren el efecto que quieres.

Código CSS:

.current-cat {
  background: #123456;
  border: 1px solid #000000;
  }
 

O algo así...

Saludos.

[sebapulido]

Muchas gracias isaac_ben mas o menos me diste una orientacion de por donde tenia que modificar.

Ahora tengo una consulta: Tengo en la pagina inicial relacionada con el css llamado style-home.css Pero al ir a la opcion PC quiero que me abra el css style-pc.css

Con eso voy a tener que cada seccion tenga sus colores y estilos caracteristicos...

Saludos!!!

[isaac_ben]

Hola,

Yo haría un sólo archivo CSS con varias clases, según lo que quieras cambiar. Por ejemplo, si quieres cambiar el color del menú, tendrías que utilizar el nombre de la categoría para formatear el nombre de una clase para CSS.

Algo así:

Código HTML:

<li class="menu_<?php echo $nombre_categoria ?>" >Home</li>
 

En la variable $nombre_categoria deberías guardar el nombre de la categoría seleccionada en ese momento con las funciones de Wordpress. Entonces, la case para CSS te quedaría algo como:

Código CSS:

/* Para el Inicio*/
 
.menu_inicio {
  /* define aquí las propiedades para este elemento */
  }
 
/* Para PC */
 
.menu_pc {
  /* define aquí las propiedades para este elemento */
  }
 

Espero que te sirva esta opción.
Tal vez alguien tenga una mejor propuesta.

Saludos.

[sebapulido]

aha... gracias isaac_ben lo tendre en cuenta... pero antes quiero ver si se puede hacer como lo tengo en mente... y si no puedo modifico todo para dejarlo como tu dices...

Ahora paso a explicar bien detalladamente que es lo que tengo y que necesito:

En mi archivo header.php dentro de <head> </head> tengo el llamado a los archivos CSS donde abro 2 css. El CSS principal.... y el CSS de cada una de las secciones... en este caso seria el style-home.css que es el de la pagina de inicio.

Código:

				
		<!-- CSS Principal-->
		<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />
		
		
		<!-- CSS Array || CSS Secciones -->
		<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory'); ?>/style-home.css" media="screen" />

Ya en el <body> tengo el menu, con el siguiente codigo:

Código:

<div id="header_menu">
			<div id="header_menu_content"> 
				<!-- Menu // -->
				<ul class="menu">
					<li id="home"><a href="<?php echo get_option('home'); ?>">Inicio</a></li>
					<li id="pc"><a href="http://www.mendozagamers.com/wordpress/?cat=11">PC</a></li> 
					<li id="xbox"><a href="http://www.mendozagamers.com/wordpress/?cat=5">Xbox 360</a></li> 
					<li class="secondoption"><a href="http://www.mendozagamers.com/wordpress/?cat=5">Foro</a></li>
					<?php wp_list_categories('sort_column=menu_order&title_li=&depth=0&show_count=0&include='.get_wpn_config('submenu_include').'&exclude='.get_wpn_config('submenu_exclude')); ?> 
				</ul>
				<!-- // Menu -->
				<div style="clear:both"></div>
				<!-- Submenu // -->
				<ul class="submenu">
				<?php wp_list_pages('sort_column=menu_order&title_li=&depth=0&include='.get_wpn_config('menu_include').'&exclude_tree='.get_wpn_config('menu_exclude')); ?>
				</ul>
				<!-- // Submenu -->
												<!-- Buttons -->
				<a class="button button-dark styleswitch" rel="style-dark" href="#">Dark</a>
				<a class="button button-light styleswitch" rel="style-light" href="#">Light</a>
				<!-- Buttons -->

			</div>
		</div>

Yo lo que necesito puntualmente, es que cuando yo en el menu hago Click en, por ejemplo, PC. Dentro del <head> se me desaparesca el style-home.css y me lea el stlye-pc.css

Y asi con cada una de las opciones de el menu.

Para mi la cosa es que en donde esta este codigo:

Código:

		<!-- CSS Array || CSS Secciones -->
		<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory'); ?>/style-home.css" media="screen" />

Ahi tengo que poner alguna funcion que sirva para cambiar de CSS y eso relacionarla con cada opcion de el menu.

Por favor si alguien me podria dar una mano en eso, lo agradeceria.

Recuerden que pueden verlo en: http://www.mendozagamers.com/wordpress/

Saludos