Checklist

Comprobaciones importantes antes de publicar un tema de WordPress

Cuando terminé mi tema premium para enviarlo a ThemeForest para su revisión, hice mi prueba final y pensé que también podría escribir un artículo sobre algunas de las comprobaciones más importantes y generales antes de publicar su tema. Por supuesto, hay mucho que revisar, pero a continuación encontrará 20 de los que considero que son algunos de los controles más importantes antes de publicar su tema.

Incluya wp_footer y wp_head

Estas son cosas bastante básicas pero muy importantes. Asegúrese de haber incluido el gancho wp_head en el archivo header.php y su gancho wp_footer en el archivo footer.php. Estos ganchos son muy importantes para que los complementos funcionen con su tema. Además, si incluye funciones adicionales a estos ganchos, obviamente las necesitará.

Toma tu captura de pantalla.png

Muchas veces espero publicar mi tema y me olvidé de incluir el archivo screenshot.png base con el tema. Esta es la imagen que aparecerá en su administrador de WP debajo de su etiqueta de apariencia.

Básicamente, tome una captura de pantalla de su tema, córtela a unos 300 px por 225 px, guárdela como png y asígnele el nombre ‘captura de pantalla’. Luego suelte este bebé directamente en la raíz de su carpeta de temas.

Habilite la compatibilidad con el tema principal de WordPress

Hay muchas características increíbles en WordPress que no están habilitadas de forma predeterminada y deben habilitarse usando el add_theme_support función en su tema. Algunas de estas características incluyen miniaturas de publicaciones, metaetiqueta de título, compatibilidad con html5, encabezado personalizado, logotipo personalizado, etc. A continuación se muestra un ejemplo de cómo activar estas funciones (tenga en cuenta que debe conectarse al enlace de acción after_setup_theme).

// Add theme support
function themename_add_theme_support() {
	add_theme_support( 'post-formats', array( 'aside', 'video', 'image', 'gallery', 'quote' ) );
	add_theme_support( 'post-thumbnails' );
	add_theme_support( 'automatic-feed-links' );
	add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption' ) );
	add_theme_support( 'title-tag' );
	add_theme_support( 'custom-header' );
	add_theme_support( 'custom-logo' );
	add_theme_support( 'customize-selective-refresh-widgets' );
}
add_action( 'after_setup_theme', 'themename_add_theme_support' );

Notar: En el fragmento de muestra, solo agregamos compatibilidad con temas básicos, pero para la mayoría de las funciones, también puede pasar una lista de argumentos. Por ejemplo, para un logotipo personalizado, puede pasar una matriz con ancho, alto, texto de encabezado, etc. Así que asegúrese de investigar cada función y ver si desea pasar argumentos personalizados.

Asegúrate de que la paginación funcione

Especialmente si está utilizando tipos de publicaciones personalizadas, es importante asegurarse de que la paginación funcione no solo en la página, las categorías y las etiquetas de su blog, sino también en los archivos de tipos de publicaciones personalizadas y las taxonomías personalizadas. Eche un vistazo a nuestra guía para agregar paginación en WordPress si no sabe cómo.

Definir el respaldo del menú de WordPress

Una de las preguntas más comunes que me hacen las personas, además de cómo configurar sus imágenes, es cómo configurar su menú. Cuando se usa el sistema de menú de arrastrar y soltar de WP, siempre es ideal configurar un respaldo para su menú con un enlace al panel de administración para que los usuarios puedan ver cómo configurar su menú. ¡No dejes que tus usuarios adivinen!

Eche un vistazo a nuestra guía sobre cómo agregar un menú de respaldo en WordPress si no sabe cómo.

Cola de secuencia de comandos para comentarios vinculados

Cuando los usuarios habilitan los comentarios encadenados en su administrador de WordPress, las personas pueden responder a sus comentarios en su blog. Probablemente haya notado cómo algunos temas recargan la página cuando un usuario hace clic en el botón “Responder”, que no es muy fácil de usar ni profesional. Afortunadamente, WordPress viene con una secuencia de comandos incorporada para que los comentarios encadenados puedan funcionar sin recargar la página. Para habilitarlo, simplemente agregue el siguiente código a su archivo functions.php:

<?php
function themename_comment_reply_js() {
	if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
		wp_enqueue_script( 'comment-reply' );
	}
}
add_action( 'wp_enqueue_scripts', 'themename_comment_reply_js' );

Asegúrese de que JavaScript se haya agregado correctamente

Es importante incluir correctamente JavaScript en sus temas para que no entre en conflicto con los complementos. Escribí un artículo hace algún tiempo que mostraba cómo agregar javascript a través de su archivo functions.php. Si todavía está agregando su JS en el archivo header.php, asegúrese de leer nuestro artículo sobre cómo agregar JavaScript a WordPress de la manera correcta.

Pruebe su tema en todos los navegadores “principales”

Desafortunadamente, la gente todavía usa navegadores más antiguos como Internet Explorer 10. Si está desarrollando temas de WordPress, es muy importante probarlo en todos los navegadores principales y asegurarse de que se vea bien. Si su sitio se ve mal en Firefox, Safari o IE (no solo verifique en Chrome), es posible que las personas no lo descarguen o compren y, si lo hacen, podría obtener muchos tickets de soporte para usted. funciona. . Echa un vistazo a algunos de los mejores sitios de prueba de navegadores a continuación:

Incluir un archivo 404.php

Es muy fácil de hacer y también muy importante. Si no incluye un archivo 404.php en su tema cuando un usuario navega por el sitio y termina con una página de error 404, puede mostrar el contenido de su archivo index.php o mostrar una página 404 generada por el servidor que lo hace. no. coincidir con el diseño de su sitio o proporcionar enlaces útiles al visitante. Puede ser malo para el SEO, pero también es muy fácil de usar. Personalmente, me gusta incluir un título, una lista de páginas y tal vez incluso mi formulario de búsqueda. Realmente depende de usted qué incluir, pero asegúrese de tener el archivo.

Crea páginas únicas para tus tipos de publicaciones

Si tiene tipos de publicación utilizados en su tema, debe crear páginas únicas para cada uno; de lo contrario, se usará el archivo single.php predeterminado. y todos tus tipos de publicaciones se verán como un blog. Por ejemplo, si tiene un tipo de publicación de cartera personalizada, debe tener un archivo single-portfolio.php para mostrar publicaciones de cartera únicas.

Si tiene tipos de publicaciones personalizadas para las que no necesariamente desea publicaciones únicas (como un control deslizante o un tipo de publicación específico en la página de inicio), debe establecer esos tipos de publicaciones con el parámetro público establecido en falso y el parámetro show_ui establecido en cierto (ver el register_post_type función para más información),

Incluir detalles del tema en la hoja de estilo

¡No olvide incluir los detalles del tema en su tema! No solo necesita un nombre para que el tema aparezca en su pestaña Apariencia, sino que también querrá mostrar a los usuarios qué versión del tema están usando y darle crédito por el tema. A continuación se muestra un ejemplo de los detalles del tema para mi tema Total WordPress.

/*
 Theme Name: Total
 Version: 4.6
 Description: Premium WordPress theme by WPExplorer
 Author: WPExplorer
 Theme URI: https://themeforest.net/item/total-responsive-multipurpose-wordpress-theme/6339019
 Author URI: https://themeforest.net/user/wpexplorer
 License: Custom license
 License URI: http://themeforest.net/licenses/terms/regular
 Text Domain: total
 Tags: custom-colors, accessibility-ready, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, theme-options, threaded-comments, translation-ready

Alineaciones / estilos de imagen predeterminados del estilo

Recuerde diseñar las alineaciones de imagen predeterminadas y los estilos de imagen en WordPress. Como sabe, puede alinear las imágenes a la izquierda, a la derecha o al centro en su editor de publicaciones, pero debe incluir los estilos correspondientes en su tema para que esto realmente funcione. A continuación se muestra solo el CSS básico para alineaciones de citas de texto, bloques y imágenes, leyendas y algunos restablecimientos para caras sonrientes. Puede copiarlo y pegarlo directamente en su tema y modificarlo en consecuencia.

/*--------------------------*
/*  WordPress Alignments
/*--------------------------*/
.aligncenter{ display:block;  margin:0 auto}
.alignright{ float:right;  margin:10px 0 10px 10px}
.alignleft{ float:left;  margin:10px 10px 10px 0}
.floatleft{ float:left}
.floatright{ float:right}
.textcenter{ text-align:center}
.textright{ text-align:right}
.textleft{ text-align:left}

Widgets de estilo predeterminados

WordPress incluye muchos widgets integrados. Si está creando un tema, debe diseñarlo para que se adapte a su sitio y hacer que se vea mejor. A continuación se muestra una lista de todos los diferentes widgets que querrá diseñar.

/*--------------------------*
/*  WordPress Widget Styles
/*--------------------------*/
.widget {}

/* links widget */
.widget_links {}
.widget_links ul {}
.widget_links ul li {}
.widget_links ul li a {}

/* meta widget */
.widget_meta {}
.widget_meta ul {}
.widget_meta ul li {}
.widget_meta ul li a {}

/* pages widget */
.widget_pages {}
.widget_pages ul {}
.widget_pages ul li {}
.widget_pages ul li a {}

/* recent-posts widget */
.widget_recent_entries {}
.widget_recent_entries ul {}
.widget_recent_entries ul li {}
.widget_recent_entries ul li a {}

/* archives widget */
.widget_archive {}
.widget_archive ul {}
.widget_archive ul li {}
.widget_archive ul li a {}
.widget_archive select {}
.widget_archive option {}

/* tag-cloud widget */
.widget_links {}
.widget_links li:after {}
.widget_links li:before {}
.widget_tag_cloud {}
.widget_tag_cloud a {}
.widget_tag_cloud a:after {}
.widget_tag_cloud a:before {}

/* calendar widget */
.widget_calendar {}
#calendar_wrap {}
#calendar_wrap th {}
#calendar_wrap td {}
#wp-calendar tr td {}
#wp-calendar caption {}
#wp-calendar a {}
#wp-calendar #today {}
#wp-calendar #prev {}
#wp-calendar #next {}
#wp-calendar #next a {}
#wp-calendar #prev a {}

/* category widget */
.widget_categories {}
.widget_categories ul {}
.widget_categories ul li {}
.widget_categories ul ul.children {}
.widget_categories a {}
.widget_categories select{}
.widget_categories select#cat {}
.widget_categories select.postform {}
.widget_categories option {}
.widget_categories .level-0 {}
.widget_categories .level-1 {}
.widget_categories .level-2 {}
.widget_categories .level-3 {}

/* recent-comments widget */
.recentcomments {}
#recentcomments {}
#recentcomments li {}
#recentcomments li a {}
.widget_recent_comments {}

/* search widget */
#searchform {}
.widget_search {}
.screen-reader-text {}

/* text widget */
.textwidget {}
.widget_text {}

Ver enlaces salientes

Esto no se aplica mucho a los temas premium, ya que no debe incluir ningún enlace en su tema (excepto quizás un enlace a la documentación o al registro de cambios), pero para aquellos que crean temas gratuitos, asegúrese de que los enlaces que proporcione en el área de administración y, lo que es más importante, el pie de página del sitio, en realidad va a alguna parte. Y no se vincule a sitios que contengan spam o que incluyan enlaces patrocinados en sus temas. Si realmente desea crear un tema gratuito, hágalo para retribuir a la comunidad o aumentar su visibilidad. No deberías crear temas solo con el propósito de obtener o vender backlinks.

Asegúrese de que su formulario de búsqueda esté configurado

Incluso si su tema no incluye una barra de búsqueda integrada en el tema, es posible que los usuarios quieran agregar una a su barra lateral u otra área con widgets a través del widget de la barra de búsqueda, así que asegúrese de agregar una a su barra lateral u otra área con widgets a través de la búsqueda. widget de barra, así que asegúrese de haber incluido su archivo searchform.php en su tema. Aquí hay un ejemplo de cómo se vería el código en su archivo searchform.php:

<?php
/**
 * The template for displaying search forms.
 *
 * @package   Total WordPress Theme
 * @author    Alexander Clarke
 * @copyright Copyright (c) 2017, WPExplorer.com
 * @link      http://www.wpexplorer.com
 * @since     1.0
 */

// Exit if accessed directly
if ( ! defined( 'ABSPATH' ) ) {
	exit;
} ?>

<form method="get" class="myprefix-site-searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
	<input type="search" name="s" placeholder="<?php esc_html_e( 'Search...', 'text_domain' ); ?>" />
	<button type="submit"><?php esc_html_e( 'Search', 'text_domain' ); ?></button>
</form>

Prueba todas tus opciones de temas

Si ha creado un panel de tema personalizado para su tema o ha agregado opciones personalizadas a través del Personalizador de WordPress, es muy importante asegurarse de que todas sus opciones estén funcionando correctamente. Sería muy frustrante para un usuario que intenta establecer una opción y no puede hacer que funcione. Así que revise cada opción / configuración y asegúrese de que esté funcionando correctamente.

Embellece los archivos CSS de tu tema

Otra cosa que me gusta hacer antes de terminar con mi tema es ejecutar mi CSS a través de un “generador de CSS” para asegurarme de que todas mis sangrías sean perfectas y no haya errores. A veces también me gusta comprimir mi CSS, dependiendo de la orientación del tema. Personalmente he comprado una aplicación para mac llamada “Procssor” que utilizo, pero puedes buscar en Google “pretty css” o “css beautifier” y hay muchas herramientas en línea para eso.

Verifique la validación en w3.org

Obviamente, desea que su tema no tenga errores de sintaxis de código. No solo para que puedas estar orgulloso de tu trabajo, sino también porque es posible que las personas no compren tu tema si encuentran muchos errores. Un tema válido muestra profesionalismo y experiencia, así que asegúrese de realizar algunas validaciones simples para asegurarse de que sea ecológico. Dirígete al Validador en línea W3 e ingrese la URL de la demostración de su tema para verificar si hay errores. Asegúrese de revisar todas las páginas principales (página de inicio, archivos, investigación, publicaciones únicas, tipos de publicaciones únicas, 404, etc.).

Prueba usando la “Prueba unitaria de temas” de WordPress.org

Aunque este es uno de los pasos más importantes, lo agregué al final porque muchos desarrolladores usan pruebas unitarias durante el proceso de desarrollo. Básicamente, WordPress tiene un archivo xml que puede importar a su sitio con varias ‘pruebas’ para verificar el formato, los widgets, las alineaciones, las imágenes, los formatos de publicación, la paginación, etc. Siempre es importante verificar su tema con el Prueba de unidad temática para asegurarse de que esté listo para salir al público y que no tenga problemas con las funciones y estilos básicos de WordPress.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Ir arriba