¿Qué necesitas aprender para programar en WordPress?

WordPress es una plataforma web muy potente, pero si sólo la usas a nivel de usuario "normal", no estás aprovechando su verdadero potencial. Es cuando también empiezas a programar en WordPress cuando accedes a otra dimensión de posibilidades para tu web.

Imagen de Pixabay - © jamesmarkosborne

Esto es así porque saber programar fulmina cualquier barrera que te puedas encontrar en el desarrollo de tu proyecto online.

Ya no estarás limitado por el tema WordPress para tener exactamente el diseño que quieres o del plugin X, del Y o del Z para hacer tal o cual cosa. Si algo no está hecho, lo programas tú y listo.

Sabiendo programar, serás capaz de hacer literalmente lo que te de la gana en tu proyecto web.

Ahora bien, si nunca has programado y no tienes una base técnica, plantearte aprender a programar, aunque te apetezca, seguramente te dé algo de vértigo… Normal.

Por eso, te quiero explicar aquí los fundamentos necesarios para que te hagas una idea de cómo funciona todo esto de programar en WordPress (y en la web en general), y que veas que no es para tanto. Está al alcance de quien se lo proponga en serio y tenga un poco de paciencia.

Para ello, creo que la mejor manera es contarte cómo han nacido y evolucionado a lo largo del tiempo las diferentes tecnologías de las que se compone la programación web que son, a su vez, la base para la programación en WordPress.

Además, no vas a entender solamente cómo se programa en WordPress, sino que te va a dar una visión y compresión del funcionamiento de la web en general que te hará entender mucho mejor todo el puzle técnico, su filosofía y por qué existen plataformas como WordPress en la web.

Por eso, antes de hablar de cómo se programa en WordPress, déjame que te cuente la historia completa de cómo se ha llegado hasta aquí.

HTML y CSS: La base de todo

Se usen las tecnologías que se usen, nuestro objetivo último  siempre va a ser la creación de páginas web. Por eso, tenemos que empezar hablando de las tecnologías en las que están hechas las páginas web, eso es el fundamento de todo lo demás.

Para diseñar una página web con código necesitas tres lenguajes: HTML, CSS y JavaScript.

Con HTML añadimos la estructura y el contenido mediante un sistema de etiquetas y con CSS damos la estética al sitio, también mediante etiquetas y vinculándolas con los elementos HTML.

Finalmente, con JavaScript (lenguaje de programación) podemos añadir funcionalidad a todo lo anterior. Por ejemplo: el típico carrito de la compra de una tienda online en el que añades o eliminas productos, cambias cantidades, etc.

1. HTML: estructura y contenido de un sitio web

Cuando visitas una página web en tu ordenador, estas ejecutando código HTML, CSS y JavaScript en un entorno de ejecución que es tu navegador (Firefox, Chrome etc).

Qué es HTML y para qué sirve

HTML (Hipertext markup language) es un lenguaje de marcado para el desarrollo y creación de sitios webs. En este momento, vamos por la versión 5 de este estándar, conocida como HTML5.

Consiste en una estructura de etiquetas (marcadas por los signos < >) de apertura y cierre que aportan la semántica (significado) a determinadas partes del texto. Si una página web fuera el cuerpo humano, HTML sería el esqueleto.

Este lenguaje da la estructura al sitio web, como los párrafos (<p>), los títulos (<h>), las imágenes (<img>), los enlaces (<src>) etc.

Por ejemplo, para que la frase “Cómo programar en WordPress” sea interpretada por Google como el título principal, tenemos que marcarlo como tal.

En este caso, la etiqueta sería <h1> (de apertura) y </h1> (de cierre), y el texto “Cómo programar en WordPress” iría en medio. Esa es a idea de darle semántica al texto. Ahora ya no es un simple texto, el navagador sabe que es el título y puede reaccionar a ello, por ejemplo, haciendo texto más grande.

Ejemplos y etiquetas básicas de HTML

Este sistema de etiquetas es tan importante porque supone un standard establecido por el Consorcio WWW, con el objetivo de democratizar el desarrollo de todas las tecnologías que abarca la web.

Es muy importante que HTML sea un estándar porque así cualquier navegador puede interpretar cualquier sitio web. De hecho, en los inicios los navegadores no respetaban bien los estándares y eso provocaba muchos problemas para los sitio web y los usuarios.

Para que te hagas una idea, te dejo una lista con algunas de las etiquetas más utilizadas:

• <head>: cabecera de la página con meta-información.
• <title>: título del documento, es lo que ves en la pestaña y Google lo usa en los resultados de búsqueda.
• <body>: cuerpo del documento.
• <h1>, <h2>,  ... <h6>: subtítulos de la página, con hasta 6 niveles de anidamiento.
• <p>: párrafo de texto.
• <a>: ancla o lo que es lo mismo: en un enlace web.
• <img>: imagen.

Y esto es sólo una pequeñisima parte de todas las etiquetas de los que dispone HTML... Aquí puedes ver un ejemplo muy sencillo, un extracto de HTML típico de una página web:

<h1>Cómo trabajar con HTML</h1>
<p>Para aprender a trabajar con <a href=”https://es.wikipedia.org/wiki/HTML”>HTML</a>, lo primero que hay que hacer es…</p>

La combinación de una etiqueta con el contenido que envuelve se conoce como un elemento del árbol de HTML.

Para crear un archivo html, lo único que necesitas (aparte del conocimiento) es un editor de HTML.

Existen muchos muy buenos y gratuitos que te puedes descargar, pero también puedes utilizar el editor de texto de cualquier ordenador. En esta web tienes un editor en la nube, basado en producto muy popular TinyMCE.

Si quieres curiosear un poco las entrañas de un sitio web si usas, Chrome, Firefox o Edge, haz clic “Ctrl” y “U” a la vez y verás el código HTML "a pelo" de esa página.

Otra manera, menos básica y más conveniente, es verlo pulsando F12. Esto abrirá el inspector de código de los navegadores y te presentará la página como un árbil de etiquetas, información sobre las reglas CSS aplicadas en cada elemento y muchas cosas más. Pero es ya es un poco más avanzado.

En conclusión, con el lenguaje HTML incluimos el texto, imágenes y enlaces de nuestro sitio web y le damos la estructura que queremos.

No pretendo que te conviertas con esta breve explicación en un crack del HTML, pero creo que ya sirve para que pilles la filosofía de cómo funciona esto y que veas que, en el fondo, es muy simple.

Pero si quieres profundizar más, echa un vistazo aquí:

Por cierto, esta tarjeta del post que acabas de ver es un shortcode (más abajo veremos qué es), programado a medida en WordPress por mí mismo 🙂

2. CSS: diseño de un sitio web

Hasta ahora hemos visto cómo añadir contenido y darle estructura, pero no cómo darle estilo, cómo definir su estética.

Esa parte le corresponde al lenguaje de CSS (Cascading Style Sheets, hojas de estilo en cascada en castellano).

Qué es CSS y para qué sirve

Al principio, cuando nació HTML (1991), las posibilidades programación web se limitaban básicamente a lo que acabas de ver, y los diseños eran muy pobres.

De hecho, si has llegado a vivir los comienzos de la web en España allá por el año 1995 más o menos. Si tenías uso de razón en aquella época, te acordarás de que las páginas web eran, generalmente, muy feas.

Esto es así porque la estética no era un tema importante para el HTML, no era su objetivo.

El objetivo era crear algo que permitiese implementar la idea del hipertexto enlazado a través de Internet y, sobre todo, Tim Berners-Lee, el padre de la web y del HTML, ni soñó con el éxito que tuvo su proyecto convirtiéndose en esa herramienta de masas, imprescindible en nuestras vidas de hoy en día.

Lo que había ideado en principio era simplemente una herramienta de intercambio de información en el ámbito académico que era donde se usaba Internet ya desde 1969.

Total, era evidente que esto no se podía quedar así y que era necesario poder crear páginas web mucho más atractivas visualmente.

Además, habría otra idea de diseño fundamental: separar el contenido (y su estructura y semántica) de su representación visual. Es decir, no mezclar ambas cosas en el marcado HTML.

Esto sería muy útil, por ejemplo, para visualizar una misma página completamente diferente en función de si se ve en un ordenador o un teléfono móvil (muy limitados para visualizar contenidos, además, en aquella época), algo que se conoce hoy en día como diseño adaptable o diseño responsive.

Por eso, se tomó la decisión de limitar el HTML para lo que ya estaba, el contenido, y abordar la parte de representación visual con otro lenguaje diferente: las hojas de estilo en cascada CSS (Cascading Style Sheets).

Estas hojas de estilo son también un lenguaje y con él podemos dar estilo al contenido HTML de una o varias páginas. En la actualidad vamos por la versión 3 de este estándar o CSS3.

La filosofía básica es que permite describir para cada etiqueta HTML (recuerda, cosas como <h1>, <p>, <a>, etc.) sus aspectos estéticos y bajo qué reglas se le deben aplicar o no.

Por ejemplo, con una regla como la que sigue estaríamos definiendo propiedades estéticas básicas de un título principal:

h1 {
  color: #f0f0f0;     /* Un gris muy oscuro */
  font-family: Arial;
  font-size: 24px;
  text-align: center;
}

La regla empieza diciendo que aplica a las etiquetas HTML <h1> (títulos principales, nivel 1) y que todos ellos han de tener un color gris oscuro casi negro (código #f0f0f0), han de usar el tipo de letra “Arial”, un tamaño de letra de 24 pixeles y que estos títulos han de estar alineados al centro.

Si te fijas, esto es exactamente igual que lo que haces en un editor de texto como Word, por ejemplo. La diferencia es simplemente que aquí no tenemos un interfaz de usuario dónde hacer clic en botones y desplegables, sino que se lo tenemos que describir de alguna manera al servidor web que aloje la página. Y eso es precisamente lo que CSS nos permite hacer.

Y con esta regla estaríamos haciendo algo similar para los párrafos, aunque no especificamos expresamente la alineación del texto puesto que por defecto ya se alineará a la izquierda, que es lo que queremos para nuestros párrafos:

p {
  color: black;   /* Equivale a #ffffff que es el código para negro */
  font-family: Verdana;
  font-size: 16px;
}

Son reglas muy, muy simples comparado con lo que se puede llegar a hacer con CSS en la versión actual, CSS3, que es realmente increíble.

Pero creo que este ejemplo también es suficiente para que te hagas perfectamente una idea de cuál es la filosofía de este lenguaje.

Si quieres profundizar también un poco más en este tema, echa un vistazo a este post en el que encuentras un manual de CSS en PDF descargable:

3. Qué es y para qué sirve JavaScript

JavaScript es un lenguaje de programación (también conocido como de secuencias de comandos) que nos permite dar dinamismo y “movimiento” a una página web.

Antes de seguir, es muy importante que tengas claro que JavaScript y Java no son el mismo lenguaje. Ambos fueron desarrollados por la misma empresa, pero Java es un lengiaje de programación general mientras que JavaScript se usa específicamente dentro de una página web.

Como vimos antes, con los lenguajes de marcado HTML y CSS damos estructura y estilo a un sitio web, mientras que JavaScript aporta la parte funcional.

Por eso, una página web tiene tres pilares:

• HTML: estructura y contenido.
• CSS: diseño.
• JavaScript: funcionalidad.

Con JavaScript puedes controlar los archivos multimedia, activar botones, animar imágenes… Casi todo lo que puedas imaginar.

Por ejemplo, imagina que somos una clínica dental y queremos poner un calendario de citas en nuestra página web.

Obviamente todo el proceso de petición de citas va a ser mucho más complejo que esto que te voy a contar, pero cuando la persona haga clic en el botón de siguiente o anterior para elegir el mes en el que quiere la cita, estará ejecutando código JavaScript.

Es cierto que HTML y CSS, como hemos visto, son lenguajes de programación muy fáciles de aprender, pero JS (iniciales de JavaScript), por el contrario, no es tan sencillo.

Mientras que los primeros son lenguajes de marcado, descriptivos, JS es un lenguaje de programación en toda regla y por ello más complejo de aprender.

Pero no debes tener miedo, ya que en la práctica no necesitarás aprenderlo en profundidad.

Si alguna vez necesitas cosas como, por ejemplo, implementar un componente como un calendario, prácticamente cualquier cosa que puedas necesitar ya la encontrarás hecha y sólo tendrás que hacer un “cortar y pegar” en tu código.

Esto es así gracias a la increíble comunidad de JavaScript que hay en la red y a jQuery.

jQuery es una librería (una colección de código) gratuita que implementa prácticamente cualquier cosa que puedas necesitar.

Además, hay infinitos proyectos de código libre que se han basado en jQuery para crear a su vez nuevos componentes más sofisticados sobre su base.

Busca, por ejemplo, “calendario jquery” en Google y verás una infinidad de opciones.

También tiene una enorme ventaja adicional: a veces, por pequeños errores, etc. el mismo código JavaScript que funciona bien en un navegador no lo hace en otro.

Con jQuery solucionas también este problema porque está probado en todos los grandes (IE, Chrome, FireFox, Safari, etc.)

En definitiva, JavaScript es el tercer pilar del desarrollo web con código, con el que aportas dinamismo y funcionalidad a tu sitio web pero que es mucho más complejo de aprender que HTML y CSS.

De páginas web a aplicaciones web

Lo que hemos visto hasta ahora es la programación de páginas web estáticas. Eso quiere decir que una vez creada, la página es como es.

Con JavaScript le puedes meter “cosillas” dinámicas como un calendario, pero la página sigue siendo la que es básicamente, ya no cambia.

Por tanto, con una web con páginas HTML estáticas de este tipo, lo único que podrías hacer es saltar de unos contenidos estáticos a otros, pero no puedes trabajar e interactuar mucho más.

1. PHP. El lenguaje de programación Nº1 de la web

Por ejemplo: queremos introducir una sección de comentarios en nuestro blog. Con lo que hemos visto hasta ahora, no se podría.

Y ahora dirás:

“Pero si has dicho que todas las páginas están hechas con HTML, CSS y JavaScript y existen en esas webs, ¿cómo que no se puede?”

Pues sí, no se puede porque nos hace falta algo más: aprender a crear las páginas de una manera dinámica y esto requiere saber programar en un lenguaje en el lado del servidor como, por ejemplo, PHP, con diferencia, el más popular de la web.

¿Y qué es un lenguaje en el lado del servidor?

Es un tipo de lenguaje que se ejecuta en el servidor, justo antes de que el sitio web se envíe al usuario.

Cómo verás luego, es en este punto donde todo esto empieza a enlazar con el mundo de la programación en WordPress porque WordPress es, de hecho, una aplicación programada en PHP.

Esa es también la razón de por qué aplicaciones como WordPress, Joomla o Prestashop requieren un servicio de hosting de calidad para funcionar bien.

Una página con PHP es mucho más exigente para el servidor que una simple con HTML y JS.

Pero eso de “crear páginas de manera dinámica”, ¿qué quiere decir exactamente?

Pero como es un terreno un poco “lioso” y seguramente no entiendas (todavía) muy bien la diferencia entre una página “estática” y “dinámica”, vamos a analizarlas con calma:

Cómo funcionan las páginas HTML estáticas en una web

Cuando las páginas son estáticas, son simples ficheros, similares a los de un documento Word o una hoja Excel, por ejemplo.

Para que puedas navegar por esas páginas en una web, necesitas tener contratado un dominio y un servidor web (un hosting) al cual subir esos ficheros.

Supongamos que has creado un fichero “hola.html” y tienes un domino “midominio.com” y hosting contratados.

Si quieres ver tu página en tu web, es tan simple como subir “hola.html” con las herramientas de tu hosting al servidor.

Si subes el fichero tal cual al directorio raíz de tu hosting, podrás navegar por él a través de:

También puedes crear una estructura de carpetas que se reflejará tal cual, en las URLs, por ejemplo, si creas una carpeta “prueba-1” y metes el fichero dentro de ella, verás la página en:

Cuando accedes a estas URLs, el servidor web descarga el fichero “hola.html” a tu navegador, igual que cuando te descargas cualquier otro fichero de Internet.

Una vez descargado, el navegador lo visualiza, tan simple como eso.

Y así es cómo se creaban las webs antaño. Fácil, ¿no?

La contrapartida de esta simplicidad es que esto es también es muy, pero que muy limitado. Como vimos antes con el ejemplo, tan sólo con esto no podemos implementar una cosa tan básica como una sección de comentarios.

Cómo funcionan las páginas HTML dinámicas en una web

Te decía antes que en el modo dinámico el resultado final es el mismo (una página HTML que se visualiza en tu navegador), pero que había un truco adicional que lo cambia todo.

El truco es que cuando accedes a una URL, ese fichero no tiene sólo código HTML, sino código de un lenguaje de programación para crear páginas dinámicas como PHP que se ejecuta al acceder a la URL en cuestión, antes de pasarla al navegador.

Quiero hacer el inciso de que PHP no es el único lenguaje de programación que se usa para esto. Aunque PHP es el más usado de todos, también son importantes lenguajes como Java o los lenguajes de la plataforma .Net de Microsoft.

Cuando se usan este tipo de lenguajes lo que va a devolverse al navegador web no es el fichero original tal cual, si no, su contenido en HTML, combinado con el resultado (en HTML) de ejecutar el código de programación que también contiene.

Ese resultado final ya es 100% HTML y JavaScript, pero la diferencia con la página estática es que se ha creado “sobre la marcha”, fruto de ejecutar previamente el código (PHP en nuestro caso) que contenía esa página.

El resultado en la mayoría de ocasiones, cambiará en cada acceso, por eso son páginas dinámicas. Es lo que pasa, por ejemplo, cuando navegas por tiendas online buscando productos. Los resultados no existen de antemano, se construyen en función de la búsqueda.

A continuación, puedes ver un ejemplo muy simple de una página dinámica PHP:

<!DOCTYPE HTML> 
<html> 
  <head> 
    <title>Ejemplo de página dinámica</title>
  </head>
  <body>
    <h1>Ejemplo de página en PHP</h1>
    <h2>Sección normal de HTML</h2>
    <p>Este párrafo y su título son HTML normal.</p>
    <?php 
      $temperatura = obtenerTemperatura(); 
      echo "<h2>Sección creada dinámicamente con PHP</h2>"; 
      echo "<p>Actualmente, la temperatura es de ".$temperatura." grados.</p>"; ?> 
  </body>
</html>

Fíjate que, en su mayoría, en realidad, es HTML normal, pero tiene un pequeño trocito de PHP cuyo comienzo se demarca con “<?php” en el código y el final con “?>”.

Esta página muestra la temperatura actual. Como la temperatura va variando, hay que crear esta página dinámicamente, no vale un contenido fijo.

Para que funcione, PHP usa la variable “$temperatura”.

Esta funciona como una especie de comodín para escribir contenido HTML variable en función del valor que reciba esa variable (para el ejemplo no nos importa cómo puede obtener la temperatura, lo que importa es que la variable guardará su valor).

Con esto, componemos en PHP el texto fijo de “Actualmente, la temperatura…”  más la variable de la temperatura.

Cuando se ejecute el código, la instrucción “echo” de PHP, creará este texto sustituyendo la variable $temperatura por su valor, “27,5”, por ejemplo.

Así habrá compuesto un texto final como “Actualmente, la temperatura es de 27,5 grados”.

No hace falta que entiendas el código y cómo lo hace, simplemente quiero que captes la filosofía de esto, y que te des cuenta de que esto no lo podríamos haber conseguido con una página HTML con un contenido fijo.

Para que lo acabes de entender mejor, voy a ponerte un ejemplo más fácil de entender que el de los comentarios: una búsqueda en Google.

Cuando introduces una búsqueda en Google, Google te va a devolver una página (resultados) diferente para cada búsqueda.

Es obvio que Google no puede tener preparadas de antemano esas páginas de resultados como páginas HTML porque son infinitas. Tienen que generarse de una manera dinámica.

¿Cómo lo hacen?

Simplificando mucho es básicamente esto: disponen de unas gigantescas bases de datos con las páginas web que el buscador ha visitado previamente.

El buscador indexa cada una de estas páginas (es decir, determina un largo conjunto de palabras clave afines a su contenido) y guarda esta información en la base de datos.

La pagina web de resultados que tú ves es siempre la misma, pero cada vez que accede a ella viaja como parámetro la palabra o frase de su búsqueda concreta y esa página contiene un trozo de código que toma ese parámetro y lo procesa.

En este ejemplo, “procesar” quiere decir que:

Primero, el código del programa de Google consulta la base de datos.

Después ésta le devuelve un listado ordenado por orden de relevancia de las páginas afines a esa búsqueda, junto con los detalles de cada uno de los resultados como su título, su URL y el texto descriptivo.

Para generar la página del resultado de búsqueda, el código recorrerá esa lista y creará contenido HTML para cada uno de los resultados de la búsqueda.

Por ejemplo, el título de cada página en un resultado de búsqueda de Google es en este momento una etiqueta <h3> que contiene, a su vez, un enlace (etiqueta <a>).

Ese HTML lo va construyendo sobre la marcha el código que se está ejecutando en el servidor.

Cuando termine ese proceso, el servidor web habrá construido una página HTML normal y corriente, pero de una manera dinámica, con un contenido que no estaba determinado de antemano como en una página web estática.

Llegado a ese punto, el servidor web le devuelve este HTML al navegador web exactamente igual que si hubiese sido una página web estática y el usuario ve los resultados de la búsqueda.

De hecho, el navegador web “no se entera” de la diferencia entre páginas web dinámicas y estáticas. Él sólo ve que le llega un fichero con HTML, toda la “magia” ocurre en el lado del servidor web.

Así es cómo funcionan las páginas dinámicas y con esta técnica es posible ir más allá de simples colecciones de contenidos en HTML y crear aplicaciones interactivas en toda regla.

Por eso, en este caso se habla de aplicaciones web. Wikipedia, WordPress, Joomla o PrestaShop son ejemplos de aplicaciones web súper populares.

¿Por qué ha arrasado PHP a nivel mundial?

Pues bien, visto este ejemplo de cómo funcionan las aplicaciones web, sólo queda decirte que PHP es una de las mejores opciones, sino la mejor, que existen para crear aplicaciones web.

PHP debe su enorme popularidad, a mi modo de ver, estos factores clave:

• Es código libre y de fuentes abiertas: todo el mundo se lo puede descargar y usar sin coste, igual que las demás herramientas para trabajar en PHP (servidor web Apache, etc.).
• Es el estándar en los hostings: prácticamente cualquier hosting (salvo en los planes “hiperbaratos” de 2-3€ en algún caso) soportan PHP.
• Los grandes proyectos libres están hechos con PHP: la misma Wikipedia, WordPress, Joomla o PrestaShop son tan sólo unos pocos ejemplos de mega-proyectos realizados en PHP. Por eso, los puedes instalar en un hosting convencional no especializado y, encima, gratis.
• Es moderno y potente, ideal para programar en web: se nota muchísimo que nació y evolucionó junto con la web y que su diseño ha sido realimentado por la experiencia y buen criterio de una enorme comunidad de usuarios.
• Es asequible de aprender: especialmente si se compara con otros lenguajes de programación como, C++, por ejemplo.

2. MySQL. La base de datos open source más popular del mundo

Una base de datos es un programa en el que se almacena información (datos) relacionados y estructurados, que forman parte de un mismo contexto y que pueden ser consultados con un lenguaje de consultas.

Cuando creamos una aplicación o página web es indispensable usar también una base de datos. El "estándar de facto" en el mundo PHP es la base de datos de software libre MySQL y en menor medida también su gemela: MariaDB.

Los ejemplos de aplicaciones antes mencionadas (WordPress, etc.) usan todos MySQL. Pero existen varias otras muy populares como, por ejemplo, PostgreSQL, aunque no tan usadas en el mundo PHP como MySQL.

Te puedes imaginar las bases de datos de una manera simplificada, como una gran colección de tablas con información, relacionadas entre sí.

La principal utilidad de una base de datos es que:

1. Permite almacenar de una manera organizada y eficiente cantidades gigantescas de información.
2. Se puede interactuar con ellas desde lenguajes de programación como PHP y cualquier otro lenguaje razonablemente conocido.
3. A través del lenguaje de consultas SQL, permiten hacer consultas inteligentes. Imagínate, por ejemplo, la siguiente una consulta a la base de datos de Amazon: “Dame todos los productos que sean del tipo tablet y de la marca Samsung”.

Como ya decía antes, WordPress usa también una base de datos. La utiliza prácticamente para todo, empezando por el contenido el cuál, aunque tú lo veas como una página HTML “normal”, en realidad es una mezcla de texto y HTML almacenado en su base de datos.

De un modo similar, muchos de los plugins y temas que te instalas en WordPress usan también la base de datos de WordPress para guardar su configuración y la información con la que trabajan.

Lo que nos interesa de todo esto es que, en cuanto a MySQL, lo que tienes que saber es básicamente SQL y tener unas nociones básicas de cómo funcionan las tablas de una base de datos (que es algo bastante sencillo), poco más.

En cualquier caso, quiero recalcar que SQL es también un lenguaje bastante asequible al nivel que te pueda hacer falta a ti.

Echa un vistazo a este ejemplo consulta:

SELECT nombre, descripción, precio FROM productos WHERE tipo = ‘tablet’ AND marca = ‘Samsung’

Si sabes un poco de inglés, casi ni hace falta que te explique lo que hace, ¿verdad?

Esta consulta sacaría el listado de productos de Amazon que puse un poco más arriba como ejemplo de qué se puede hacer con una consulta SQL a una base de datos.

¿Qué entorno de desarrollo necesito para programar WordPress?

En primer lugar, asume que para esto no te va a servir un móvil. Para esto necesitas un ordenador.

Es mucha gente la que insiste una y otra vez en cómo usar el móvil para hacer tal o cual cosa en WordPress, pero la realidad es que un si un móvil ya es un pésimo dispositivo para crear simplemente contenido en WordPress, para programar con código no te cuento.

Se pueden forzar las cosas y meter con calzador las cosas en el móvil, pero va a ser una experiencia tortuosa, eso tenlo claro. Si vas en serio con esto, hazte con un ordenador.

Yo te recomiendo por razones prácticas y por precio un portátil Windows.

En sitios de ordenadores reacondicionados como, por ejemplo, Back Market, puedes conseguir modelos que te servirán incluso por menos de 150€, aunque mi consejo es que inviertas algo más y que vayas a modelos en el rango de 200€ - 300€ para no quedarte corto en prestaciones.

La otra herramienta fundamental es el entorno de desarrollo (IDE en inglés).

Aquí, mi recomendación: si vas a programar con código por primera vez, usa un simple editor gratuito de texto, con soporte para codificación UTF-8 y capaz de colorear la sintaxis de código PHP, HTML, CSS y JavaScript.

Mi recomendación para Windows es Notepad++ y para Mac, Atom.

Ni decir tiene que necesitas tener conocimientos de programación, al menos, básicos, en PHP, HTML y CSS. Generalmente, para cosas sencillas o de una complejidad media, lo normal es que no necesites usar JavaScript, pero para cosas un poco más avanzadas puede llegar a ser necesario.

Si no tienes estos conocimientos básicos, mi consejo es que aún no te metas en la programación de plugins, no tiene sentido. Fórmate antes con las siguientes lecturas para HTML y CSS:

Y con esta base, ya te puedes meter en PHP. Hay una gran cantidad de tutoriales gratuitos excelentes. Éste me ha parecido uno de los más completos en español:

A partir de aquí, practica haciendo pequeñas cosas con PHP. Cuando ya te veas un poco suelto, será el momento de seguir con este post. 😉

Por otra parte, cuando estés en ese punto y ya tengas algo de confianza, mi consejo es que explores IDEs más profesionales como, por ejemplo, Visual Studio Code, que sigue siendo gratuito, pero ya mucho más completo como IDE que Notepad++ o Atom.

Yo personalmente uso PhpStorm que es mi IDE favorito para programar en WordPress y con PHP en general. Pero esto ya es un producto de pago. Verás que algunas de las capturas de código están hechas con este IDE.

Y, por último, la plataforma web para ejecutar WordPress. Aquí asumo que ya tienes contratado un hosting. Aquí lo importante es que sea un hosting que permita más de una web/dominio para que puedas crear un segundo sitio de pruebas.

No uses tu web real para desarrollar plugins. Cualquier error de programación te puede provocar la famosa “pantalla blanca de la muerte” de WordPress, es decir, te puede tirar tu sitio abajo. Los plugins sólo se deben instalar sólo cuando están depurados y estabilizados.

Si tu hosting no te permite crear un segundo sitio, quizás es hora de meditar un “upgrade” a un plan que te lo permita, cambiar de hosting o contratar exprofeso uno tipo “ganga” como Ionos o Hostinger para desarrollar. Aquí te dejo opciones recomendadas:

Ojo con una cosa: si eres usuario de WordPress.com, sabrás que los plugins sólo se soportan con los planes superiores. Pero, además, en ningún caso podrás desarrollar en WordPress.com.

Una última alternativa, gratuita, pero bastante más complejo en su configuración inicial es la de crear una instalación de WordPress local.

Aquí te dejo un tutorial sobre esto:

Cómo programar en WordPress

Bien, veo que ya vamos por 4.000 palabras… No era mi intención convertir esto en un mega-post, pero si te lo has pasado tan bien leyéndolo como yo escribiéndolo, no pasa nada 🙂

En este punto ya has conocido todas las bases técnicas que has de conocer para programar en WordPress. De hecho, según lo que quieras hacer, sólo necesitaría dominar unas u otras.

Pero programar en WordPress es algo más porque, además, de lo que hemos visto, hay que conocer WordPress, su diseño y una serie de reglas de WordPress que hay que respetar si quieres programar bien en esta plataforma.

Además, esto lo necesitas sólo si almacenas y procesas cantidades de datos importantes en tus desarrollos, en la gran mayoría de los casos, en realidad, no necesitarás hacer nada con bases de datos.

Cómo cambiar la plantilla de un tema de WordPress con CSS

Quizás la manera más simple de empezar a programar es en la parte estética, personalizando un tema con CSS.

Esto es, además, un excelente ejemplo de cómo con saber programar tan solo un poquito, algo que hayas aprendido en cuestión de horas, rompes barreras que parecían infranqueables.

Imagínate que te has descargado un tema de WordPress, gratuito y bonito, pero que no te deja personalizar casi nada o que justamente no te deja personalizar un detalle determinado que para ti es fundamental.

Pues bien, si aprendes CSS, descubrirás que solucionar este problema estético (y prácticamente cualquier otro) realmente es facilísimo porque puedes crear una hoja de estilos que modifique estas propiedades.

Además, en la actualidad, WordPress, ya incorpora de manera estándar (menú “Apariencia/Editar CSS”) la posibilidad de personalizar el CSS del tema que tengas activo con reglas CSS adicionales que te permiten modificar las reglas CSS por defecto.

Sólo tienes que averiguar cuáles son las reglas originales que usa ese tema y modificar las propiedades que te interesen en tus reglas sustitutas.

En definitiva, aunque ahora mismo lo que puedas ver en el vídeo te parecerá chino, si aprendes un poco de CSS, verás que es bastante sencillo.

Eso sí, debes tener cuidado con lo que retocas. Como ves en el ejemplo, al acceder a la hoja de CSS del apartado de Apariencia nos aparece un mensaje aviándonos de que tengamos cuidado.

Es recomendable hacer una copia de seguridad antes de tocar el código.

La reglas que tengas que editar en el módulo de personalización de CSS tendrán una pinta parecida a esto:

.entry-content p {
  font-family: Open Sans, sans-serif; 
  font-size: 18px; 
}

Este ejemplo concretamente establece el tipo de letra y tamaño de letra que se está usando en los párrafos de este blog.

¿Te has fijado en qué tontería se ha convertido una tarea que sin saber programar parecía que era un callejón sin salida?

Programar en WordPress con PHP

WordPress está hecho en PHP y es muy típico que la gente empiece a hacer sus primeros pinitos en este lenguaje accediendo a su código.

El problema de esto es que suelen toquetear de una manera bastante imprudente el código de WordPress.

Esto es una muy mala práctica que te la quiero desaconsejar totalmente porque puedes romper todo tu WordPress.

Uno de los ejemplos más claros es lo que la gente hace en los temas WordPress.

Si en vez de hacer las modificaciones estéticas por una vía correcta como la arriba descrita con reglas CSS añadidas con un plugin al tema las implementases modificando directamente el código PHP del tema, como hace mucha gente, ¿qué pasaría?

Pues al principio nada, que es lo malo, verías los cambios y aparentemente todo estaría bien.

Imagínate que, tras la buena experiencia, sigues cambiando y cambiando, pasa un año y te has quedado realmente contento con el resultado de tu trabajo, tras invertir un montón de horas para conseguirlo.

Un buen día, ves que hay una actualización del tema y, como no, lo actualizas, es recomendable.

Te vas otra vez al blog y, ¡horror! ¡Han desaparecido todas tus modificaciones!

¿Por qué?

Porque cuando WordPress actualiza un tema o plugin, borra por completo la versión anterior del tema o el plugin y con ello también todas tus modificaciones.

Te la has cargado de un plumazo porque no sabías que un tema no se debe modificar así, a pelo, sino a través de lo que se conoce como un tema hijo (luego veremos lo que es esto).

Esto es un buen ejemplo de lo que puede pasar si no te tomas las molestias de aprender cómo se ha de programar en WordPress.

Por tanto, vamos a ver cómo se hacen las cosas bien.

Cómo programar con el API de WordPress

Programar bien en WordPress quiere decir, respetar y usar su API.

Un API (Interfaz de Aplicación o “Application Programming Interface “en inglés) es un conjunto de funciones o servicios que un determinado producto ofrece para programar contra él pudiendo reutilizar así para tus fines las funcionalidades que ese producto ya ha implementado, junto con una serie de reglas de lo que se debe y no debe hacer.

Si queremos programar bien en WordPress, debemos usar el API siempre que sea posible.

Ya no por aprovechar el trabajo hecho, sino por no “romper” el funcionamiento correcto de WordPress como pasaba en el ejemplo anterior de modificar “a pelo” un tema WordPress sin pasar por un tema hijo.

Por suerte, el API de WordPress está muy bien organizado y se divide, en realidad, en muchos APIs diferentes, según lo que se quiera hacer concretamente.

Eso hace bastante fácil irte la documentación, encontrar el API relacionado con lo que quieras hacer y ver cómo se ha de hacer, aunque no tengas ni idea del API de WordPress.

Voy a ponerte tan sólo unos ejemplos destacados para que te hagas la ideas de por dónde van los tiros.

Cómo programar en WordPress con shortcodes

Un shortcode es un texto envuelto entre corchetes que se puede escribir en un post o página de WordPress y que tiene una función, cualquiera que te puedas imaginar.

Por ejemplo, en este mismo post, el banner de hosting que estás viendo encima de este párrafo se ha creado con el shortcode “[hostingBanner]”.

Simplemente lo he escrito en el lugar donde he querido que aparezca el cuadro en este post y listo, WordPress y la rutina de código a la que llama ese shortcode hacen el resto.

Los shortcodes los puedes programar tú mismo a tu medida (como es mi caso con los cuadros de suscripción, por ejemplo), pero también muchísimos plugins con recopilaciones de shortcodes que hacen todo tipo de cosas.

Por ejemplo: son muy típicos las recopilaciones de shortcodes para elementos visuales como botones “bonitos”, recuadros para resaltar textos, tablas de precios, etc.

Piensa ahora en lo siguiente: imagínate que hubiese editado (aunque fuera un "copiar y pegar") el HTML para el banner de arriba “a pelo” en una web con 500 páginas y resulta que cambia su contenido.

Pues tendría que actualizar todas esas 500 una tras otra. O sea, antes de empezar ya me habría pegado un tiro…

¿Qué pasa al haber usado un shortcode?

Que actualizo un momento el código que es ejecutada por el shortcode y listo. Ya tendría actualizada la información en las 500 páginas con una simple acción.

Tan sencillo como genial, ¿no te parece?

Así que tampoco te pierdas nuestro post dedicado a ellos:

Programar con Hooks en WordPress

Como has visto, los shortcodes son un mecanismo muy bueno para insertar determinados componentes HTML en tus contenidos y reutilizarlos de una manera inteligente, aunque también se pueden hacer cosas con ellos que no sean visuales.

Hay un mecanismo muy parecido a los shortcodes para hacer eso en posiciones fijas de las páginas, por ejemplo, al principio o al final de una página.

Ese mecanismo son los hooks. Hay hooks de WordPress y hooks adicionales que puede añadir, por ejemplo, un determinado tema de WordPress.

En este blog, por ejemplo, uso, entre otros, un hook del tema Génesis en la cabecera del post para modificar la sección con la información del autor (meto lo foto, etc.).

Otro ejemplo lo tienes en el recuadro del autor, eso es otro hook a través del cual meto ese cuadro con la información del autor.

Todo eso ya está en la ficha del autor de WordPress y a través del API, WordPress me lo proporciona.

Mi código se lo pide todo al API y el API ya se ocupa de darme la información correcta según el post del que se trata. Lo único de lo que se ocupa mi código es de maquetar esa información.

De ese modo, implementar ese cuadro 100% personalizado en el tema hijo de Génesis que he creado para esta web ha sido hacer apenas unas pocas líneas de código.

Otro ejemplo de lo potente que es tener un buen API como el de WordPress.

Cómo funcionan los plugins de WordPress

Los plugins son un mecanismo magnífico para ampliar la funcionalidad de WordPress.

Ya habrás instalado muchos en tu sitio WordPress y no creo que te tenga que explicar a estas alturas mucho más sobre lo que es un plugin.

También habrás visto el potencial que tienen, especialmente si has usado plugins tan potentes como, por ejemplo, WooCommerce que convierte WordPress en una tienda online completa.

Así que imagínate el potencial que tiene este mecanismo para desarrollar tus propias cosas.

Simplemente decirte que es muy fácil empezar a hacer plugins sencillos, aunque hacer plugins avanzados sí que te va a requerir un conocimiento más profundo del API de plugins de WordPress.

En mi caso estoy usando en este momento un total de ocho plugins propios. Uno de ellos es el plugin para las cajitas de suscripción a la lista de correo y el correspondiente popup.

Otro ejemplo es la cajita para buscar dentro del blog que puedes ver en la página home y después de las cajitas de autor en todas las páginas.

Desarrollo de temas hijos de WordPress

El último ejemplo de casos típicos de programación WordPress es el caso de los temas hijo que ya mencioné anteriormente.

Es un mecanismo muy elegante de WordPress para poder crear temas WordPress personalizados.

Se basan en otro tema (el tema padre) y permiten modificarlo a discreción sin el riesgo de verse afectados por una actualización del tema padre.

Crear la plantilla básica para un tema hijo WordPress es increíblemente fácil. Es una hoja de estilo con nombre “style.css” con un comentario con esta estructura de campos en las primeras líneas:

/* 
  Theme Name: Berto's Genesis Theme Theme URI: https://www.ciudadano2cero.com 
  Description: Genesis Child Theme one-column style designed by Berto López. 
  Author: Berto López 
  Author URI: https://www.ciudadano2cero.com 
  Version: 0.5.9 
  Template: genesis 
  Template Version: 2.1.2 
  Tags: black, orange, white, one-column, two-columns, three-columns, left-sidebar, right-sidebar, responsive-layout, custom-menu, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready 
*/

¡Y eso es todo!

Si creas un fichero .zip con una carpeta y dentro de ella el style.css, ya tendrías una base de tema hijo que puedes instalar perfectamente como un tema hijo.

No modificaría nada del tema padre, es decir, se vería igual que el tema padre, ¡pero ya sería un tema hijo en toda regla!

A partir de aquí, si las únicas modificaciones que quieres hacer son a nivel estético, bastaría con escribir las correspondientes reglas CSS después del comentario anterior.

Pudiendo hacer lo mismo con la personalización de CSS de WordPress, el tema hijo sería una alternativa “costosa”, por así decirlo, aunque muy limpia por otra parte.

Crear un tema hijo tiene realmente sentido cuando tu tema va a tener algo de “chicha”, esto conlleva normalmente que no te apañes simplemente con reglas CSS, sino que necesitarás programar en PHP y, por tanto, aquí ya necesitarás crear un tema hijo sí o sí.

Conclusiones del desarrollo en WordPress

Al final ha sido un post enorme y si nunca has visto nada de programación o y programación WordPress en particular, quizás ahora te sientas un poco abrumado.

Normal, y es que he metido en un único post temas que llenarían darían sobradamente para un año de carrera universitaria…

Ahora, si bien es cierto que para poder considerarte un verdadero experto en todos estos temas, haría falta un esfuerzo de ese calibre, se trata de un mundillo muy agradecido en el que es muy fácil empezar a hacer cosas vistosas.

Te permitiría hacerte con una pequeña base de HTML y CSS y empezar a hacer tus primeros pinitos como, por ejemplo, ser capaz de personalizar cualquier tema WordPress a tu gusto.

Con unas pocas horas más que inviertas en PHP ya serás capaz de hacer cosas un poco más avanzadas como shortcodes para crear, por ejemplo, elementos a medida como los que usa este blog en todas partes para insertarlos en tus contenidos.

El siguiente paso sería aprender a programar con PHP contra bases de datos, contra MySQL concretamente.

Cuando empiezas a dominar un poquito todo esto, es algo muy divertido, creativo y gratificante.

De hecho, en mi caso, es así y muchas cosas se puede decir que las he hecho más por capricho personal y para pasar un buen rato que por motivos racionales, como el caso de mis cajitas de suscripción, por ejemplo.

Podría haber usado perfectamente un plugin como Thrive Leads y habría acabado mucho antes, pero no me lo habría pasado tan bien no podría haber tenido un resultado que es exactamente lo que quería  🙂

Y, por último, de JavaScript puedes simplemente olvídate, no lo vas a necesitar, al menos, al principio. Además, cuando tengas un poco de práctica verás que gracias a cosas como jQuery en este tema te darán todo el trabajo hecho.

Así que, anímate a aprender a programar en WordPress. Como ya decía al principio, accederás a otra dimensión con tu web, ya sea un blog, una web de un negocio o una tienda online hecha con WooCommerce 🙂