Tutorial WordPress (incluye consejos SEO)

Hoy en día tener una página web optimizada y funcional trae numerosas ventajas laborales y personales. Asimismo, se sabe que para crear un sitio con buen diseño y funciones que atraigan a los usuarios por lo general hay que invertir dinero.
Sin embargo, existen otras opciones. ¿Quieres aprender a crear una web en Wordpress de forma gratuita? Quédate leyendo, te mostraremos paso a paso como hacerlo de manera fácil y sin utilizar ningún plugin ni tema Premium.

Partimos de la base de una instalación inicial básica, sin plugins adicionales. Vamos a hacer un recorrido de todas las opciones que tenemos para personalizar y mejorar la web que viene por defecto.

1.- Personalizar apariencia del tema

Lo primero que vamos a hacer es dirigirnos a “apariencia” dentro del menú de configuraciones y hacer clic en “personalizar”

Una vez dentro, veremos algunas características que trae el tema actual. En la imagen de abajo se encuentra activo el tema “Twenty Seventeen” así mismo, a la derecha veremos la página de inicio y las secciones que el mismo tiene reconfiguradas. De igual forma, todas estas secciones se pueden cambiar y son páginas independientes que están incrustadas dentro de la página principal de inicio y podemos observar desde el tope los siguientes elementos:

• La imagen principal destacada
• Título con una pequeña descripción debajo
• El menú.

Justo debajo del menú, se visualiza la página incrustada y está dividida en dos partes. A la izquierda se encuentra el título de la página ya la derecha un cuadro de texto.

¿Por qué la sección está dividida en dos? En breve lo explicaremos. En el menú a la izquierda, seleccionaremos “Opciones del tema” una vez aquí, encontraremos una serie de ajustes de personalización para este.

Lo primero que vemos es que nos permite dividir el contenido en una y en dos columnas que es la opción preseleccionada. La verdad es que dejarlo en dos, nos facilitará el trabajo de maquetación ya que a partir de este punto, cada columna se puede subdividir en el editor de bloques.

No obstante, si preferimos dejarla en una sola columna también es válido y no es demasiado complicado, esto se deja a criterio propio.

De igual modo, al bajar veremos las secciones donde podremos elegir y editar las páginas queramos que aparezcan como lo vemos en el siguiente ejemplo al colocar “Blog” se muestra el extracto del mismo.

Ahora bien, sí regresamos a la página de personalización y le damos clic en “Ajustes de página de inicio” vamos a ver cómo queremos configurar la página que se muestra cuando alguien introduzca la URL de nuestro sitio web. Nos deja poner “tus últimas entradas” o “una página estática” de nuestra elección. En este caso podremos elegir algunas de las páginas que ya están creadas u otra que creemos de 0. Una vez aclarado esto, regresamos escritorio y seleccionaremos la opción en el menú “Páginas”

2.- Añadir página nueva

Dentro de la barra de páginas, abriremos una nueva pestaña dando clic en “Añadir nueva” (esto con el fin de hacer más fácil el proceso de creación realizando modificaciones paralelas). Comencemos a crear una página nueva y nos aparecerá el editor de bloques.

Procedamos a añadir un título y un poco de contenido. Le daremos clic en “Vista previa” luego a “escritorio” y seguidamente seleccionamos “previsualizar en nueva pestaña”

A continuación, se nos abrirá la página que estamos tratando e incluirá como lo hemos visto anteriormente la imagen de cabecera, título principal, menú, la sección de la página dividida en título que hemos elegido y cuadro de texto que hemos colocado.

Ahora bien, añadiremos más contenido, volvemos al editor de bloques y seleccionamos en la parte superior derecha el símbolo “+” y le damos clic a “párrafo” (copiamos el mismo contenido anterior no más para mostrarlo como ejemplo e iremos agregando más elementos como el “encabezado” e “imágenes”

Hablemos un poco de la jerarquización de nuestra página y la importancia de los encabezados. Estos hacen a las subdivisiones (subtítulos) que se derivan del título principal (H1) y de este salen los H2, H3, H4 etc.

Veamos un ejemplo:

Supongamos que tenemos una página de vehículos. Nuestra esquematización podría ser algo así:
• H1: Vehículos
• H2: Coches
• H3: Coches familiares, Coches todo terreno

Este sistema nos ayudará a guiar visualmente al lector y nos permitirá explicar mejor el contenido que queremos mostrar, esto será útil para mejorar el SEO.

Por lo general, los encabezados varían de tamaño pudiendo ser el H1 más grande que el H2 y así sucesivamente. Sin embargo, dentro de Wordpress esto se puede modificar de acuerdo al título que queramos sobresaltar.

Procedamos a agregar una imagen, nos va a permitir subirla desde el ordenador o hacerlo usando la biblioteca de medios en este caso, esta la opción que hemos elegido.

Una vez seleccionada nuestra imagen, en la derecha nos aparecerán las características de la misma. Entre ellas el título, texto alternativo y leyenda (que tenga que ver con la imagen) y esto contribuirá a la organización, además, afectará en los motores de búsqueda para ayudarnos a posicionar el contenido.

Por otro lado, en la parte superior derecha nos encontramos con el tamaño en pixeles de la imagen y lo que pesa. Este dato es importante porque tiene que ver con la experiencia del usuario y con lo que Google predice que puede pasar si no lo hacemos correctamente.

Recordemos que para una pantalla full HD la imagen máxima que podemos tener sería de 1920×1280 pixeles esto quiere decir que como máximo podríamos colocar una imagen de 1920 si quisiéramos mostrarla al ancho completo de la página. Por lo que por ejemplo una imagen de 2000 es superior a ello.

Por otro lado, sí cargamos una imagen superior a 1280 pixeles, estaría fuera de lugar porque el navegador la mostrará en el tamaño correcto pero con una calidad superior que tardará más en cargarse y esto puede hacer que el usuario se canse de esperar y cambie de sitio.

Podemos solucionar este problema haciendo clic a la opción “editar imagen” continuamente seleccionamos “recortar” y ajustar el tamaño a nuestro parecer. Sin embargo, a la derecha nos muestra directamente las dimensiones que también podremos modificar de acuerdo a la deseada.

Una vez explicado esto, volvamos a la edición de la página, seleccionaremos de nuevo vista previa y como vemos esto ya empieza a tener forma con el título a la izquierda y a la derecha nuestro contenido, el encabezado y la imagen previamente añadida.

Sí queremos cambiar el patrón podemos hacerlo también, agregándolo dentro de la opción “+” seleccionamos alguna de nuestra preferencia e igualmente no permitirá editar el texto, copiar, pegar, agrandar el tamaño, etc.

Asimismo, al visualizarlo dentro de vista previa nos aparecerá la opción de mirarlo en versiones escritorio, móvil y tableta. No obstante también podremos ajustar el tamaño de la pestaña y hacerlo por nosotros mismos.

Ahora bien, procedamos a seleccionar dentro de nuestra página la opción de “publicar” para guardar los cambios en caso de que aun sea un borrador podemos hacerlo de forma privada.

3.- Configuración de menú

Al volver al menú principal de “Páginas” podemos ver que ya se encuentra dentro la que hemos creado recién. Vamos a modificarla para que aparezca en nuestro menú. Para ello buscamos “Apariencia” y haremos clic en “Menú”

Una vez aquí nos encontraremos con las páginas principales, podemos eliminar una de ellas seleccionándola y dando clic a “Eliminar” y agregando al menú en la parte izquierda la página nueva creada recientemente y la posicionaremos delante de “contacto” y guardamos el menú.

Procedemos a abrir la página nueva, seleccionamos la vista previa de nuevo y como verás, en el menú superior la podemos encontrar justo delante de contacto como lo habíamos descrito hace un momento.

Ahora supongamos que queremos introducir la sección de contactos dentro de la misma. Volveremos a menú, sostendremos la barra de “Contacto” y la desplazaremos ligeramente a la derecha para utilizarlo como subelemento.

Guardamos el menú y volvemos a vista previa y veremos que ya no aparece “Contacto” en el menú principal superior pero si seleccionamos la “página nueva” aparecerá el elemento justo debajo.

Así de fácil resulta modificar el menú, ahora vamos a colocar la página que acabamos de crear como la “Landing page” es decir, la página de inicio con la que el usuario se encontrará después de ingresar al URL de nuestro sitio web.

Para ello volveremos al menú de “Apariencia” una vez dentro de la opción de personalizar seleccionaremos “Ajustes de la página de inicio” y lo que haremos será posicionarnos en “Página de inicio”, elegiremos la que hemos creado anteriormente, publicamos para que se guarde y listo.

4.- Administración de páginas

De nuevo dentro del menú de páginas, supongamos que queremos eliminar algunas de ellas, en este caso hemos seleccionado la página de Ejemplo y la de Blog. Así que vamos a moverlas a la papelera.

Cabe destacar que de momento solo los hemos archivado en la papelera de hecho, se pueden restaurar. Sí lo que queremos es eliminarlo de forma permanente, tendremos que ir directo a la opción de “Papelera” seguidamente “Acciones de bloque” y eliminar.

Hemos visto un poco de como configurar, las páginas, los menús y el tema. Ahora veamos uno por uno los elementos que tenemos en “Ajustes”.

5.- Ajustes

Ajustes Generales

Aquí nos aparecen ciertas configuraciones como el título del sitio (se mostrará en Google) que podremos editarlo en función de lo que queramos que aparezca en las búsquedas y la descripción corta que no se mostrará pero si va a parecer en la página de nuestra web.

En cuanto a la dirección de URL es importante no cambiarla a menos que sepamos lo que estamos haciendo para no ocasionar problemas para acceder a nuestra web.

Al bajar nos encontraremos con la zona horaria, formato de fecha y formato de hora que aparecerán en nuestras entradas. En caso de no queramos mostrar la fecha y la hora solo debemos irnos a “Personalizar” y borramos el campo y le damos clic en “Guardar cambios”

Ajustes de Escritura

Dentro de esta opción nos encontramos con la sección llamada “Publicar por correo electrónico” aquí debemos tener mucho cuidado ya que la misma nos permite crear entradas mediante un email, el correo debe estar registrado dentro de Wordpress y la contraseña debe coincidir. Sí alguien no autorizado accede a este punto podría fastidiar nuestro proyecto.

Ajustes de Lectura

Aquí también podremos configurar y elegir la página que se abrirá cuando ingresemos a nuestro URL en este caso la página de inicio es la que creamos al principio del tutorial, una vez modificado desde este punto solo debemos “Guardar cambios”

Ajustes de Comentarios

Es importante que tomemos en cuenta los comentarios que algunos usuarios dejan para enlazar su propia página web, lo que puede resultar bastante molesto. Para que evitar esto iremos a la parte de que dice “moderación de comentarios”

En esta parte configuran los comentarios en espera que contienen más de “2” enlaces como número predeterminado, lo borramos y colocamos “0” enlaces seguido de la opción “Guardar cambios”.

Ajustes de Medios

Aquí podremos editar lo que hemos hablado acerca del tamaño y la calidad de las imágenes. Recordemos que cuando subimos una imagen a nuestro sitio, Wordpress guarda automáticamente al menos tres copias de la misma (miniatura, mediana y grande) una vez terminada la configuración solo debemos Guardar cambios.

Ajustes de los enlaces permanentes

Aquí se configura la descripción que va justo al lado del título dentro del URL de la web y lo más recomendable es seleccionar directamente “Nombre de la entrada” para que el usuario pueda saber en qué parte de nuestro sitio está posicionado, esto contribuirá a los motores de búsqueda.

6.- Entradas

Vamos a enfocarnos brevemente en las entradas y como crear una. Primeramente nos posicionamos en el menú dentro de “Entradas” y seleccionaremos la opción “Añadir nueva” Seguidamente se abrirá una pestaña muy parecida a la creación de páginas, procederemos a agregar algún título de ejemplo y un poco de texto.

Una vez hecho esto, iremos a “Vista previa” y se abrirá una página bastante parecida también a la previsualización de páginas.

Igualmente, recordemos que la principal diferencia entre ambas es que las páginas están pensadas para dar información generalizada mientras que las entradas son contenidos específicos que además poseen taxonomías organizativas como las características y etiquetas.

Por consiguiente, si queremos agregar nuestra entrada nueva al menú principal debemos publicarla primero para que quede guardada y nos iremos a “Apariencias” y luego hacemos clic en Menú.

En la parte izquierda de la pantalla seleccionaremos la opción de “Entradas” y buscaremos la que hemos creado recién y le damos a “añadir al menú”. En este caso hemos puesto nuestra entrada como subelemento de la página anterior y le dimos clic a la opción de “Guardar menú”

Por último, vayamos a la vista previa de la página y ahora podremos ver que nuestra entrada aparece debajo de la opción en el menú.

Como verás es posible modificar de manera funcional y creativa nuestra página web sin necesidad de acceder a elementos pagos, este sistema tiene mucho potencial y eso explica porque es una de las plataforma más utilizadas por diseñadores web. Si te ha gustado el contenido te invitamos a mirar otros tutoriales.

Puedes ampliar información en estos enlaces:
1. Añade datos estructurados Schema
2. Importancia de la velocidad de carga de la web
3. Crea un WordPress gratuito
4. Optimiza tu WordPress
5. Comprueba la velocidad de tu WordPress