WordPress Tutorial Rápido: Diseñar un Blog en WordPress en Menos de 3 Horas

WordPress Tutorial: Cómo Diseñar tu Blog con WordPress en Menos de Tres Horas

Este WordPress Tutorial forma parte del tutorial SEO que he creado para que empieces con buen pie tu diseño web y negocio online. Sin embargo, he querido separarlo por motivos técnicos simplemente. Creo que un WordPress Tutorial estará mejor separado que formando parte de un tutorial SEO. También puedes ver un adelanto del tutorial SEO en este otro post llamado SEO check, que es como un resumen de aquél. (El tutorial SEO tiene más de 14.000 palabras, 17.000 si contamos con que este WordPress Tutorial es parte de él. El SEO check tiene unas 3.500).

Si vas a empezar el diseño web de tu negocio online desde cero o si quieres mejorar de forma dramática el rendimiento de la web que ya tienes diseñada en WordPress, te recomiendo que comiences por el principio, es decir, por el Tutorial de Diseño Web. En él te explico cómo diseñar una web con fundamento desde el punto de vista de conceptos, que incluyen, no solamente el estilo y la apariencia, sino la estructura y la usabilidad, por mencionar solamente dos. A continuación te recomiendo que sigas por el tutorial SEO, o por el SEO check, más resumido pero evidentemente, no tan detallado. También creo que te irá muy bien ver el post sobre cómo diseñar una web en WordPress, antes de entrar en detalle con este artículo.

Si solamente estás interesado en los ajustes y configuración idónea de tu web (teniendo en cuenta que es NO ES diseño web), continúa aquí. En fin, es cosa tuya. Aquí tienes el índice de contenidos:

1. Configura WordPress en Ajustes
   • Ajustes Generales
   • Ajustes de Escritura
   • Ajustes de Lectura
   • Enlaces Permanentes
2. El logo de tu negocio online y la cabecera en WordPress
3. Añade el tema de WordPress que más se ajuste a tus gustos o necesidades
4. Las imágenes en WordPress
5. Añade tus páginas estáticas
6. Crea el menú principal de WordPress
7. Configura tu página de Inicio
8. Otra cosa importante cuando crees la web con blog incluido

WordPress Tutorial para empezar bien tu blog o web

Como ves en el título, indico «empezar bien», y no «diseñar bien», tu web o blog. El diseño web tiene muchas implicaciones que aquí no voy a mencionar. Este es un post mucho más técnico que la mayoría.

Ya hemos detallado en el tutorial SEO las fases anteriores y cómo instalar WordPress así que aquí empezaremos el WordPress Tutorial directamente por la configuración básica de tu web o blog, sin entrar en algunos detalles que dependen totalmente de tu diseño web y tu propia personalización.

Configura WordPress en Ajustes

La configuración de WordPress es algo más complicada que la instalación y además hay que personalizarla individualmente, teniendo en cuenta el diseño web, por lo que no puedo hacerlo por ti mediante este WordPress Tutorial.

Lo que sí puedo hacer en este WordPress Tutorial es indicarte las cosas más básicas y a la vez fundamentales de la configuración que tendrás que cambiar para que tu web esté mejor encaminada para un buen diseño web y su posicionamiento natural. También ten en cuenta que cada tema tiene sus propios ajustes, por lo que me voy a referir a los cambios que se pueden llevar a cabo desde el panel de control o escritorio de WordPress, no de cada tema.

Entra en Ajustes desde tu panel de control o escritorio de WordPress.

1. Ajustes Generales

Hay partes de los ajustes generales que no necesitan explicación.

Lo importante de aquí es que indiques el título del sitio y la descripción corta. Ten en cuenta que, en dependencia del tema que utilices, estos dos elementos puede que aparezcan después en la vista pública, o puede que no. Generalmente sí aparecen.

Estos dos elementos son súper importantes de cara al posicionamiento orgánico, de modo que tienes que pensar bien las palabras que pones. Deberían ser palabras clave y no necesariamente tienen que coincidir con el nombre de tu web o negocio. Pueden estar relacionadas con lo que haces (de forma muy corta y descriptiva). Por ejemplo, en mi caso, el título de mi web NO ES Coach2Coach, sino Web Coaching. Es más probable que alguien busque en Google “Web Coaching” que “Coach2Coach”.

La descripción corta actúa o puede actuar como una especie de slogan, y dependiendo del tema, tendrás la opción de que se muestre o no.

Del resto de los campos en Ajustes Generales, cambia solamente los que sepas bien lo que haces, como la zona horaria o el formato de fecha.

2. Ajustes de Escritura

Deja todo como está. Lo único que deberás hacer aquí es cambiar más adelante la Categoría por Defecto, cuando hayas añadido las categorías. No olvides eliminar la que viene por defecto en Categorías y volver aquí.

3. Ajustes de Lectura

Aquí depende de si prefieres que la página de Inicio sea tu página de entradas del blog o no. Personalmente, si quieres una web con aspecto de web, te recomiendo que entonces diseñes una página de Inicio que NO SEA la de entradas, o sea, tu blog. En ese caso,

• Crea una página llamada Blog (o Noticias, News, Entradas o como quieras llamar a tu página del blog).
• Crea una página de Inicio con el nombre que prefieras. La mía, por ejemplo, se llama Web Coaching, no Inicio ni Home. Esto es otro punto más para el SEO.
• Entra en Ajustes de Lectura.
• En la sección “Página frontal muestra”, escoge la opción “Una página estática (seleccionar abajo)”.
• Selecciona la página de Inicio que, recuerda, llevará el nombre que le hayas dado.
• En “Página de Entradas”, selecciona la página de Blog, que llevará también el nombre que tú le hayas dado.
• Guarda los cambios

En el resto de los campos de Ajustes de Lectura, yo recomiendo poner 5, 5, y mostrar resumen, no texto completo.

4. Enlaces permanentes

(Me he saltado algunos ajustes porque no tienen mucha importancia de momento).

Los ajustes de los enlaces permanentes son súper importantes. Escoge la penúltima opción, “Nombre Entrada”.

El logo de tu negocio online y la cabecera en WordPress

Algunos temas de WordPress te permiten subir un logo y muchos más ajustes, como la cabecera, el pie de página, las barras laterales…

Si el tema que elijas muestra la Descripción Corta, y tu logo ya lleva un slogan, entonces no lo repitas en la descripción. Queda mal.

Respecto al logo también es importante indicar que deberás insertar tu logo en las dimensiones que te solicite cada tema, de lo contrario lo deformará.

Añade el tema de WordPress que más se ajuste a tus gustos o necesidades

Como sabes, el diseño web en WordPress.org te ofrece la posibilidad de escoger entre miles y miles de temas gratuitos. En dependencia del diseño web, la estructura y aspecto que quieras dar a tu blog o web, algunos se ajustarán más o menos a tus requerimientos.

También puedes escoger temas Premium por un bajo coste normalmente. Esto ya es cosa tuya. Puedes buscar en Google por el término “temas Premium WordPress” y aparecerán las webs más populares que los ofrecen (personalmente creo que ThemeForest, WooThemes y Elegant Themes son los mejores).

Para añadir un tema gratuito, entra desde el escritorio de WordPress en Apariencia>Temas. Aquí encontrarás el tema que WordPress ha instalado de momento para ti para un diseño web súper sencillo, además de varios temas gratuitos que WordPress te quiere mostrar. Están ahí siempre por defecto y suelen ser el twenty twelve, twenty thirteen, etc…

Personalmente, si tuviese que escoger uno de los twenties para el diseño de mi web, escogería el thirteen, pero no soy muy fan de estos. Para añadir otros temas solamente tienes que hacer clic en “Añadir Temas” y buscar por Destacados, Populares, etc…

Puedes activar cualquiera de los temas y ver cómo queda el diseño, aunque teniendo en cuenta que aún no tienes apenas contenido, la apariencia que te presenta ahora WordPress no es muy realista. Por eso yo te aconsejaría que de momento hicieses al menos un mini diseño web con un esqueleto que conste de 5 o 6 páginas y después empieces a probar diferentes temas.

Importante: si instalas un tema, lo pruebas y definitivamente no te gusta ese diseño (me refiero a la apariencia sólo), asegúrate de eliminarlo porque los temas tienen mucho peso y ralentizan mucho la velocidad de carga de tu web, nefasto para el diseño y tu posicionamiento. Cuando ya hayas elegido el tema de tu preferencia, elimina todos los demás.

Las imágenes en WordPress

Las imágenes son un elemento fundamental e importantísimo en cualquier diseño web. A la gente le gusta ver imágenes igual que texto y otros elementos.

La mayoría de la gente que diseña su propia web, coge imágenes, además de horribles y de mala calidad, desde Google directamente, sin saber si esas imágenes tienen derechos de autor o no. No suele ocurrir, pero si coges una imagen con derechos de autor y la plantas en tu web, el autor puede denunciarte. Yo prefiero no arriesgarme.

Por eso recomiendo no utilizar, sobre todo en las páginas estáticas, imágenes descargadas de Google. Te aconsejo que crees una cuenta en Fotolia o iStockPhoto, por ejemplo, y compres un paquete de imágenes, al menos para las páginas estáticas. Son muy económicas y al menos descansarás sabiendo que no estás infringiendo derechos. Otra opción es hacerlo desde Creative Commons o en algunas webs que tienen imágenes decentes de forma gratuita, como Freepik (genial y español: ¡fomentemos el producto nacional gracias a este equipo de gente tan maja!) o Pixabay.

Otro consejo referente a las imágenes. Utiliza imágenes de calidad, que vayan en la misma línea, sean de tamaños iguales o similares, mismas tonalidades, etc. y que sean coherentes con la temática de tu web.

Y ahora es cuando se complica un poquito más la cosa.

Añade tus páginas estáticas

Supuestamente ya has definido (aunque sea de forma superficial) el diseño web y su estructura (si no es así, te recomiendo que antes de seguir, te dirijas a los tutoriales indicados: Diseño Web y SEO donde te explico cómo hacerlo bien), con el diseño de la página de Inicio (o como la hayas llamado) como eje central de la misma y una serie de páginas adicionales para completarla. Voy a suponer que la estructura de tu web, en papel, es algo así:

En este diseño web, las páginas que aparecen en niveles inferiores al menú principal son parte de un submenú, pero no te preocupes, se hacen exactamente igual que las demás. La única diferencia es que al configurar el menú, tendrás que meter esas páginas “debajo” de la página correspondiente. Imagina que la PÁG 1 es “Material Deportivo Mujeres”. Las páginas 1a y 1b, podrían ser “Zapatillas Deportivas Mujeres” Y “Mallas Deportivas Mujeres”.

Si has seguido los pasos anteriores del diseño, ya tienes tu página Blog hecha, con lo que no nos vamos a ocupar de esa ahora.

Vamos a crear la PÁG 1, por ejemplo. El resto, técnicamente, las harás igual, sólo variarán por lo general en el contenido (contenido = texto, imágenes, videos, etc.). La página de Inicio suele ser la más personalizada y como te decía antes, es el eje central de tu web. Esta página es la más complicada y personal, así que la dejo para el final.

A menos que tengas un diseño web espectacular (en relación con estructura, usabilidad, etc.), intenta que todas tus páginas estáticas tengan al menos 250-300 palabras y contengan un 1% de veces tu palabra clave para esa página.

1. Desde el escritorio de WordPress, pon tu ratón sobre “Páginas”, se abre un desplegable donde verás “Añadir Nueva”. Haz clic.
2. En el lugar en que te deja el cursor, es donde tienes que escribir el título de la PÁG 1. Recuerda, cuanto más corto mejor, y que lleve tu palabra clave.
3. Pasa a la caja de texto y escribe el mismo título o una frase que lo contenga. Selecciona todo el texto.
4. Un poquito más arriba de donde acabas de escribir, verás una caja de menú desplegable que pone “Párrafo”. Pincha y escoge “Título 2”. A lo largo de todo el texto de la página, puedes escoger tantos títulos 2, 3 etc., como quieras. El “Título 1”, suele ser el que menciono en el punto 2 y una página o entrada no debe contener más de uno, con lo que no lo añadas nunca a menos que estés súper seguro de que tu página no contiene ya uno.
5. Incluye un texto no menor de 500 palabras y que contenga la palabra que has usado como título, tu palabra clave, en una proporción del 1% como máximo y 0.8% como mínimo.
6. Justifica el texto a ambos lados (opcional).
7. Inserta una imagen.

• Colócate con el cursor en el lugar donde quieres insertar la imagen.
• Haz clic sobre “Añadir Medio”. Te llevará a la biblioteca multimedia.
• Si no has subido ya tu imagen previamente, pincha en la pestaña “Subir Archivos” y sube la imagen.
• Cuando WordPress haya terminado de subir la imagen, te aparecerá una serie de campos a la derecha de tu pantalla. El nombre de la imagen será por defecto el que tenía en tu ordenador. Ponle el nombre de tu palabra clave, tanto en Título, como en Texto Alternativo, como en Descripción.
• La alineación será la que elijas, izquierda, derecha o centro.
• En el campo “Enlazado a”… elegirás, normalmente, “Ninguna”.
• Haz clic sobre “Insertar En La Entrada”.
• Volverás a la página. Vuelve a pinchar la imagen. Te saldrá una barra de comandos. Pincha en el lápiz, para editar la imagen.
• Si has hecho algo mal cuando insertaste la imagen antes, aquí lo puedes corregir.
• Pero no hemos entrado en editar la imagen para corregir. Necesitas rellenar otro campo llamado “Atributo Title De La Imagen”, bajo “Opciones Avanzadas”. Pon la misma palabra clave en ese campo (puedes copiar y pegar el texto que aparece algo más arriba, en “Texto Alternativo”).
• Haz clic en “Actualizar”.

Acabas de optimizar tu imagen de cara al SEO. Si no haces este último paso, Google no será capaz de “leer” tu imagen y esto es muy importante para tu posicionamiento. Recuerda que esto debes hacerlo SIEMPRE, con todas las imágenes de tu web, tanto en páginas estáticas como en entradas del blog.

8. Puedes ir actualizando los cambios con el botón “Guardar Borrador” que aparece en el recuadro “Publicar”, a la derecha de la pantalla.
9. En el recuadro “Atributos de la Página” puedes elegir algunas cosas pero por ahora déjalo como viene por defecto (seguramente será “sin superior” y “plantilla determinada”).
10. Cuando estés conforme con la apariencia de tu página (puedes ver cómo queda de cara al público mediante “Vista Previa”), haz clic en “Publicar”. También puedes programar tus publicaciones a fechas futuras.
11. Por lo general, no asignes imágenes destacadas en las páginas estáticas.
12. Repite el mismo proceso para todas tus páginas.

Añadir tus entradas del blog es muy parecido. Solamente cambian algunas cosas como asignar el post a una categoría determinada, etiquetas, y en este caso, sí, asignar imagen destacada. Esa imagen es la que aparecerá como portada de tu post en la página del blog.

Lo último que debes saber respecto a la creación de páginas y entradas es que para Google no se diferencian prácticamente en nada.

Me explico. Si has leído mi post sobre la diferencia entre dominio, alojamiento y URL, sabrás que la URL es la dirección exacta de cada una de tus páginas. Las URLs de tus páginas estáticas y de las de tu blog (dinámicas) son exactamente iguales (a menos que las crees con una página superior, pero no vamos a entrar en eso). Constan de tres partes:

http://www.tudominio.es/el-resto-de-la-direccion-de-tu-pagina-o-post-concreto

Por tanto, si quieres darle igual o mayor importancia a una entrada o post que a una página, aportando más enlaces internos que apunten hacia él, por ejemplo, puedes hacerlo. En este sentido, no hay diferencia entre posts y páginas estáticas.

[magicactionbox]

 

Crea el menú principal de WordPress

Generalmente, los temas gratuitos de diseño web en WordPress solamente te permiten tener un menú, no varios. Sí que puedes tener submenús, pero no dos tipos de menú diferentes. A veces “molaría” tener la opción de agregar un menú adicional, pero tampoco es imprescindible.

Para crear el menú, ve a “Apariencia” > “Menús”. Pon el Nombre del Menú si no te gusta el que tiene.

1. Adición automática de páginas por WordPress

Es posible que ya te haya añadido las páginas que has publicado al menú. Si es así, genial. Lo verás en la parte “Estructura del Menú”. Comprueba que están todas las páginas que has publicado. Las que tengas como borrador, todavía no aparecerán.

Como ves en la estructura, WordPress ha puesto todas las páginas a un mismo nivel. Seguramente no quieras eso, sino que, como recordarás del punto anterior, quieres añadir algunas páginas en un nivel inferior, como submenú.

• Identifica las páginas que deben ir “debajo” de otras. En nuestro caso, páginas 1a, 1b y 3a.
• Pincha la página 1a y sin soltarla, arrástrala debajo de la página que quieras, en nuestro ejemplo, debajo de PÁG 1.
• Repite la operación con el resto.
• Guarda los cambios y comprueba cómo queda de cara al público.

Asegúrate de que pones el tick en los dos campos de Opciones del Menú, al final de esta página. De esta forma, cada nueva página que crees y publiques, se añadirá automáticamente al final del menú. Después solamente tendrás que venir aquí y arrastrarla al lugar que desees.

2. Adición manual de páginas

Si WordPress no ha añadido las páginas automáticamente a tu menú, tendrás que hacerlo de forma manual, esta primera vez.

• Primero, ve abajo del todo de la página y pon los dos ticks posibles en “Opciones del Menú”. Así no se nos olvidará para el futuro.
• Ahora, ve a la sección “Páginas”, a la izquierda y ábrela si no lo está ya.
• Verás que tiene tres pestañas (más reciente, ver todo y buscar).
• Escoge la opción ver todo o seleccionar todas las páginas que quieres incluir en el menú, tanto el principal como “por debajo”.
• Haz clic sobre “Añadir Al Menú”. Todas las páginas se habrán transferido al bloque o sección principal.
• Sigue los mismos pasos 1) al 4) del punto 1.

Si todo ha ido bien, ya habrás creado tu menú de WordPress.

Configura tu página de Inicio

Esta es la página más complicada de poner en un WordPress tutorial. Lo más importante que tienes que tener en cuenta sobre el diseño de tu página de Inicio es que debe tener enlaces internos a al menos dos o tres páginas importantes y que debes crear interés en el usuario. En el siguiente post te indico las 20 reglas esenciales para diseñar una buena página de inicio.

La página de Inicio (generalmente tu landing page y dominio) es la página que más visitas y enlaces externos recibirá. Por tanto, en su diseño, has de pensar muy bien qué es lo que quieres transmitir aquí y cómo vas a hacer para que la gente que llegue a ella (y Google) siga navegando por tu web, en lugar de pichar “atrás” y salirse.

Piensa en esta página como tu carta o página de ventas dentro del conjunto de diseño web. Pon suficiente texto para que Google entienda de qué va la página, además de, como mucho, un par de calls to action o llamadas a la acción para tus lectores o clientes potenciales. Te recomiendo que leas el post en el que explico lo que nunca te han contado sobre las calls to action, porque las llamadas a la acción no se tratan solamente de popups y formularios de suscripción. Hay muchas más formas de conseguir que tu audiencia HAGA algo o siga una ruta determinada. Al diseñar tu página de inicio (y el resto también), trata de no poner más de una o dos llamadas a la acción «manifiestas».

En definitiva, hay 4 elementos indispensables que tienes que incluir en el diseño de tu página de Inicio. (Te recomiendo también el post sobre lo que deberías incluir siempre en tu web)

• Texto no inferior a 250 palabras. Considera este contenido tu texto de venta. Incluye los beneficios de tu producto o servicio, con las palabras clave correspondientes, etc. Si tu diseño web permite que tanto texto no sea necesario, entonces, obvio, no será necesario.
• Una o dos imágenes atractivas o algún vídeo.
• Alguna llamada a la acción vistosa o atractiva
• Enlaces internos hacia otras páginas importantes

Respecto a los enlaces internos hablo en el tutorial SEO y en el post sobre los enlaces HTML y textos ancla, con un caso real.

En cuanto al diseño propiamente dicho de la página de Inicio, es muy complicado exponer aquí las pautas puesto que esta página es la más versátil a mi parecer y también la más personal. Además, cada tema varía mucho y no es posible dar pautas concretas, más allá de lo indicado. De modo que te recomiendo ver el Tutorial de Diseño Web y las reglas de diseño de tu Página de Inicio, mencionados ambos anteriormente con sus enlaces.

Simplemente, asegúrate de que maximizas todos los recursos que te brinda el diseño del tema que hayas elegido, tanto en la cabecera como en las barras laterales y el pie de página. Prueba, prueba y prueba.

Otra cosa importante cuando diseñes la web con blog incluido

Te recomiendo que no lances tu web antes de tener preparados y publicados al menos cuatro o cinco posts. Queda un poco mal dirigir a los lectores a un blog que apenas tiene entradas. Una vez hayas creado todas tus páginas estáticas, dedícale un poco de tiempo al blog, creando unos cuantos posts antes de lanzar.