WP Main Menu

Beware: This post was published 6 years ago and its content may be outdated.

WP Main Menu

Aviso: WP Main Menu está descontinuado, no se actualizará más. En este artículo están los motivos.

WP Main Menu es un plugin-experimento que tiene por objetivo permitir crear menús más complejos de los que permite crear WordPress por defecto, habilitanto, por ejemplo, la opción de añadir un enlace externo, un enlace hacia una categoría, un artículo, una etiqueta o una página.

Actualmente se encuentra en la verisón 0.2.

Al ser una versión Beta, WP Main Menu puede tener algunos errores y fallos que deberán ser reportados. Cualquier error, duda o sugerencia deberá publicarse en el foro.

Tutoriales (español)

Añadiendo el menú a nuestro theme

Para mostrar el menú en el theme de WordPress tan sólo es necesario añadir el siguiente código allá donde queramos mostrar el menú (el menú puede ser mostrado varias veces en una misma página):

<?php wp_main_menu(); ?>

Nota: La función wp_main_menu() acepta una parámetro (sólo valores true y false) que le indican si debe mostrar el menú o devolverlo (para que se pueda almacenar en una variable de PHP y mostrar más adeltante o modificar). Por defecto el parámetro es true, es decir, muestra el menú.

Un paseo por el menú de WP Main Menu

Menú principal

Menú principal

Una vez hayas subido los archivos de WP Main Menu a la carpeta plugins de WordPress y hayas activado el plugin, verás que a continuación del enlace a los comentarios del menú principal del Panel de Administración de WordPress aparece un nuevo enlace: WP Main Menu. Este enlace te llevará a la página de opcion de WP Main Menu, donde podrás configurar los links del menú.

Menú de WP Main Menu

Menú de WP Main Menu

Este menú tiene 5 apartados (sublinks) diferentes, cada uno realiza una acción diferente y es conveniente tener claro es uso de cada una.

El primer enlace, WP Main Menu, te dirige a la página de opciones del plugin, donde configurar los links del menú.

El segundo enlace, Temas, te lleva a la página de gestión de temas, de la cual hablaré más tarde y que básicamente te permite elegir un tema diferente para el menú. Este tema no tiene relación alguna con el tema que uses en WordPress y sólo afecta al menú.

El tercer enlace, Exportar, te muestra una página con un código de exportación. Este código es, en realidad, el contenido del menú que has creado, serializado y codificado en base64, para reducir su tamaño y facilitar su posterior copia. Este código sirve de copia de seguridad del menú, si vas a realizar alguna modificación que crees que puede dañar los datos, accede antes a esta página y copia el código en un archivo de texto. Más adelante podrás importarlo y restaurar el menú.

El cuarto enlace, Importar, es hermano de Exportar, y hace la tarea contraria de este último. Al introducir un código de exportación (bien sea copiado directamente de la página de Exportar, copiado de un archivo de texto que has guardado con anterioridad o lo hayas escrito tú), el script lo interpretará y reemplazará los datos que hayan antes por los del código de exportación.

El quinto enlace, Desinstalar, te permite eliminar todos los datos de WP Main Menu de tu Base de Datos, de forma que si deseas desinstalar completamente el plugin, puedas hacerlo sin dejar rastro en la Base de Datos. También sirve para reestablecer el contentenido del menú, así puedes comenzar desde 0.

Un paseo por la interfaz de WP Main Menu

Interfaz del gestor de los links del menú de WP Main Menu

Al diseñar la interfaz de WP Main Menu, procuré que fuese lo más simple y familiar posible, y ¿qué mejor interfaz que la que está integrada en el propio CMS? Así que opté por copiar la interfaz de WordPress, la distribución del contenido, los colores, las estructuras… todo.

Para comenzar, la tabla que hay al principio de la página nos muestra los links que contiene actualmente el menú. Por defecto no hay ninguno, pero yo he añadido uno para poder apreciar mejor la interfaz. La tabla cuenta con 7 columnas: ID, Nombre, Estado, Tipo, URL, Orden y Padre.

La columna ID nos muestra un identificador único de cada link dentro de su generación, es decir, un link “padre” puede tener la misma ID que un sublinks, pero no que otro link “padre”. Es una columna que si no hay ningún problema con el plugin, no se usará nunca.

La columna de Nombre indica el nombre del link y el texto que aparecerá en el menú, en este caso es “Inicio”. Debajo del nombre hay tres enlaces: Editar, Eliminar y Ver. Editar nos permitirá editar y guardar los cambios que realicemos en el enlace usando el formulario que hay en la parte inferior de la página. Eliminar borrará el link del menú de forma definitiva. Ver nos llevará a la página que carga el link, en este caso, http://miweb.com.

La columna de estado indica si el link está publicado o guardado como borrador. La única diferencia entre ambos estados es que si se trata de un borrador, el link no se mostrará en el menú, aunque se podrá editar y aparecerá en el listado del Panel de Administración.

La columna de tipo nos indica a qué enlaza el link. Más adelante veremos los diferentes tipos de links de que dispone WP Main Menu.

La columna URL nos muestra la dirección a la que dirige en link, de forma que podemos comprobar fácilmente si está bien configurado el enlace o no.

La columna orden sirve para establecer un cierto orden entre los links y permite que un link creado en el último momento pase a ser el primero que se muestre, o viceversa. Diversos links pueden tener el mismo valor en orden, si se da el caso, WP Main Menu los mostrara por orden de ID, mostrando el que antes se haya creado primero y a continuación el siguiente.

La columna padre indica si el link es un sublink, además de quién es su padre (si se trata de un sublink). Cuando el link es un sublink, la columna ID muestra un par de comillas latinas por cada generación de enlaces que tiene por padre, de modo que es muy fácil saber quién es hijo de quién.

El formulario para añadir o editar un enlace es un calco del formulario de editar y añadir artículos y páginas de WordPress. Se encuentra dividido en dos columnas: la izquierda (que indica el nombre, tipo de enlace y URL) y la derecha (que define el estado del enlace (borrador o publicado), el orden y el padre).

La columa de la izquierda está compuesta (de arriba a abajo) por : el campo del nombre, el menú desplegable del tipo y el menú desplegable del elemento al que dirige el enlace. El primer campo debe rellenarse con el nombre del link. El primer menú desplegable nos permite elegir entre diversos tipos de links: a artículo, a página, a categoría, a una tag, a un usuario o a una URL externa. Dependiendo del caso que escojas, el siguiente menú desplegable variará, mostrando (respectivamente en cada caso) la lista de artículos, la lista de páginas, la lista de categorías, la lista de tags, la lista de usuarios o un campo de texto donde introducir tú la URL a la que quirees que lleve el link.

Cuando editas un link, el formulario es idéntico, salvo que aparece ya relleno de contenido.

Nota: Si pulsas enter (intro) mientras añades un link, se guardará como borrador y no como link publicado. Haz clic en el botón de publicar para publicarlo.

Gestionando los temas

Gestionando themes

WP Main Menu incluye desde la versión 0.2 la posibilidad de cambiar el tema que se usa al mostrar el menú. Este tema no tiene relación alguna con el theme de WordPress, aunque dependiendo del tema qeu se use en WP Main Menu, quedará mejor o peor con el theme de WordPress.

El proceso de instalar un tema es muy similar al de WordPress: descargamos un tema para WP Main Menu, descomprimimos el archivo y copiamos la carpeta descomprimida dentro de la carpeta themes (en: miweb.com/wordpress/wp-content/plugins/wp-main-menu/themes). Una vez hayas realizado el proceso, verás el theme en la página de temas de WP Main Menu.

Como puedes ver, la página se compone de una parte superior, donde se muestra la información del tema que está activado ahora mismo, y de una parte inferior donde se muestra una tabla con los themes que hay disponibles y su información. Es otro calco de la interfaz de WordPress.

Diseñando un theme para WP Main Menu

Básicamente un theme para WP Main Menu consta de 2 archivos fundamentales, una captura de pantalla (del mismo tamaño que las de los themes de WordPress: 300px x 225px) y tantos archivos CSS/Javascript como se quiera. Pero primero vayamos a los archivos fundamentales:

index.php

El archivo index.php del theme es el que almacena la información básica del theme, en forma de matriz, en la cual se deben definir los índices:

  • author – Indica el nombre del autor del theme
  • author_url – Indica la URL de la página del autor
  • name – Corresponde al nombre del theme, que no tiene nada que ver con el nombre de la carpeta que lo contiene
  • url – La página del theme, para pedir soporte y contar las novedades
  • desc – Una descripción del theme
  • version – Cada theme es libre de añadir un número de versión o no, pero es recomandable hacerlo, así los usuarios podrán saber si están usando la versión más moderna o no

Hay otros dos índices más: css y js, que son, a su vez, un matriz que almacena la ruta relativa de los archivos CSS y Javascript (respectivamente). Puede que así no quede muy claro, así que os pondré el código de un theme de pruebas:

<?php
$theme['author'] = "Sumolari";
$theme['author_url ']= "http://sumolari.com";
$theme['name'] = "Prueba";
$theme['url'] = "http://sumolari.com/wp-main-menu";
$theme['desc'] = "Esta es una prueba";
$theme['version'] = "1.0";
$theme['css'][] = 'style.css';
$theme['css'][] = 'css/otro.css';
$theme['js'][] = 'js.js';
$theme['js'][] = 'js/mas.js';
?>

Este sistema permite utilizar tantos archivos CSS y Javascript como sean necesarios, además de que pueden estar organizados en subcarpetas. Ojo, cuando hablo de que las rutas son relativas, me refiero a que el punto de partida es la carpeta que contiene al theme.

theme.php

Si el archivo index.php definía la información sobre el theme (autor, nombre, descripción, archivos CSS y Javascript que deberá cargar, etc), el archivo theme.php define la estructura en sí del theme. El archivo theme.php se basa en la función wp_main_menu_create_menu, que se ha de crear de forma obligatoria, ya que es la que llamará WP Main Menu a la hora de mostrar el menú. Esta función contendrá un bucle foreach, un comprobador de que el link está publicado y no guardado como borrador, una matriz y una llamada a sí misma o a otra función para mostrar los sublinks. Dejemos de lado la teoría y vayamos al código del theme de pruebas:

<?php function wp_main_menu_create_menu($menu2) { ?>
<div id="wp_main_menu">
<ul id="wp_main_menu_parents">
<?php foreach ($menu2 as $key => $value): if ($value['status'] != 'draft'): ?>
<?php $link = wpmm_asign_variables($value); ?>
<li>
<a href="<?php echo $link['url']; ?>"><?php echo $link['name']; ?></a>
<?php if ($link['sublinks'] != '') wp_main_menu_create_menu($link['sublinks']); ?>
</li>
<?php endif; endforeach; ?>
</ul>
</div>
<div class="wp_main_menu_clear"></div>
<?php
}
?>

En este caso, la línea 6 inicia el bucle y la comprobación, al igual que la línea 17 lo acaba. La línea 7 asigna los valores de la matriz $link, mientras que la línea 13 comprueba si el link actual tiene sublinks, y en caso afirmativo, vuelve a llamar a esta función para que los muestre.

Este sistema nos permite usar más de una función para mostrar los links, es decir, la función wp_main_menu_create_menu siempre tiene que mostrar los links principales, pero se puede definir una función diferente para los sublinks o incluso no mostrar los links desde el principio o llegado a cierto nivel, todo depende del theme.

Este otro código es el que podríamos usar para un menú que muestra de una forma los links principales y de otra todos los demás links:

<?php function wp_main_menu_create_menu($menu2) { ?>
<div id="wp_main_menu">
<ul id="wp_main_menu_parents">
<?php foreach ($menu2 as $key => $value): if ($value['status'] != 'draft'): ?>
<?php $link = wpmm_asign_variables($value); ?>
<li>
<a href="<?php echo $link['url']; ?>"><?php echo $link['name']; ?></a>
<?php if ($link['sublinks'] != '') wp_main_menu_create_submenu($link['sublinks']); ?>
</li>
<?php endif; endforeach; ?>
</ul>
</div>
<div class="wp_main_menu_clear"></div>
<?php
}
function wp_main_menu_create_submenu($menu2) { ?>
<ul class="wp_main_menu_sublinks">
<?php foreach ($menu2 as $key => $value): if ($value['status'] != 'draft'): ?>
<?php $link = wpmm_asign_variables($value); ?>
<li>
<a href="<?php echo $link['url']; ?>"><?php echo $link['name']; if ($link['sublinks'] != '') echo '<span class="alignright">&raquo;</span>'; ?></a>
<?php if ($link['sublinks'] != '') wp_main_menu_create_submenu($link['sublinks']); ?>
</li>
<?php endif; endforeach; ?>
</ul>
<?php } ?>

Aunque esta es sólo una posibilidad, con algunos conocimientos básicos de PHP se pueden lograr themes únicos que le darán un aspecto excepcional al theme.

Otros archivos

Los archivos CSS y Javascript nos tienen límite alguno, y como hemos visto antes, se pueden añadir tantos como sean necesarios, de forma que podemos crear menús mezclando las posibilidades del CSS y los efectos de Javascript.

Listado de cambios

V 0.2

  • Añadido: Traducción al bielorruso (por Marcis G.)

V 0.2 (Beta 1)

  • Añadido: Posibildad de integrar WP Main Menu en themes de terceros.

V 0.2 (Alpha 3)

  • Arreglado: Error al tratar de obtener el valor de variables inexistentes.

V 0.2 (Alpha 2)

  • Arreglado: Error que aparecía en el listado de temas debido a una carpeta llamada .SVN que no era un theme, sino una carpeta residual del cliente utilizado para subir los archivos al servidor de WordPress.org.

V 0.2 (Alpha)

  • En proceso: Redacción de la documentación en inglés
  • Añadido: Redacción de la documentación en español
  • Añadido: Traducción de las novedades de la interfaz al español y al inglés
  • Añadido: Gestor de themes
  • Añadido: Posiblidad de exportar e importar contenido
  • Añadido: Ilimitadas generaciones de links
  • Añadido: Desinstalador
  • Arreglado: Bug que corrompía los datos al borrar un link

V 0.1 (Alpha)

  • Primera versión liberada
Comments are closed.