Son varios los artículos que dediqué en este blog para hablar de programación, y como buen amante de WordPress creo que ya era hora de hacer un pequeño resumen dejando en claro que necesitas saber de programación para usar WordPress. Como siempre explicaré todo para que pueda entenderlo hasta el más novato, dejándote además algunos enlaces útiles para que profundices en el tema.
Más de una persona puede estar echándose las manos a la cabeza con solo leer el título, y es que se preguntará, ¿acaso WordPress no es un software que me permite crear webs sin tocar una línea de código?. Eso es una verdad a medias, y te lo entenderás leyendo el post.
1. ¿Es realmente necesario saber programar en WordPress?
Afirmar que WordPress permite crear sitios webs sin tocar ningún código es cierto, pero como veremos más adelante existen muchas ocaciones en las que saber algo de programación nos viene más que bien.
Debo recalcar del párrafo anterior la sentencia «saber algo de programación«. Saber algo de programación para manejarte en WordPress no es saber programar, un programador es capaz de montar una web desde cero a base de códigos, sin necesidad de apoyarse en un CMS como WordPress.
Así que no te asustes, para hacer uso de WordPress no tendrás que aprender cómo programar un sitio web desde cero, pero saber manejar algunos aspectos básicos será de gran ayuda.
2. Que necesitas saber de programación para usar WordPress
Lo primero es lo primero, necesitas saber que lenguajes de programación usarás en WordPress:
- HTML: se define como un lenguaje de marcado con el cual le das la estructura a una pagina web.
- CSS: es un lenguaje de estilo que define la presentación de un documento html, pudiendo dar a cada elemento el color, tamaño, alineación, margene, etc que uno quiera.
- PHP: es un lenguaje de programación que se escribe dentro del código HTML y se utiliza para la generación de páginas web de forma dinámica.
Cómo mi idea con este post es orientar al novato sobre que tiene que aprender, sin atorarlo de información, definí de manera muy sintética cada lenguaje. Para más información puedes consultar los siguientes artículos:
A continuación y para meternos de lleno en la parte práctica del post veremos varios ejemplos sobre dónde y cómo debes usar códigos HTML, CSS o PHP mientras montas una web en WordPress.
3. ¿Cómo y donde usarás códigos de programación en WordPress?
Trataré de abarcar aquí los casos más comunes en los que un usuario de WordPress se las verá con un código. Muchas son las ocasiones que podrás evitar el contacto directo con algún código haciendo uso de un plugin, pero personalmente y dentro de lo posible prefiero prescindir de de los plugins.
3.1 Nuevos elementos HTML en páginas o artículos de WordPress
El nuevo editor de texto Gutemberg brinda un amplio abanico de opciones para ser insertadas en nuestros artículos o páginas, entre ellos galerías de imágenes, listas, citas, botones, widgets, etc.
Pero ¿que pasa si no son suficientes todos esos elementos?. Es allí donde necesitarás hacer uso de un bloque HTML, donde escribirás los códigos necesarios para crear el elemento que necesitas.
Por ejemlpo, supongamos que necesitaríamos insertar dentro de este post el juego de Mario Bross (todos amamos a Mario 😉 ). Para ello buscaríamos un código HTML que nos permita hacerlo y luego lo insertariamos en un bloque HTML (te dejo aquí el código por si te interesa).
<center><table style="margin:0 0 10px 0; width:500px; background:#fff; border:1px solid #F3F3F3;" cellspacing="0" cellpadding="0"><tr><td style="font-family:verdana; font-size:11px; color:#000; padding:5px 5px;"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="640" height="480"><param name="movie" value="https://www.games68.com/games/jeux-flash-2904.swf"><param name="quality" value="high"></param><param name="menu" value="false"></param><embed src="https://www.games68.com/games/jeux-flash-2904.swf" width="640" height="480" quality="high" pluginspage="https://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" menu="false" ></embed></object></td></tr><tr><td style="font-family:verdana; font-size:11px; padding:5px 10px; border-top:1px solid #F3F3F3;" align="center"><strong><a href="https://www.games68.com/games.php?id=6629" target="_blank" rel="noopener noreferrer">Super Mario flash</a></strong> | <a href="http://www.games68.com">juegos online gratuito</a> con <a href="https://www.games68.com" title="Juegos con Games68.com">Games68.com</a></td></tr></table></center>Una vez insertado dicho código tendríamos el siguiente resultado (puedes tener problemas para ver el juego si estás navegando desde un móvil):
| Super Mario flash | juegos online gratuito con Games68.com |
Como habrás visto no fue necesario que escribamos el código para poner a funcionar el juego de Mario, pero si debes saber de que manera colocarlo. Como vimos con este ejemplo es posible insertar cualquier elemento que necesites.
3.2 Edición de elementos HTML existentes
Algo tan o más común que insertar un elemento nuevo en HTML es la necesidad de edicion de uno existente. Para ello debes hacer clic en el bloque, eso hará aparecer un menú en su parte superior, busca los tres puntitos que están en la parte derecha y haz clic, y luego haz clic en editar como HTML.
Esto te mostrará el elemento escrito en HTML y podrás hacer todas las ediciones necesarias. Un ejemplo muy frecuente es la edicion de los atributos en un enlace, por ejemplo si necesitas hacer que un link sea nofollow debes transformar a HTML y luego colocar rel=»nofollow» dentro del código.
Nuevamente no fue necesario escribir de cero ningún código, pero si debes entender como funciona para realizar la edición de manera correcta.
3.3 Edición de códigos CSS de tu plantilla
Si te dije que insertar y/o editar códigos HTML en WordPress es algo común, hacerlo en CSS es aún todavía más usado. Dependiendo del tema que uses en tu WordPress las posibilidades de editarlo pueden variar, por lo que aprender a manejar el CSS te da todas las libertades para lograr infinitas ediciones.
En primer lugar, y antes de editar cualquier elemento, lo importante es conocer cual es la etiqueta, atributo, clase, ID, o pseudo-clase que esta dando formato al elemento al cual queremos cambiar. Una buena manera es usar el inspector de elementos del navegador Google Chrome. Para ello, y teniendo la web abierta con Google Chrome, debes hacer clic derecho en el elemento y luego seleccionar inspeccionar. Eso te abrirá un panel como el que se ve en la siguiente imagen.
Si te detienes un momento en la imagen puedes ver que del lado derecho te muestra el HTML y bajo este el CSS. Por lo si quisiéramos hacer cambios en el título de un widget, gracias al inspector de elementos podemos ver que esta bajo las clases sidebar, widget y widget-title. Con ese dato nos podemos ir al editor CSS de WordPress y añadir los cambios que queramos.
Hay varias maneras de ingresar al editor de CSS en WordPress, personalmente la que más uso es a partir del editor de temas (menú izquierdo de WordPress —> Apariencia —> Editor de temas). Así y todo debo reconocer que resulta muy útil realizar las ediciones a partir del personalizador ( menú izquierdo de WordPress —> Apariencia —> Personalizar), esto por que muestra los cambios en tiempo real.
Para el caso editaré los títulos de los widgets por medio del personalizador de temas. Como vimos con el inspector de Google Chrome estos títulos están bajo las clases sidebar, widget y widget-title, por lo que aplicaré los cambios para las tres.
Si analizas el código de la imagen verás que cambié el color de fondo (ahora es azul), lleve el texto a una posición centrada, le coloqué un formato negrita y un color blanco. Puedes realizar las ediciones tranquilo y ver como se van dando los cambios sin tener miedo, dado que hasta que no guardes los cambios no se publicarán.
Así como editamos un simple título de widget puedes hacerlo con cualquier elemento de la web.
3.4 Creación de nuevos elementos CSS
Con CSS no solo puedes editar elementos pre-existentes, sino que también puedes crear nuevos elementos (tablas, recuadros, botones, etc), para luego ser usados en tus post o páginas.
Volviendo al panel de edición de temas debes tener cuidado en elegir trabajar sobre el tema hijo. Luego en la barra lateral derecha haz clic en style.css (es el nombre de la hojas de estilos css).
Supongo que si estas en este artículo no sabes crear un elemento en CSS por tu cuenta, pero no te hagas problema, seguro hay un programador que ya lo creo por ti y lo colgó en alguna web o foro, es cuestión de googlearlo. Cuando ya tengas el código que buscas debes colocarlo en el editor de texto que está a la izquierda de la última imagen y guardar los cambios.
Por ejemplo el siguiente recuadro amarillo es creado a partir de un código CSS, bajo la clase content-box-yellow.
El código HTML que ingresé es el siguiente:
<div class="content-box-yellow">ESTO ES UN EJEMPLO DEL RECUADRO AMARILLO CREADO CON CSS</div>Recuerda que a la hora de colocar el código en tus entradas o páginas usarás HTML, luego es el CSS el encargado de darle estilo al mismo.
3.5 Insertar códigos en el header.php
Saber que existe el archivo header.php es algo muy importante si usarás WordPress, tarde o temprano deberás insertar algún código en él. Eso puedes hacerlo ingresando nuevamente al editor de temas (menú izquierdo de WordPress —> Apariencia —> Editor de temas), pero en este caso debes seccionar editar el archivo header.php.
Ejemplos muy frecuentes es insertar los códigos de Google Analytics o Google Adsense, de este último es el código que muestro en la siguiente imagen.
El archivo header.php esta escrito en php y en él están los códigos con las funcionalidades del encabezado de la web. En la plantilla también encontrarás otros archivos php como son:
- functions.php: este sin dudas es el más reconocido. Viene a ser una biblioteca personal de funciones,con la que es fácil cambiar o alterar el comportamiento que trae por defecto la plantilla. Si necesitas funciones nuevas para tu web este seguramente será el lugar donde debas insertarla.
- footer.php: encargado del pie del sitio web.
- coments.php: como te lo puedes imaginar aquí están las funciones de los comentarios.
- sidebar.php: encargado del sidebar.
Como los anteriores hay muchos archivos más dentro del tema, los cuales pueden variar de nombre de plantilla a plantilla. Ten cuidado cuando trabajas sobre estos archivos, como manejan funciones de la web cualquier error puede romper tu sitio, haz un respaldo antes de aplicar cambios importantes.
4. Conclusión
Para crear o editar sitios webs en WordPress es suficiente con saber diferenciar los lenguajes de programación HTML, CSS, PHP, y donde debemos insertar cada línea de código. Así y todo cuanto más sepamos mayor será la libertad que tengamos para lograr diseños únicos.
Espero haber sido lo suficientemente claro en el post, en caso contrario puedes dejar tus dudas en la caja de comentarios. 😉