⚙️ Grav: ajustes y fragmentos de código de uso frecuente (Markdown, Twig, editor Atom)
Hoja de referencia de Grav CMS: front matter YAML, fragmentos Twig, regex de Atom y configuración de servidor Ubuntu…
El código es igual de necesario tanto para un sitio con CMS como para un proyecto hecho desde cero. Esta sección trata sobre desarrollo sin ataduras a WordPress. Frontend y backend, herramientas y técnicas probadas. Para quienes maquetan, escriben scripts o instalan Git por primera vez en su ordenador.
El frontend lo analizamos por capas. HTML como esqueleto de la página. CSS para la presentación: cuadrículas con Flexbox y Grid, adaptabilidad, transiciones suaves y efectos limpios sin código innecesario. JavaScript y jQuery para el comportamiento: conmutadores, manejo de clics, validación de formularios, dinámica en la página. Hay análisis de tareas concretas como el método .toggle(), generación de un número aleatorio, un temporizador de cuenta atrás o el desplazamiento suave hasta un ancla. No es teoría abstracta. Código listo para pegar y probar.
El backend se sostiene sobre PHP. Mostramos cómo consultar APIs externas (interfaces de programación mediante las cuales los sitios intercambian datos). Por ejemplo, obtener la cotización de Bitcoin, el clima o el precio de un producto desde un servicio de terceros. Tratamos el envío de formularios por correo, el trabajo con JSON, consultas básicas a bases de datos. También las expresiones regulares, ese lenguaje de búsqueda por patrones que muchos temen sin motivo. Validación de email, teléfono, limpieza de cadenas. Lo explicamos con ejemplos reales, no con sintaxis árida.
El código hay que escribirlo y guardarlo en algún sitio. Por eso un bloque aparte sobre herramientas. Git y GitHub para control de versiones y trabajo colaborativo. Instalación de Git en Windows desde cero, comandos básicos, primer repositorio, reversión de cambios, trabajo con ramas. Markdown para documentación y README. CodePen para experimentos rápidos en el navegador. Entorno local: Laragon, Open Server, XAMPP, el editor Atom. Todo con lo que realmente se trabaja cómodo cada día.
A quién tenemos en mente cuando escribimos. El principiante apenas está entendiendo en qué se diferencia una etiqueta de un selector y copia código sin comprender la mitad de las líneas. El experimentado conoce lo básico, pero busca una solución corta para una tarea puntual, para no reinventar la rueda. Al primero le explicamos cada línea y le mostramos el resultado en el navegador. Al segundo le damos un snippet listo y le indicamos de inmediato dónde se romperá.
Errores típicos que señalamos. Un script en el head en lugar del pie de página, por lo que jQuery no encuentra el elemento. Un punto y coma olvidado y comillas de distinto tipo. Una expresión regular que captura con voracidad más de la cuenta. Una consulta directa a la base de datos sin validar los datos. Mostramos no solo el código que funciona, sino también los tropiezos que lo rodean.
Los materiales los escriben personas que programan de verdad, no que repiten tutoriales ajenos. Hemos tropezado con esos mismos errores y recordamos dónde se atasca el principiante. Por eso cada análisis está organizado de forma simple. Primero una solución breve que funciona. Luego la explicación de por qué funciona y dónde están las trampas. Sin relleno ni copy-paste de la documentación oficial.
Si estás empezando, avanza de lo simple a lo complejo. Primero HTML y CSS. Luego JavaScript y PHP básico. Y solo después Git, APIs y expresiones regulares. Cada texto responde a una pregunta concreta, sin intentar abarcarlo todo de golpe.
La sección está vinculada con la categoría de WordPress. Cuando el código atañe específicamente al núcleo de WP, hooks, functions.php o plugins, te llevamos allí. Aquí va todo lo que es universal y sirve para cualquier proyecto. Un snippet de CSS funciona igual en una landing, en un blog o en una tienda.
El contenido se actualiza periódicamente según los nuevos estándares y versiones de herramientas. Los lenguajes evolucionan, las viejas técnicas quedan obsoletas, aparecen otras nuevas. Mantenemos los ejemplos funcionales, sin dejar código de hace diez años. ¿Maquetas, escribes scripts o estás aprendiendo Git? Vuelve aquí cada vez que necesites entender código o encontrar una solución lista para usar.
Hoja de referencia de Grav CMS: front matter YAML, fragmentos Twig, regex de Atom y configuración de servidor Ubuntu…
Obtén el tipo de cambio de Bitcoin con PHP usando la API de Bitpay sin clave o CoinGecko con datos extendidos. Scripts…
Cómo funcionan los índices B-tree, hash y compuestos, 7 reglas clave de indexación y formas de verificar la efectividad…
Line Awesome es una fuente de iconos gratuita de Icons8 con 1,380 iconos y compatibilidad total con las clases de…
Blockchain ha superado al bitcoin. Cinco usos reales en WordPress: protección de contenido, pagos cripto, autorización…
¿Cargar JS pesado en cada página solo para una animación en la home? Aquí tienes tres formas de cargar recursos…
Guía paso a paso para bifurcar Shapely: renombrar archivos, reemplazar prefijos, editar style.css y crear captura de…
Cómo añadir fullPage.js a WordPress sin plugins: desde wp_enqueue_script hasta un fondo de video y desactivación…
El botón de enviar está visible pero los campos están vacíos: tres formas de ocultar el envío hasta completar, desde…
Colección CreativeButtons de Codrops: ocho estilos de botones, marcado HTML, animaciones CSS e integración paso a paso…