Category Archives: Wordpress

Wordpress

Agregar clases al primer y último elemento del menú

Leave a comment

Una de las nuevas funcionalidades de WordPress a partir de su versión 3 es la creación de menús personalizados que permiten incluir secciones de menú dentro de un tema para que los usuarios desde el panel de administración creen y editen sus propios menús.

El código generado en html incluye elementos para personalizar el diseño, la clase ‘menu-item’ para los menús de usuario generado por la función wp_nav_menu y la clase ‘page-item’ para los menús de páginas generados por wp_page_menu que se utiliza por ejemplo en el tema Twenty Eleven como menú de la página de Inicio.

En algunas ocasiones resulta útil agregar clases particulares al primero y último elemento del menú. Para esto agregamos el siguiente código al archivo functions.php de nuestro tema, el mismo modifica el html que generan las funciones de menú para incluir las clases ‘first-menu-item’ y ‘last-menu-item’ para menús de usuario; ‘first-page-item’ y ‘last-page-item’ para menús de páginas.

function add_first_and_last($output) {
	if(strpos($output, 'menu-item')){
		$output = preg_replace('/class="menu-item/', 'class="first-menu-item menu-item', $output, 1);
		$output = substr_replace($output, 'class="last-menu-item menu-item', strripos($output, 'class="menu-item'), strlen('class="menu-item'));
	}
	else{
		$output = preg_replace('/<li class="/', '<li class="first-page-item ', $output, 1);
		$output = substr_replace($output, '<li class="last-page-item ', strripos($output, '<li class="'), strlen('<li class="'));
	}
		return $output;
}
add_filter('wp_nav_menu', 'add_first_and_last');
add_filter('wp_page_menu', 'add_first_and_last');

Para modificar el diseño entonces, en el css incluimos reglas como:

li.first-menu-item{
    border-left: 1px solid #bbb;
}

Y de esta misma manera con las demás clases dependiendo del diseño que queramos darle.

Tecnología, Wordpress

Personalizar themes de wordpress

1 Comment

Es posible crear tus propios temas de wordpress para utilizarlos en tu sitio web. Sin embargo no es necesario empezar desde cero. Uno pensaría que la forma más sencilla es tomar un tema ya existente y editarlo, pero esto tiene una serie de inconvenientes como perder las futuras mejoras que se le hagan al tema por parte de su autor original.

El sistema de temas de wordpress permite crear temas derivados llamados child themes. Estos heredan las funcionalidades de otro tema que se le conoce como parent theme. Esta es la forma apropiada de modificar un tema ya existente o utilizar el tema principal como framework para nuestro tema.

Crear el child theme

Lo esencial para que wordpress reconozca tu tema es crear una nueva carpeta en el directorio de temas que se encuentra en wp-content/themes que contenga un archivo style.css con el siguiente encabezado

/*
Theme Name: Mi tema
Template: twentyeleven
*/

El atributo template es que el que nos interesa, es acá donde le indicamos cual es el parent theme.

Hecho esto deberías ver en el dashboard de wordpress en la sección Apariencia->Temas nuestro nuevo tema.Temas disponiblesSi lo utilizamos así tal cual veremos el sitio sin ningún estilo porque nuestro style.css está vació, sin embargo, si revisamos el código generado veremos que hay una gran estructura de html válido, con muchas clases para modificar y que además utiliza las distintas funciones del tema padre, en nuestro ejemplo Twenty Eleven.

En este punto contamos con un tema en blanco completamente funcional.

Importar el estilo del parent theme

Cuando elegimos el parent de nuestro nuevo tema es porque probablemente hay cierta tendencia de diseño o porque las modificaciones que queremos hacer son menores. Resulta muy útil entonces aplicar el estilo del tema padre. Para esto agregamos una línea adicional al style.css

/*
Theme Name: Mi tema
Template: twentyeleven
*/
@import url(../twentyeleven/style.css);

El @import nos incluye el estilo. Con esto si miramos nuestro sitio utilizando el tema que hemos creado se verá igual como si utilizaramos el parent theme.

Lo que tenemos ahora es la estructura para modificar el parent theme de manera segura, sin editar los archivos originales y sin perder las futuras mejores que el parent theme reciba.

Modificar el tema con nuestros propios cambios

Muy sencillo, solo debes sobreescribir las propiedades. Lo mejor para esto es inspeccionar el código utilizando firebug (si usas firefox) o el inspect de tu navegador. Si deseas modificar los encabezados buscamos las clases del css y en nuestro style.css hacemos los cambios.

pantallazo inspeccionar htmlSi quisiéramos modificar el color del h2 tendríamos en nuestro style.css lo siguiente

/*
Theme Name: Mi tema
Template: twentyeleven
*/
@import url(../twentyeleven/style.css);

.entry-title, .entry-title a {
    color: #2222aa;
    text-decoration: none;
}

De esta forma vamos variando las propiedades del css que nos interesa. Si queremos variar elementos en el html lo que hacemos es copiar el archivo correspondiente del tema padre a la carpeta de nuestro tema y lo modificamos acá. Así podemos tener nuestra propia versión de footer.php o del header.php.

Es realmente sencillo y muy elegante de desarrollar.