Hola que tal, como están, en este post les explicare como entender, editar y reutilizar una plantilla/tema gratis de wordpress

bueno, vamos a ello.

primero, debemos saber que es una plantilla o tema , a qué nos referimos, bueno una plantilla o tema de wordpress por decirlo de una manera sencilla , es la vista principal de nuestra página web, la cual, mostrará el diseño que hayamos elegido.

un tema está conformado por un conjunto de archivos principales.

el cual se encuentran ordenados y estructurados.

encontrarás archivos PHP, que es el lenguaje de programación principal que integra wordpress, en algunas ocasiones encontrarás código css, javascript  y HTML5 dentro de un archivo PHP.

también encontramos archivos CSS (hojas de estilo en cascada) los cuales son los que dan los colores, tamaños, posiciones, etc. toda la parte visual.

también encontraremos código HTML en su versión 5, el cual es el lenguaje que define la estructura básica de una página web,, muchas veces lo encontraremos  dentro de archivos PHP, y archivos JavaScript.

bueno, vamos a ver como esta estructurado una plantilla worpress de las que vienen por default en nuestra instalación

en esta práctica tengo una instalación en mi localhost, si aún no sabes como instalar wordpress, aquí te dejo un enlace sugerido.

aquí vemos nuestra plantilla que viene por default, la cual se llama twentytwenty

por default tiene agregado algunos widget, para ver nuestra página sin ningún widget, procedemos a quitarlo para ver mejor la estructura básica de nuestra plantilla.

entonces para ello, si nos vamos a la sección del administrador, en la parte de apariencias y widget y borramos los que vienen por default agregados a la plantilla.

recargamos la página y ahora sí podemos ver nuestra plantilla con lo más básico en su estructura.

ahora, si nos vamos a la sección del administrador en el menú apariencias y luego temas veremos la plantillas que tenemos instaladas.

vemos que tenemos activado el tema twentytwenty por default. si hacemos click en el botón personalizar, veremos que tenemos algunas opciones para modificar y agregar elementos a la plantilla. Esta es una manera gráfica en la que se puede editar pero está muy limitada en las funciones que realiza.

Además wordpress integra una herramienta para modificar los temas, la encontramos en apariencias y hasta abajo en editor de temas.

cuando ingresamos, nos muestra una alerta. esto es porque, si no sabemos de código, podemos echar a perder nuestra plantilla y ya no se podría mostrar correctamente. Además nos sugiere crear un tema hijo del tema. esto lo podríamos ver en otro video, asi que si quiere que haga un video sobre esto, comentenlo en la caja de comentarios. 

bueno, como nosotros no tenemos miedo al código. hacemos clic en “entiendo”.

al ingresar, lo primero que nos muestra es el contenido del archivo llamado style.css, este archivo es muy importante, ya que define el nombre de la plantilla, así como la versión y autor de la plantilla.

Este archivo style.css contiene el diseño inicial de la plantilla.

Ahora, en la parte derecha, podremos encontrar todos los archivos y carpetas que contiene la plantilla. si hacemos click en algunos de ellos, los podremos editar. 

en mi caso, siento que no es muy óptimo editar desde aquí. así que vamos por otra opción.

bueno, entonces nos vamos a nuestra carpeta donde se instalo wordpress, en este caso se encuentra en la unidad C/xampp/htdocs/ mi proyecto se llama edicionplantilla.

ingreso a mi proyecto , luego a la carpeta wp-content, despues en en thema

aqui podemos ver tres carpetas, las cuales son las 3 plantillas que estan instaladas, asi como también, la que está activa actualmente, la twenty twenty.

si accedemos a la carpeta twentytwenty podemos ver los archivos y carpetas que contiene la plantilla, mismas que vimos en el editor de wordpress anteriormente.

entonces, esta carpeta twentytwenty es la que vamos a llevar al editor de código, para mi caso uso sublime text 3, pero pueden usar el que mas les guste.

arrastramos y soltamos la carpeta a nuestro editor.

perfecto, ahora, vamos a conocer como está estructurada la plantilla, para poder modificarla.

el primer archivo que revisamos es el index.php, en este archivo se muestra la estructura básica de la plantilla. y siempre va a existir en las plantillas de wordpress.

si agregamos un texto y lo guardamos con la combinación ctrl s, y nos vamos a nuestra página web, vemos que se muestra el texto.

ahora exploramos otros archivos importantes, como lo es el header.php y el footer.php, los cuales contienen el encabezado y pie de la plantilla.

también encontramos el archivo functions.php, este archivo contiene, como su nombre lo dice, funciones que se integran del núcleo de wordpress con los de la plantilla.

hasta el final encontramos el archivo style.css que vimos en el editor de wordpress.

también vemos el screenshot de nuestra plantilla, esta es la que se muestra como vista previa en la sección de temas de wordpress.

bueno, vamos a revisar un poco el código para poder identificar cómo se integran todos los archivos.

si nos vamos al archivo index.php, esta función get_header llama o invoca al contenido del archivo header.php

regresamos al archivo index y hasta el final vemos la función get_footer, esta función invoca todo el contenido del archivo footer.php

regresamos al archivo index, encontramos la siguiente función get_template_part esta función invoca contenido que está separado y ordenado en carpetas. para este caso, la función hace referencia a la carpeta template-parts y al contenido del archivo content.php 

ahora nos vamos al archivo function.php, echémosle un vistazo.

aquí están las funciones y clases que utiliza el tema en combinación con el núcleo de wordpress.

aquí encontraremos dos funciones muy importantes que nos integran los archivos css y archivos javascripts, la funcion twentytwenty_register_styles y la twentytwenty_register_scripts

después seguimos desplazando hacia abajo el contenido del archivo function

encontramos la siguiente función register_sidebar, la cual nos permitirá agregar  áreas laterales , para poder insertar los widget.

Como vemos, esta plantilla solo trae 2 áreas. llamada footer 1 y footer 2.

si nos vamos al archivo y copiamos el código php de la register_sidebar, podemos crear otra área rápidamente. solo tenemos que nombrar con un id nuevo.

este lo podemos llamar footer 3 nuevo y cambiar la descripción

regresamos al administrador de wordpress, recargamos la página y vemos que ya se visualiza la nueva área que creamos para colocar los widget que queramos.

regresamos al archivo y vemos funciones más específicas para la plantilla.

Bueno! ahora que ya conocemos cómo está estructurada una plantilla de wordpress, podemos hacer algunas modificaciones.

si nos vamos a la página principal de nuestro tema. y presionamos F12 o click derecho inspeccionar código. Aquí podremos ver el código html, css y javascripts de nuestro tema, el código PHP no lo podemos ver desde aquí, ya que este código se procesa en el servidor el cual llamamos backend. El código html,css y javascripts se le llama frontend.

Bueno, ya que estamos en el examinador de código de google chrome podemos modificar una propiedad css, en este caso, cambiar el color de fondo. 

El inspector de código nos da sugerencias de colores, además nos muestra cual es el archivo css que se está editando y en que linea, hasta nos da la opcion de abrir el archivo que descargo el navegador para mostrar la página.

 si recargamos la pagina, este cambio de color se perdera, ya que solo se modifico para esa descarga, entonces lo que tenemos que hacer para conservar los cambios, es irnos a nuestro codigo y buscar el archivo style.css y buscar el numero de la liena. 

aqui agregamos la propiedad para el cambio de color. Guardamos y recargamos la página. y veremos que los cambios ya se conservan.

Ahora, modifiquemos un poco el código php. ¿recuerdan que agregamos una nueva área para los widgets?, bueno, ahora indiquemos donde queremos que se muestren los widgets en nuestro tema.

nos vamos al archivo index.php y buscamos donde se están posicionando las 2 área que vienen por default.

vemos que se encuentran en la carpeta template-parts en el archivo footer-menu.widget

justo abajo creamos una nueva sección para el tema. Este es código html. colocamos, “hola esta es mi nueva sección”. nos vamos a la página y recargamos, vemos que se muestra.

ahora vamos a agregar los widgets.

ahora nos vamos al archivo donde se encuentran los widgets de este tema , el archivo footer-menu.widget.php

nos copiamos el código donde se muestra los widget actuales y los pegamos en nuestra nueva área, en el archivo index.php

este código que copiamos, lo modificamos y agregamos el id de la nueva área que creamos con anterioridad. 

Guardamos los cambios y nos vamos al administrador de wordpress.

en nuestra nueva sección agregamos un widget .

luego nos vamos a la página y recargamos, 

vemos que nos aparece el widget que acabamos de agregar.

bueno, con eso terminamos la práctica, espero que les ayude a comprender mejor cómo se estructura una plantilla wordpress y así perder el miedo a tocar el código.

recuerda que si tienes alguna duda o comentario, no dudes en ponerte en contacto conmigo.

si te gusto este video, porfavor suscribete y dale like.

bueno esto es todo por ahora, nos vemos en un siguiente post. hasta luego. saludos!