Diseñando un theme para WP Main Menu
A finales de octubre anuncié las novedades de WP Main Menu 0.2, entre las cuales estaba el soporte para themes. Durante un par de semanas he estado tratando de desarrollar un sistema de themes cómodo, fácil de usar (tanto para diseñadores como para usuarios ” de a pie”) y potente. Finalmente he creado un sistema parecido al de WordPress, aunque con sus propias peculiaridades, que espero que os guste y os sea cómodo de usar. En este artículo voy a explicaros cómo se diseña para WP Main Menu 0.2, lamentablemente sigue en desarrollo, así que no podréis probar los diseños, tan sólo haceros una idea de cómo se hace.
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]
<?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’;
?>
[/php]
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]
<?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
}
?>
[/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]
<?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">»</span>’; ?></a>
<?php if ($link[‘sublinks’] != ”) wp_main_menu_create_submenu($link[‘sublinks’]); ?>
</li>
<?php endif; endforeach; ?>
</ul>
<?php } ?>
[/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.
Como veis, no es nada complicado crear un theme para WP Main Menu, y aunque ahora puede parecer algo confuso debido a que no está disponible el plugin para hacer las comprobaciones, en cuanto esté listo y podáis probarlo, veréis que es realmente fácil de usar y con muchas opciones de personalización.
Dejando de lado el diseño de themes, la interfaz de la página de gestión de themes es una copia de la original de WordPress, así que si sabéis usar la de WordPress, no tendréis problemas con la de WP Main Menu.
Espero que os guste el nuevo sistema de themes.
One reply on “Diseñando un theme para WP Main Menu”