Archivo “functions.php”: menús personalizables.

Voy a crear un menús, uno para las páginas y luego los personalizables que se crean desde el area de administración en “Apariencia” -> “Menu”.

Crear un menú personalizable tiene dos partes:

  • crear la posibilidad de tener el menu
  • establecer en que parte de la plantilla va a estar encuadrado.

Si teniendo aplicado el tema “Maldita coma“, pico en “Apariencia“, no voy a tener opción a crear ningún menú, si aplico cualquier otro tema en “Apariencia” voy a poder ver que tengo la opción “Menu“. Con el tema “Maldita coma“, en el front-end, tampoco se ven las páginas que tengo creadas.

Para añadir soporte a menúus no se usa la función “add_theme_support();“, hay funciones específicas.

Documentación:

Funciones que voy a usar:
register_nav_menu( $location, $description );: esta función se usa en “functions.php“, con esto se crea soporte para un sólo menú, tiene parametros y son obligatorios, hay que indicar el nombre que identificará a ese menú para usar en el código ($location), y una descripción, un nombre para este menu ($description), que es el que veremos en el área de administración, una vez que hayamos creado el menú.

Un ejemplo:

register_nav_menu( 'first_menu', 'Primer menu' );

register_nav_menus( array );: también se usa en “functions.php“, sirve para crear soporte para varios menús, hay que indicarle un array de $location y $description, al igual que para la función que sólo registra un menú, son obligatorios, y se indican del siguiente modo:

register_nav_menus( array (
	$location01 => $description01,
	$location02 => $description02
	));

wp_nav_menu( $args );: esta función no se usa en “functions.php“, se usa para llamar a un menú ya registrado, así que hay que escribirlo en la plantilla, en donde queremos que aparezca nuestro menú.

Esta función tiene una serie de valores por defecto, si no se indica lo contrario cuando la usemos, tomará los valores que ahora explico:

$defaults = array(
	'theme_location'  => '',		//Opcional, nombre que le damos al menu.
	'menu'            => '',		//Opcional
	'container'       => 'div',		//Por defecto crea un bloque <div></div> como contenedor del menu, si no se quiere que cree este bloque, pondriamos false.
	'container_class' => '',		//Opcional, atributo de tipo class que queremos que se aplique al div que contendra el menu.
	'container_id'    => '',		//Opcional, atributo de tipo id que queremos que se aplique al div que contendra el menu.
	'menu_class'      => 'menu',	//Por defecto, atributo de tipo clase que se aplica a los elementos ul del menu, en caso de que el menu sea un desplegable.
	'menu_id'         => '',		//Opcional, atributo de tipo id que se aplica a los elementos ul del menu.
	'echo'            => true,		//Por defecto true, porque si creamos el menu que menos que mostrarlo por pantalla.
	'fallback_cb'     => 'wp_page_menu',	/*Si no existe menu se ejecuta esta funcion 'wp_page_menu', que sirve para mostrar el menu de paginas,
						 *no uno personalizable como el que estamos creando.*/
	'before'          => '',		/*Opcional, texto opcional antes del enlace, un menu es una serie de enlaces a un post/pagina, este enlace se crea de
						 *forma automatica, aplicando estas funciones, si queremos que antes del enlace aparezca un texto, lo colocariamos en *este item, apareceria antes de <a>, no formara parte del enlace*/
	'after'           => '',		//Opcional, como el item anterior, pero para poner despues del enlace, despues de </a>, no formara parte del enlace.
	'link_before'     => '',		//Opcional, texto para mostrar antes del link pero que formara parte del enlace.
	'link_after'      => '',		//Opcional, texto para mostrar despues del link pero que formara parte del enlace.
	'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',	//Determina el formato basico para cada elemento ul.
	'depth'           => 0,			//Establece un limite para elementos anidables, 0 para ilimitados, -1 para no poder poner ninguno.
	'walker'          => ''			//Opcional, sin info de momento
);
wp_nav_menu( $defaults );

wp_page_menu();: esta función crea un menú de páginas, no de posts; crea una lista contenida en un div.

$args = array(
	'depth'       => 0,		//Establece un limite para elementos anidables, 0 para ilimitados, -1 para no poder poner ninguno.
	'sort_column' => 'menu_order, post_title',	/*Orden que queremos que tengan nuestros elementos, mas info en la pagina de WordPress, donde se explica la
							 *funcion.*/
	'menu_class'  => 'menu',	//Por defecto, atributo de tipo class que se aplique al div que contendra el menu.
	'include'     => '',		//Por defecto se incluyen todas las paginas creadas.
	'exclude'     => '',		//Por defecto no se excluye ninguna pagina creada que sea incluida por defecto.
	'echo'        => true,		//Por defecto, si hay paginas que se muestre el enlace correspondiente.
	'show_home'   => false,		//Añade un enlace a "home", por defecto no se muestra porque el nombre del blog ya suele llevar al inicio.
	'link_before' => '',		//Opcional, texto para mostrar antes del link pero que formara parte del enlace.
	'link_after'  => '' );		//Opcional, texto para mostrar despues del link pero que formara parte del enlace.
wp_page_menu( $args );

has_nav_menu();: retorna true si encuentra registrado el menú cuyo nombre se le pase. Si registramos uno llamado “menuA“, “has_nav_menu( ‘menuA’ );” retornará true, en caso contrario retornaría false.

Al meollo del tema.

Añadir un menú de páginas.

Para añadir el menú de páginas en el “header.php”, solo tengo que usar la función: “wp_nav_menu();“, sin ningún parámetro.
En “header.php“, donde tengo escrita la frase “Menu de navegacion de las paginas”, añado otra línea teniendo el siguiente código:

<nav class="page-navigation"><!-- .page-navigation -->
	Menu de navegacion de las paginas
	<?php wp_nav_menu( ); ?>
</nav><!-- .page-navigation end -->

Sin pasarle ningun parámetro.

Pues ahora al recargar el front-end del blog e inspeccionar con firebug, veo que WordPress ha creado un div que contiene una lista de elementos y no muestra ningún “Inicio” o “Home“. Sin ningún formato, más que el de una lista de tipo desordenada.

Ahora en lugar de la función sin parámetro, pongo todo esto:

<nav class="page-navigation"><!-- .page-navigation -->
	Menu de navegacion de las paginas
	<?php
		$args = array(
			'depth'       => 0,
			'sort_column' => 'menu_order, post_title',
			'menu_class'  => 'patata',
			'include'     => '',
			'exclude'     => '',
			'echo'        => true,
			'show_home'   => true,
			'link_before' => 'link before - ',
			'link_after'  => ' - link after' );
		wp_page_menu( $args );
	?>
</nav><!-- .page-navigation end -->

Si ahora inspecciono con firebug, veré que el atributo clase del div contenedor del menú es “patata” y que a simple vista, aparece “Inicio” y todos los enlaces tienen “link before – ” y “ – link after“, como parte del enlace.

En el código lo dejo como en la primera prueba:

<nav class="page-navigation"><!-- .page-navigation -->
	Menu de navegacion de las paginas
	<?php wp_nav_menu( ); ?>
</nav><!-- .page-navigation end -->

Añadir menú personalizable [“Apariencia” -> “Menu“]

Lo primero que hay que hacer es registrar el menú, o todos los menús que queramos que se puedan crear, en “functions.php“.

Siguiendo, y guiándome, por el tema TwentyFourTeen, voy a crear tres menús personalizables, uno de ellos va a sustituir al que acabo de crear en “header.php“, porque resulta que cuando uno crea un menú personalizable, puede añadirle páginas, categorías, etc… así que ¿para que limitarse?; el segundo menú lo voy a situar en una barra lateral y el tercero en la otra barra lateral.

En “functions.php” añado la parte de crear la posibilidad de tener el menú:

//Soporte para menus personalizables, Apariencia -> Menus
register_nav_menus( array (
'first menu' => __( 'Menu nav header', 'malditacoma' ),
'second menu'=>__( 'Menu in left sidebar', 'malditacoma' ),
'third menu'=>__( 'Menu in right sidebar', 'malditacoma' )
));

En “header.php“, sustituyo:

<nav class="page-navigation"><!-- .page-navigation -->
	Menu de navegacion de las paginas
	<?php wp_nav_menu( ); ?>
</nav><!-- .page-navigation end -->

Por esto:

<nav class="page-navigation"><!-- .page-navigation -->
	Menu de navegacion de las paginas
	<?php wp_nav_menu( array( 'theme_location' => 'first menu' ) ); ?>
</nav><!-- .page-navigation end -->

Y en el archivo “sidebar.php“:

<!-- a partir de aqui sidebar -->
<aside id="secondary" class="widget-area"><!-- #secondary .widget-area -->
	Un area para widgets, parte de la sidebar
	<?php wp_nav_menu( array( 'theme_location' => 'second menu' ) ); ?>
</aside><!-- #secondary .widget-area end -->

<aside id="tertiary" class="widget-area"><!-- #tertiary .widget-area -->
	El otro area para widgets, parte de la sidebar
	<?php wp_nav_menu( array( 'theme_location' => 'third menu' ) ); ?>
</aside><!-- #terciary .widget-area end -->
<!-- hasta aqui sidebar -->

Si dejamos esto así, usando la funcion “wp_nav_menu();” nos aparecerá un menú de navegación de páginas en header y dos en sidebar, porque no le pasamos ningún parámetro a “wp_nav_menu();” de modo que se ejecuta “wp_page_menu();“, así que tendremos que introducir este código dentro de condicionales, tal que si creamos un “first menu“, un “second menu” o un “third menu“, se muestren, y si no se crean, que no se muestre nada.

Finalmente los archivos quedan tal y como sigue:

En “header.php“:

<?php if ( has_nav_menu( 'first menu' ) ) : ?>
<nav class="page-navigation"><!-- .page-navigation -->
	Menu de navegacion de las paginas
	<?php wp_nav_menu( array( 'theme_location' => 'first menu' ) ); ?>
</nav><!-- .page-navigation end -->
<?php endif; ?>

Y en el archivo “sidebar.php“:

<!-- a partir de aqui sidebar -->
<aside id="secondary" class="widget-area"><!-- #secondary .widget-area -->
	Un area para widgets, parte de la sidebar
	<?php if ( has_nav_menu( 'second menu' ) ) : ?>
		<?php wp_nav_menu( array( 'theme_location' => 'second menu' ) ); ?>
	<?php endif; ?>
</aside><!-- #secondary .widget-area end -->

<aside id="tertiary" class="widget-area"><!-- #tertiary .widget-area -->
	El otro area para widgets, parte de la sidebar
	<?php if ( has_nav_menu( 'third menu' ) ) : ?>
		<?php wp_nav_menu( array( 'theme_location' => 'third menu' ) ); ?>
	<?php endif; ?>
</aside><!-- #terciary .widget-area end -->
<!-- hasta aqui sidebar -->

Ahora refrescando el front-end, no aparece ningún menú.

Me voy a “Apariencia” -> “Menús” y creo uno que se llama “Paginas“, marco:

  • todas las paginas que tenga creadas y me aparezcan en el recuadro de la izquierda
  • tambien marco: “Añadir páginas automáticamente: Añade automáticamente nuevas páginas de nivel superior a este menú”
  • y por ultimo indico en que menu registrado quiero que aparezca la informacion, en este caso “Menu nav header”

Refresco de nuevo el front-end y ya aparece el menú de navegación por páginas en la cabecera.

Creo que no me dejo nada, hasta el siguiente post, que aún no se de que va a ser, que me he perdido con tanto escribir.

Anuncios

2 comments

  1. Hola, me ha parecido muy bueno tu post.
    Estoy probando para hacer un menu con dropdown, y aún voy un poco verde.
    tendría que poner el ‘menu_class’ => dropdown-menu (lo estoy haciendo con bootstrap)

    Un saludo.

    Paco

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s