Tutorial de Tema personalizado de WordPress

Tutorial de Tema personalizado de WordPress

Aprender a crear temas personalizados de WordPress te abre un mundo completamente nuevo para explorar. Le permite crear diseños personalizados para usted, sus clientes e incluso contribuir a la comunidad de código abierto.

En esta guía, lo llevaremos de cero a tener un tema completamente funcional que se puede enviar al WordPress.org directorio de temas.

Para seguir, necesitará un conocimiento básico de HTML, CSS, PHP y cómo funciona WordPress.

Todo el código utilizado en esta guía estará disponible como referencia en este repositorio de Github.

Paso # 1: Crear archivos esenciales para Tu Tema Personalizado

Un tema de WordPress funcional puede consistir en solo dos archivos: estilo.css e índice.php. Esto es posible gracias a la jerarquía de plantillas de WordPress.

Cuando WordPress genera una página web, busca la plantilla más específica disponible, si una plantilla no existe, se moverá hacia abajo en la jerarquía hasta que encuentre una que lo haga. He aquí un ejemplo práctico:

El usuario está en https://example.com/practical-example, que es una página. WordPress intentará localizar una plantilla en este orden:

1. 1. • page-{slug}.php – El slug de página es / ejemplo práctico, WordPress buscará usar tu ejemplo práctico de tema / página.php
      • page-{id}.php – El ID de página es 42, WordPress buscará usar tu-tema / página-42.php.
      • página.php-WordPress probará el propósito general de su tema / página.plantilla php.
      • singular.php – La plantilla singular puede representar Publicaciones y Páginas, por lo que se prueba después de la página más específica.índice php
      • .php-Por último tu-tema / índice.php se utiliza si no se encuentra ninguna otra plantilla.

Comencemos por crear un tema con solo los archivos esenciales y luego podemos agregar más funciones a medida que exploramos cómo funcionan.

En /wp-content/themes/, cree una carpeta llamada my-custom-theme y cree los dos archivos siguientes:

estilo.css

Para que WordPress reconozca nuestro tema y lo muestre correctamente en la lista Apariencia → Temas, necesitamos colocar un código específico de WordPress en la parte superior del estilo.css, se parece a esto:

/*Theme Name: My Custom ThemeTheme URI: https://yourwebsite.com/themeAuthor: Your NameAuthor URI: https://yourwebsite.comDescription: This is my first custom theme!Version: 1.0.0License: GNU General Public License v2 or laterLicense URI: <https://www.gnu.org/licenses/gpl-2.0.html>Text Domain: my-custom-themeTags: custom-background*/

Técnicamente, ninguno de los campos es obligatorio, pero si desea que su tema se vea bien en wp-admin, se recomienda encarecidamente. También son necesarios si está distribuyendo su tema en WordPress.

1. 1. • Nombre del Tema – siempre Se debe proporcionar un nombre de tema. Si no lo hace, se usará el nombre de la carpeta, mi tema personalizado en nuestro ejemplo.
      • URI de tema: Si se usa, el URI de tema debe proporcionar un enlace a una página donde los visitantes puedan aprender más sobre el tema.
      • Autor – Su nombre va aquí.
      • URI de autor-Se puede colocar un enlace a su sitio web personal o comercial aquí.
      • Descripción-La descripción se muestra en el modal del tema wp-admin y también en la lista de temas de WordPress.
      • Versión: los números de versión ayudan a los desarrolladores a realizar un seguimiento de los cambios y permiten a los usuarios saber si están utilizando la versión más reciente. Seguimos el sistema de numeración SemVer para indicar la gravedad de los cambios en una actualización.Licencia
      • : Cómo licenciar tu tema depende de ti, pero si eliges una licencia no compatible con la GPL, no podrás distribuir tu tema en WordPress.
      • URI de licencia: Esto es simplemente un enlace a la licencia mencionada anteriormente.
      • Dominio de texto: El dominio de texto se utiliza al traducir el tema a otros idiomas. No se preocupe, exploraremos esto en profundidad más adelante. Por ahora, es suficiente saber que es una buena práctica que la carpeta del tema y el dominio de texto sean el nombre del tema separado por guiones en lugar de espacios.Etiquetas
      • – Las etiquetas solo se usan si está cargando su tema en el WordPress.org directorio de temas. Son la base del mecanismo de «Filtro de características».

Copia y pega lo anterior en estilo.css y tendrás algo como esto:

Nota: Se ve un poco en blanco en este momento, ya que aún no tenemos una captura de pantalla. Añadiremos eso más adelante.

índice.índice php

.php es el único otro archivo estrictamente necesario. Su trabajo es renderizar toda la salida del front-end para nuestro tema.

Desde el índice.php va a estar renderizando todas nuestras páginas (inicio, publicaciones, categorías, archivos) va a estar haciendo mucho trabajo. Para empezar, necesitamos una sección principal que cubra los conceptos básicos de HTML.

<!DOCTYPE html><html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="profile" href="https://gmpg.org/xfn/11"> <?php wp_head(); ?> </head>

Este es HTML estándar con una excepción, (<https://developer.wordpress.org/reference/hooks/wp_head/>). wp_head es una función central que permite a WordPress y complementos de terceros insertar código en el encabezado sin modificar los archivos de plantilla. Esto se llama gancho de acción.

Si está familiarizado con HTML, puede notar que no hay una etiqueta <title> para generar el título de la página. Esto se debe a que WordPress puede usar el gancho wp_head para insertar dinámicamente el título.

Otro uso de wp_head es para encolar estilos (.css) y scripts (.js). Hay muy buenas razones para hacer esto en lugar de escribir de ellos, que veremos más adelante.

A continuación, tenemos el cuerpo de la página:

<body <?php body_class(); ?>>

body_class() es una función auxiliar proporcionada por WordPress que generará una lista de clases CSS útiles que describen la página que se muestra, como:

class="page page-id-2 page-parent page-template-default logged-in"

body_class(); también acepta un parámetro para que pueda agregar sus propias clases, por ejemplo:

<body <?php body_class( 'wide-template blue-bg' ); ?>>

A continuación, tenemos el encabezado de la plantilla.

<header class="site-header"><p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></p><p class="site-description"><?php bloginfo( 'description' ); ?></p></header><! – .site-header – >

Aquí estamos usando las funciones de plantilla integradas de WordPress para generar el Título y la Descripción del sitio. También hemos usado una función auxiliar, home_url (), para enlazar el Título del sitio a la página de inicio.

a continuación, el cuerpo de la página:

<div class="site-content"><?phpif ( have_posts() ) :while ( have_posts() ) :the_post();?><article <?php post_class(); ?>><header class="entry-header"><?php the_title( '<h1 class="entry-title">', '</h1>' ); ?></header><! – .entry-header – ><div class="entry-content"><?php the_content( esc_html__( 'Continue reading &rarr;', 'my-custom-theme' ) ); ?></div><! – .entry-content – ></article><! – #post-## – ><?php// If comments are open or we have at least one comment, load up the comment template.if ( comments_open() || get_comments_number() ) :comments_template();endif;endwhile;else :?><article class="no-results"><header class="entry-header"><h1 class="page-title"><?php esc_html_e( 'Nothing Found', 'my-custom-theme' ); ?></h1></header><! – .entry-header – ><div class="entry-content"><p><?php esc_html_e( 'It looks like nothing was found at this location.', 'my-custom-theme' ); ?></p></div><! – .entry-content – ></article><! – .no-results – ><?phpendif;?></div><! – .site-content – >

aquí es donde se pone interesante (y un poco más complejo). Aquí estamos utilizando la característica más importante de WordPress, el Bucle. El bucle hace el trabajo duro de averiguar en qué página está el usuario y qué se debe mostrar. Luego devuelve una lista de uno o más ‘posts’ que podemos recorrer en bucle y generar datos usando funciones de plantilla.

Si el Bucle no devuelve ningún resultado, por ejemplo, en una página 404 o en una publicación eliminada, usamos un operador else para mostrar un mensaje predefinido.

Sin el código circundante, un bucle simplificado se ve así:

if ( have_posts() ) : // check if the loop has returned any posts.while ( have_posts() ) : // loop through each returned post.the_post(); // set up the content so we can use template tags like the_title().the_title(); // output the post title.the_content(); // output the post content.endwhile;else : echo 'No Page Found'; // output an error message if there are no posts.endif;?>

Nota: Debido a que WordPress tiene sus orígenes en los blogs, muchas funciones utilizan la terminología ‘post’, a pesar de que pueden devolver y generar cualquier tipo de contenido (publicaciones, páginas, tipos de publicaciones personalizadas).

Por último, tenemos el pie de página, todo lo que necesitamos hacer aquí es cerrar las etiquetas HTML que abrimos anteriormente. Hay otro gancho de acción, wp_footer(), que es utilizado activamente por WordPress y plugins para incluir scripts en el pie de página necesario para renderizar la página.

<?php wp_footer(); ?></body></html>

Si has estado siguiendo hasta ahora, tendrás un tema de WordPress totalmente funcional que se parece a este:

Nuestro tema no va a ganar ningún premio de diseño (no tiene CSS) y le faltan muchas características que los usuarios consideran esenciales (barras laterales, navegación, metadatos, miniaturas, paginación, etc.) pero es un gran comienzo!

Continuemos y veamos cómo podemos mejorarlo.

Paso # 2: Crear funciones.Funciones php

.php no es un archivo estrictamente necesario, pero proporciona tantos beneficios que el 99,99% de los temas lo tienen. En funciones.php puede utilizar la funcionalidad de tema incorporada de WordPress y también agregar su propio código PHP personalizado.

Crear funciones a.php en su carpeta de temas ahora, ya que le agregaremos código en las siguientes secciones.

Agregar un menú de navegación

La mayoría de los sitios web, si no todos, utilizan un menú de navegación, pero hasta ahora nuestro tema no admite uno. Para decirle a WordPress que nuestro tema cuenta con un menú de navegación, debemos registrarlo en funciones.php como este:

register_nav_menus( array( 'menu-1' => __( 'Primary Menu', 'my-custom-theme' ),);

Nota: register_nav_menus () acepta una matriz para que pueda registrar más de un menú si es necesario.

WordPress ahora sabe acerca de nuestro menú, pero todavía necesitamos imprimirlo en nuestro tema. Lo hacemos agregando el siguiente código debajo de la descripción del sitio en index.php:

wp_nav_menu( array( 'theme_location' => 'menu-1',) );

Ahora tenemos un menú de navegación (sin estilo) :

Agregar una barra lateral

Nuestro tema tampoco tiene una barra lateral (área de widgets), arreglémoslo ahora.

Primero, necesitamos registrar la barra lateral en funciones.php:

function my_custom_theme_sidebar() { register_sidebar( array( 'name' => __( 'Primary Sidebar', 'my-custom-theme' ), 'id' => 'sidebar-1', ) );}add_action( 'widgets_init', 'my_custom_theme_sidebar' );

Ahora crea la barra lateral.php en su carpeta de temas y agregue el siguiente código:

<?php if ( is_active_sidebar( 'sidebar-1' ) ) { ?> <ul class="sidebar"> <?php dynamic_sidebar('sidebar-1' ); ?> </ul><?php } ?>

Aquí estamos usando una instrucción if para verificar si la barra lateral está ‘activa’ antes de generar el código. Una barra lateral activa es aquella a la que el usuario ha agregado al menos un widget.

El último paso es incluir la barra lateral en índice.php, encima de wp_footer() añade una llamada a get_sidebar ().

Agregar imágenes destacadas

Al igual que las barras laterales y los menús de navegación, no podemos simplemente generar imágenes destacadas en nuestro tema y esperar que funcionen, primero debemos decirle a WordPress que apoyamos esa función. En funciones.añadir php:

add_theme_support( 'post-thumbnails' );

Ahora podemos añadir the_post_thumbnail(); dentro de nuestro bucle y las miniaturas funcionarán. El único problema es que generarán el tamaño máximo de WordPress de 1920px x 2560px, que es demasiado grande para la mayoría de los usos. Afortunadamente, WordPress tiene otra función auxiliar: add_image_size();

Cuando un usuario carga una imagen, y si se define el tamaño de la imagen, WordPress generará una versión de la imagen cargada a ese tamaño (manteniendo el original). Si la imagen del usuario es más pequeña que las dimensiones que has configurado, WordPress no hará nada, ya que no puede hacer una imagen más grande que la original.

Para usar una imagen de entidad optimizada en lugar de la original, coloque el siguiente código en funciones.php:

add_image_size( 'my-custom-image-size', 640, 999 );

El primer parámetro es el identificador, el segundo es el ancho de la imagen y el tercero es la altura. Tanto la altura como la anchura son opcionales en caso de que solo desee limitar una dimensión.

En el índice.php:

the_post_thumbnail( 'my-custom-image-size' );

Estilos y scripts en cola

Anteriormente dijimos que es mejor encolar estilos y scripts en lugar de codificarlos directamente en los archivos de plantilla. Esto se debe a que la consulta permite mucha más flexibilidad.

Cuando se hace correctamente, la consulta también le indica a WordPress qué recursos se están cargando. Cuando WordPress sabe qué recursos se necesitan, puede asegurarse de que el mismo recurso no se cargue más de una vez. Esto es especialmente importante cuando tiene una biblioteca extremadamente popular como jQuery o FontAwesome que utilizará múltiples temas y complementos.

Otro beneficio de enqueueing es que un recurso que está enquelado puede ser desescalado por un complemento, evitando la necesidad de modificar archivos de plantilla.

Aunque nuestro tema tiene un estilo.archivo css aún no lo está usando, vamos a averiguar eso ahora:

function my_custom_theme_enqueue() { wp_enqueue_style( 'my-custom-theme', get_stylesheet_uri() );}add_action( 'wp_enqueue_scripts', 'my_custom_theme_enqueue' );

get_stylesheet_uri() es una función auxiliar que recupera el URI de la hoja de estilos del tema actual. Si estuviéramos consultando cualquier otro archivo, tendríamos que hacer esto en su lugar:

wp_enqueue_style( 'my-stylesheet', get_template_directory_uri() . '/css/style.css' );

Nuestro tema no tiene guiones, si lo tuviera, los interrogaríamos de esta manera:

function my_custom_theme_enqueue() {wp_enqueue_style( 'my-custom-theme', get_stylesheet_uri() );wp_enqueue_script( 'my-scripts', get_template_directory_uri() . '/js/scripts.js' );}add_action( 'wp_enqueue_scripts', 'my_custom_theme_enqueue' );

Una excepción a lo anterior son los scripts que han sido pre-registrados por WordPress, en esos casos solo necesita proporcionar el primer parámetro(handle handle):

wp_enqueue_script( 'jquery' );

Añadir estilo Con CSS

Nuestro tema tiene bases sólidas pero carece de diseño, añadiendo un poco de CSS básico al estilo.css hará una gran diferencia. Hemos agregado alrededor de 100 líneas de CSS a nuestro tema de muestra como demostración y el resultado se ve así:

Etiqueta de título

Todos los temas deben utilizar la funcionalidad incorporada de WordPress para generar la etiqueta de título, que se habilita agregando este código a sus funciones.archivo php: add_theme_support( 'title-tag' ); Eso es todo, WordPress manejará la salida de la página < título> y, si es necesario, los complementos pueden modificar la salida utilizando filtros. Los plugins de SEO a menudo hacen esto en un esfuerzo por optimizar aún más los títulos.

Paso # 3: Agregar partes de plantilla

En este momento, el 80% de nuestro código de plantilla está en index.php.

Mientras esto funcione, resultará en una gran cantidad de repetición de código cuando tengamos otros archivos de plantilla como singular.php, búsqueda.php, y archivo.php. Las piezas de plantilla facilitan el desarrollo de temas al permitirnos reutilizar código en todas las plantillas. Como nuestro encabezado y pie de página serán los mismos en cada página, son un candidato perfecto para usar partes de plantillas. Primero, crea un encabezado.php y mover el siguiente código desde index.php:

<!DOCTYPE html><html <?php language_attributes(); ?>><head><meta charset="<?php bloginfo( 'charset' ); ?>"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="profile" href="<https://gmpg.org/xfn/11>"><?php wp_head(); ?></head> <header class="site-header"> <p class="site-title"> <a href="<?php echo esc_url( home_url( '/' ) ); ?>"> <?php bloginfo( 'name' ); ?> </a> </p> <p class="site-description"><?php bloginfo( 'description' ); ?></p><?phpwp_nav_menu( array( 'theme_location' => 'menu-1',) );?> </header><! – .site-header – >

En el índice.php reemplaza el código anterior con:

<?php get_template_part( 'header' ); ?>

Nota: Al obtener una parte de plantilla, debe omitir el .php desde el controlador de parte de plantilla.

A continuación, cree una parte de plantilla de pie de página moviendo este código a pie de página.php y repetir el proceso anterior:

<?php wp_footer(); ?></body></html>

Por último, también moveremos el código «sin resultados» a una parte de plantilla, ya que es probable que se use en varias plantillas. Crear contenido ninguno.php y mueva este código al nuevo archivo.

<article class="no-results"> <header class="entry-header"> <h1 class="page-title"><?php esc_html_e( 'Nothing Found', 'my-custom-theme' ); ?></h1> </header><! – .entry-header – > <div class="entry-content"> <p><?php esc_html_e( 'It looks like nothing was found at this location.', 'my-custom-theme' ); ?></p> </div><! – .entry-content – ></article><! – .no-results – >

Su índice ahora debería tener este aspecto:

<?php get_template_part( 'header' ); ?> <div class="site-content"> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <article <?php post_class(); ?>> <?php the_post_thumbnail(); ?> <header class="entry-header"> <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?> </header><! – .entry-header – > <div class="entry-content"> <?php the_content( esc_html__( 'Continue reading &rarr;', 'my-custom-theme' ) ); ?> </div><! – .entry-content – > </article><! – #post-## – > <?php // If comments are open or we have at least one comment, load up the comment template. if ( comments_open() || get_comments_number() ) : comments_template(); endif; endwhile; else : get_template_part( 'content-none' ); endif;?></div><! – .site-content – ><?phpget_sidebar();get_template_part( 'footer' );

Si bien lo anterior funcionará perfectamente, hay una ligera mejora que podemos hacer. WordPress tiene funciones auxiliares para incluir las partes de la plantilla de encabezado, pie de página y barra lateral. Como es una buena práctica usar la funcionalidad principal siempre que sea posible, deberíamos usar esas en su lugar.

Sustituir get_template_part( 'header' ); por get_header(); y get_template_part( 'footer' ); por get_footer();

Paso # 4: Añadir singular.php, archivo.php, búsqueda.php, y 404.php

El trabajo de base que completamos con partes de plantilla pagará dividendos a medida que agreguemos nuevos archivos de plantilla a nuestro tema. A continuación, enumeramos los más comunes. Para evitar abrumarte con ejemplos de código, hemos enlazado al código fuente en Github en su lugar.

singular.php

Las publicaciones y páginas, cuando se muestran en sus propias URL, se consideran ‘Singulares’, ya que la mayoría de las veces el diseño será el mismo para ambos tipos de página. Pero en el caso de que no lo sea, puedes usar la página más específica.php y soltero.php (post) en su lugar.

Código de ejemplo – singular.archivo php

.php

Las plantillas de archivo suelen diferir de las plantillas singulares de dos maneras: muestran extractos en lugar del contenido completo y cuentan con un encabezado de archivo que explica el contenido.

Vuelva a la jerarquía de plantillas y verá que la plantilla de archivo cubre todos los tipos de archivos (autor, categoría, etiqueta, taxonomía, fecha) si esto no funciona para su caso de uso, aún puede usar las plantillas más específicas:

1. 1. • autor.categoría php
      • .etiqueta php
      • .taxonomía php
      • .php
      • fecha.php

Ejemplo de Código de archivo.búsqueda php

.php

Los sitios web de WordPress se pueden buscar utilizando el ?s = parámetro URL, por ejemplo, yourwebsite.com?s=test. Búsqueda.la plantilla php muestra los resultados de esas búsquedas.

Búsqueda de código de ejemplo.php

404.php

La instrucción else que agregamos en index.php detecta errores de «página no encontrada», pero es posible que desee desacoplar esa funcionalidad en su propio archivo de plantilla para tener más control sobre la salida. Ese es el caso de uso del 404.archivo de plantilla php.

Código de ejemplo-404.php

Paso # 5: Archivos auxiliares

Si está distribuyendo su tema al público, los siguientes archivos son obligatorios. Sin estos, tu tema será rechazado de los repositorios de temas y mercados.

captura de pantalla.png

La captura de pantalla se muestra en la lista de temas wp-admin cuando el usuario selecciona un nuevo tema. Estas son algunas de las mejores prácticas que debe seguir:

1. 1. • Las capturas de pantalla deben ser 1200px x 900px
      • Las capturas de pantalla deben estar dentro .png or .formato jpg
      • Las capturas de pantalla deben ser una representación precisa del tema
      • Las capturas de pantalla deben optimizarse (use tinypng.com o similar)

léeme.txt

WordPress no utiliza ninguna información de readme.txt, saca todo lo que necesita del estilo.css. Por otro lado, el directorio de temas de WordPress extrae información importante del archivo léame y lo considera un archivo requerido.

La mayoría de los desarrolladores usan readme.txt como la ubicación central para almacenar toda la información sobre su tema. Un simple readme.txt se parece a esto:

=== Theme Name ===Requires at least: 5.0Tested up to: 5.2Requires PHP: 5.6License: GPLv2 or laterLicense URI: <https://www.gnu.org/licenses/gpl-2.0.html>Short description. No more than 150 chars.== Description ==Theme desc.== Changelog === 1.0 =* Added new option== Resources ==* normalize.css <https://necolas.github.io/normalize.css/>, (C) 2012-2016 Nicolas Gallagher and Jonathan Neal, (<https://opensource.org/licenses/MIT>)

1. 1. • Requiere al menos-Esta es la versión mínima de WordPress con la que tu tema es compatible.
      • Probado hasta – Este campo indica la versión más reciente de WordPress con la que se ha probado tu tema.
      • Requiere PHP – Este campo denota la versión mínima de PHP en la que funcionará su tema.
      • Descripción: Este campo de descripción no se muestra en ningún lugar.
      • Registro de cambios: El registro de cambios no se usa en ningún lugar, pero los desarrolladores y algunos usuarios harán referencia a este archivo para ver qué cambios se han realizado.Recursos
      • : La mayoría de los recursos de terceros requieren atribución de algún tipo. La sección de recursos es un lugar ampliamente aceptado para colocarlos. Incluso para los recursos que no requieren atribución explícita, sigue siendo una buena práctica enumerarlos aquí para que los usuarios conozcan las licencias de los recursos que están utilizando.

Paso #6: Crear plantillas de página

Las plantillas de página permiten a los desarrolladores crear plantillas personalizadas que se pueden usar para publicaciones y páginas individuales. Por ejemplo, la mayoría de los temas tienen un diseño de dos columnas (barra lateral de contenido), pero en algunas páginas, es posible que el usuario desee centrarse solo en el contenido y no mostrar una barra lateral. Ahí es donde una plantilla de página puede ayudar.

¿Cómo se crean las «Plantillas de página»?

En nuestra carpeta de temas, cree una nueva carpeta llamada «plantillas de página» y dentro de esa carpeta cree un archivo llamado columna única.php. Para acelerar las cosas copia todo el código de singular.php a plantillas de página / columna única.php y elimina la llamada a get_sidebar () ya que esta plantilla no necesitará eso.

Ahora necesitamos agregar un encabezado especial que le diga a WordPress que esta es una plantilla de página, se ve así:

/*Template Name: Single Column TemplateTemplate Post Type: post, page*/

El código se explica por sí mismo, simplemente le estamos diciendo a WordPress el nombre de la plantilla y con qué tipos de publicaciones se puede usar.

Eso es todo, nuestra nueva plantilla de página ahora está disponible en el editor en ‘Atributos de página’.

Paso # 7: Haz que tu Tema sea compatible con RTL.css

No todos los idiomas se leen de izquierda a derecha. El árabe y el hebreo, por ejemplo, se leen de derecha a izquierda (RTL). Hay una forma sencilla de hacer que tu tema sea compatible con lenguajes RTL.

Crea un nuevo archivo en tu carpeta de temas llamado rtl.css, luego copie y pegue el siguiente código:

body {direction: rtl;unicode-bidi: embed;}

Si un idioma RTL es el idioma activo en un sitio web de WordPress, WordPress sabe cargar este archivo CSS automáticamente.

Esta es una implementación muy básica de la funcionalidad RTL para comenzar. Si está interesado en aprender más, aquí hay dos recursos fantásticos:

Documentación de soporte de idioma de derecha a izquierda

Twenty Twenty Código RTL

Paso # 8: Siga siempre las mejores prácticas

Las mejores prácticas han evolucionado con el tiempo para facilitar la creación y el mantenimiento de temas de WordPress. Seguir estos principios no solo te ayudará, sino que también hará que sea más fácil para otros desarrolladores cuando necesiten trabajar con tu código.

1) Utilice temas de inicio

Los temas de inicio proporcionan una base sólida sobre la que construir su tema. Por lo general, son livianos, contienen poco o ningún estilo y no tienen opciones de configuración. Con el tiempo, puede crear su propio tema de inicio en el que puede basar todos sus proyectos, pero por ahora, aquí hay algunas opciones populares:

1. 1. • Guiones bajos
      • Andamio
      • HTML5 en blanco

2) Conozca los estándares de codificación de WordPress

Los estándares de codificación son una forma de formatear su código de manera consistente en toda la base de código. WordPress tiene estándares de codificación para HTML, CSS, Javascript y PHP. Si bien el uso de un estándar de codificación no tiene ningún efecto en la experiencia del usuario final, hace que su código sea mucho más legible. Incluso si no usas los estándares de codificación de WordPress, siempre recomendamos usar un estándar.

1. 1. • WordPress.org Estándares de codificación
      • WPCS
      • Estándares de codificación PHP

3) Use Localización

Gracias al arduo trabajo de los voluntarios, WordPress está disponible en cientos de idiomas. Si su tema se va a publicar públicamente, debe construirse de una manera que permita que también se traduzca.

No te preocupes, es muy fácil de hacer. Todo lo que necesitamos hacer es asegurarnos de que todas las cadenas se pasen a través de una ‘función de localización’ en lugar de ser emitidas directamente.

En lugar de esto:

<?php echo 'Previous Post'; ?>

Hacemos esto en su lugar:

<?php echo __( 'Previous Post', 'my-custom-theme' ); ?>

__() es una función de localización que acepta una cadena y un dominio de texto. La función devuelve una traducción de la cadena proporcionada, o la cadena original si la traducción no está disponible.

4) Evite la funcionalidad del complemento

Cuando un usuario cambia el tema, solo debe cambiar la capa de presentación. El contenido y la funcionalidad deben permanecer casi iguales. Lo que esto significa es que cualquier función que afecte la forma en que los roles de WordPress deben estar contenidos en un plugin, no en tu tema. Algunos ejemplos de funcionalidad de plugin incluyen:

1. 1. • Tipos de Post personalizados
      • Creadores de páginas
      • Compartir en Redes Sociales
      • Optimización de Motores de Búsqueda (SEO)

Si bien puede parecer conveniente (y posiblemente un punto de venta) incluir controles de SEO en un tema, en realidad perjudica al usuario a largo plazo. En el futuro, necesitarán cambiar su tema, pero no pueden, porque todas sus configuraciones de SEO están estrechamente vinculadas al tema actual. Por el contrario, si las configuraciones se almacenaran en un complemento, podrían cambiar de tema sin preocuparse.

5) Prefijo (Prevenir conflictos)

Para evitar conflictos, todas las funciones, clases y variables globales creadas por su tema deben tener prefijo. Esto es importante porque es imposible saber qué otro código se está ejecutando en el sitio web de su usuario. El prefijo evita conflictos de nombres y errores fatales.

El nombre de tu tema separado por guiones o guiones bajos funcionará como prefijo la mayor parte del tiempo. Si el nombre del tema es muy largo, las iniciales pueden funcionar en su lugar.

Theme Name: Scaffoldclass Scaffold_Class {}function scaffold_function() {}global $scaffold_globalTheme Name: My Long Theme Nameclass MLTN_Class {}function mltn_function() {}global $mltn_global

6) Use la funcionalidad del núcleo

Cuando exista, siempre debe usar la funcionalidad del núcleo en lugar de reinventar la rueda. Esto incluye, entre otros, Barras Laterales, Menús de Navegación, Miniaturas de Publicaciones, Encabezados Personalizados y Fondos Personalizados. Estas características han sido probadas por millones de usuarios y se mantienen y mejoran activamente.

Si necesita cambiar la funcionalidad o la salida de una función principal, es posible usar uno de los muchos ganchos y filtros que ofrece WordPress. Por ejemplo, wp_nav_menu() tiene un parámetro ‘walker’ para que pueda tener un control completo de la salida.

7) Escape y desinfección de datos

Como desarrollador de temas, debe estar familiarizado con el escape y desinfección de datos para proteger a sus usuarios de posibles vulnerabilidades.

Escapar

Escapar es el proceso de comprobar que los datos son seguros antes de su salida y desinfectar es comprobar los datos antes de guardarlos en la base de datos.

WordPress tiene funciones auxiliares que puede usar para escapar datos, por lo que no necesita construirlas usted mismo. esc_html es un ejemplo de una función de escape. Así es como se ve una salida sin escapatoria:

echo get_theme_mod( 'error_page_title' );

Para escapar de la salida hacemos esto:

echo esc_html( get_theme_mod( 'error_page_title' ) );

Algunas otras funciones de escape que debe tener en cuenta son esc_attr(), absint(), esc_url().

También es posible traducir y escapar una cadena usando una sola función:

echo esc_html( __( '404 Not Found', 'my-custom-theme' ) );

Se convierte en:

echo esc_html__( '404 Not Found', 'my-custom-theme' );// oresc_html_e( '404 Not Found', 'my-custom-theme' );

Consejo: En cualquier lugar de tu tema en el que tengas echo $ deberías comprobar si necesita escaparse, normalmente lo hace.

Desinfección

Si agrega configuraciones a su tema, debe asegurarse de que los datos que los usuarios ingresan a esas configuraciones estén seguros antes de que entren en la base de datos. WordPress tiene una serie de funciones para ayudar a desinfectar la entrada.

Al agregar una configuración a su tema utilizando la API del Personalizador, tiene un parámetro llamado ‘sanitize_callback’ que acepta el nombre de una función de desinfección. Cualquier entrada que tome la configuración es comprobada por la función que proporciona a ‘sanitize_callback’ antes de entrar en la base de datos.

Resalta la importancia de la desinfección, ya que si incluso una de sus configuraciones falta el sanitize_callback, no se aceptará en el directorio de temas de WordPress.

$wp_customize->add_setting( 'my_custom_theme_setting', array( 'sanitize_callback' => 'sanitize_text_field' // A core sanitization function. ));

Se puede ver una lista oficial de funciones de desinfección y escape aquí: Desinfección/escape de datos

Paso # 9: Distribuya Su tema de WordPress

Los temas se pueden distribuir a través de diferentes canales dependiendo del resultado que desee lograr. Si tu resultado es simplemente contribuir a la comunidad de código abierto, entonces no hay mejor manera de hacerlo que subir tu tema al directorio de WordPress. Si en cambio, está buscando vender su tema y ganar dinero directamente, también hay formas de hacerlo.

Aquí están los sitios web líderes para la distribución de temas:

1) WordPress.org (El mejor lugar para obtener descargas y usuarios)

El principal beneficio de alojar su tema en WordPress es que obtiene un aumento de visibilidad al ver su tema no solo en wordpress.sitio web de org, pero también en el panel de administración de wp.

Otro beneficio de alojar su tema con WordPress es el sistema de actualización incorporado. Si actualiza su tema, todos los usuarios serán notificados dentro de sus paneles wp-admin y se les dará una ruta fácil para actualizar a la última versión.

WordPress.org solo acepta temas gratuitos, pero eso no significa que no puedas ganar dinero. Un tema gratuito puede ser un gran canal para promocionar tu tema, plugin o servicio premium.

2) WordPress.com

WordPress.com aloja temas gratuitos y premium. Sin embargo, no han estado abiertos a nuevas presentaciones de autores desde hace unos años.

3) ThemeForest

ThemeForest es el mercado líder para temas premium. El tema más vendido (Avada) tiene ventas de más de 5 5,000,000.

En términos generales, los compradores de Theme Forest esperan temas «multiusos» con todas las funciones. Todos los temas principales tienen la funcionalidad de creador de páginas y son compatibles con equipos de desarrolladores. Es un mercado muy difícil de abrir para los nuevos autores.

4) Mercado Creativo y Mercado de Mojo

Mercado Creativo y Mercado de Mojo son pequeños jugadores en el mercado de temas premium, por lo que los agrupamos. Ambos ofrecen efectivamente el mismo servicio que ThemeForest, pero a menor escala.

5) Github

Github es la forma más fácil de hacer público tu tema gratuito. No hay proceso de revisión ni pautas a seguir. Sin embargo, no se beneficiará de la visibilidad de wordpress.org y tendrá que crear su propio mecanismo de actualización para que los usuarios obtengan las últimas versiones.

Paso # 10: Pruebe y Mejore el Código

1) Pruebe su Tema

Prueba de Unidad de tema

La Prueba de unidad de tema es un archivo de importación de contenido de WordPress estándar que contiene una amplia gama de tipos de contenido y casos extremos. Es fácil de cargar en su entorno de desarrollo y resaltará muchos escenarios que puede haber pasado por alto.

WP_DEBUG

Como desarrollador de temas, probar su tema con WP_DEBUG habilitado es lo mínimo que debe hacer. El tema no debe devolver errores ni advertencias cuando WP_DEBUG se establece en true.

También es importante repetir la prueba con las diferentes versiones de PHP que admite su tema. Con cada versión principal de PHP, hay nuevos cambios, advertencias y depreciación. No es raro que un tema esté libre de errores en PHP5. 6, pero muestre errores en PHP7.

Para habilitar WP_DEBUG, agregue el siguiente código a wp-config.php:

DEFINE( 'WP_DEBUG', true );

Widget de monstruo

El widget de monstruo es un complemento útil que te permite agregar 13 widgets principales a tu barra lateral a la vez. Los widgets principales utilizan una variedad de elementos HTML, lo que los hace perfectos para probar su tema.

Rastreador de temas

El Rastreador de temas es un complemento creado por el Equipo de Revisión de Temas (TRT). Captura muchos (pero no todos) errores de escape y localización. También comprueba su tema con los estándares de codificación de WordPress.

2) Enviar tu Tema a WordPress.org

Al principio de esta guía, dijimos que para cuando llegaras al final tendrías un tema al que podrías someterte wordpress.org Veamos ese proceso.

Proceso de Carga

El proceso de carga es simple. Crea o inicia sesión en tu cuenta de WordPress y luego navega a esta página– https://wordpress.org/themes/upload/

Puedes comprimir tu tema y subirlo ahora mismo, pero aquí hay algunas cosas que podrías querer saber primero.

Requisitos

El Equipo de Revisión Temática (TRT) tiene un conjunto estricto de requisitos. Su tema no será aceptado en el directorio hasta que cumpla con todos los requisitos.

Proceso de revisión

Cuando carga un tema, hay un proceso de revisión de dos etapas que debe pasar antes de que pueda ser aceptado en el directorio.

En primer lugar, se realiza una comprobación automática tan pronto como pulsa Cargar. Detrás de escena, el comprobador automático funciona de una manera muy similar al plugin Theme Sniffer. Si encuentra algún error, rechazará el tema y el proceso de carga terminará allí.

Si su tema pasa la comprobación automática, se une a una cola de temas en espera de una revisión humana. La revisión humana es completada por voluntarios del TRT. El número de temas en la cola supera con creces el número de revisores, lo que significa que, a menudo, el tema puede tardar de 2 a 3 meses en llegar al frente de la cola.

Es imperativo que su tema esté libre de errores y cumpla con todos los requisitos cuando llegue a la etapa de revisión humana, como si tuviera más de 3 errores significativos que pueda ser rechazado. Si un tema es rechazado en la etapa de revisión humana, debe volver a unirse a la cola en la parte posterior, lo que significa esperar de nuevo 2 a 3 meses para otra revisión humana.

Recurso Útil: Los Errores de Desarrollo de Temas de WordPress Más Comunes (y Cómo Solucionarlos)

Vale la pena señalar que el TRT siempre está buscando nuevos revisores, el voluntariado puede ser una gran experiencia de aprendizaje y una forma de contribuir a la comunidad de código abierto.

3) Su lista de temas

¡Felicitaciones, su tema ha sido aprobado! Ahora tiene su propio listado que se ve así.

Este es un resumen de lo que puede esperar ver en esta página:

1. 1. • Captura de pantalla: La captura de pantalla es lo primero que ven los usuarios potenciales, así que hágala lo más atractiva posible. Pero recuerde que debe ser una representación precisa del tema y no un renderizado de Photoshop. Inspírate en los temas más populares.
      • Descripción-La descripción que se extrae del estilo.css es un lugar ideal para describir su tema y sus características clave. También ayuda a enumerar los complementos recomendados o necesarios aquí. La descripción no admite formato (negrita, cursiva, hipervínculos) ni saltos de línea.Etiquetas
      • : Esta es una representación de las etiquetas que enumeró en estilo.css. Solo se aceptan estas etiquetas.Botón de vista previa
      • – La vista previa es generada por wordpress.org y como desarrolladores de temas, no tenemos control sobre la salida. Desafortunadamente, como el previsualizador utiliza contenido básico y ninguna configuración, a menudo resulta en una vista previa menos que perfecta.
      • Enlace a la página de inicio del tema: La URL del botón de vista previa se extrae del campo «URI del tema» en su estilo.css. Hay requisitos estrictos para que esta URL solo se use para mostrar una página que muestre información sobre su tema.
      • Instalaciones activas: Este es el número de sitios web que utilizan activamente el tema. El número se redondea a los diez, cien o mil más cercanos. No es posible recuperar un número exacto.
      • Descargas por día: Esta es la cantidad de veces que se ha descargado el tema. Una ‘Descarga’ puede ser una nueva descarga o una actualización de tema.
      • Opiniones: Para que un usuario deje una opinión, debe iniciar sesión en un wordpress.org cuenta. En términos generales, las reseñas son difíciles de obtener a menos que pidas explícitamente a tus usuarios que las envíen.Soporte
      • : La plataforma de soporte integrada es ideal para administrar y resolver problemas con su tema. El usuario debe iniciar sesión para crear un hilo de soporte.
      • Traducciones-La plataforma de traducción es un recurso fantástico. Si ha estado siguiendo los consejos a lo largo de esta guía para localizar su tema, sus usuarios podrán traducirlo a otros idiomas y ampliar su base de usuarios potenciales más allá de solo usuarios de habla inglesa.

4) Actualización de su tema

Cuando realice cambios en su tema en el futuro y necesite actualizar la versión alojada en WordPress, el proceso es simple.

Primero actualice el campo’ Version: ‘y el registro de cambios en readme.txt. Luego comprime el archivo y vuelve a cargarlo usando la misma página de carga que antes.

El sistema lo reconocerá como una actualización y lo aprobará automáticamente para que no requiera otra revisión humana.