Los child theme(tema hijo) son temas secundarios que se derivan de un tema padre, permiten modificar el código sin tener que modificar el tema padre, que en caso de actualizarlo, borraría nuestras modificaciones en el caso de no tener un tema hijo. Un child theme es una extensión de un tema principal.
En este artículo detallaré brevemente, en 3 pasos, sin entrar en detalles, como crear un tema hijo, me guiaré de la documentación oficial. Usaré Twenty Twenty-Five como tema principal.
1 – Crear una carpeta de tema secundario
Elige un nombre para tu tema hijo, por ejemplo, Cool Cloud.
Crea una carpeta en tu wp-content/themes, nómbrala al estilo kebab-case con el nombre elegido: cool-cloud.
2 – Crear archivo style.css
Crea un archivo llamado style.css y agrega el Template según tu configuración. Información oficial
/**
* Theme Name: Cool Cloud
* Template: twentytwentyfive
* Theme URI: https://coltimcloud.com/cool-cloud
* Description: Descripción del tema personalizado...
* Version: 1.0.0
* Author: Javier
* Author URI: https://coltimcloud.com
* Tags: block-patterns, full-site-editing
* Text Domain: cool-cloud
* Domain Path: /assets/lang
* Tested up to: 6.4
* Requires at least: 6.2
* Requires PHP: 7.4
* License: GNU General Public License v2.0 or later
* License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/
3 – Instalar y activar el tema hijo
En tu panel de administrador, ves a Apariencia > Temas y activa tu tema hijo.
Con estos sencillos 3 pasos ya podemos ir a nuestro editor en Apariencia > Editor y modificar las plantillas y páginas de nuestro tema hijo, cuando necesitemos actualizar el tema padre, se conservarán los cambios de nuestro tema hijo.
Esta es una lista de los plugins que me han sido útiles cuando he construido páginas en WordPress.
Backup Migration,el plugin más sofisticado de copia de seguridad y migración para WordPress
Big File Uploads, activa la subida de archivos de gran tamaño en el cargador de medios integrado de WordPress a través de subidas multiparte y establece el tamaño máximo de archivo de subida en cualquier valor en función del perfil del usuario. Las subidas pueden ser tan grandes como lo permita el espacio disponible en disco.
Simple Custom CSS and JS, añade fácilmente código CSS o JS personalizado a tu web con un fantástico editor.
WPS Hide Login, protege tu web cambiando la URL de acceso y evitando el acceso al archivo «wp-login.php» y al directorio «wp-admin» si no se está conectado.
Me gustaría que dejes un comentario con tus plugins favoritos para ir ampliando la lista.
Una function(función) es un bloque de codigo reutilizable, permite organizar mejor un programa, evita repetir instrucciones y hacen que el código sea más limpio y facil de mantener.
Podemos pensar que una función es como una máquina, que recibe datos de entrada, los procesa y devuelve un resultado. Las funciones son un conjunto de instrucciones agrupadas que se pueden ejecutar cuando las necesitamos.
Su sintaxis básica es:
function nombreDeLaFuncion(parámetros) {
// Código que se ejecuta
return resultado; // opcional
}
nombreDeLaFuncion → cómo identificamos la función.
parámetros → valores que la función recibe para trabajar (opcionales).
return → devuelve un resultado (opcional).
Ejemplo básico:
function saludar(nombre) {
return "Hola, " + nombre + "!";
}
console.log(saludar("Javier")); // Hola, Javier!
En este ejemplo:
La función saludar recibe un parámetro (nombre).
Devuelve un saludo personalizado usando return.
Luego la invocamos con saludar("Javier").
Tipos de funciones en JavaScript
1. Funciones declaradas
Son las que definimos con la palabra reservada function. Se pueden usar incluso antes de ser declaradas (gracias al hoisting).
function sumar(a, b) {
return a + b;
}
console.log(sumar(5, 3)); // 8
2. Funciones expresadas
Se asignan a una variable o constante. No se pueden usar antes de su definición.
const restar = function(a, b) {
return a - b;
};
console.log(restar(10, 4)); // 6
3. Funciones de fecha
Tienen una sintaxis más corta y son muy usadas en la programación moderna.
const multiplicar = (a, b) => a * b;
console.log(multiplicar(4, 6)); // 24
4. Funciones anónimas
No tienen nombre propio, Se suelen usar como callbacks, los callbacks son funciones pasadas como parámetro a otras funciones.
(function() {
console.log("Soy una función autoejecutable");
})();
Parámetros y valores por defecto
Podemos asignar valores por defecto a los parámetros.
function saludar(nombre = "Invitado") {
return "Hola, " + nombre;
}
console.log(saludar()); // Hola, Invitado
console.log(saludar("María")); // Hola, María
Funciones como ciudadanos de primera clase
En JavaScript, las funciones se pueden:
Guardar en variables.
Pasar como argumentos a otras funciones.
Devolver como resultado de una función.
Esto permite usar conceptos avanzados como callbacks y funciones de orden superior.
function operar(a, b, operacion) {
return operacion(a, b);
}
console.log(operar(4, 2, (x, y) => x / y)); // 2
Las funciones en JavaScript son una de las bases más importantes del lenguaje.
Gracias a ellas podemos:
Reutilizar el código.
Organizar mejor nuestros programas.
Implementar técnicas avanzadas como programación funcional o asincronía.
Dominar las funciones en fundamental para avanzar en el aprendizaje de JavaScript y poder crear aplicaciones más completas y profesionales.
Si buscas documentación oficial y de confianza para profundizar en funciones de JavaScript, aquí tienes algunas de las mejores fuentes disponibles:
1. MDN – Guía de JavaScript: Functions
Es probablemente la guía más completa y accesible:
Cubre todo lo esencial: definición, invocación, hoisting, ámbitos, cierres (closures), parámetros, funciones flecha, y mucho más.
Ideal para entender tanto la teoría como ver ejemplos prácticos bien comentados. MDN Web Docs
2. MDN – Declaración function (Referencia)
Esta es la sección de referencia detallada sobre la sintaxis de las funciones:
Explica cómo funcionan internamente las declaraciones function.
Aclara el comportamiento en modo estricto y no estricto, diferencias de alcance (scope), redeclaraciones y hoisting. MDN Web Docs
3. MDN – Expresiones, flechas, funciones anónimas y más (Referencia de funciones)
Aquí profundizas en:
Cómo funcionan las funciones expresadas vs. declaradas.
Ventajas y limitaciones de las arrow functions, como su comportamiento con this, ausencia de arguments, y restricciones como no poder ser generadoras. MDN Web Docs
4. The Modern JavaScript Tutorial
Un recurso alternativo moderno y práctico:
Ofrece explicaciones claras, con ejemplos y ejercicios, desde conceptos fundamentales hasta temas avanzados. javascript.info
El concepto más importante en JavaScript es que todo en JavaScript son objetos. Los objetos son una colección de pares nombre: valor, donde el nombre es una string y el valor puede ser un number, string, boolean o cualquier otra cosa. Una function es un objeto, un array es un objeto, un number es un objeto, una string es un objeto, un boolean y las expresiones regulares, también son objetos, todos se componen de una estructura con pares de name: value.
El segundo concepto más importante de JavaScript son los types, hay dos grupos de types en JavaScript, primitive types y reference type. Reference type está escrito en singular, porque solo hay un tipo y es un objeto.
Hay diferencias entre primitive types y reference type, pero antes, hablemos sobre las variables. Las variables son componentes fundamentales en cualquier lenguaje de programación, contienen un valor y este valor puede cambiar, puedes reasignarle otro valor y la variable conservará el nuevo valor y el antiguo lo borrará. Un valor es un simple registro en la memoria, y cada registro tiene un type especifico, que se dividen en dos grupos, primitive value types y reference type. La razón de esta división está en la forma en que los valores de uso de esos tipos se almacenan internamente en la memoria. 6 tipos de variables se definen como primitive types: string, boolean, number, null, undefined y symbol. Para la reference type, tenemos object.
Primitive types
Aquí tenemos una memoria, cada valor está almacenado en la memoria, cada uno de los 6 tipos de primitive types se almacenan en la memoria por separado, en las llamadas, celdas o células, como una secuencia de ceros y unos, y puedes leer su valor en cualquier momento.
Reference type
Aquí tenemos dos ejemplos de reference type, estos, no están almacenados en la memoria directamente, están separados en 2 sitios diferentes.
Lo que vemos a la izquierda se llama pointer y simplemente contiene la ubicación del objeto en la memoria, es decir, la celda pointer apunta a otra celda donde esta el objeto.
Cuando usas { } y colocas pares de nombre: valor, estas creando un objeto llamado object literal notation, cuando usas [ ] y colocas elementos separados por comas, estas creando un objeto llamado array literal notation.
Los objetos creados por reference type, pueden tener múltiples pointers almacenados en diferentes celdas, pero todos ellos apuntan a un mismo objeto, cuando cambias el valor de un pointer, lo que estás cambiando es el valor en el objeto, los pointers no se modifican, permanecen en el mismo lugar de la memoria, pero el valor se actualiza para todos los pointers.
En el siguiente ejemplo, creamos una copia de variableA y modificamos «a» a través de copiaDeA.a a 20, ahora el valor de variableA.a es 20.
Los navegadores incorporan una sección con una serie de herramientas para desarrolladores que nos muestran información sobre el sitio web que estamos visitando, la consola de desarrollo del navegador, aquí voy a explicar algunas de ellas. Utilizare Google Chrome y la página de ejemplo que utilizaré es https://developer.mozilla.org/en-US/. Para abrir la consola de desarrollo, abre tu navegador, visita la pagina web y pulsa la tecla F12.
Pestaña Elements
En la pestaña Elements vemos el esqueleto de la página, el código HTML, formado por una serie de etiquetas que cumplen una función, describir al navegador que contenido tiene la web y su estructura. Algunas de las etiquetas HTML tienen un significado semántico, esto quiere decir que los navegadores las usan para obtener información sobre su contenido, por ejemplo, una página web sencilla con un HTML pobre en etiquetas con determinados atributos no tendrá una buena valoración para el SEO; y también puede ser difícil de usar para personas con discapacidades, a esto se le llama accesibilidad, una pagina con buena accesibilidad tiene que adaptarse a diferentes tipos de usuarios, como personas con problemas visuales o completamente ciegas o personas con algún tipo de discapacidad. Una estructura HTML tiene que construirse teniendo en cuenta la accesibilidad.
Pestaña Network
La pestaña Network muestra todos los documentos que ha descargado la página web. Podemos ordenar los archivos según el Name, Status, Type, etc… En la columna Size podemos observar que muestra (disk cache), esto es porque ya visite la página y los archivos los esta sirviendo desde mi disco duro, desde la cache.
Si seleccionamos la opción disable cache y recargamos la página, el navegador volverá a descargar los archivos desde la página web y podremos ver su tamaño.
Podemos filtrar los documentos por tipo, en la siguiente imagen he filtrado para que muestre solo documentos CSS, he seleccionado uno y en la pestaña response, podemos ver su contenido, asegúrate de que la opción {} (Pretty Print) este activada para que el código sea legible.
Ahora fijémonos en los archivos JS, filtra por JS y observa como están nombrados, por ejemplo el archivo index y runtime, tienen una serie de números raros. Estos números se generan automáticamente y cambian cada vez que el desarrollador modifica el archivo, al cambiar el nombre, cuando visitamos la página, se obliga al navegador a descargarlo, de esta manera se actualiza en nuestra cache.
Te animo a que investigues por tu cuenta la consola de desarrollo.
Este artículo se ha creado a partir del video 15 del curso The JavaScript Bible.
Git es un sistema de control de versiones distribuido, permite tener un proyecto sincronizado donde varios programadores trabajan en el código de un programa al mismo tiempo y desde diferentes ordenadores.
Resumidamente, se detalla como descargar, instalar, configurar, inicializar Git. También como preparar y confirmar archivos, y como crear y cambiar de branch. Veremos como clonar un repositorio de GitHub y como crear una branch de él. Al final del artículo dejo algunos enlaces de interés.
Instalar
Descarga Git e instálalo, la instalación es a nivel de sistema operativo, no de proyecto, es decir, se instala una vez y después podemos inicializarlo en cada uno de nuestros proyectos..
Si la instalación se realizó correctamente, git help muestra una lista de comandos.
Configurar
El comando git config –list muestra la configuración global de Git.
Las líneas de user.email y user.name sirven para identificar al autor del commit(confirmación).
Si tienes una cuenta creada en GitHub y quieres trabajar con él, debes usar el nombre y el correo electrónico de tu cuenta en GitHub, de lo contrario, puedes utilizar el nombre y email que quieras.
Puedes modificar el nombre y email con los siguientes comandos:
git config –global user.name ‘tu nombre’
git config –global user.email ‘ejemplo@gmail.com’
Usa git config –list para ver los cambios.
Inicializar
Para inicializar Git ejecutamosgit init en la carpeta del proyecto.
Al inicializarse se crea una carpeta oculta llamada .git, la razón de que esté oculta es que su contenido no debe modificarse.
Durante mi aprendizaje y este artículo, utilizo una cmd diferente a la que viene en nuestro ordenador, se llama cmder, tiene un aspecto más atractivo y colorido que la cmd original y puedes descargarla para Windows desde aquí.
Con cmder, podemos ver que en la ruta de nuestro proyecto aparece master, es la branch principal por defecto.
Se pueden utilizar diferentes branch y cambiar de una a otra cuando queramos.
Estado
El comando git status muestra el status(estado) del proyecto. Muestra la branch, los commits y los documentos untracked.
En la imagen observamos que la branch es master, que no tenemos commits y que hay 3 archivos untracked(en color rojo).
Preparar
Para preparar los archivos untracked y añadirlos al área de stage usamos el comando git add ., al utilizar . añadimos todos los archivos, si queremos quitar alguno de ellos del stage usamos git rm -cached ‘archivo’.
El area de stage es una ‘zona’, donde se preparan los archivos, se eligen qué archivos se confirman o si se hacen varias confirmaciones, también podemos eliminar archivos del stage.
Confirmar
Este paso es uno de los más importantes, el famoso commit, que significa confirmación. Una vez tenemos los archivos en el área de stage el siguiente paso es añadirlos a la branch del proyecto confirmando, en el caso de que no hayamos creado una nueva branch, se añadiran a la branch master.
Ejecuta git commit -m ‘descripción’ para confirmar.
Con el comando git log podemos ver los commit que hay en nuestro proyecto. Cada commit tiene un id, un autor, una fecha y un mensaje.
Crear branch
Una branch es una «línea de tiempo» independiente del proyecto, puedes crear otras branch para probar ideas, añadir funciones o arreglar errores sin tocar el código de la branch principal, cuando la nueva funcionalidad esté lista, puedes unirla a la branch principal.
Ventajas
Permite trabajar en varias cosas en paralelo.
Evita romper el código principal mientras experimentas.
Facilita que varias personas trabajen a la vez en el mismo proyecto.
Ejecuta git branch ‘nombre de la branch’ para crear una nueva branch, usa git branch para ver las branch disponibles.
Cambiar de branch
Usa git checkout ‘nombre de la branch’ para cambiar a la branch deseada. También puedes utilizar el parámetro -b para crear una nueva branch y cambiar a ella, git checkout -b ‘nombre de la branch’.
Borrar una branch
Utiliza el parámetro -d para eliminar una branch, git checkout -d ‘nombre de la branch’.
Fusionar una branch
Para fusionar una branch con la principal, ejecuta git merge ‘nombre de la branch’.
Clonar un repositorio de GitHub
Para clonar un repositorio de GitHub necesitamos el enlace del proyecto, para ellos vamos a GitHub, buscamos el proyecto y hacemos clic en el boton verde CODE y despues copiamos al portapapeles el enlace HTTPS.
En la cmd nos dirigimos al directorio donde vamos a instalar el proyecto y ejecutamos git clone ‘enlace del proyecto’.
Utiliza git branch -r para ver todas las ramas disponibles que el proyecto tiene creadas.
Para crear una nueva branch en nuestro ordenador a partir de cualquiera de ellas, ejecuta git checkout –track ‘nombre de la branch’.
Git es un sistema distribuido de control de versiones, de código abierto y gratuito.
Permite guardar los cambios que se realizan en el código de un programa, ejecutando una serie de comandos en la cmd de nuestro ordenador. Si nos encontramos en una situación, que vemos que nuestro código no esta bien, podemos volver a una versión anterior.
Git permite hacer branch (ramas)de un proyecto, útiles cuando varios desarrolladores trabajan en un mismo proyecto, cada programador puede escribir una parte del código en su área correspondiente y una vez revisado pueden aplicarse a la rama master (principal).
Una branch puede convertirse en un proyecto diferente al original. En GitHub encontramos proyectos de otros desarrolladores, a estos proyectos se les llama «repository», podemos hacer una rama de un proyecto y modificarlo para adaptarlo a nuestras necesidades y utilizarlo sin necesidad de implementar esos cambios a la rama principal del proyecto original.
¿Qué es GitHub?
GitHub es una plataforma que permite alojar proyectos de software, permite a los desarrolladores almacenar, administrar, rastrear y colaborar en el código fuente.
Podemos enviar código a GitHub a través de los comandos que Git nos proporciona, de esta manera, guardamos en «la nube» nuestro proyecto, en el fatídico caso que nuestro ordenador deje de funcionar y no podemos recuperar los datos, los proyectos que tengamos en GitHub estarán a salvo.
