¿Qué necesitas aprender para programar en WordPress?

WordPress es una plataforma web muy potente. Pero si sólo la usas como un usuario “normal”, no estás aprovechando su verdadero potencial. Es cuando empiezas programar en WordPress y en la web en general, cuando accedes a otra dimensión de posibilidades para tu proyecto.

aprender programar wordpress

Imagen de Fotolia - © redpixel.pl

Esto es así porque saber programar fulmina todas las barreras que te puedas encontrar en el desarrollo de tu proyecto online, ya no dependerás del plugin X para hacer tal cosa o de encontrar el tema Y para el diseño que te gustaría tener realmente para tu web. 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. Además, serás envidiado por otros bloggers 🙂

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, hoy te quiero explicar 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.

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, creo que 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.

Si necesitas un hosting para tu blog o tu web, aprovecha estas ofertas ahora:

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 final 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.

1. HTML. El lenguaje para crear los contenidos en la web

HTML (siglas de HyperText Markup Language) es un lenguaje de marcado que permite describir el contenido y la estructura de una página web. La idea consiste básicamente en añadir a un texto normal etiquetas de apertura (<>) y cierre (</>) que le dan semántica a determinados trozos de este texto.

Mira este ejemplo:

En la primera línea estamos marcando un trozo de texto como título o cabecera de nivel 1 (principal), la “h” de la etiqueta viene de la palabra en inglés de cabecera (header).

En la segunda línea estamos marcando un trozo de texto como párrafo (paragraph) y dentro del mismo, a su vez, hemos marcado el texto de “HTML” como un enlace a la Wikipedia indicando a dónde ha de apuntar el enlace con un atributo especial “href” dentro de la etiqueta del enlace (etiqueta “a” de “anchor”, “ancla” en inglés).

¿Qué ventaja tiene esto frente a un texto normal?

Muy simple: que una herramienta que entienda HTML, como un navegador web que está visualizando este contenido, puede usar esta información semántica para realizar automáticamente acciones con ella: darle un tipo y tamaño de letra más grande a los títulos y subtítulos, destacar el enlace con un subrayado y hacer que al pulsar sobre él saltes a la URL enlazada, etc.

Esta es la idea detrás del concepto de “hipertexto” que ha revolucionado la informática y el mundo entero con el nacimiento de la web.

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í:

Cómo hacer una página web en HTML: Tutorial desde cero

Crear una página web en HTML es algo sorprendentemente fácil de aprender para personas no técnicas y merece mucho la pena hacerlo porque accedes a otro nivel de posibilidades para tu web.

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 mi mismo 🙂

2. CSS. El lenguaje para la presentación visual

Al principio, cuando nació HTML (1991), las posibilidades programación web se limitaban básicamente a lo que acabas de ver y una de las limitaciones más obvias que tenían era que el lenguaje HTML era muy pobre en el lado estético.

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, te acordarás que las páginas web eran, generalmente, horrorosamente feas, nada que ver con los diseños que te puedes encontrar hoy en día y que en ocasiones son auténticas obras de arte.

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, seguramente 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.

Multiplica el Nº de clics en tus contenidos

Con este eBook gratuito de plantillas de copywriting crearás titulos que dispararán los clics en tus contenidos:

  • 77 Plantillas de títulos probadas que multiplicarán los clics.
  • Sacaras infinitas ideas crear tus propios títulos.
  • Con las palabras "mágicas" redactarás textos irresistibles.
  • Vale para todo: blogs, tiendas online, redes sociales, etc.

Obtén tu eBook aquí

Apúntate a nuestra Zona VIP y descárgate tu eBook ya

Es 100% gratis 🙂

Lo que había ideado en principio era simplemente una herramienta de intercambio de información en el ámbito académico que era dónde 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 permitiría cosas muy elegantes e inteligente como, por ejemplo, que un mismo contenido se visualizase con maquetaciones completamente diferentes, sin tener que tocar el contenido en sí.

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 diseñado específicamente para definir y crear la representación visual de un documento HTML cuya primera versión (CSS1) se publicó en 1995, aunque se tardó mucho más en usarse en las páginas web de manera habitual. En la actualidad vamos por 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é condiciones (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:

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:

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.

Y si quieres profundizar también un poco más en este tema, echa un vistazo a este post:

guia rapida aprender css La guía rápida para aprender CSS básico desde cero

Si hay algo que te recomiendo si tienes una web, es aprender CSS y HTML. Incluso aunque uses una plataforma como WordPress o Joomla, no hay color.

3. JavaScript. Hacer páginas web más inteligentes

Hoy en día no se puede hablar de páginas web sin hablar también de JavaScript.

Con JavaScript tengo dos noticias para ti, una mala y otra buena:

  1. La mala: No es tan fácil de aprender como HTML y CSS. JavaScript ya no es un simple lenguaje descriptivo como estos dos, sino un lenguaje de programación en toda regla y con ello más complejo de aprender.
  2. La buena: En la práctica, no necesitarás aprender JavaScript. Incluso yo mismo, que soy desarrollador de profesión desde hace tiempo, no sé casi nada de JavaScript.

Una manera muy simplificada, pero fácil de entender, de definir lo que hace JavaScript en una página web es que verás JavaScript en acción básicamente cuando ves que los elementos de la página web se mueven, como un interfaz de usuario tradicional.

Un ejemplo típico sería un calendario que te permite navegar por los meses y años, y seleccionar un día. Ese tipo de interacciones complejas del usuario con la página web se programan con JavaScript. Ya te puedes imaginar que programar un calendario como éste no es algo fácil de aprender para un novato.

Ahora bien, si este tipo de cosas que se ven tan frecuentemente en las páginas requieren JavaScript, ¿por qué digo que incluso yo como desarrollador profesional prácticamente no he necesitado aprender JavaScript?

Muy simple: porque 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.

portada web jquery

La web de jQuery. Con la librería de jQuery puedes implementar cosas muy sofisticadas en JavaScript sin tener grandes conocimientos de este lenguaje y de una manera que sabrás que funcionará en todos los principales navegadores.

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.

Ademas, 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 un tema para una fase más avanzada de programación web y gracias a jQuery encontrarás casi todos los problemas resueltos con código libre ya hecho por otros. Una de las maravillas de esto de Internet.

De páginas web estáticas 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 demasiado con páginas así.

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

Por ejemplo: Imagínate que ahora quieres implementar una cosa tan simple como una sección de comentarios, tal como existen en WordPress, Facebook y millones de otros sitios web.

¿Cómo hacerlo?

Muy simple: no puedes.

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.

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: no son lo mismo unas simples páginas estáticas en HTML que páginas PHP que requieren ser procesadas en el servidor. Esto último es mucho más exigente para el servidor.

Si necesitas un hosting para tu blog o tu web, aprovecha estas ofertas ahora:

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

Quiere decir que empleamos un truco para poder hacer cosas como lo de los comentarios. Al final, el resultado será también una página HTML normal y corriente, pero el truco está en la manera de cómo se crea esa página.

Para que lo puedas entender, lo mejor es contrastar el modo estático y esta nueva técnica dinámica entre ellas:

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.

Ejemplo:

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:

http://midominio.com/hola.html

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:

http://midominio.com/prueba-1/hola.html

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 muy, pero que muy limitado, como vimos antes con el ejemplo de que 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 URLs en la que se encuentra una página dinámica, esa página no se descarga simplemente como fichero HTML sin más como en el caso de las páginas estáticas.

En este caso, lo que ocurre es que 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 contiene.

Ese resultado tiene formato de HTML, 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, normalmente, será diferente en cada acceso y, por eso, este tipo de páginas se llaman “dinámicas”, porque van cambiando.

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

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 poder hacer esto, el código PHP usa la variable $temperatura que 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 importanta 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, que te des cuenta de que esta pequeña funcionalidad no la podriamos haber conseguido con una página HTML con un contenido fijo, codificada de antemano.

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 página web de resultados de la búsqueda a la que accede el usuario cuando busca es siempre la misma, pero cada vez que accede a ella viaja como parámetro (como información que recibe el servidor web) 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.

captura resultados google

La pantalla de resultados de una búsqueda en Google varía en función de lo que busque el usuario, por tanti, tiene que ser creada como página dinámica.

En este ejemplo, procesar quiere decir que el código del programa de Google consulta la base de datos para que le devuelta un listado ordenado por orden de relevancia de las páginas afines a esa búsqueda del usuario que recibió como parámetro, 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 una 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 que es un simple fichero invariable sin más.

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.

Esto 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. WordPress o PrestaShop, por ejemplo, son aplicaciones web.

¿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. Una razón más para aprender un poquito de PHP.

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

  1. 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.).
  2. 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, sin embargo, no soportan (salvo en casos especializados) otros lenguajes de programación también muy populares como Java o los lenguajes de la plataforma .Net de Microsoft. En ese sentido, PHP es el estándar de facto en lenguajes programación web.
  3. Los grandes proyectos libres están hechos con él: 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.
  4. Es moderno y potente, ideal para programar en web: Es un lenguaje de programación moderno y potente que nació poco después de la web en 1995 y te puedo decir que es una delicia programar en él 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.
  5. Es asequible de aprender: Es muy asequible empezar a aprender a programar en PHP, especialmente si se compara con otros lenguajes de programación como, C++, por ejemplo. Incluso, ni siquiera es estrictamente necesario instalar un entorno de programación (aunque es lo suyo, claro suyo). Pero para empezar a experimentar un poco sería suficiente crear una carpeta en tu hosting y un fichero .php dentro de ella. Tan sólo con eso puedes empezar a hacer tus primeros pinitos.

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

Cuando una aplicación maneja una gran cantidad de datos, resulta imprescindible una base de datos. Y en Internet la base de datos de código de fuentes abiertas (código fuente disponible libremente, open source en inglés) más popular del mundo, con diferencia, es MySQL. Al igual que PHP, suele ser también un estándar en los buenos hostings.

¿No consigues visitas en tu web?

Con este eBook gratuito llegarás a la cabeza de los resultados de Google:

  • En 1 hora aprenderás el SEO que realmente necesitas.
  • Aprenderás cómo saber qué busca la gente en Internet.
  • Sabrás qué búsquedas te interesan y cuales no.
  • Llegarás arriba en los resultados de búsqueda.
  • Multiplicarás las visitas a tu web.

Obtén tu eBook aquí

Apúntate a nuestra Zona VIP y descárgate tu eBook ya

Es 100% gratis 🙂

Si no sabes lo que son las bases de datos, te las puedes imaginar de una manera simplificada como una gran colección de tablas con información, relacionadas entre sí, parecidas a las tablas que usan las hojas de cálculo.

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”. Es decir, usando SQL, facilitan mucho implementar las maneras típicas de cómo las personas interactuamos con las aplicaciones.

WordPress concretamente 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.

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.

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:

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.

Cómo se programa 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 en esta plataforma.

Así que, para rematar el post, echemos también un vistazo a vista de pájaro para que te hagas también una primera idea de cómo se programa específicamente en WordPress.

Programar en WordPress sólo 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.

Concretemos el ejemplo:

Imagínate el típico escenario de que has dado con un tema WordPress del repositorio gratuito de WordPress que te gusta, pero tiene el típico defecto de estos temas: no puedes personalizar casi nada en la configuración del tema y es que no te gusta nada ni el tipo de letra del texto, ni su tamaño y no hay ninguna opción por ningún lado para meterle mano a esto.

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. Averiguarlas es bastante fácil usando las herramientas de las que disponen los navegadores habituales:

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.

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

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

Estando hecho WordPress en PHP y pudiendo acceder a sin restricciones a su código (que son los ficheros .php que verás en tu hosting), es muy típico que la gente empiece a hacer sus primeros pinitos en PHP.

El problema de esto es que suelen toquetear de una manera bastante imprudente el código de WordPress, sin ningún conocimiento de cómo se programa realmente en WordPress.

Esto es una muy mala práctica que te la quiero desaconsejar totalmente porque, aparte de poder provocar la famosa pantalla blanca de la muerte de WordPress, puedes provocar problemas mucho menos obvios a primera vista que te pueden pasar una factura muy cara al cabo de un tiempo.

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.

Programar con el API de WordPress

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

Un API (Interfaz de Aplicación, Application Programming Interface en inglés) lo podríamos definir como un conjunto de funciones o servicios que un determinado producto ofrece para programar contra él pudiendo reutiliazar 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.

WordPress tiene un API enorme con una cantidad de funcionalidad enorme. 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.

Programar con shortcodes

Un shortcode es un texto envuelto entre corchetes que se puede escribir en un post o página de WordPress y que hace algo, cualquier cosa que te puedas imaginar.

Por ejemplo, en este mismo post, el cuadro de suscripción a nuestra lista de correo que ofrece gratis un ebook de copywriting se ha creado con el shortcode [sbsbanner]. 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.

Otro ejemplo que ya he mencionado arriba son las tarjetas de posts y páginas que permite crear enlaces internos a otros contenidos de una manera mucho más visual y atractiva que con un enlace de texto convencional.

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 pegado el HTML para el cuadro de suscripción “a pelo” en cada post.

¿Qué pasaría si lo actualizase?

Pues tendría que actualizar los más o menos 300 posts que tiene esto blog. O sea, antes de empezar ya me habría pegado un tiro…

¿Qué pasa al haber usado un shortcode?

Que actualizo un momento la rutina que es ejecutada por el shortcode y listo. El texto del shortcode como tal sigue siendo el mismo, por tanto, no tengo que tocar ningún post. Sin embargo, todos ellos se habrán actualizado automáticamente.

Tan sencillo y genial, ¿no te parece?

Programar con hooks

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 un post. Ese mecanismo son los hooks. Hay hooks de WordPress y hooks adicionales que puede añadir, por ejemplo, un determinado tema de WordPress.

En el blog de Ciudadano 2.0, por ejemplo, uso, entre otros, un hook del tema Genesis 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.

Y gracias a otras funciones del API no me tuve que preocupar de nada para disponer de la foto, el nombre y el texto de presentació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 correcto según el post del que se trata y de 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 Genesis que he creado para Ciudadano 2.0 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.

Plugins

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 tienes 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 y otro el que añade el botón de Twitter en los comentarios.

Y dentro de poco verás en funcionamiento un plugin de desarrollo propio muy “gordo” con el que estrenaremos una parte completamente nueva y muy importante dentro de Ciudadano 2.0 y que será algo bastante especial que no existe como tal que yo sepa en otros sitios de nuestro nicho 🙂

Temas hijos

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 que se basen en otro tema (el tema padre) y permitan modificarlo a discreción sin el riesgo de verse afectados por una actualización del tema padre como ocurría en nuestro ejemplo de tocar directamente el código de un tema WordPress sin respetar la buena práctica de crear un tema hijo para ello.

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:

¡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.

Como temas WordPress premium te recomiendo Divi y GeneratePress

Consulta también aquí los mejores temas WordPress

Pudiendo hacer lo mismo con la personalización de CSS de WordPress, el tema hijo sería una alternativa “mala”, por así decirlo. Yo lo he usado simplemente como un ejemplo ilustrativo de lo fácil que es arrancar con los temas hijos.

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í.

Un ejemplo de este escenario sería el ejemplo anterior de meter una foto del autor de un post en la cabecera de información del autor donde ya entraríamos en el desarrollo de temas hijos avanzados. Esto lógicamente ya es más complejo y ha de respetar estrictamente las reglas del API de WordPress para hacerse bien.

Conclusiones

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.

A unas pocas decenas de horas de estudio y práctica ya les vas a sacar mucho partido. Tan sólo eso ya te puede cambiar la vida en tus posibilidades como blogger. 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 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. Esto ya es un poco más exigente, pero no hay que tenerle miedo, despacio y con buena letra todo se puede.

Además, te aseguro que si te atrae la parte técnica del blogging y de WordPress, te lo vas a pasar como un enano. 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 🙂

Y, por último, de JavaScript puedes simplemente olvídate, no lo vas a necesitar, al menos, al principio. Y 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 del blogging 🙂

Acerca del autor: Berto López

Soy autor y cofundador de este blog, e Ingeniero en Informática de formación.

He sido tanto empleado como empresario, esto último durante casi una década en la que he trabajando en la implantación de proyectos tecnológicos en sectores con grandes carencias en conocimiento de las nuevas tecnologías, como Retail y Pymes.

Lo que he vivido en esta experiencia ha sido la inspiración para crear el blog: divulgar las enormes oportunidades que esconde la web 2.0 y el marketing online y que la mayoría de las personas, en especial pequeños profesionales y empresarios, no están aprovechando.

En este blog quiero concienciarles, motivarles y ayudarles a desarrollar su verdadero potencial y descubrir que, además, puedes pasarlo muy bien haciéndolo :)


Comentarios

  1. muy buen post Berto!
    Recién me estoy iniciando en todo esto, hice un curso básico de wordpress y ahora comencé con html y css, voy a seguir esta guía para sacarle provecho a wordpress pero tengo una consulta. El que se dedica a hacer sitios web para empresas pequeñas o grandes utiliza wordpress o hace los sitios directamente con lenguaje? Hago esta pregunta porque al existir en la actualidad los gestores de contenido por que algunas personas hacen todo con lenguaje?

    • Berto López dice:

      Hola Rodrigo,

      Hacer todo programando a estas alturas me parece, en principio, completamente absurdo. Me cuesta imaginar un escenario donde eso pueda tener sentido…

      Lo que es lógico es que cuanto más complejo sea el proyecto (lo cual no depende necesariamente del tamaño de la empresa), más probable es que haya que meter partes programadas a medida.

      Pero ahí está la elegancia de una plataforma bien diseñada como WordPress: se puede integrar muy bien las partes no estándar hechas a medida con la funcionalidad estándar que sirve tal cuál viene de fábrica.

      ¡Un saludo!
      Berto

  2. Hola Berto

    Muy buen articulo, la verdad tenia muchas dudas pero con la explicación que me brindas en este post me has dejado claro las dudas que tenia, lo bueno es que lo explicas de una manera sencilla que es fácil de entender.

    Muy buen trabajo, gracias por compartir.

Deja un comentario

Para ello, por favor, sigue estas pautas, por respeto a nuestra comunidad (y a nosotros):

  • Usa tu nombre personal, ni nombres inventados, ni el de tu web, ni el de tu empresa.
  • Cuida la redacción: separa párrafos y no escribas en mayúsculas (equivale a gritar).
  • No dejes enlaces a tu web en el comentario, dispones del campo "sitio web" para ello.
  • Eliminaremos comentarios con insultos, ofensivos o con lenguaje soez.

Al rellenar el formulario estás dando el consentimiento expreso al tratamiento de tus datos (guardar tu comentario y datos del formulario en el blog) conforme al Reglamento General de Protección de Datos (RGPD).

El responsable de este sitio es Wenova Online S.L., cuya finalidad es el envío de información y formación sobre blogging y marketing online, con la legitimación de tu consentimiento otorgado en el formulario.

El destinatario de tus datos es Webempresa (el hosting de este blog, ubicado en España) y podrás ejercer tus derechos de acceso, rectificación, limitación o supresión de tus datos (ver la política de privacidad).

*

 

Accede al training de pro-blogging

Aprenderás paso a paso y desde cero las mejores técnicas, trucos y secretos de los top bloggers

Y todo 100% gratis :)