Good Mood

Este va a ser un tutorial divertido donde inspeccionamos cómo crear su propio tema de WordPress desde cero. De hecho, comenzaremos con absolutamente cero archivos y cero líneas de código. La única manera de entender cómo funcionan los temas de WordPress, Es realmente saltar a un nivel bajo y hacer cada cosa por ti mismo. Sí, es tentador evitar esto porque puedes hacer que WordPress haga todo por ti sin entender el código que lo impulsa., Esto podría ser PHP, JavaScript, CSS o incluso el HTML básico. Al final de este tutorial paso a paso del tema de WordPress, usted entenderá cómo todo encaja y cómo doblar WordPress a su voluntad con facilidad.

Hay tantos temas gratuitos disponibles para usted cuando está ejecutando un sitio web de WordPress. Más allá de los temas gratuitos, también puede optar por pagar una prima por temas de WordPress hechos profesionalmente que se ven muy bien y tienen características fantásticas. Entonces, ¿por qué aprender a crear tu propio tema desde cero?, La respuesta es que no importa qué tema esté utilizando, llegará un momento en el que desee realizar cambios simples en su sitio web. Algunos de esos cambios pueden ser acomodados por un simple plugin o widget. Sin embargo, muchas veces, tiene más sentido entender qué es lo que desea cambiar, cómo cambiarlo y evitar convertir su sitio web de WordPress en un lío de complementos y complementos que se vuelven difíciles de manejar. Con solo un poco de conocimiento de nivel básico, tendrá confianza en la modificación de su tema, o simplemente la construcción de su propio desde cero., Sabrá qué Archivo Editar y qué código agregar o modificar para crear el resultado deseado.

Paso 1: Crea una carpeta para guardar tus archivos de tema.

si vamos a construir temas, necesitamos saber dónde viven los archivos que componen un tema de WordPress en una instalación de WordPress. Esto es bastante fácil. Sabemos que una instalación de WordPress normalmente tiene un directorio raíz llamado wordpress. Así es como se ve nuestro directorio raíz en PHP Storm.,

Este directorio contiene los siguientes archivos y carpetas:

Archivos

Carpetas

• wp-admin
• wp-content
• wp-includes

La carpeta que más nos interesa ahora es la carpeta wp-content. Dentro de la carpeta wp-content hay una carpeta llamada themes. ¿Sabes para qué es esta carpeta? ¡Sí, eso es! Es la carpeta que contiene uno o más temas que le gustaría usar con su sitio web de WordPress., En esta carpeta de temas encontramos tres carpetas adicionales de twentyfifteen, twentysixteen y twentyseventeen. Estas carpetas contienen los tres temas que WordPress incluye de forma predeterminada. Observe a continuación que también hay una carpeta llamada customtheme. Seguir adelante y crear esa carpeta, así como en su instalación, ya que aquí es donde vamos a crear nuestro tema de WordPress desde cero.

Paso 2: Crear estilo.css e Índice.php en su carpeta de temas personalizados

ahora sabemos dónde están los archivos de temas de WordPress en el sistema de archivos., También hemos creado una nueva carpeta llamada customtheme en nuestra carpeta Temas. Ahora vamos a crear dos archivos vacíos en este directorio. Uno se llama index.php y el otro se llama estilo.css.

ahora vamos a llenar estos archivos con el mínimo que necesitamos para obtener un nuevo tema en WordPress.

estilo.css

WordPress realmente lee los comentarios que colocas en el estilo.archivo css. Aquí es donde usted especifica información específica sobre el tema que está construyendo.

El estilo.,css es un archivo de hoja de estilo (CSS) necesario para cada tema de WordPress. Controla la presentación (diseño visual y maquetación) de las páginas web.

en nuestro fragmento de código aquí simplemente asignamos un nombre de tema, el autor, el URI de autor y el número de versión de nuestro tema.,

índice.,php

en este archivo, solo queremos enviar algo a la pantalla para demostrar que nuestro tema personalizado está funcionando.

Gran Trabajo! Lo creas o no, has creado tu primer tema de WordPress.,

Paso 3: Active su tema desde el Panel de WordPress

en este punto podemos visitar nuestro panel de WordPress y navegar a Apariencia – > temas y lo Y he aquí, vemos el nuevo tema que hemos creado.

podemos hacer clic en «Detalles del tema» para profundizar en nuestro tema personalizado y encontrar que la información que habíamos introducido en el estilo.el archivo css ha funcionado. Podemos ver que el Les tiene un nombre de customtheme, con la versión 1.0, del autor Vegibit, y un enlace a la URI que habíamos proporcionado. Muy guay.,

Y ahora, el momento de la verdad! Siga adelante y haga clic en «Activar» en el nuevo customtheme y luego visite el sitio. No va a ganar ningún premio Webby, pero tenemos nosotros mismos un buen comienzo en un nuevo tema personalizado!

Paso 4: agregue código para generar el título y el texto del mensaje

nos hemos tomado la libertad de rellenar un par de mensajes de ejemplo en la base de datos para que podamos trabajar con esos datos durante este tutorial. En este momento, nuestro tema Solo Salidas tema personalizado!, a la página cuando visitamos nuestro sitio, no importa cuántos mensajes hay en la base de datos. Pasemos ahora a buscar algunos datos de la base de datos y enviarlos a la página. Específicamente, queremos obtener el título del Post y el contenido del Post de todos los posts y verlos en la página de inicio. Vamos a intentarlo ahora. Primero vamos a ver lo que tenemos para las publicaciones en el Panel de WordPress.

Aprovechando El Bucle de WordPress

Ahora podemos hablar un poco sobre el Bucle de WordPress. El bucle de WordPress Es realmente el motor que hace funcionar WordPress., Es a través de este bucle, que los desarrolladores de temas comprueban las publicaciones y las muestran en la página según sea necesario. Si sigue el formato como sigue. Si la base de datos tiene publicaciones, repasémoslas mientras todavía hay publicaciones, de lo contrario le haremos saber al usuario que no hay publicaciones. Se ve así en código PHP.,

Observe que El Bucle se hace uso de dos funciones en su forma más básica. Esos son have_posts() y the_post(). La función have_posts() solo hace una cosa. Te dice si hay alguna publicación en la base de datos para repasar., Esta función devolverá true o false y eso es todo. Si devuelve true, entonces hay entradas disponibles para recorrer. Si devuelve false, entonces no hay puestos para recorrer. La otra función, the_post() no devuelve nada. Su trabajo es conseguir WordPress listo para la salida de mensajes. Específicamente, recupera el siguiente post, configura el post, establece la propiedad in_the_loop a true., Hasta ahora, nuestra página todavía no mostrará ninguna información sobre nuestras publicaciones en el blog, pero podemos actualizarla ahora en nuestro índice.archivo php.

Ok cool. Ahora hemos hecho uso de dos funciones adicionales de WordPress, the_title () y the_content (). Muy a menudo, estas funciones se utilizan dentro del bucle y lo que hacen es obtener el título y el contenido de cada publicación a medida que el bucle itera sobre cada uno en la base de datos. Así que a medida que el bucle se ejecuta, se encontrará con el primer post., En ese momento la función_title() mostrará el título del post a la página y the_content () mostrará el cuerpo de ese post a la página. En el siguiente bucle, estas funciones recuperarán de nuevo el siguiente título y contenido y los enviarán a la página. Así que con estos en su lugar, ahora deberíamos ver alguna información sobre nuestras publicaciones que se envían a la pantalla. Vamos a intentarlo! Visitamos http://wordpresstutorial.dev y vemos que funciona!,

Paso 5: Agregue un enlace a cada publicación

Qué hay de vincular a cada publicación individual para que podamos ver una publicación por sí misma en lugar de como parte de la página de inicio. Podemos hacerlo muy fácilmente, de nuevo con funciones especiales que proporciona WordPress. Para esta tarea, podemos hacer uso de la función the_permalink (). Podemos actualizar nuestro código de la siguiente manera:

ahora, podemos hacer clic en el título de cada publicación individual y navegar a una página que tenga solo esa publicación. Muy cool!,

Paso 6: Agregue un encabezado y un pie de Página al tema personalizado

El título y el contenido de la publicación son fundamentales para crear un buen tema. Casi tan importante es tener una sección de encabezado y pie de Página de su tema. Estas secciones contendrían el contenido que siempre es visible en todas las páginas del sitio web. Estas secciones están por encima y por debajo del contenido del post. Para hacer esto, lo adivinaste, haremos uso de funciones especiales proporcionadas por WordPress para obtener el encabezado y el pie de página. ¿Ves que ya se está desarrollando un patrón?, Casi todo lo que puedes hacer como desarrollador de temas en WordPress ya se ha hecho por ti a través de estas funciones personalizadas. Así que usted encontrará que vale la pena memorizar estas funciones de uso común en el desarrollo de temas de WordPress. Vamos a seguir adelante y añadir las funciones get_header() y get_footer () a nuestro archivo de tema ahora.

Así que nos fijamos en eso?! Podemos ver que nuestro tema personalizado ahora tiene un área de encabezado, así como un área de pie de página., En el encabezado está el nombre y el eslogan del sitio, mientras que en el pie de página vemos el texto familiar, WordPress Tutorial es orgullosamente impulsado por WordPress. Estas son las opciones predeterminadas de encabezado y pie de Página cuando se utilizan estas funciones. ¿Qué pasa cuando queremos tener un encabezado y pie de Página personalizados? ¡Enseguida!

de 2 archivos de tema a 4

hasta ahora en este tutorial, tenemos dos archivos que viven en nuestra carpeta customtheme (que a su vez está en la carpeta themes). Esos archivos son estilo.css e Índice.php. En este punto, vamos a necesitar agregar más archivos para obtener más., Siga adelante y cree dos nuevos archivos en la carpeta customtheme. Estos archivos se llamarán convenientemente encabezado.php y pie de página.php.

ahora lo que estos archivos harán es sobrescribir los diseños de encabezado y pie de página predeterminados proporcionados por defecto cuando llame a las funciones get_header() o get_footer (). De hecho, si actualizamos nuestro sitio web, parece que el encabezado y el pie de página se han ido. Esto se debe a que aún no hemos agregado ningún marcado a esos archivos. Solo para sonrisas, configure los archivos de esta manera para probar esto.

encabezado.,php

footer.,php

Working with header.,php

nuestro ejemplo anterior funcionó muy bien, y nos muestra cómo funciona Este archivo en su nivel más básico. Cabecera.sin embargo, el archivo php es bastante importante, ¡así que no pasemos por alto los detalles demasiado rápido! Aquí es donde incluye el código al que todas las páginas de su sitio necesitarán acceso de una manera u otra. Para empezar, todas las páginas HTML tendrán un doctype. Usted especificaría eso en este archivo. Además, todas las páginas tendrán una etiqueta html de apertura, una sección principal y una etiqueta de cuerpo de apertura. Todo esto puede ir en el encabezado.archivo php., Vamos a añadir rápidamente algunas de estas cosas que todas las páginas web haría uso de. Vamos a hacer uso de algunas nuevas funciones de WordPress aquí también. Esos serán language_attributes(), bloginfo() y body_class().

encabezado.php

Si recargamos la página y luego vemos el origen de la página en nuestro navegador, podemos hacernos una idea de lo que están haciendo estas funciones. Destacamos las líneas que tienen salida que provenían de esas funciones a continuación:

nuevamente, podemos ver el uso muy liberal de las funciones de WordPress al desarrollar sus propios temas en WordPress., De hecho, todavía no hemos escrito ningún código personalizado. Simplemente estamos aprendiendo lo que las diversas funciones de WordPress nos pueden ofrecer, y luego ponerlas a trabajar en nuestro tema personalizado.

incluir wp_head ()

wp_head () es una función especial cuando trabajas con temas de WordPress. No es tan simple como todos los otros que hemos visto hasta ahora. El propósito de esta función es finalizar la salida en la sección <head> de su encabezado.archivo php., De hecho, está destinado a ir justo antes del cierre </head> etiqueta. Esto se vuelve importante cuando comienzas a agregar varios complementos a tu sitio. Imprime scripts o datos en la etiqueta head en el front-end. Es una buena práctica incluir siempre wp_head () en sus temas, ya que muchos otros plugins pueden confiar en este gancho para agregar estilos, scripts o meta elementos en el área <head> del sitio. Lo agregaremos como tal aquí:

header.php

completar pie de página.,php

hemos terminado de agregar los conceptos básicos de lo que necesitaremos en el encabezado.archivo php. Ahora vamos a seguir adelante y redondear el pie de página.archivo php. Hay algunas cosas que tenemos que hacer. Recuérdalo en nuestro encabezado.archivo php tenemos la apertura de etiquetas html y body. Esos necesitan ser cerrados en algún momento. El pie de página.php file es un lugar perfecto para hacer eso. Así que vamos a añadir cierre </html> y </cuerpo> etiquetas además de hacer un llamado a la wp_footer() función.pie de página.,php

modificación de la Información del Sitio En El Panel de WordPress

Usted puede estar preguntándose por qué tuvimos que hacer uso de todas estas fantasía funciones a desarrollar nuestro tema. Por ejemplo, cuando queríamos enumerar el nombre y el eslogan de nuestro sitio, hicimos uso de la función bloginfo() pasando parámetros de nombre y descripción., La razón de esto es porque generalmente, nunca desea codificar estos valores en su sitio. Esta información podría cambiar. Además, si pone su tema a disposición del público, tendrán su propio nombre y eslogan para su sitio web. Deberían poder simplemente visitar el panel de administración en WordPress y actualizar su configuración General para ver que estos datos se llenan automáticamente.

hacer que el título del Sitio enlace a la página de inicio

La mayoría de los temas ofrecerán la posibilidad de hacer clic en el texto del título del sitio web y dirigir al usuario a la página de inicio del sitio., De esta manera, no importa dónde esté el usuario en el sitio, siempre puede hacer clic en el texto del título y volver a la página principal del sitio web. Vamos a añadir ese enlace ahora en el encabezado.php.

Paso 7: añadir funciones A.archivo php a su tema

en este punto, tenemos cuatro archivos en nuestro tema personalizado. Son índices.php, estilo.css, encabezado.php, y pie de página.php. Probablemente el siguiente archivo más importante que necesitamos es las funciones.archivo php.

Las funciones.archivo php en WordPress hace muchas cosas para su tema. Es el archivo donde se coloca el código para modificar el comportamiento predeterminado de WordPress., Casi puedes pensar en las funciones.php como una forma de un plugin para WordPress con algunos puntos clave para recordar:

• No requiere texto de encabezado único
• almacenado en la carpeta que contiene sus archivos de tema
• Se ejecuta solo cuando en el directorio del tema actualmente activado
• Se aplica solo al tema actual
• Puede llamar a funciones PHP, Funciones de WordPress o funciones personalizadas

Una cosa que necesitamos mal en nuestro tema es un mejor estilo! Vamos a crear una función en nuestras funciones.archivo php para incluir el estilo.archivo css en nuestro tema., He aquí cómo podemos lograr ese objetivo.

esta pieza de código incluirá, o activará, la hoja de estilo de nuestro tema personalizado. Ahora puede que se pregunte por qué estamos utilizando una función personalizada, cuando parece que podríamos fácilmente enlazar manualmente a la hoja de estilo nosotros mismos en el encabezado.archivo php. Bueno, esto se reduce a hacer un poco más de trabajo por adelantado para un mayor retorno de su esfuerzo más tarde. A medida que los temas se vuelven más complejos y se agregan más activos, estará encantado de tener esta función que puede manejar todo el trabajo pesado por usted.,

Ahora es el momento de hacer que las cosas se vean un poco más bonitas. Primero, agreguemos un envoltorio <div> con una clase de contenedor. La apertura <div> será en la cabecera.php, mientras que el cierre <div> estará en el pie de página.php. También envolveremos la salida post en index.php con una etiqueta <article> que tiene una clase de post. Esto nos dará clases para apuntar en nuestro estilo.,archivo css para que podamos establecer el ancho de la página entre otras cosas. También agregaremos un mejor estilo al estilo.css en este paso.

Paso 8: añadir un poco de estilo a su tema

encabezado.php
añadiendo una apertura <div> a la cabecera.archivo php.

pie de página.php
añadiendo un cierre </div> al pie de página.archivo php.

índice.php
envolviendo la salida post con un estilo<article> tag

.,css
finalmente, agregamos algunas mejoras de estilo CSS para que el tema se Vea un poco mejor.

cuando visitamos nuestro sitio web de prueba ahora en el navegador, podemos ver que el tema de WordPress que hemos desarrollado paso a paso en este tutorial se ve bastante bien!

tutorial de desarrollo de temas de WordPress resumen paso a paso

repasemos todo lo que hemos aprendido en este tutorial básico de tema de WordPress paso a paso para principiantes., Hemos aprendido cómo crear nuestro primer tema personalizado en WordPress haciendo nuestra propia carpeta en el lado de la carpeta Temas de nuestra instalación de WordPress. En esta carpeta, agregamos diferentes archivos que corresponden a diferentes secciones de su sitio web. En nuestro tutorial, hemos comenzado con los mínimos desnudos que debe tener en un tema de WordPress. En el futuro, agregaría muchos más archivos a esta carpeta de los que hemos cubierto. Revisemos cada archivo que creamos en este tutorial y lo que hicieron por nosotros.

• estilo.,css este archivo es donde agregas algunos comentarios css para que WordPress conozca algo de información sobre tu tema personalizado. También contiene el estilo css personalizado que aplicará a su tema.
• index.php Este archivo controla el html y la salida general de tu tema. Es el Archivo principal utilizado para la salida de datos en su página de inicio.
• encabezado.,php Permite especificar un área para contener información importante acerca de su sitio web en el <cabeza> área, así como la inclusión de apertura <html>, <cuerpo>, y ,<div class=»contenedor»> etiquetas.
• pie de página.php el pie de página cerrará cualquier etiqueta de apertura que haya especificado en el área de encabezado, además de darle un lugar para llamar a la función wp_footer ().
• funciones.,php le permite llamar a funciones, tanto PHP como WordPress incorporado, y definir sus propias funciones para cambiar los comportamientos predeterminados de WordPress

¡así que ahí lo tiene! Pudimos crear un tema de WordPress personalizado totalmente funcional con solo 5 archivos. Esto nos da el conocimiento de nivel básico para construir temas y funciones de WordPress más avanzados. Gran Trabajo!