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

como programar wordpress

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

como hacer pagina web html Cómo hacer una página web con HTML

Crear una página web con HTML es más fácil de lo que crees. En post aprenderás rápido y fácil todo lo que necesitas para crearlas.

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.

¿Te dedicas al diseño web pero no consigues hacerlo rentable?

Pues entonces descubre el curso gratuito que te hubiese cambiado la vida cuando empezaste como diseñador web freelance.

Haz clic en el botón de abajo para descubrir:

  • En qué estás fallando. ¿Por qué otros viven de esto y a ti te cuesta tanto?
  • Los secretos para adelantar a tu competencia por la derecha.
  • Cómo multiplicar por tres tus ingresos sin hacer más webs, ni subir precios.
  • 16 palabras y mensajes de venta que todo diseñador debería borrar de su web.
  • Cómo hacer páginas web de 400€ en menos de 4 horas.

Y estos son sólo 5 ejemplos de un total de 18 vídeos con más de 5 horas de grabación totalmente gratis (sí, gratis de verdad).

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:

cabecera tutorial basico css Tutorial para aprender CSS básico desde cero + Manual PDF descargable

Saber un poco de CSS te abre un mundo de posibilidades, incluso si usas WordPress o Blogger. Aquí aprenderás lo que realmente necesitas saber.

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.

Esta es la página principal de 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.

Encuentras ejemplos como éste.

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.

Si necesitas un hosting para tu web o tu blog, ¡actúa!

Aviso: estas ofertas son válidas ahora, pueden vencer en unos pocos días.

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:

https://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:

https://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 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.

ejemplo de búsqueda en google
Los resultados de Google son un ejemplo típica de página dinámica, construida sobre la marcha.

 

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.

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.

Si necesitas un hosting para tu web o tu blog, ¡actúa!

Aviso: estas ofertas son válidas ahora, pueden vencer en unos pocos días.

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:

que es un shortcode Qué es un Shortcode de WordPress y cómo usarlos

Los shortcodes son una de las herramientas más útiles de WordPress, sin embargo, muy poca gente los conoce.

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 🙂

Acerca del autor: Berto López

Soy autor y fundador de este blog, e Ingeniero en Informática de formación con amplia experiencia: he trabajado como empleado, empresario, incluso funcionario. Vamos, que he probado de todo 😄

De todo ello, lo que me llena de verdad, es el emprendimiento, combinado con la tecnología, algo que he podido retomar con mi proyecto de emprendimiento actual, al cual pertenece, entre otras, esta web.

He tenido mucho contacto profesional con Pymes y pequeños emprendedores y eso me ha llevado inevitablemente hacia WordPress como plataforma web ideal para estos usuarios.

Mi interés se centra en la variante instalable en un servidor, WordPress.org, por su infinito potencial a cambio de un coste casi nulo. Un antes y un después para los emprendedores.

En este blog quiero ayudar a sus usuarios, sobre todo, con los aspectos más técnicos de WordPress y el hosting para poder disfrutar a tope, sin miedos, de esta maravillosa plataforma de software libre y de código abierto :)

106 comentarios en «¿Qué necesitas aprender para programar en WordPress?»

  1. De casualidad llegué a este post y he de decir que es de lo mejor que he leído. Ha servido para aclarme muchos conceptos que de tan sólo leerlos me abrumaban.
    Se nota que quién lo ha escrito diafruta haciéndolo.
    Felicidades

    Responder
  2. Muchas gracias por tu post, muy explicativo
    Quiero construir un tema hijo en que pueda insertar código php para realizar una consulta a la base de datos y verificar si existe un correo electrónico insertado por wp-forms.

    ¿Tienes un post sobre creación de temas hijos?

    Responder
  3. Hola, estoy interesado en este cursos de programación en wordpress. Quisiera saber el precio, fechas de iniciación, plataforma virtual y todo lo demas referido a este curso. Espero más información. Saludos

    Responder
  4. Buenas Berto, felicitarte por el artículo. Llevo tiempo buscando buenos artículos que explicaran las cosas como son (hay mucho copiar y pegar en internet y con poco fundamento). Soy administrador de sistemas y quiero meterme en el mundo del diseño web. He creado ya un par de webs mediante plantillas bastante bonitas (WordPress lo permite de forma fácil) pero siempre me quedo con las ganas de más pero me faltan los conocimientos de programación. Bajo tu punto de vista, que estudiarias o que cursos recomiendas para sacarle el máximo partido al diseño web? Gracias por adelantado.

    Responder
    • Hola Juan Antonio,

      Idealmente diferenciaría estos:

      • Uno de programación y diseño web en general (HTML, CSS y PHP).
      • Otro de programación en WordPress.
      • Uno de diseño gráfico o diseño web, pero centrado en la parte gráfica, no en la parte de desarrollo con HTML y CSS (que ya cubre el primero).

      ¡Un saludo!
      Berto

      Yo diría un buen curso de programación WordPress, otro de programación más otro especializado en diseño gráfico

      Responder
  5. Estupendo post!
    Estoy programando una web de forma tradicional con html, css, php y js, pero se me hace dificil incorporar opciones del estilo:
    – Contador de “Likes” para los artículos
    – Tienda online…
    En WordPress hay muchos plug-ins incluso gratuitos, pero, se pueden aplicar de alguna forma sencilla a una pagina convencional, o es necesario comenzar el proyecto de cero en WordPress?

    Responder
    • Hola Álvaro,

      Los plugins de WordPress sólo funcionan con WordPress, además, sólo con la versión descargable que requiere un hosting propios: WordPress.org.

      ¡Un saludo!
      Berto

      Responder
  6. Hola Berto, tenemos una revista en formato papel que tiene 23 años . Hemos encargado el desarrollo de una web mediante plantilla de wordpress y vemos que necesitamos aprender programación para activar / hacer funcionar / soporte, etc/ una plantilla prediseñada de wordpress ( para redes sociales) .
    Podrás facilitarme un telefono whtasapp y/o mail de contacto ?
    Muchas gracias, saludos!

    Responder
  7. 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?

    Responder
    • 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

      Responder
  8. 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.

    Responder
  9. Me ha encantado este post. Creo que necesitaba haber leído algo así hace mucho tiempo porque da una visión global del funcionamiento de una web y de cómo podemos mejorar nosotros y ella. Yo nunca me he atrevido a programar y me ha animado bastante la forma tan sencilla de explicarlo. Además, el post me parece increíble y se va directamente a mis favoritos. Aunque voy a hacer una carpeta q se llame “básicos” porque me parece una lectura fundamental. Enhorabuena por el trabajazo de post.

    Responder
  10. Saludos Berto.

    Oye que buen post, me gustó mucho porque tengo tiempo queriendo iniciar proyectos en WordPress y me costaba contar con orientación de pasos iniciales y herramientas recomendadas.

    A través de tu post puedo tener una idea mas clara y además el incentivo de dar mis primeros pasos.

    Gracias por este material y por los otros que me llegan al correo. Tengo algunas lecturas atrasadas jeje pero confío pronto me pondré al día.

    Éxito

    Responder
  11. Hola Berto!!!!
    Hace tiempo que me pasa por la cabeza formarme en lenguajes de programación.
    Ahora estoy haciendo mi web con WP+GP+Elementor, y la verdad, creo que has despertado en mi ese gusanillo que estaba latente.
    Gracias por tus aportaciones

    Responder
    • Hola Jesús,

      Pues entonces te recomiendo que te hagas suscriptor del blog para estar en nuestra lista de correo porque mañana va a haber una sorpresa que te va a interesar 🙂

      ¡Un saludo!
      Berto

      Responder
  12. Si señor Berto, muy bien explicado. En mi opinion hace mucha falta este tipo de vision global, para que la gente sepa donde encaja cada pieza del puzle.
    Y no hablo de WP exclusivamente, es una carencia que a mi personalmente me ha fastidiado desde mi epoca de estudiante. Eso de que te empiecen a explicar de forma lineal sin que sepas muy bien de que te estan hablando por que no sabes como encaja esa disciplina con el resto.
    Tu has presentado una vision desde arriba descomponiendo los elementos y explicando como engranan cada uno. Creo que puede ser de mucha ayuda para mucha gente. Gracias por currartelo bien en vez de ir a lo fácil.

    Responder
    • Muchas gracias por tu comentario Daniel 🙂

      Y es que lo que comentas me pasa igual, no puedo con la tradicional “masterclass” española donde muchas veces quien la imparte se olvida por completo de que esto va de que la gente te entienda.

      ¡Un fuerte abrazo!
      Berto

      Responder
  13. Que buen post. Me sirve para darme ánimo ya que la programación siempre me gustó pero así también me frustra cuando no puedo lograr lo que quiero hacer, ni hablar si me la paso buscando plugins que no cumplen con lo que quiero, más cuando somos detallistas.

    Además, estoy enseñando desarrollo web básico a un alumno que voy a invitar a subscribirse a vuestro blog. Sugiero también concientizar y hablar sobre la accesibilidad web, muchas veces componentes con JavaScript no es accesible con lectores de pantalla como NVDA que permite a personas ciegas y disminución visual acceder a la información. Aprovecho para felicitarlos ya que yo puedo acceder a ciudadanos sin problemas.

    Saludos desde Argentina.

    Responder
    • Hola Esther,

      Es que se trata de tema con m ucha chicha que no se puede despachar en tres párrafos 🙂

      ¡Me alegro de que te haya gustado!
      Berto

      Responder
  14. Hola Berto,
    Gracias por los post que publicas son muy interesantes y de mucha ayuda, quería preguntarte cuando vas a publicar algo referente a la instalación del FTP para poder instalar el wordpress.
    saber como se copian y donde las BBDD, muchas gracias

    Responder
  15. ¡Hola! Buena información.

    En mi caso quiero hacer una pag web (ya he utilizado plantillas de WordPress anteriormente), pero quiero aprender a programar; al menos, lograr tener una buena base para configurar la página sin problemas y, como tú dices, entretenerme.

    Por otro lado, tengo gran interés en aprender macros en excel. Por lo que te pregunto, ¿qué has sabido sobre el aparente uso de Javascript para crear macros en excel? ¿Sería eso un gran valor extra aprender este lenguaje? ¿Me serviría 2×1, o convendría aprender las bases de HTML y luego aprender VB?

    He tenido muchas dudas respecto a esto; comencé a aprender un poco de Javascript hace unos días, pero aún tengo las dudas de qué conviene, sobre todo leyendo este post.

    ¡Saludos y gracias!

    Responder
    • Hola Rodrigo,

      Me temo que con esta pregunta me has pillado. No tengo ninguna idea sobre si es posible el uso de JavaScript en Excel 🙁

      ¡Un saludo!
      Berto

      Responder
  16. Una duda de WordPress.

    Cada vez que hago una búsqueda mediante las palabras clave de mi sitio web en Google, me aparece el título con puntos suspensivos al final (ej: zapatos color rojo…). No es problema de que el título sea muy largo, ya que he procedido a acortarlo y, cuando lo acorto, por defecto me lo rellena solo con el nombre de mi sitio web, repitiéndolo continuamente.

    Entiendo que es un problema de WordPress y no sé cómo se soluciona.

    Gracias y un saludo.

    Responder
    • Hola María José,

      WordPress, tal como viene de fábrica, no está demasiado preparado para hacer SEO un poco fino en el cuál entran cosas como la que estás comentando.

      Eso se soluciona con plugins (en caso de que estés con WordPress.org, en caso de WordPress.com, no te puedo ofrecer solución).

      Echa un vistazo a esto:

      https://www.youtube.com/watch?v=SGVVGYpH5p4

      ¡Un saludo!
      Berto

      Responder
  17. Muchas gracias Berto,

    Esta es el mejor “Vuelo en drone por el poco conocido mundo interno de la Internet” que he visto en mi vida, y eso no es cualquier cosa, yo comencé en el mundo de las computadoras en los 80’s.

    Verdaderamente lograste mantener la sencillez del lenguaje y de las ideas básicas; a pesar del reto que representa la larga extensión de territorio a cubrir. Lograste pasearnos a todos con tanta alegría, como en un parque de diversiones, sin sufrimientos y con una sonrisa de satisfacción. ¡Buen trabajo señor!

    Responder
  18. Información muy útil para todos aquellos que quieran tener presencia en internet con un gestor de contenidos fácil y práctico de usar como WordPress y con conocimientos de básicos a medios como HTML5 Y CSS.

    Saludos. Excelente post.

    Responder
  19. Hola

    Parece muy interesante realizar este curso, porque tarde o temprano siempre sale algún error por una extensión y hay que modificar aspectos de Html o css o JS.

    Todos es organizarse y buscar un hueco para estudiar

    Responder
  20. Muchas gracias Berto, mi pasión siempre ha sido la programación y aunque soy analista programador, jamás he ejercido mi profesión porque la vida me llevó por otros rumbos, no me puedo quejar porque gracias a ello me hice administrador, trabajé en servicio a clientes, soy consultor en implementación de procesos y me hice resolvedor por excelencia.
    Pero con tu post despertó nuevamente el programador que hay en mí.

    Muchas gracias y un abrazo…

    Responder
  21. Hola. Me ha encantado tu blog. Solo tengo una duda: ¿en cuánto tiempo me podría convertir en un desarrollar web? Si suponemos que empiezo de 0 y quiero lograr tener un nivel decente…

    Responder
    • Hola Jorge,

      Eso depende mucho de tu habilidad para ello.

      En cuestión de días, ya puedes aprender a resolver ciertos patrones (sin aprender a fondo a programar) que se dan con frecuencia y que puedes implementar con shortcodes, por ejemplo, una pequeña cajita con un título, un icono y colores diferenciados, para destacar cosas en tus contenidos, por ejemplo.

      Empezar a controlar “de verdad” HTML, CSS y PHP para hacer cosas sencillas es algo que estimo costará unos meses a una persona completamente novata. Y para llegar a un nivel un poco avanzado, creo que hay que contar con en torno a un año.

      Por otra parte, esto es una materia que exige buen material de formación, un buen curso de pago. Esto lo veo muy complicado aprenderlo bien y en un tiempo razonable picando de aquí y de allá.

      En cualquier caso, no hablo desde la experiencia de preparar a gente, por tanto, estas cifras son simples estimaciones a bote pronto.

      ¡Un saludo!
      Berto

      Responder
  22. Muchas gracias Berto

    Artículos como este son los que hacen la red grande.

    Habrá que investigar este mundillo a fondo. aunque picar código es durillo, no para todo el mundo

    Responder
  23. Hola Berto,

    Tengo claro que voy a empezar con wordpress.org en vez de .com, aunque sea un poco mas tedioso al principio. Quiero hacierlo bien.

    Asi pues, tengo dudas a la hora de escoger un template. Tango idea del layout que quiero, pero no tengo claro, que debo tener en cuenta a la hora de escoger uno.

    Quiero decir, Que diferencias importantes hay entre uno de pago y otro de tantos gratuitos, pero que apriori se ven bien, y que caracteristicas importantes tengo que tener en cuenta?

    Gracias

    Esteban

    Responder
    • Hola Esteban,

      No se puede generalizar, pero una de las diferencias cosas comunes más claras es que los temas profesionales suelen estar mucho más trabajados en la parte de las herramientas visuales para que sean fácilmente configurables y personalizables por el usuario.

      ¡Un saludo!
      Berto

      Responder
  24. Hol, Berto y Raquel.

    ¡Enhorabuena! ¡Como siempre, un excelente post, sumamente detallado!

    Tras leerlo me surge una duda: he creado mi web mediante WordPress y estoy satisfecha con el resultado; sin embargo, me resta por solucionar un tema. Aunque la plantilla es responsive, cuando la web se visualiza en un móvil, el icono de menú aparece en una zona del header que no debería pues tapa imágenes y demás… ¿sería mediante CSS que podría modificar la ubicación de este icono? ¿El plugin Jetpack que comentas en el post podría ser útil al respecto?

    Gracias de antemano! 🙂

    Un saludo,
    Raquel

    Responder
    • Hola Raquel,

      Estos temas siempre se deberían poder solucionar a nivel de CSS y efectivamente el módulo de CSS Jetpack es una manera cómoda de añadir tu propio código CSS para arreglar el problema.

      ¡Un saludo!
      Berto

      Responder
  25. Genial post como siempre!
    Y sobre todo por la capacidad didactica, de como se puede hablar de cosas de programacion de forma tan extensa sin que los que no somos informaticos como yo nos perdamos por el camino y no lleguemos al final del post…
    A seguir asi Berto!!
    Saludos

    Responder
  26. Excelente artículo. No muchas veces se menciona, o mejor dicho, valora, a los que diseñamos en WordPress. Siempre se necesita tener conocimientos de lenguajes más que solo criterios estéticos.

    Responder
  27. Muchas gracias nuevamente por articulos tan increibles como este.

    La verdad es que llevo tiempo con ganas de meterme a programar. La duda que tengo ahora es si intentar aprender java, css etc o lo que has comentado aqui…Ya que al gestionar algunos blogs es quiza lo que deberia hacer

    Responder
    • Hola Lorenzo,

      Java no aporta nada, PHP 🙂

      Y sí, si gestionas varios blogs creo que definitivamente te merece la pena meterte ya que, por así decirlo, multiplicarás el rendimiento de tus nuevos conocimientos.

      Un saludo,
      Berto

      Responder
  28. Berto, puedo decir que es uno de los posts más útiles, completos, currados y maravillosos que he leido en mi vida. No sabes en la cantidad de aspectos que me ha ayudado.

    Muchas gracias

    Responder
  29. Muchas gracias.

    A pesar de ser nueva en esto, es bastante clara la información aunque, obviamente, al no saber nada de programación, pues es mucha información que asimilar… y, pues claro, que esto es una introducción, así que ¡mis ganas de aprender más sobre esto son mayores!

    Feliz día.

    Responder
    • Hola, Yeye.

      Sí, lo cierto es que, si se parte prácticamente de cero, el contenido de todo esto resulta bastante denso, así que te recomiendo ir asimilándolo poco a poco. Al final, todos los conceptos se van entendiendo y asentando, ya lo verás.

      Mucha suerte. Un abrazo.
      Raquel

      Responder
  30. Yo creo que te faltó algo muy importante: ¡Amar aprender!

    WordPress es una cosa maravillosa que a veces falla por una coma, un espacio o la combinación de archivos JS de distintas versiones; bueno pues por mil cosas y eso es genial, porque nos ayuda a no tener miedo de leer código, aprender código y pasar largas jornadas para darse cuenta que era una cosa sencilla (ojalá y así fuera siempre).

    I <3 WP

    Responder
  31. Bueno, creo que algo ha fallado. Tal vez la diferencia horaria. No lo sé. Me inscribí en la Zona VIP para utilizar el descuento para el curso pero no me llega el mail de confirmación. Lo intenté por segunda vez y lo mismo. Supongo que sin eso no se puede acceder al bonus.
    Saludos
    Rodolfo

    Responder
    • Hola Rodolfo,

      Algunas veces puede haber un retraso en la confirmación o puede que el email de confirmación haya ido a parar una carpeta dentro de tu cuenta de correo o el spam.

      En cualquier caso, ya he visto tu alta (aunque está sin completar), así que te hemos enviado la info que necesitas directamente a tu correo.

      ¡Un saludo!
      Berto

      Responder
  32. Hola Berto.

    Hace dos años no sabía ni lo que era WordPress.
    Conseguí poner en marcha un par de webs que ya tienen varios cientos de miles de visitas

    Pero desde hace un año busco desesperadamente aprender lo que anuncias que estás dispuesto a enseñarnos.

    En esencia: como atacar una base de datos desde WordPress

    Las explicaciones en este post inicial me han parecido clarísimas y me anima mucho a seguir el aprendizaje.

    Enhorabuena y gracias

    Joaquín.

    Responder
    • Genial Joaquín, me alegro un montón y me encanta escuchar testimonios como éste 🙂

      Además, viendo tu ritmo de aprendizaje, el recorrido que ya has hecho y las ganas que veo que le pones, no te va a costar mucho hacerte con la materia si haces el curso.

      Seguro.

      ¡Un saludo!
      Berto

      Responder
  33. Hola, tengo una duda respecto a tocar el código de una plantilla. Es decir, si yo modifico a mi gusto un tema que compre, al hacer el creador alguna actualización podré actualizarme sin problema o pierdo lo que he modificado?.
    Otra duda es si necesitamos buena base para afrontar este curso. He visto este “Diploma Universitario en Desarrollador WordPress profesional” en Tutellus, podría servir de complemento?, aunque es de 2014, estará desactualizado?
    gracias

    Responder
    • Hola Manuel,

      En cuanto al tema de tocar plantillas, para evitar ese problema se han inventado en WordPress precisamente la idea de los temas hijos. Así el código tuyo que modifica al tema original (el tema padre) está totalmente separado del código original.

      La gran ventaja es que el padre se puede seguir actualizando sin que se machaque tu código. Lo máximo que puede ocurrir es que ante un cambio de diseño grande en el tema padre tengas que hacer algún ajuste en tu tema hijo. Pero incluso esto no suele ocurrir porque los propios diseñadores de los temas ya son conscientes de ese problema y suelen cuidar la compatibilidad de las futuras versiones.

      En mi caso, por ejemplo, ya ha habido cuatro o cinco actualizaciones de Genesis y no he tenido que tocar nada en mi tema hijo.

      En cuanto a la preparación, no te líes, no necesitas comprar nada previamente. El curso empieza completamente desde cero y no necesita de complementos, eso ha sido un principio fundamental al diseñarlo.

      ¡Un saludo!
      Berto

      Responder
  34. Hola Berto

    En lo referente a este curso no estoy preparada, pero mantenga me
    siempre informada de las innovaciones. Le agradezco su invitación.
    Atentamente

    Responder
    • Hola María,

      Si quieres estar informada es necesario que te des de alta en nuesta lista de correo, es ahí donde difundimos la novedades de cursos como éste, etc.

      ¡Un saludo!
      Berto

      Responder
  35. Me parece muy bueno aprender a programar en wordpress, lo único es que no se que tanto podamos entender php si aun no entendemos algoritmos y lógica de programación que es lo que principalmente me pasa, en el curso puedo aprender así no sepa nada sobre programación?

    Responder
    • Hola William,

      Claro, de eso se trata 🙂

      Además, creéme, en los proyectos web pocas veces te tienes que enfrentar a algoritmo complejos.

      ¡Un saludo!
      Berto

      Responder
  36. Gracias por compartir toda esa información, en verdad muy buena y se puede entender muy bien, sobre todo para personas como yo que estamos iniciando en este mundo.

    Saludos

    Responder
  37. ¡Hola Berto!

    Totalmente de acuerdo contigo. Aprender las nociones básicas de programación en WordPress debería ser fundamental para todo blogger. Cada cierto tiempo tienes que hacer pequeños cambios en el diseño del blog, y tampoco puedes permitirte tener que utilizar un plugin para cada nuevo cambio o contratar a un diseñador web.

    Yo también utilizo Genesis Framework y, tal vez como muchos bloggers habrán hecho, fui aprendiendo CSS a base de ir inspeccionando todo el diseño al completo, cambiando detalle a detalle y ver qué era lo que se modificaba en la web.

    Una vez que eras capaz de manejarlo, y sirviéndote de ayuda de un par de guía para añadir funcionalidades a archivos como el functions.php de tu theme de WordPress, te das cuenta como te abres a un mundo nuevo de personalización de este CMS.

    Todos sabemos de sobra que, cuando uno está empezando en el mundo del blogging y tiene pocos recursos, tiene que aprender de forma muy rápida muchas herramientas y conceptos. Y aquí, empezar a aprender diseño, estoy seguro que podría saturar a algunas personas.

    Pero creo que la inversión merece y mucho la pena. Además, estoy seguro que con cursos como el tuyo, todo irá mucho más rápido en el aprendizaje.

    ¡Un saludo!

    Responder
  38. O lo explicaste de una forma extremadamente clara o soy muy bueno captando las cosas. Creo que lo primero, entendí toda la información técnica 😀

    Mientras leía me preguntaba en qué se diferenciará el curso que mencionas de codewar, luego me di cuenta de que eran el mismo.

    Ojalá saquen una nueva edición en unos meses, ahora mismo ando corto de dinero 🙁

    Mientras tanto intentaré aprender una que otra cosa por cuenta propia, este artículo fue un excelente inicio, me dejó claras varias cosas que no entendía.

    Un saludo!

    PD. Hace tiempo buscaba la forma de reunir en un solo lugar todas las actualizaciones de los blogger que sigo, y aquí encontré información sobre feedly, me ha resultado muy útil. Gracias por compartir toda esa información.

    Responder
    • Hola Andrés,

      Pues no sabes cómo me alegro de este comentario 😀

      En este post hize un esfuerzo muy considerable porque, aparte de la promoción del curso al que hace referencia, hace tiempo que quería sensibilizar y acercar a los lectores no-técnicos de este blog al mundillo de la programación y su tremendo potencial si te dedicas a proyectos online.

      ¡Un saludo!
      Berto

      Responder

Deja un comentario