Comenzar a Desarrollar un Tema de WordPress desde Cero

Después de haber aprendido en las lecciones anteriores de la serie de capacitación sobre desarrollo de plantillas de WordPress todos los conceptos técnicos fundamentales necesarios para que WordPress trabaje con plantillas, es hora en esta lección de que comiences de manera práctica a construir tu propia plantilla de WordPress desde cero. Antes de comenzar, te recuerdo la necesidad de instalar una versión nueva de WordPress en el servidor local o en el servidor de alojamiento real, crear un sitio de prueba, y comenzar a agregar algo de contenido variado en este sitio como artículos y páginas estáticas para que veas mejor el efecto de la plantilla que estés desarrollando en el sitio. Puedes agregar este contenido manualmente por ti mismo, o confiar en complementos auxiliares que faciliten el proceso y generen contenido de prueba ficticio como el complemento FakerPress, o confiar en muestras de contenido listo, ya que los desarrolladores de WordPress generalmente proporcionan conjuntos de contenido para desarrolladores de plantillas que puedes descargar e importar a tu sitio de prueba para asegurarte de que tu plantilla contiene todos los estilos de contenido requeridos.

La plantilla que desarrollaremos juntos dentro de esta serie será solo en idioma árabe, es decir, las cadenas fijas se escribirán dentro del código en idioma árabe, y las direcciones de visualización de los elementos y párrafos en ella serán de derecha a izquierda por defecto, pero haremos que esta plantilla sea capaz de estar en otro idioma mediante la inclusión de cadenas de texto y su envoltura dentro de funciones de escape especializadas en traducción como: __( 'String', 'text-domain' ); _e( 'String', 'text-domain' ); esc_html__( 'String', 'text-domain' ); esc_html_e( 'String', 'text-domain' ); Te recomiendo leer el siguiente artículo: Pasos para traducir una plantilla de WordPress (guía completa con aplicación práctica) y el siguiente artículo Traducción de plantillas de WordPress para desarrolladores para más información detallada sobre cómo hacer que una plantilla de WordPress sea traducible o funcione en varios idiomas. Ahora que has preparado tu sitio de WordPress, puedes volver aquí, para que comencemos juntos paso a paso en la construcción de un tema de WordPress simple y elegante lo dedicaré a un blog de WordPress que hable sobre plantas de ornamentación y sus tipos, y por supuesto puedes confiar en cualquier otro contenido que te interese.

Pasos para la aplicación práctica 1 para construir una plantilla de WordPress desde cero Paso 1.

Dibuja un esquema preliminar que defina el diseño de tu sitio Paso 2. Crea las carpetas y archivos necesarios para que funcione la plantilla.

Paso 3.

Personaliza el archivo de estilos de la plantilla style.css Paso 4. Crea el archivo de plantilla básico index.php Paso 5. Agrega más estilos requeridos para los elementos de la plantilla Conclusión Paso 1.

Dibuja un esquema preliminar que defina el diseño de tu sitio Después de haber determinado la idea del sitio y sus funciones, es necesario que planifiques cómo se mostrará o visualizará el contenido que agregarás a este sitio, y que prepares una visión preliminar de las ideas y funciones que deseas implementar en la plantilla. El método de dibujar marcos de estructura para el sitio web, o lo que se conoce como esquemas de página (Wireframes), es una forma fácil y rápida de obtener una vista preliminar de la apariencia del sitio (ya sea en computadoras de escritorio, tablets o dispositivos móviles), y compartirlo con el equipo de trabajo o mostrarlo al cliente antes de su desarrollo real. El marco de estructura o esquema (Wireframe) es un diagrama bidimensional que muestra el diseño general de las páginas de un sitio web o aplicación web, y es similar a los planos arquitectónicos que se trazan antes de ejecutar cualquier construcción, ya que definen las características del sitio web y dan una visión general de la estructura de cada una de sus páginas, y muestran el diseño y distribución de los elementos en ella, y la información y funciones que contiene.

Este esquema puede dibujarse de manera primitiva con detalles mínimos o incluir una mayor cantidad de detalle según los requisitos. Estos esquemas se dibujan ya sea manualmente en papel o mediante programas especializados como Sketch o Proto.io o Figma o Photoshop o Canva u otros programas especializados en dibujo. Además, algunos de estos programas tienen la capacidad de convertir el diseño preliminar en una plantilla HTML estática, lo que facilita el proceso de programación de tu plantilla dentro del entorno de WordPress basándote en el diseño estático.

Convertir el marco de estructura en un sitio funcional Cabe destacar que esta tarea puede no ser tu responsabilidad como desarrollador de plantillas de WordPress si trabajas dentro de un equipo, ya que las empresas especializadas asignan a un diseñador de interfaz de usuario (UI/UX Designer), y solicitan a un desarrollador web que codifique el diseño y lo convierta en un diseño estático que incluya todos los elementos estructurales y estilos con tecnologías de interfaz (HTML, CSS, JS), y tu tarea como desarrollador de WordPress será programar el diseño completado y convertirlo en una plantilla de WordPress interactiva con tecnología (PHP). En este caso no es necesario que realices este paso y puedes proceder directamente a crear los archivos que reflejen este diseño y escribir el código de programación necesario. Pero aquí asumimos que trabajas solo y de forma independiente en la construcción de una plantilla desde cero.

Lee más: Explicación del diseño de plantillas de WordPress y su personalización de principio a fin En nuestro caso, construiremos el sitio completo sin depender de ningún diseño estático previo en el que trabajar. Queremos que la página principal de nuestro sitio se vea así: Dibujar el marco de estructura del sitio web Paso 2. Crea las carpetas y archivos necesarios para que funcione la plantilla.

Como explicamos en lecciones anteriores, los archivos de las plantillas deben guardarse en el directorio themes que se encuentra dentro del directorio wp-content dentro de la carpeta raíz del sitio. En el directorio themes debes tener un directorio separado (o carpeta separada) para cada plantilla instalada en tu sitio. Y la carpeta de cualquier plantilla debe contener al menos dos archivos para funcionar correctamente: el archivo index.php y el archivo de estilos style.css.

Por lo tanto, en la lección actual crearé una carpeta nueva dentro del directorio destinada a los archivos de la plantilla y la llamaré ola1 _y por supuesto puedes nombrarla como desees para que represente tu plantilla_ y crearé en ella estos dos archivos básicos. Por supuesto, esto no se aplica a las plantillas secundarias (Child themes) que son plantillas subordinadas de otras plantillas base, estas plantillas pueden contener solo un archivo de estilos style.css, y todo su contenido debe estar también en una carpeta separada dentro del directorio themes, y la plantilla padre se encuentra también dentro de una carpeta al lado de la carpeta de la plantilla hija. La mayoría de las plantillas de WordPress también contienen el archivo functions.php, que se conoce como el archivo de funciones de la plantilla, y este archivo generalmente contiene las funciones o código de programación que necesitamos usar en toda la plantilla.

Donde todas las funciones contenidas en este archivo se ejecutan cada vez que se carga el sitio y mientras la plantilla esté activa en el sitio actual. Puedes crear este archivo directamente en la carpeta de la plantilla o posponer su creación hasta que necesites poner tu código de programación en él. Crearemos este archivo en nuestra plantilla directamente porque necesitaremos hoy agregar algo de código de personalización de la plantilla en él.

Después de eso, tu plantilla también puede contener opcionalmente muchos otros archivos PHP (archivos de plantilla de la plantilla) que se llaman según una jerarquía según la página que se muestra en el sitio, y otros archivos de medios, archivos de estilos y scripts adicionales de JavaScript, que se agregan a la plantilla según sea necesario, que forman juntos una plantilla de WordPress integral como veremos gradualmente en nuestras próximas lecciones dentro de esta serie educativa. Para nuestra plantilla actual, también necesitaré un archivo de imagen llamado screenshot.png para representar la imagen de la plantilla al ver plantillas en el panel de control a través de la pestaña Apariencia < Plantillas, y necesitaré otra imagen llamada default.png que usaré dentro del código como imagen destacada para artículos que no tengan imagen destacada, y para organizar pondré todas las imágenes en una subcarpeta llamada images. Por lo tanto, la carpeta de mi plantilla se verá así: Estructura de archivos y carpetas para una plantilla de WordPress Paso 3.

Personaliza el archivo de estilos de la plantilla style.css El primer archivo en el que comenzaré a trabajar es style.css, que es el archivo responsable de definir el sistema de WordPress con tu plantilla, ya que este archivo generalmente contiene toda la información que define la plantilla como el nombre de la plantilla, el nombre del desarrollador, el número de versión, y otra información general que se escribe dentro de un bloque de comentario al principio de este archivo como sigue: @charset "UTF-8"; /* Theme Name: ola1 Theme URI: https://www.wpar.net/ Author: OLA SALEH Author URI: https://www.wpar.net/author/engolasaleh/ Description: Plantilla desarrollada para fines educativos dentro de un curso gratuito de capacitación sobre desarrollo de plantillas proporcionado por el sitio WordPress en árabe Version: 1.0 */ Comenzamos el archivo escribiendo la siguiente instrucción @charset "UTF-8" que le indica al navegador que lea el archivo CSS como UTF-8. Esta instrucción es útil si tu archivo de estilos contiene caracteres UNICODE y no solo caracteres ASCII. Luego escribimos información descriptiva general sobre la plantilla como un comentario entre los símbolos /* */ e incluimos el nombre del tema, una URI para este tema, la descripción, el nombre del autor, una URI para el autor, y la versión.

@charset "UTF-8"; /* Theme Name: ola1 Theme URI: https://www.wpar.net/ Author: OLA SALEH Author URI: https://www.wpar.net/author/engolasaleh/ Description: Plantilla desarrollada para fines educativos dentro de una serie de capacitación sobre desarrollo de plantillas proporcionada en el sitio WordPress en árabe Version: 1.0 */ Y cabe señalar aquí que es posible que necesitemos pasar más información descriptiva sobre la plantilla si tenemos la intención de subirla a la tienda oficial de plantillas de WordPress, o a algunas tiendas especializadas que requieren un conjunto de estándares en las plantillas que venden, como la tienda Baikalika para productos digitales. En tales casos, la tienda puede requerirte que publiques la plantilla bajo la Licencia Pública General GNU, e indiques las características más destacadas de la plantilla a través de etiquetas de plantilla como el hecho de que esta plantilla incluye un encabezado personalizado o una barra lateral o una imagen destacada o un menú personalizado, etc. para facilitar a los usuarios explorar las plantillas según sus características.

También debes agregar el dominio de texto Text Domain en caso de que desees hacer que una plantilla de WordPress sea traducible para identificar la ubicación de los archivos de traducción de la plantilla. En este caso, el encabezado del archivo de estilos podría verse más largo como sigue: @charset "UTF-8"; /* Theme Name: ola1 Theme URI: https://www.wpar.net/ Author: OLA SALEH Author URI: https://www.wpar.net/author/engolasaleh/ Description: Plantilla desarrollada para fines educativos dentro de una serie de capacitación sobre desarrollo de plantillas proporcionada en el sitio WordPress en árabe Version: 1.0 Liicense: GNU General Public License v3 or later License URI: http://www.gnu.org/licenses/gpl-3.0.html Text Domain: ola1 Tags: one-column, custom-menu, featured-images */ Por supuesto, el archivo de estilos de la plantilla contendrá _además de la información descriptiva_ un conjunto de reglas básicas requeridas para diseñar los elementos de tu tema, a través de las cuales puedes personalizar y diseñar tu tema según tus requisitos de diseño, y estos estilos se agregan sucesivamente al archivo según sea necesario. Actualmente, como hemos decidido que nuestra plantilla será solo en idioma árabe, le agregaremos fuentes que admitan el idioma árabe (agregaré la fuente Noto Sans Arabic) ya que es una de las fuentes árabes elegantes proporcionadas por Google Fonts para web, y usaremos como alternativa la fuente Tahoma cuando esta fuente no esté disponible, y también haremos que la dirección de los elementos sea de derecha a izquierda y definamos el espaciado interno Padding, el espaciado externo Margin y la altura de espaciado de línea line-height general de la siguiente manera: /* General styles */ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@300;400;700&display=swap'); html, body,p { direction: rtl; font-family: 'Noto Sans Arabic',Tahoma, sans-serif; font-weight: 300; line-height: 1.75; margin: 0; padding: 0; } Paso 4.

Crea el archivo de plantilla básico index.php Escribir código HTML para una plantilla de WordPress es exactamente igual a escribir código para un sitio HTML / CSS normal. Por lo tanto, antes de escribir el código del archivo index.php, echemos un vistazo al diseño de nuestro sitio según el marco de estructura para identificar las etiquetas y elementos apropiados para el archivo. Como puedes ver, necesitarás mostrar tres áreas principales en la página principal: el encabezado de la página que muestra el logo y el menú de navegación (necesitamos obtenerlo a través de la función get_header) el contenido de la página que muestra un área destacada dentro de ella con un texto adicional además de mostrar los últimos artículos publicados en el sitio (necesitamos obtenerlo mostrando cadenas de texto fijas y luego pasar a través de un bucle para consultar artículos de WordPress y mostrar el menú de navegación a través de artículos) y el pie de página que muestra el menú de pie de página y una declaración de derechos de autor (necesitamos obtenerlo a través de la función get_footer) Para obtener esta información, editaremos el archivo index.php y escribiremos el siguiente código en él: