15 cosas que debes y no debes hacer en temas de WordPress

Hoy quiero repasar algunas de las cosas que se deben y no se deben hacer al crear temas para WordPress. Independientemente de si estás creando un tema de WordPress para ti o si lo estás creando para lanzarlo y que otros lo usen, deberías seguir estas pautas al pie de la letra.

1. No codifiques URLs completas directamente en tus temas

Cuando creas tus temas, puede haber ocasiones en las que se usen imágenes, para íconos de redes sociales o íconos de feeds RSS, y en esos puntos de tu código, podrías querer codificar la URL completa (por ejemplo: /wp-content/themes/nombre-de-tu-tema/images/imagen.jpg), pero esto causará errores en el sitio web cada vez que la persona que use tu tema cambie el nombre de su carpeta de tema.

Los códigos apropiados para usar con el fin de obtener las URLs completas dinámicamente se encuentran a continuación.

<?php bloginfo('stylesheet_directory'); ?>/images/image.jpg

2. Utiliza las etiquetas de plantilla tanto como sea posible

WordPress hace un trabajo increíble al presentar todas las etiquetas de plantilla que puedes usar, así que hazte un favor (así como al resto de las personas que puedan usar tus temas) y aprende las etiquetas de plantilla de WordPress, luego utilízalas tanto como sea posible. Al usar etiquetas de plantilla, puedes asegurarte de que tus temas no fallen o causen errores cuando el usuario final los configure y los ponga en funcionamiento.

3. No olvides los códigos de menú desplegable de navegación

Al crear tu tema de WordPress, un elemento que parece pasarse por alto son los códigos de menú desplegable para tu navegación. Claro, algunos temas podrían tener la navegación configurada para no utilizar las listas `ul` multinivel, manteniendo todo en una sola fila, pero ¿qué pasa con aquellos de nosotros que tenemos varias páginas secundarias para cada página principal?

Hay una solución para eso. Puedes consultar algunos de los tutoriales a continuación sobre cómo codificar menús desplegables multinivel.

• Cómo implementar una barra de navegación multinivel perfecta
• Menús de navegación desplegables multinivel: Ejemplos y tutoriales
• Menús multinivel con jquery y css

4. Asegúrate de que tu tema esté listo para widgets

En mi opinión, como usuario final, no hay nada peor que implementar un tema y prepararse para configurarlo todo, solo para darme cuenta de que ahora me enfrento a la tarea de intentar personalizar secciones de mis temas codificando información directamente en ellos. Tus barras laterales y otros lugares de tu tema (¿tienes un pie de página de tres columnas? ¡hazlo compatible con widgets!) deben ser lo más fáciles de editar posible. Es una de las cosas más sencillas de hacer en tus temas y beneficiará enormemente a los usuarios de tu tema.

Automattic tiene un excelente tutorial sobre cómo hacer que tu tema sea compatible con widgets. Échale un vistazo aquí.

También asegúrate de consultar el tutorial sobre cómo hacer compatibles los temas con widgets aquí en Theme Lab.

5. No hagas que los usuarios dependan de numerosos plugins para que tu tema funcione

Si estás lanzando temas gratis o creando temas comerciales para WordPress, debes tener en cuenta el mejor interés de tus usuarios finales al construir tus temas. Llenar tus temas con 5-10 plugins necesarios no solo frustrará a las personas al descargar y configurar tu tema en su sitio, sino que también hará que muchas personas no lo descarguen en absoluto porque, seamos sinceros, la gente no tiene períodos de atención de más de 2-3 segundos.

Por ejemplo, si vas a configurar la paginación en tu tema, ¿por qué no utilizar este artículo para aprender a configurarla automáticamente en tu tema? Cats Who Code tiene un tutorial bastante bueno sobre cómo agregar paginación a tu tema sin necesidad de activar un plugin.

6. Muestra el término de búsqueda en la página de resultados de búsqueda

Por alguna razón, este es un consejo que a menudo se pasa por alto y que puedes (y debes) implementar en tus temas. Es un código simple de una línea que permite que tu tema le recuerde al visitante lo que acaba de buscar. Puede parecer trivial, pero es útil, ya que si los resultados no devuelven ninguna publicación, el visitante sabrá la frase exacta que buscó y podrá escribir un término de búsqueda diferente.

A continuación, se muestra el código que se utiliza para reemplazar el título actual de "Resultados de búsqueda" en tu tema.

<h2>Search Results for <em><?php the_search_query() ?></em> </h2>

7. No hagas las cosas a medias en tus páginas de error 404

En lugar de simplemente dejar que tu página 404 diga "404 - página no encontrada", ¿por qué no ofrecer a tus visitantes más opciones? Incluir una lista de categorías, publicaciones recientes, publicaciones populares, un cuadro de búsqueda y (si deseas monetizar tu página 404) un anuncio, puede darle a tu página 404 un toque especial en comparación con las aburridas e inútiles que se encuentran en la mayoría de los temas de WordPress.

Si buscas inspiración para páginas 404, Smashing Magazine tiene una exhibición espectacular de páginas 404 de toda la web que vale la pena consultar.

8. Asegúrate de tener todos los archivos básicos en la carpeta de tu tema

Cuando estés creando un tema de WordPress, es esencial asegurarte de que puedas personalizarlo tanto como sea posible desde el principio. Empezar con una combinación de archivos index.php, header.php, sidebar.php y footer.php podría parecer una buena idea para los minimalistas, pero te sugiero que empieces con todos los elementos básicos a continuación para tener un poco más de control sobre lo que se muestra, cuándo, dónde y cómo.

• style.css
• header.php
• index.php
• sidebar.php
• footer.php
• single.php
• page.php
• comments.php
• 404.php
• functions.php
• archive.php
• searchform.php
• search.php

Para obtener más información sobre estos archivos de plantilla y lo que hacen, consulta la página de la jerarquía de plantillas en WordPress.org.

9. No olvides la integración RSS

Cuando estés creando tu blog, uno de los elementos que más llama la atención de la gente es la capacidad de suscribirse a tu blog a través de un lector RSS. Así que, en lugar de exigir a los usuarios de tu tema que agreguen esta información por sí mismos, ¿por qué no tomas las medidas para agregar un cuadro de suscripción a RSS, al igual que haces con el cuadro de búsqueda? Agrega un botón RSS, una opción de suscripción por correo electrónico y también puedes agregar el número de suscriptores en texto agregando este fragmento de código a tu tema donde quieras que se muestre (reemplaza "feedburner-id" con tu propio ID de FeedBurner; si vas a lanzar este tema públicamente, echa un vistazo al punto #11 de nuestra lista y asegúrate de tener esto como una opción).

<?php
    //get cool feedburner count
    $whaturl="http://api.feedburner.com/awareness/1.0/GetFeedData?uri=feedburner-id";

    //Initialize the Curl session
    $ch = curl_init();

    //Set curl to return the data instead of printing it to the browser.
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

    //Set the URL
    curl_setopt($ch, CURLOPT_URL, $whaturl);

    //Execute the fetch
    $data = curl_exec($ch);

    //Close the connection
    curl_close($ch);
    $xml = new SimpleXMLElement($data);
    $fb = $xml->feed->entry['circulation'];
    echo $fb;
    //end get cool feedburner count
    ?>

10. Agrega estilos CSS para comentarios anidados

Si estás creando un tema, siempre debes estar preparado para los comentarios anidados. Es una característica de WordPress que muchos blogs utilizan para generar interacción en su sección de comentarios. Por lo tanto, preparar tu hoja de estilos para comentarios anidados es una gran idea. Chris tiene una excelente publicación sobre códigos CSS para las clases CSS predeterminadas que WordPress genera en su sección de comentarios, lo que le da a tu tema una sección de comentarios estilizada sin necesidad de tocar el archivo comments.php.

11. No lances un tema sin un panel de opciones

Algunas personas podrían no estar de acuerdo con esto, pero creo que es parte de la progresión natural de la creación de temas en WordPress. Si tu tema no tiene algún tipo de panel de opciones de WordPress con la capacidad de editar, personalizar y cambiar elementos en tu tema sin tener que editar códigos, estás haciendo algo mal.

Si no estás seguro de cómo crear tu propio panel de opciones para temas, los enlaces a continuación te mostrarán cómo hacerlo.

• Crea paneles de opciones personalizados con WordPress 2.9
• Cómo crear un mejor panel de opciones de WordPress

12. Asegúrate de que tus temas funcionen de inmediato

Esto va de la mano con el punto #5 de nuestra lista: siempre debes asegurarte de que tus temas funcionen correctamente desde el principio. Algunos temas que he visto requieren 5-6 pasos antes de que el tema sea funcional en el sitio, incluyendo, pero no limitado a, la activación de plugins y la edición/guardado del panel de opciones del tema. Si el tema requiere ciertas cosas, asegúrate de que haya un elemento predeterminado de respaldo.

Por ejemplo, en el panel de opciones de tu tema que estás creando y/o utilizando, asegúrate de que haya información predeterminada en cada sección, para que las cosas se muestren, independientemente de si el usuario final las ha actualizado o no. Lo mismo ocurre con los plugins; si estás utilizando un plugin de paginación de WordPress en tu tema, ¿por qué no codificarlo para que el tema vuelva a los enlaces anterior/siguiente si el plugin no está activo?

13. No hagas un uso excesivo de campos personalizados

Sí, la mayoría de los temas de WordPress estilo revista de hace un par de años se crearon utilizando campos personalizados en cada rincón, pero la mayoría de la gente no querrá completar 3, 4 o 5 campos personalizados por cada publicación. Así que, hazles las cosas más fáciles. Si vas a mostrar una imagen de la publicación en la página de inicio de tu tema, toma este útil fragmento de código y agrégalo al archivo functions.php de tus temas y automáticamente tomará la primera imagen de las publicaciones, sin necesidad de un campo personalizado.

// Get URL of first image in a post
function catch_that_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
$first_img = $matches [1] [0];

// no image found display default image instead
if(empty($first_img)){
$first_img = "/images/default.jpg";
}
return $first_img;
}

Una vez que hayas agregado ese código, simplemente agrega <?php echo catch_that_image(); ?> en los archivos de tu tema donde quieras que aparezca la imagen.

Gracias a los buenos foros de soporte de WordPress por este útil consejo.

14. Optimiza tu etiqueta <title> para SEO

Una excelente manera de asegurar que tu tema esté lo más preparado posible para SEO es eliminar la etiqueta <title> predeterminada que se encuentra en el archivo header.php de tu tema y reemplazarla con los códigos a continuación. Le dará a los títulos de tu tema un poco más de potencia y ayudará a los esfuerzos de SEO que los usuarios de tu tema querrán poner en práctica, todo sin requerir que toquen nada.

<?php if ( is_home() ) { ?><? bloginfo('name'); ?> | <?php bloginfo('description'); ?><?php } ?>
<?php if ( is_search() ) { ?>Search Results for <?php /* Search Count */ $allsearch = &new WP_Query("s=$s&showposts=-1"); $key = wp_specialchars($s, 1); $count = $allsearch->post_count; _e(''); echo $key; _e(' — '); echo $count . ' '; _e('articles'); wp_reset_query(); ?><?php } ?>
<?php if ( is_404() ) { ?><? bloginfo('name'); ?> | 404 Nothing Found<?php } ?>
<?php if ( is_author() ) { ?><? bloginfo('name'); ?> | Author Archives<?php } ?>
<?php if ( is_single() ) { ?><?php wp_title(''); ?> | <?php $category = get_the_category(); echo $category[0]->cat_name; | <?php bloginfo('name'); ?><?php } ?>
<?php if ( is_page() ) { ?><? bloginfo('name'); ?> | <?php $category = get_the_category(); echo $category[0]->cat_name;  ?>|<?php wp_title(''); ?><?php } ?>
<?php if ( is_category() ) { ?><?php single_cat_title(); ?> | <?php $category = get_the_category(); echo $category[0]->category_description; ?> | <? bloginfo('name'); ?><?php } ?>
<?php if ( is_month() ) { ?><? bloginfo('name'); ?> | Archive | <?php the_time('F, Y'); ?><?php } ?>
<?php if ( is_day() ) { ?><? bloginfo('name'); ?> | Archive | <?php the_time('F j, Y'); ?><?php } ?>
<?php if (function_exists('is_tag')) { if ( is_tag() ) { ?><?php single_tag_title("", true); } } ?> | <? bloginfo('name'); ?>

15. No te olvides de las migas de pan (breadcrumbs)

Como una pieza adicional de navegación en tus temas, las migas de pan (en mi opinión) deberían utilizarse tanto como sea posible. No solo es bueno para fines de SEO, sino que también permite al visitante navegar por tu sitio mucho más rápido. Existen plugins de WordPress para migas de pan, pero gracias a Cats Who Code, ahora sabemos cómo agregar una función de migas de pan a nuestros temas de WordPress.

Primero, agrega los códigos a continuación en el archivo functions.php de tu tema (personalizado un poco del post original de Cats Who Code, enlazado arriba).

function the_breadcrumb() {
		echo '<ul id="crumbs">';
	if (!is_home()) {
		echo '<li><a href="';
		echo get_option('home');
		echo '">';
		echo 'Home';
		echo "</a></li>";
		if (is_category() || is_single()) {
			echo '<li>';
			the_category(' </li><li> ');
			if (is_single()) {
				echo "</li><li>";
				the_title();
				echo '</li>';
			}
		} elseif (is_page()) {
			echo '<li>';
			echo the_title();
			echo '</li>';
		}
	}
	elseif (is_tag()) {single_tag_title();}
	elseif (is_day()) {echo"<li>Archive for "; the_time('F jS, Y'); echo'</li>';}
	elseif (is_month()) {echo"<li>Archive for "; the_time('F, Y'); echo'</li>';}
	elseif (is_year()) {echo"<li>Archive for "; the_time('Y'); echo'</li>';}
	elseif (is_author()) {echo"<li>Author Archive"; echo'</li>';}
	elseif (isset($_GET['paged']) && !empty($_GET['paged'])) {echo "<li>Blog Archives"; echo'</li>';}
	elseif (is_search()) {echo"<li>Search Results"; echo'</li>';}
	
	echo '</ul>';
}

A continuación, coloca este fragmento de código donde quieras que se muestren tus migas de pan.

<?php the_breadcrumb(); ?>

Gracias por leer el artículo

Gracias por tomarte el tiempo de leer el artículo. Espero que lo hayas disfrutado y aprendido una o dos cosas en el camino, yo sí lo hice. Si te gustó la publicación o tienes algo que agregar, háznoslo saber en los comentarios.