Contacto
Contacto
38 Tutorial WordPress (incluye consejos SEO) copia

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 鈥淭wenty 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 鈥淥pciones 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 鈥淏log鈥 se muestra el extracto del mismo.

Ahora bien, s铆 regresamos a la p谩gina de personalizaci贸n y le damos clic en 鈥淎justes 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煤 鈥淧谩ginas鈥

2.- A帽adir p谩gina nueva

Dentro de la barra de p谩ginas, abriremos una nueva pesta帽a dando clic en 鈥淎帽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 鈥淰ista previa鈥 luego a 鈥渆scritorio鈥 y seguidamente seleccionamos 鈥減revisualizar 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 鈥渆ditar imagen鈥 continuamente seleccionamos 鈥渞ecortar鈥 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 鈥淎pariencia鈥 y haremos clic en 鈥淢en煤鈥

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 鈥渃ontacto鈥 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 鈥淐ontacto鈥 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 鈥減谩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 鈥淟anding 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 鈥淎pariencia鈥 una vez dentro de la opci贸n de personalizar seleccionaremos 鈥淎justes de la p谩gina de inicio鈥 y lo que haremos ser谩 posicionarnos en 鈥淧谩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 鈥淎cciones 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 鈥淎justes鈥.

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 鈥淧ersonalizar鈥 y borramos el campo y le damos clic en 鈥淕uardar cambios鈥

Ajustes de Escritura

Dentro de esta opci贸n nos encontramos con la secci贸n llamada 鈥淧ublicar 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 鈥淕uardar 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 鈥渕oderaci贸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 鈥淕uardar 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 鈥淣ombre 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 鈥淎帽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 鈥淰ista 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 鈥渁帽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 鈥淕uardar 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

Llevas un rato en esta p谩gina.
隆Ahorra tiempo pregunt谩ndonos directamente!

Estaremos encantados de darte informaci贸n sin ning煤n compromiso

O escr铆benos directamente