15 cosas que se deben y no se deben hacer para crear un tema eficaz en WordPress

Hoy quiero repasar lo que se debe y lo que no se debe hacer en la creación de temas para WordPress. Independientemente de si estás construyendo un tema de WordPress para ti o si estás construyendo uno para que otros puedan usarlo, deberías seguir estos pasos tan de cerca como sea posible.

1. No codifiques URL’s completas en tus temas

Cuando esté creando sus temas, puede haber momentos en los que se utilicen imágenes, para iconos de redes sociales o iconos de fuentes RSS, y durante estos puntos en su codificación, es posible que desee codificar la URL completa (es decir: /wp-content/themes/your-theme-name/images/image.jpg), pero esto causará errores en el sitio web cada vez que la persona que utiliza su tema cambie el nombre de su carpeta de temas.

Los códigos adecuados a utilizar con el fin de tirar de la URL completa de forma dinámica están por debajo.

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

2. Utilice las etiquetas de plantilla en la medida de lo posible.

WordPress hace un trabajo impresionante al presentar todas las etiquetas de plantilla que puedes usar, así que hazte un favor (así como al resto de la gente que pueda usar tus temas) y aprende las etiquetas de plantilla de WordPress – y luego utilízalas tanto como puedas. Mediante el uso de etiquetas de plantilla, usted es capaz de asegurar que sus temas no se rompen o causan errores cuando el usuario final lo configura y lo pone en marcha.

3. No olvide los códigos desplegables de navegación

Cuando estás construyendo tu tema de WordPress, un elemento que parece ser pasado por alto son los códigos desplegables para tu navegación. Claro, algunos temas pueden tener la navegación configurada para no utilizar las ul de varios niveles, manteniendo todo en una sola fila, pero ¿qué pasa con aquellos de nosotros que tienen varias páginas secundarias para cada página principal?

Hay una solución para eso. Puede 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. Prepara tu tema para widgets

En mi opinión, como usuario final, no hay nada peor que desplegar un tema y estar listo para configurar todo, sólo para darme cuenta de que ahora me enfrento a la tarea de tratar de personalizar secciones de mis temas codificando información en ellos. Tus barras laterales y otros lugares de tu tema (¿tienes un pie de página de tres columnas? ¡hazlo widgetizable!) deberían ser tan fáciles de editar como sea posible. Es una de las cosas más fáciles de hacer a sus temas, y beneficiará a los usuarios de su tema mucho.

Automattic tiene un gran tutorial sobre cómo widgetizar tu tema. Compruébalo aquí.

También asegúrese de revisar el widgetizing temas tutorial aquí en Theme Lab.

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

Si estás lanzando temas gratuitos o creando temas comerciales para WordPress, deberías tener en cuenta los intereses de tus usuarios finales a la hora de crear tus temas. Abarrotar sus temas con 5-10 plugins necesarios no sólo hará que la gente se frustre al descargar y configurar su tema en su sitio, sino que también hará que mucha gente no lo descargue en absoluto porque, seamos realistas, la gente no tiene lapsos 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 en tu tema automáticamente. Cats Who Code tiene un tutorial bastante bueno sobre cómo añadir paginación en tu tema sin necesidad de activar un plugin.

6. Mostrar 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. Se trata de un sencillo código de una línea que permite al tema recordar al visitante lo que acaba de buscar. Puede parecer trivial, pero es útil para que si los resultados no muestran ninguna entrada, el visitante sepa la frase exacta que buscó y pueda escribir un término de búsqueda diferente.

A continuación se muestra el código utilizado para reemplazar su actual “Resultados de la búsqueda” título en su tema.

<h2>Resultados de la búsqueda de <em><?php the_search_query() ?></em> </h2><

7. No te quedes a medias con tus páginas de error 404

En lugar de limitarse a que su página 404 diga “404 – página no encontrada”, ¿por qué no dar más opciones a sus visitantes? Añadir una lista de categorías, entradas recientes, entradas populares, un cuadro de búsqueda y (si desea monetizar su página 404) un anuncio puede dar a su página 404 un poco de sabor 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 tu página 404, Smashing Magazine tiene una magnífica muestra de páginas 404 de toda la web que merece 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 para WordPress, es esencial que te asegures de que puedes personalizarlo tanto como sea posible desde el principio. Empezar con una combinación de archivos index.php, header.php, sidebar.php y footer.php puede parecer una buena idea para los minimalistas, pero yo sugeriría empezar con todos los archivos básicos para tener un mayor control sobre lo que se muestra, cuándo, dónde y cómo.

• style.css
• header.php
• index.php
• barra lateral.php
• pie.php
• single.php
• página.php
• comentarios.php
• 404.php
• funciones.php
• archivo.php
• formulario.php
• buscar.php

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

9. No olvides la integración RSS

Cuando creas tu blog, uno de los elementos que más llama la atención de la gente es la posibilidad de suscribirse a tu blog a través de un lector RSS. Así que, en lugar de pedir a los usuarios de tu tema que añadan ellos mismos esta información, ¿por qué no te tomas la molestia de añadir un cuadro de suscripción a rss igual que haces con el cuadro de búsqueda? Añade un botón RSS, una opción de suscripción por correo electrónico e incluso puedes añadir el recuento de suscriptores en texto añadiendo este fragmento de código a tu tema donde quieras que se muestre (sustituye “feedburner-id” por tu propio ID de FeedBurner – si vas a lanzar este tema, echa un vistazo al nº 11 de nuestra lista y asegúrate de que tienes esta opción).

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

    //Inicializar la sesión Curl
    $ch = curl_init();

    //Configurar curl para que devuelva los datos en lugar de imprimirlos en el navegador.
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

    //Configura la URL
    curl_setopt($ch, CURLOPT_URL, $whaturl);

    //Ejecutar la búsqueda
    $datos = curl_exec($ch);

    //Cerrar la conexión
    curl_close($ch);
    $xml = nuevo SimpleXMLElement($datos);
    $fb = $xml->feed->entry['circulación'];
    echo $fb;
    //end get cool feedburner count
    ?>

10. Añadir estilos CSS a los comentarios

Si estás construyendo un tema, siempre debes estar preparado para comentarios enhebrados. Es una característica de WordPress que muchos blogs utilizan para crear interacción en la sección de comentarios. Por lo tanto, preparar tu hoja de estilos para comentarios enhebrados es una gran idea. Chris tiene un gran post sobre códigos CSS para las clases CSS por defecto que WordPress escupe en su sección de comentarios, dando a tu tema una sección de comentarios estilizada sin necesidad de tocar el archivo comments.php.

11. No lanzar un tema sin un panel de opciones

Algunas personas pueden no estar de acuerdo con esto, pero creo que es parte de la progresión natural de la tematización de WordPress. Si tu tema no tiene algún tipo de panel de opciones de WordPress con la posibilidad de editar, personalizar y cambiar elementos de 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, los enlaces de abajo te mostrarán cómo hacerlo.

• Crear 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 funcionan desde el principio

Esto va de la mano con el número 5 de nuestra lista: siempre debes asegurarte de que tus temas funcionan desde el primer momento. Algunos temas que he visto requieren 5-6 pasos antes de que el tema es viable en el sitio, incluyendo, pero no limitado a, la activación de plugins y el tema panel de opciones de edición / ahorro. Si el tema requiere ciertas cosas, asegúrese de que hay un elemento de copia de seguridad por defecto utilizado.

Por ejemplo, en el panel de opciones del tema que estás construyendo y/o usando, asegúrate de que hay información por defecto 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 lo codificas para que el tema vuelva a los enlaces anterior/siguiente si el plugin no está activo?

13. No hagas un uso excesivo de los campos personalizados

Sí, la mayoría de los temas de WordPress estilo revista de hace un par de años se construyeron utilizando campos personalizados en todo momento, pero la mayoría de la gente no querrá realmente llenar 3, 4 o 5 campos personalizados para cada post. Así que, haz las cosas más fáciles para ellos. Si vas a mostrar una imagen de la entrada en la página de inicio de tu tema, toma este práctico trozo de código y añádelo al archivo functions.php de tu tema y automáticamente mostrará la primera imagen de la entrada, sin necesidad de un campo personalizado.

// Obtener URL de la primera imagen en un post
function captura_esa_imagen() {
global $post, $posts;
$primera_imagen = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=['"]([^'"]+)['"].*>/i', $post->post_content, $matches);
$primera_img = $parejas [1] [0];

// no se encuentra la imagen mostrar la imagen por defecto en su lugar
if(empty($primera_imagen)){
$first_img = "/images/default.jpg";
}
return $primera_imagen;
}

Una vez que hayas añadido ese código, sólo tienes que añadir <?php echo catch_that_image(); ?> en los archivos de tu tema donde quieras que aparezca la imagen.

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

14. Haz SEO de tu etiqueta <title>.

Una gran manera de asegurarse de que su tema es tan SEO listo como sea posible es eliminar el valor por defecto <title> etiqueta que se encuentra en el archivo header.php temas y reemplazarlo con los códigos de abajo. Le dará a los títulos de tu tema un poco más de jugo y ayudará a los esfuerzos de SEO que los usuarios de tus temas querrán poner en práctica – todo sin requerir que toquen nada.

<?php if ( is_home() ) { ><? bloginfo('nombre'); ?> | <?php bloginfo('descripción'); ?><?php } ?>
<?php if ( is_search() ) {Resultados de la búsqueda para <?php /* Recuento de búsquedas */ $allsearch = &new WP_Query("s=$s&showposts=-1"); $key = wp_specialchars($s, 1); $count = $allsearch->post_count; _e(''); echo $key; _e(' â€" '); echo $count . ' '; _e('artículos'); wp_reset_query(); ?><?php } ?>
<?php if ( is_404() ) {bloginfo('nombre'); ?> | 404 No se ha encontrado nada<?php } ?>
<?php if ( is_author() ) { ><? bloginfo('nombre'); ?> | Archivos de autor<?php } ?>
<?php if ( is_single() ) { ><?php wp_title(''); ?> | <?php $category = get_the_category(); echo $category[0]->cat_name; | <?php bloginfo('nombre'); ?><?php } ?>
<?php if ( is_page() ) {bloginfo('nombre'); ?> | <?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('nombre'); ?><?php } ?>
<?php if ( is_month() ) {bloginfo('nombre'); ?> | Archivo | <?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('nombre'); ?>

15. No te olvides de las migas de pan

Como una pieza adicional de navegación en sus temas, las migas de pan (en mi opinión) deben ser utilizadas tanto como sea posible. No sólo es bueno para fines de SEO, sino que también permite al visitante navegar a través de su sitio mucho más rápido. Hay plugins de WordPress para las migas de pan, pero gracias a Cats Who Code, ahora sabemos cómo añadir una función de migas de pan en nuestros temas de WordPress.

En primer lugar, añada los siguientes códigos en el archivo functions.php de su tema (personalizado un poco a partir del post original de Cats Who Code, enlazado más arriba).

función the_breadcrumb() {
		echo '<ul id="migas">';
	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 el_título();
			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>Archivar para "; the_time('F, Y'); echo'</li>';}
	elseif (is_year()) {echo"<li>Archivar para "; the_time('Y'); echo'</li>';}
	elseif (is_author()) {echo"<li>Archivo de autor"; echo'</li>';}
	elseif (isset($_GET['paginado']) && !empty($_GET['paginado'])) {echo "<li>Archivos del blog"; echo'</li>';}
	elseif (is_search()) {echo"<li>Resultados de búsqueda"; echo'</li>';}
	
	echo '</ul>';
}

A continuación, coloque este fragmento de código en cualquier lugar que desee que se muestren las migas de pan.

<?php the_breadcrumb(); ?>

Gracias por leer el artículo

Gracias por tomarse el tiempo de leer el artículo. Espero que lo hayas disfrutado y que hayas aprendido un par de cosas por el camino. Si te ha gustado el artículo o tienes algo que añadir, háznoslo saber en los comentarios.