WordPress y Conocimientos de Programación

He estado trabajando con WordPress por algunos años, y he leído muchas veces en diversos artículos la frase que dice que para trabajar con wordpress “No se requiere conocimientos de programación”.

Y en cierto punto es verdad, no necesitas conocimientos de programación. Si lo que tienes es un simple blog, un sitio pequeño para tu negocio, empresa, o incluso una red de sitios, puede que todo llegue a funcionar bien sin problema alguno. Las características y opciones de personalización que ofrecen la mayoría de los plugins y temas de hoy en día permiten crear muchas cosas bastante impresionantes usando solo el panel de control de los mismos.

Entonces, ¿cuál es el truco?. Bueno, la verdad es que no hay truco. Lo que hay es un conjunto de funciones, filtros y acciones que pueden ser utilizadas dentro de un tema o un plugin.

A pesar de trabajar con WordPress para crear un sitio, un blog, etc, sin conocimientos de programación es totalmente viable pero en muchos de los casos estarás limitado por las características y opciones integradas en los temas y plugins que utilizas. ¿Pero qué pasa cuando necesitas o quieres alguna funcionalidad que los plugins no ofrecen? O ¿Algunas cosas extras de diseño que tu tema no ofrece?

Bueno, si no tienes conocimientos sobre programación puedes optar por una de estas tres opciones:

  1. Vivir con las cosas como están, y seguir soñando: Esta opción es fácil y no requiere esfuerzo. Esto tiende a generar decepción y frustración.
  2. Contratar a uno o varios desarrolladores para crear lo que deseas: Dependiendo del grado de personalización que quieres que se haga en tu proyecto, esto puede llevar rápidamente tu saldo de PayPal al mismo nivel que tus conocimientos de programación osea a cero. Ya que dependiendo de lo complejo que sea se mide el costo.
  3. Aprender a crear las cosas que deseas: Esto conlleva mucho esfuerzo pero hace que tu sitio web funcione de la manera que lo quieres.

Entonces, ¿Qué es lo que se necesita aprender para poder personalizar las cosas a mi manera?

Los 3 Pilares

Cuando comienzas a personalizar las cosas de tu sitio usando WordPress, descubrirás que hay 3 tipos de lenguajes que tienes que aprender, los cuales son:

  • HTML (HyperText Markup Language)
  • CSS (Cascading Style Sheets)
  • PHP (Hypertext Preprocessor)

Hay otros lenguajes de programación que se utilizan en casi todos los temas de WordPress y en los plugins como JavaScript, la librería jQuery, etc. Pero para aprender lo básico no tienes que indagar sobre ello por ahora, te sorprenderás de las cosas increíbles que se pueden realizar en tu sitio o blog con solo saber lo básico.

Para comenzar a aprender, vamos a echar un vistazo a cada uno de los lenguajes antes mencionados.

HTML (HyperText Markup Language)

HTML es un lenguaje fácil de aprender y, como no se tiene conocimientos de programación, se puede considerar el más importante. ¿Por qué? Porque ese es el lenguaje que realmente muestra el contenido de las páginas web. Para decirlo deforma mas simple: HTML es sólo una colección de etiquetas de identificación utilizadas para envolver el contenido de los contenedores y mostrarlo en pantalla de una manera particular.

HTML indica al navegador lo que se muestra en pantalla. Por ejemplo, para decirle al navegador que muestre el contenido de los párrafos, cada párrafo debe comenzar con una etiqueta <p> y terminar con </p>. La barra invertida en la etiqueta indica el cierre de la misma y esta le dice al navegador que “el párrafo termina ahí”.

Este es un ejemplo de como luce un layout o estructura de un tema de wordpress con la semántica necesaria de HTML, no necesariamente tiene que ser exacta a esta:

Wordpress Estructura

Estructura de un Tema

Y el HTML sería algo pareceido a esto:

<body>
  <div class="wrapper">
    <header>
      <!-- logo, navegacion, etc -->
    </header>
    <section class="content">
      <article>
        <h2>Titlo</h2>
        <p>Contenido del Post</p>
      </artile>
      <!-- etc -->
    </section>
    <aside class=""sidebar>
      <!-- widgets -->
    </aside>
    <footer>
      <!-- contenido del footer -->
    </footer>
  </div>
</body>

Eso es solo un documento que al ser renderizado por el navegador no se muestran las etiquetas sino que están son procesadas por el mismo para mostrarse en pantalla con un estilo especifico en cada una. Para poder darle estilos adicionales a las etiquetas, a las columnas, cambiar el color de fondo, la tipografía, etc, ahí es donde entra CSS.

CSS (Cascading Style Sheets)

Hasta ahora hemos visto que el HTML se usa para decirle al navegador qué tipo de contenido se mostrará en la pantalla. CSS es el lenguaje usado para decirle al navegador cómo mostrar ese contenido.

En el código HTML, el código para el .sidebar está escrito debajo de .content. Sin embargo, en la disposición real que se muestra en la pantalla, debería mostrarse a la derecha del contenido:

.wrapper { float: left; margin: auto; width: 960px; }
.content { float: left; margin: 20px; width: 600px; }
.sidebar { float: left; margin: 20px; width: 280px; }

Una rápida explicación de las propiedades:

Float: es una regla de estilo que le dice al navegador cómo alinear un elemento con respecto a su contenedor principal. Así float: left; le dice al navegador que alinie el elemento HTML hacia el lado izquierdo de su padre. Si 2 o más elementos dentro del mismo contenedor flotan, se alinearán lado a lado si sus dimensiones lo permiten.

Margin: define el espacio que rodea el elemento. Observe el margin: auto; aplicado a .wrapper auto define el espacio del lado izquierdo y derecho del elemento, en este caso centra el elemento sin importar el tamaño de la ventana del navegador.

Width: creo que esta muy claro.

Para hacer que el .sidebar quede en el lado derecho del contenido, la suma de los anchos y los márgenes del contenido y del sidebar debe ser menor que o igual a la anchura de .wrapper.

  • .content: 20px + 600px + 20px = 640px
  • .sidebar: 20px + 280px + 20px = 320px
  • .wrapper: 960px

En WordPress tienes que identificar cuáles son los elementos HTML a los cuales tienes que aplicarles reglas de estilo para que sean personalizados. Para más ejemplos visita la página de wordpress que trata sobre el tema Codex.

PHP (Hypertext Pre-processor)

Ahora vamos a ver por qué es posible que desee incursionar un poco en PHP. Sabemos que HTML y CSS son necesarios para decirle al navegador qué tipo de contenido va a visualizar y cómo mostrarlo. PHP funciona totalmente en segundo plano para hacer que el contenido sea dinámico, usando condiciones y variables que se definen en las funciones.

PHP puede ser usado para obtener contenido de una variedad de fuentes, incluyendo otros sitios web, RSS, etc, pero, al trabajar con WordPress, su uso principal está en la consulta de la base de datos. Las funciones pueden ser escritas para buscar y mostrar información.

Por lo tanto, contrariamente a las secciones anteriores de HTML y CSS, no voy a perder el tiempo de nadie dando ejemplos de código reales aquí. En su lugar, voy a dejar algunas fuentes de lecturas para que sigan adelante.

Otros Sitios para aprender HTML, CSS y PHP

  • HTMLdog uno de los mejores sitios de tutoriales de HTML y CSS.
  • HTML.net.
  • W3Schools tiene un editor que te permite experimentar con cosas y ver como queda.
  • HTML5Doctor buena documentacion de html5.
  • Snippets una sección en esta misma web donde publico códigos funcionales para WordPress y también para PHP, HTML y CSS.
  • CSS-Tricks uno de los mejores sitios para aprender trucos sobre CSS, JavaScript, HTML, WordPress y más.
  • WPFunction sitio dedicado a compartir funciones de wordpress.
Recomendado
  • Madre mía, esto es exactamente lo que estaba buscando! Siempre me siento completamente de alas cortadas cuando me pongo a bichear las plantillas para modificarlas a mi gusto y, normalmente, consigo lo que quería hacer, pero de una forma lenta y con la ley de “probemos a ver si cambiando este número lo consigo”, así que imagina las ganas que tengo de aprender! Muchísimas gracias por el post!

    • Que bien que el post te haya ayudado :), gracias por el comentario.

  • Jleo

    muchas Gracias!!! muy buena tu explicación me sacaste de algunas dudas….. a ver que tal me sale lo de la programación jejej Saludos

    • Si aun no te inicias bien en la programación te recomiendo los cursos de CodeCademy, son gratis y se aprende al vuelo 🙂

  • Francis

    HTML no es un lenguaje de programación, no tiene nada que ver con procedimientos logicos.

    • Gracias por la corrección Francis.

    • jesus palenzuela

      Aunque no es un lenguaje de programación, si es un lenguaje de maquetado al igual que CSS, aunque ambos tienen funciones diferentes.