Como instalar wordpress

Lo primero para disponer de una web con WordPress es instalarlo. Vamos a ver como instalar wordpress en nuestro hosting.

Antes de seguir, hay que indicar que hay dos formas de tener una web realizada con este gestor de contenidos. La primera es crear una cuenta en wordpress.com. Si lo hacemos así tendremos nuestra página web en los servidores de wordpress.com. Esta opción puede ser recomendable para un blog personal, pero no es la mejor para una web más profesional. El problema de wordpress.com es que las opciones de personalización son mucho menores, pues nunca se puede llegar a tocar “las tripas” del sistema. Así que seguramente acabemos por vernos limitados en esta plataforma.

Aún así, repito, para un blog personal puede ser más que suficiente. Incluso nos puede valer para familiarizarnos con el sistema antes de instalar nuestra propia versión de WordPress.

La otra opción es instalar WordPress en nuestro propio hosting. Ahora veremos como.

Pasos previos a instalar WordPress

Lo primero que deberemos hacer es contratar un hosting. Hay muchos y en principio cualquiera nos puede valer. Según los propios creadores de WordPress, las requisitos recomendados son:

– PHP 7 o superior
– MySQL 5.6 o superior

Aunque con las versiones PHP 5.4 y MySQL 5.5 nos valdrá. En caso de duda, mi recomendación es que busquéis un hosting que os ofrezca la instalación de WordPress, pues la mayoría la incluyen entre sus packs uno específico de WordPress que, como es obvio, cumplirá todos los requisitos.

Suponiendo que ya tengáis contratado el hosting (el sitio donde subir vuestra web) y el dominio (la dirección de vuestra web), la empresa contratada os dará una serie de datos. Los que necesitaremos son:

– Usuario y contraseña de FTP.
– Datos de acceso del panel de control.

Con esto, ya podemos descargar wordpress. Para ello nos vamos a https://es.wordpress.org/ y pulsamos en el botón “Descargar wordpress”

Descargar WordPress para su instalación

 

Además de esto, necesitaremos un cliente de FTP para subir los archivos al servidor. Cualquiera nos valdrá, aunque el más usado es Filezilla, que podéis descargar e instalar en https://filezilla-project.org/

Subiendo los archivos al hosting

Una vez descargado, tendremos que descomprimir el archivo, lo cual nos creará una carpeta llamada wordpress, cuyos contenidos subiremos al hosting. Para ello abrimos el filezilla e introducimos los datos de acceso al FTP en las casillas “Servidor”, “Nombre de usuario” y “Contraseña”. Pulsando en el botón “Conexión Rápida”, accederemos al servidor.

Conectarse usando Filezilla

El puerto no suele ser necesario indicarlo, pues si se deja en blanco se tomar el valor por defecto, que es el 21. Si nos han dado un número de puerto distinto al 21, lo tendremos que indicar también.

Una vez conectados, tendremos debajo dos ventanas con carpetas. La primera el disco duro de nuestro ordenador y la segunda la del hosting. Buscamos en nuestro disco duro la carpeta “wordpress” que descomprimimos antes y entramos en ella.

En el caso de las carpetas del hosting, aquí depende ya de cada hosting. Pero por regla general, tendremos que entrar en una carpeta llamada httpdocs o similar. Esto también nos lo indicará cada hosting, que nos dirá cual es la “carpeta raíz”.

 

Subir archivos wordpress al servidor

 

Si lo hemos hecho bien, deberíamos ver la pantalla de instalación de WordPress si entramos en la web a través de un navegador:

Wordpress seleccion idioma

Seleccionamos el idioma y pulsamos en “Continuar”. Con esto iniciaremos la instalación de WordPress. Un aviso, es posible que esta pantalla de selección de idioma no aparezca y que se nos muestre de forma directa la pantalla de instalación inicial

Creación de la base de datos para wordpress

La primera pantalla de wordpress nos indica la información que vamos a necesitar para realizar la instalación. Como podemos ver, se nos dice que vamos a tener a mano los datos de acceso a una base de datos donde realizar la instalación. La base de datos la tendremos que crear primero en nuestro hosting.

Instalar WordPress, pantalla inicial

El como crear una base de datos difiere entre un hosting y otro. Hay hosting que tienen un panel de control propio con lo que la manera de crear una base de datos es exclusiva. En esta manual mostraré como crear una base de datos desde cPanel, que es un panel de control muy usado por muchos hostings.

Si en tu hosting no usan cPanel, consulta la ayuda del hosting, donde seguramente te indicarán como crear una base de datos. De todas formas, los conceptos son los mismos, solo cambia el método de hacerlo.

En el caso de cPanel la pantalla de control será algo similar a la siguiente (puede variar según la versión utilizada)

Pantalla de cPanel.

Si pulsamos en “Añadir base de datos” se nos mostrará la pantalla de añadir una nueva base de datos. Si no estamos usando cPanel, buscamos la opción equivalente para añadir una nueva base de datos. A veces está a simple vista, pero otras veces suele estar dentro de una sección “Base de datos”.

Para crear una base de datos tendremos que rellenar en un formulario los siguientes datos:
– Nombre de base de datos
– Usuario de base de datos
– Contraseña

Es posible que nos aparezcan más opciones, como host autorizados. En ese caso, dejamos las opciones por defecto. Lo importante es que apuntemos el nombre, usuario y contraseña que hayamos puesto.

Una vez creada la base de datos podemos volver a la pantalla de instalación de WordPress y pulsar en ¡Vamos a ello!

Instalando WordPress

Una vez creada la base de datos y con los datos apuntados, podemos instalar WordPress. Al iniciar la instalación veremos que se nos piden los datos de conexión a la base de datos.

Configurar base de datos en WordPress

 

Cambiamos los valores de “Nombre de la base de datos”, “Nombre de usuario” y “Contraseña” por los que apuntamos al crear la base de datos. Con esto le damos a enviar y si todo está correcto nos saldrá una pantalla de confirmación. Pulsamos en el botón “Ejecutar la instalación” y nos saldrá otra pantalla.

Instalar WordPress

Los datos a rellenar son:
– Título del sitio: El nombre que tendrá nuestra web.
– Nombre de usuario y contraseña: Estos son los datos para el usuario administrador de nuestra web.
– Correo electrónico: Ponemos el correo electrónico que queramos usar para el usuario administrador de la web. Lo usaremos para recuperar la contraseña y para avisos.
– Visibilidad en los motores de búsqueda: Si marcamos esto nuestra web no aparecerá en los resultados de Google. Puede ser útil mientras montamos la web, pero hay que recordar desactivarlo más adelante.

Si todo está correcto, podemos pulsar en “Instalar WordPress”. Tras un par de minutos se habrá instalado la base de datos y tendremos lista nuestra web. Al acabar se nos mostrará la pantalla de acceso. Introducimos nuestro usuario y contraseña, y ya está, ya hemos terminado de instalar wordpress.

Wordpress recien instalado

 

SEO básico para WordPress con YOAST

Una vez tengamos montada nuestra web, llega la parte más importante. Recibir visitas. Para ello necesitaremos que nuestra web esté bien posicionada en los buscadores. Por eso ahora veremos algo de SEO básico para WordPress.

SEO son las siglas de “Search Engine Optimization” que significa “Optimización para Motores de Búsqueda”. En la práctica se puede resumir en “salir en la primera página de Google”. Como se suele decir, “si no estás en Google, no existes”.

Este tema es bastante amplio, complejo y extenso de abarcar. En este capítulo me limitaré a dar los apuntes básicos que tenemos que tener en cuenta para el caso de que queramos posicionar nuestra web por nosotros mismos.

SEO básico

Hay muchísimos factores a tener en cuenta a la hora de posicionar una web. Pero podemos dividirlos en dos: Contenidos y aspectos técnicos. Veamos en algo más de detalle.

Los contenidos son la parte fundamental del posicionamiento. Una web debe tener buenos contenidos para salir de las primeras en Google. Si tenemos una web de bicicletas con apenas cuatro secciones mientras que nuestra competencia directa tiene una web con un catálogo de 1000 bicicletas, cada una con su ficha, descripción y galería de fotos, pues poco podremos hacer para salir primeros.

La importancia del contenido hay que tenerla muy claro. Si nuestra web no apenas tiene contenido, Google nos ignorará por mucho que hagamos. Por tanto es muy importante tener mucha información en nuestra web, e ir añadiendo nuevas secciones o noticias de forma continuada. Si no lo hacemos, no hay mucho que hacer para salir los primeros.

Y después están los aspectos técnicos. Google (y el resto de buscadores) analizan cada web usando una serie de programas informáticos automátizados. Así que nuestra web debe tener una estructura y una determinada configuración que facilite la labor de lectura de los buscadores. WordPress viene de fábrica mas o menos bien preparado en este aspecto, pero hay algunos detalles que tendremos que tener en cuenta.

WordPress y SEO: Configuración básica.

Lo primero que vamos a ver es como bloquear y desbloquear una web de cara al posicionamiento. Esto puede servir para ocultar nuestra web a Google y demás buscadores mientras la estamos creando. Si usamos esta opción es muy importante no olvidar después que tenemos que desbloquear a los buscadores, o estaremos perdiendo el tiempo.

Esta opción se encuentra en “Ajustes => Visibilidad en los motores de búsqueda”. La opción “Disuade a los motores de búsqueda de indexar este sitio” debería estar desactivada, salvo que no queramos que nuestra web no se pueda localizar desde un buscador (Nota: Siempre se podrá acceder poniendo la dirección de la web en el buscador o a través de un enlace)

Lo segundo que haremos es asegurarnos que los enlaces permanentes están ajustados para SEO. En condiciones normales los enlaces de nuestra web deberían ser algo así:

http://www.eejemplo.com/mi-pagina-de-contacto/

Pero a veces se muestran páginas de este tipo:

http://www.eejemplo.com/?p=3

Ajustes para enlaces permanentes en WordPress

Lo cual es nefasto a la hora de posicionar nuestra web. Para corregir este problema nos vamos a “Ajustes => Enlaces permanentes” y marcamos la opción “Nombre de la entrada” o cualquier otra, excepto la primera, “Simple”, que es la que queremos evitar. Guardamos los cambios y problema solucionado.

Yo recomiendo usar la opción “Nombre de la entrada”, pues la gente busca los contenidos solo por el nombre. El resto de opciones añade información adicional, como fechas, que no se suelen usar en búsquedas, con lo que podemos prescindir de ellas.

Plugin SEO para WordPress: Yoast

Hay muchos plugins para SEO, pero el más usado es Yoast. Así que este será el que instalaremos, siguiendo el proceso de instalación de plugins que ya hemos visto con anterioridad.

Una vez instalado veremos que debajo de cada entrada o página aparece un nuevo bloque con dos pestañas, Legibilidad e “Introduce tu palabr..”. Como dijimos arriba, la base del SEO es la calidad de los contenidos. Yoast lo que hace es revisar el contenido para ver si este es adecuado para SEO.

Cuando hacemos SEO lo que buscamos es que si un usuario busca un texto en Internet acabe en nuestro sitio web. Por ello debemos focalizar cada página que escribamos en algún texto. Para explicarlo, vamos a usar como ejemplo una página de nuestra tienda de bicicletas. Y el texto por el que la queremos posicionar será ese mismo, “Tienda de bicicletas”

¿Cómo se usa WordPress Yoast SEO?

Lo primero es introducir la palabra clave que queremos posicionar en el campo “Palabra clave objetivo”. Al hacerlo, Yoast nos indicará la calidad de nuestro contenido respecto a la palabra clave buscada. Mediante un sistema de semáforo nos indicará si nuestra web tiene problemas graves (en rojo), moderados (en naranja) o está perfecta (en verde). Arriba veremos el global de la página, con el mismo código de colores. Lo ideal sería tener todos los puntos del análisis en verde, pero si nos queda alguno en naranja siendo el global en verde tampoco es demasiado grave.

SEO Básico para WordPress con plugin YOAST

Analizando cada punto:

El texto contiene 78 palabras. Esto es mucho menos que el mínimo recomendado de 300 palabras. Añade más contenido relevante para esta temática.
No me cansaré de repetir que lo más importante de cara al SEO es el contenido. Si una página tiene poco contenido los buscadores pueden llegar a ignorarla (y a perjudicar al resto del sitio si son muchas páginas de escaso contenido). Así que este es el punto que tenemos que tener siempre en verde. Siempre con criterio, claro, no es cuestión de poner texto por poner. Pero lo ideal es tener como mínimo 300 palabras en cada página que queramos posicionar.

No se ha especificado ninguna meta description, los motores de búsqueda mostrarán una copia de la página en su lugar.
La metadescripción es el texto que usan los buscadores a modo de pequeño resumen para mostrar en la página de resultado. Es importante aprovechar aquí para poner algo descriptivo y que pueda convencer a las personas que buscan que nuestra web es la ideal. Este texto no afecta al posicionamiento (es decir, no afecta a salir más o menos arriba en las búsquedas), pero si afecta a que los internautas pulsen o no en nuestro enlace, por lo que no debemos descuidarlo.

La palabra clave objetivo ‘tienda de bicicletas’ no aparece en el título SEO.
Es importante que la palabra clave aparezcan el título. Así que para nuestro ejemplo cambiamos el título actual, “Nuestra tienda” por la palabra clave “Tienda de bicicletas”. Puedes cambiar el título de una página o entrada de WordPress usando el editor o usando la opción “edición rápida” del listado de entradas.

La palabra clave objetivo no aparece en el primer párrafo del texto. Asegúrate de que el asunto del que habla el texto queda claro lo antes posible.
Esta es parecida a la anterior. Es importante poner nuestra palabra clave al principio del contenido. Para nuestro ejemplo, cambiaremos el inicio del texto, que era “Sobre Ruedas es una pequeña tienda nacida en Sevilla”, por el siguiente texto “Sobre Ruedas es una pequeña tienda de bicicletas nacida en Sevilla”

Las imágenes en esta página no tienen atributos alt que contengan tu palabra clave objetivo.
Los atributos ALT son unos textos que se asocian a las imágenes de una web y se muestran cuando la imagen no se puede visualizar, ya sea porque falte o porque estemos usando un navegador en modo texto. Además son usadas por los buscadores para “leer” la imagen. Así que deberíamos poner un texto relacionado con nuestra palabra clave objetivo y que a su vez sean descriptivos de la imagen. Por ejemplo, si ponemos una foto de nuestra tienda como texto alt podemos poner “Fachada de nuestra tienda de bicicletas”

Para editar este texto, seleccionamos la imagen que a la que queramos poner el atributo alt. Al pulsar en el botón de editar (el lápiz), tendremos la opción de modificar el atributo alt usando el campo “Texto Alternativo”

No hay ningún enlace externo en esta página, considere añadir alguno dentro del contexto.
Internet se basa en los enlaces, así que es recomendable que usemos enlaces, dentro de lo posible. Por ejemplo, si en nuestra tienda de bicicletas trabajamos con algunas marcas concretas de bicicletas, no estaría de más que pongamos un enlace a dichas páginas desde nuestra web.

Para ello usamos la herramienta enlace del editor, la que tiene forma de cadena. Una opción que nos puede interesar es que estos enlaces se abran en una pestaña distinta del navegador, para que el visitante no se vaya de nuestra página. Para ello pulsamos en el engranaje que pone “Opciones del enlace” y seleccionamos la opción “Abrir enlace en una pestaña nueva”

La palabra clave objetivo no aparece en la URL de esta página. Si decides renombrar la URL ¡asegúrate de comprobar que la antigua URL redirecciona con un 301 a la nueva!
La URL o dirección es uno de los parámetros a los que más importancia dan los buscadores a la hora de posicionar una página. Por eso es importante que incluya las palabras por las que queremos ser buscados. WordPress crea la dirección de cada página usando el nombre que hayamos puesto. Si nuestra página se llama “Tienda de bicicletas” la dirección será “tienda-de-bicicletas”. Así que si tuvimos en cuenta el SEO a la hora de elegir un título para nuestra página esta parte debería estar marcada como correcta.

En caso contrario, podemos editar la dirección y poner otra más adecuada para Google. Suele ser recomendable que usemos varias palabras relacionadas con nuestro título, separadas por el símbolo “-“. No hay que abusar usando direcciones demasiados largos en busca de meter todo tipo de palabras o Google nos podría penalizar si piensa que estamos haciendo “trampas”. YOAST nos avisará si la dirección resulta demasiado larga.

¿Y que quiere decir la parte de redireccionar con un 301? Google identifica cada página de una web por su dirección. Con lo que si tenemos una página bien colocada en Google y le cambiamos la dirección, de cara al posicionamiento es como si la hubiéramos borrado y creado una nueva. Si estamos revisando el SEO antes de publicar (o poco tiempo después) no debería preocuparnos este problema. En caso de que estemos ajustando una página antigua y le cambiemos la dirección deberíamos poner una redirección 301 (hay plugins específicos para hacerlo: Simple 301 Redirects)

Conclusiones

El SEO es una parte vital de casi cualquier desarrollo WordPress. Para ello debemos cuidar siempre de la calidad de nuestros contenidos. Podemos usar plugins que nos ayuden, como YOAST SEO, pero lo más importante es que nuestro contenido sea de calidad.

Como crear un formulario de contacto con WordPress

Una vez que nuestra página wordpress va tomando forma, es la hora de añadir un formulario de contacto. Un formulario de contacto permitirá que nuestros visitantes se comuniquen con nosotros de forma sencilla.

Como suele ser la norma para añadir nuevas funcionalidades a nuestra web, usaremos un plugin. En concreto, Contact Form 7, uno de los plugins más extendidos para añadir un formulario de contacto a una web. Instalamos este plugin mediante el método que ya vimos.

Creando un formulario de contacto

Una vez instalado el plugin Contact Form 7 veremos que en el menú lateral nos aparecerá una nueva sección: Contacto. Esta sección funciona de modo similar a los carruseles de imágenes. Es decir, un listado y una opción para añadir. La mayoría de los plugins de WordPress funcionan de forma parecida, como ya comenté.

Si nos vamos al listado, veremos que la instalación de Contact Form 7 ya viene con un formulario de contacto creado de antemano.

Contact Form 7, WordPress

Si recordáis las instrucciones para crear un carrusel de imágenes, recordaréis que una vez creado el carrusel teníamos que copiar el shortcode y añadirlo a la página donde quisiéramos incluir el carrusel. Pues en este caso haremos lo mismo. En la segunda columna del listado tendremos un código muy parecido a este:

[contact-form-7 id=”46″ title=”Formulario de contacto 1″]

Lo copiamos y lo pegamos en la página que creamos en su momento para contacto. Debemos quedarnos con algo similar a la siguiente captura de pantalla.

Crear formulario contacto wordpress

Podemos ver el formulario funcionando en la página correspondiente:
http://angelaparicioprogramador.com/crearwebconwordpress/mitiendadebicis/contacto/

Personalizando el formulario de contacto.

El formulario de contacto por defecto está muy bien, pero seguramente queramos modificarlo un poco o añadir nuevos campos. Para ello vamos al listado de formularios de contactos y hacemos click en el formulario de ejemplo, como si fuera una entrada.

Nos aparecerá algo similar a la siguiente imagen.

Editar formulario contacto en wordpress

 

Tenemos cuatro pestañas. Formulario, Correo electrónico, Mensajes y Ajustes adicionales. Vamos a ver aquí las dos primeras. La tercera pestaña es para cambiar los mensajes que recibe el usuario y la última son parámetros avanzados.

Como ejemplo, vamos a añadir un teléfono de contacto obligatorio. Podemos ver que el formulario consta de un nombre, un correo electrónico, un asunto, un mensaje y el botón de Enviar. Para añadir el teléfono, ponemos el cursor debajo del correo electrónico y pulsamos en el botón de “teléfono” (Arriba, el cuarto)

wordpress telefono contacto en formulario

 

Como queremos que el teléfono sea obligatorio, marcamos el control “Tipo de campo: Campo requerido”. De forma opcional, podemos cambiar la palabra “tel-992” por “telefono”, para que nos resulte más claro (Nota: En tu caso lo más seguro es que el número 992 sea distinto. Pero será algo del tipo tel-xxx)

Le damos a insertar y el código quedará en nuestro formulario. Si nos fijamos, el resto de entradas del formulario están rodeados de unos códigos que indican <label> </label> y tienen el nombre del campo. Hacemos lo mismo. En la siguiente captura podéis ver el resultado que buscamos:

Nuevo formulario contacto

Explicando un poco. Cada entrada del formulario va entre los dos códigos <label> y </label>. Esto es html básico y sirve para mejorar un poco el aspecto visual del formulario. Si no sabes html, simplemente recuerda ponerlos al principio y al final, como en el ejemplo.

Después tenemos el texto que verá el usuario para cada campo: Nombre (requerido), Tu correo electrónico (requerido), etc. Y entre corchetes, otros shortcodes. En este caso los que generan los campos de formularios. Aunque estos códigos los podemos crear con los botones de arriba, no está de más entender como funcionan.

La primera palabra es el tipo de campo (text, tel, textarea, etc) y la segunda el nombre que usaremos para poder enviar después el correo. Los que llevan un * detrás del tipo de campo indican que el campo es obligatorio. Por tanto, si queremos que el teléfono deje de ser obligatorio, solo tenemos que quitar el *. Y si queremos que el texto del mensaje sea obligatorio, pues ponemos un * detrás de textarea.

Y acabamos con el botón de enviar (submit). Podemos cambiar el texto entre comillas, “Enviar” por otro que prefiramos como “Contactar” o lo que creamos conveniente.

Personalizando el correo de contacto

La siguiente pestaña que vamos a ver es la de “Correo electrónico”. Aquí podemos redactar el correo que recibiremos. Su aspecto será similar al siguiente.

Formulario de contacto

El primer campo, Para, es la dirección donde queremos recibir el correo. El segundo, es desde que dirección se enviará el correo. Para evitar problemas con spam y correos no deseados es importante que este correo sea del mismo dominio al que pertenece la web.

El siguiente campo es el asunto. Vemos que tenemos unos código del tipo [your-subject]. Estos códigos se sustituirán por el texto introducido por el usuario. En este ejemplo, si el usuario pone en el campo sujeto que vimos antes el texto “Quiero reparar mi bici”, nos llegará un correo con el asunto: Mi tienda de bicis “Quiero reparar mi bici”

Más adelante tenemos las cabeceras adicionales. Esto es configuración algo más avanzada, pero nos quedaremos con el código por defecto. ¿Para que sirve? Sirve para que cuando recibamos un correo de contacto al darle el botón de “Responder” respondamos al mail que puso el usuario en el formulario de contacto.

Y finalmente está el texto del correo. Lo normal es incluir aquí todos los campos. Nosotros hemos añadido un campo, el teléfono. Con lo que deberemos modificar este texto de la siguiente manera:

Contact form 7 personalizar correo

Con esta pequeño cambio recibiremos el teléfono del usuario.

Y ya solo nos queda un último detalle. Al final tenemos una opción “Usar correo electrónico (2)”. Si la activamos no saldrá un segundo formulario para el envío de correo. Esta opción se suele usar para enviar un correo de confirmación a la persona que ha usado nuestro formulario de contacto. Si ponemos en el campo Para el código [your-mail], este segundo correo se enviara a la dirección indicada por el usuario. Con esto podemos enviar un acuse de recibo, que siempre da tranquilidad al que se pone en contacto a través de un formulario web.

Contact Form 7 y conclusiones finales

Contact Form 7 puede no ser uno de los plugins más sencillos del mundo, pero es lo suficiente sencillo y flexible como para ser uno de los plugins más usados de todos los disponibles. Con este plugin podemos además crear varios formularios de contacto. Uno para ventas y otro para contacto a secas, por ejemplo.

Hay algunas plantillas que tienen formularios de contactos incorporados. Suelen ser más bonitos, aunque no tan flexibles. Además hay que tener cuidado con estos formularios incluidos, pues pueden tener fallos de seguridad que nos pueden causar problemas por envío de spam. Como consejo general es importante elegir plugins ampliamente usados por la comunidad de WordPress. Esto nos evitará la mayoría de problemas de seguridad.

Carrusel de fotos en WordPress

Un carrusel de fotos es un elemento bastante habitual en cualquier web realizada en WordPress, por sencilla que sea. En este capítulo vamos a ver como crear un carrusel de fotos de forma sencilla para nuestra web.

Como comentamos en la introducción, una ventajas de WordPress es la gran cantidad de plugins que podemos usar para ampliar sus posibilidades. Para crear nuestro carrusel de fotos usaremos uno. La instalación de plugins en WordPress es bastante sencilla. Muy parecida a la instalación de temas.

Instalación de plugins en WordPress

Para instalar un plugin tenemos dos opciones. Podemos ir al directorio de plugins y descargarlo en zip o podemos usar el buscador de plugins que tenemos en el panel de control. En este aspecto, instalar un plugin es parecido a instalar un tema.

Para nuestro ejemplo vamos a usar el plugin: Easing Slider. Si pulsamos en el botón “Download”, se descargará un archivo zip. Este es el archivo que necesitamos para la instalación. Así que nos vamos a Plugins => Añadir nuevo.

Instalar Plugins en WordPress

Si pulsamos en el botón “Subir Plugin”, nos saldrá un formulario de subida de archivos. Usando este formulario, podemos instalar el plugin. Si todo está correcto, nos aparecerá el resultado: “Descomprimiendo… Instalando el plugin… Plugin instalado con éxito.”

Y al final, un botón que indica “Activar el plugin”. Pulsamos en él y plugin instalado. Así de fácil.

La otra opción para instalar un plugin es usar el buscador que tenemos a la derecha. Una vez localizado el plugin que queramos instalar, solo tenemos que pulsar en el botón “Instalar ahora” del plugin que queramos instalar. Y una vez instalado, no olvidar activarlo.

Crear un carrusel de fotos

Una vez instalado el plugin Easing Slider podemos proceder a crear nuestro carrusel. Antes de seguir indicar que aunque para este ejemplo vamos a usar Easing Slider podríamos haber usado otro de los muchos plugins para crear carruseles que hay disponible. En general todos funcionan más o menos igual.

Tras instalar el plugin veremos que en el menú lateral de wordpress tenemos una nueva opción, “Sliders”. Pulsando en ella nos saldrá un listado parecido al de páginas y entradas, pero vacío. Arriba tenemos el botón “Add Slider”, que usaremos para crear nuestro carrusel (slider) de fotos.

wordpress crear nuevo carrusel de fotos

En la página que nos aparecerá, introducimos un nombre para nuestro slider. En este ejemplo, “Carrusel Inicio”. Ahora tendremos que añadir las fotos, para lo cual pulsaremos en el botón “Add Sliders”. Nos aparecerá de nuevo la biblioteca de medios de wordpress, desde la que podemos seleccionar las imágenes que queramos.

Podemos seleccionar una imagen y pulsar en “Insert into slider” para añadirla. Después le damos al botón para añadir y añadimos otra, y así hasta añadir otra. Aunque una opción más rápida es mantener pulsado la tecla “Ctrl” mientras seleccionamos. Con esto podemos elegir varias imágenes y añadirlas todas al carrusel que estamos creando.

Veremos que las imágenes se mostrarán en la parte de abajo. Podemos arrastrarlas para cambiarlas de orden, o poner el ratón encima para que se nos muestren los botones de eliminar y editar. Cuando acabemos, pulsamos en “Publish”

Usando shortcodes en WordPress

Los sliders hay que crearlos y añadirlos después a una página o entrada concreta. Esto es algo habitual en muchos plugins de WordPress. Por ejemplo, creamos un calendario, formulario o mapa mediante un plugin y después lo añadimos a un contenido. Para esto se usan los “shortcodes”

wordpress shortcode carrusel imagenes

En el listado de sliders veremos que al slider que acabamos de crear le corresponde un shortcode. Un shortcode es un pequeño código, mostrado entre corchetes. Lo seleccionamos y lo copiamos. Ahora nos vamos a la página donde queramos poner el slider, y copiamos el shortcode tal cual.

Como he comentado, esto es algo habitual en wordpress. Volveremos a ver el uso de estos “shortcode” cuando veamos como crear un formulario de contacto.

Si lo hemos hecho bien, la página modificada debería quedar así:

Página wordpress con un shortcode insertado

Y el resultado podemos verlo aquí: Sitio wordpress con un carrusel en la portada

Consideraciones finales.

Un par de detalles para acabar. El plugin que hemos usado tiene más opciones para mejorar el aspecto de nuestro carrusel. Si nos vamos al listado de Sliders y editamos el que hemos creado, tendremos la opción de cambiar muchos detalles del mismo, como el tamaño de la imágenes, la paginación o el funcionamiento de la reproducción automática.

Si el plugin usado no nos gusta, hay muchos otros para hacer sliders de imágenes. En general el proceso es el mismo en todos. Nos aparecerá una nueva opción en el menú, desde la que podremos añadir nuevos sliders. Desde aquí podremos añadir nuevos elementos a estos es slider y al final publicaremos mediante un “shortcode”. Este funcionamiento es genérico a muchos plugins de otros tipos, con lo que usar plugins en wordpress suele ser más o menos sencillo, pues suelen compartir modo de trabajo.

La Biblioteca de medios de WordPress

En esta sección aprenderemos a subir imágenes y a manejar la biblioteca de medios de WordPress.

Los medios son elementos que podemos subir a nuestra web para incluirnos en nuestras páginas. Normalmente son imágenes, pero pueden ser cualquier otro tipo de archivos. Por ejemplo, para una sección de productos podríamos necesitar subir un archivo PDF con la ficha técnica. Estos archivos estarán reflejados en nuestra biblioteca de medios.

Subir imágenes a WordPress

Para ir a la biblioteca de medios, nos vamos al menú, a la entrada “Medios => Biblioteca”. Al principio estará vacía, pero pronto empezaremos a subir imágenes.

Biblioteca de medios de WordPress

Para subir imágenes pulsamos en el botón “Añadir nuevo”. Podremos subir las imágenes una a una o arrastrando un grupo de ellas con el ratón. Una vez subidas, las imágenes se mostrarán dentro de la biblioteca.

Una vez subidas las imágenes, podemos añadir a cualquiera de nuestras páginas

Subir imágenes en WordPress

Añadir una imagen a una entrada o página

Ahora vamos a ver como añadir una imagen a una de nuestras páginas de la web de ejemplo. En concreto a “Nuestra tienda”. En estos momentos tiene el siguiente aspecto:

Página ejemplo de wordpress

Para editarla, nos vamos al menú “Páginas” y seleccionamos la página que queremos editar pulsando sobre su nombre. Nos saldrá la pantalla de edición.

En la barra de herramientas hay un botón que pone que pone “Añadir objeto”. Al pulsar en él accederemos a la biblioteca de medios. Para añadir una imagen solo tenemos que seleccionar la que queremos y pulsar en el botón azul “Insertar en la página” situado abajo a la derecha. Con esto habremos añadido una imagen a nuestro web en WordPress.

Fijaos que en la ventana que se nos abre al pulsar en “Añadir objeto” tenemos dos pestañas. Una es la de la biblioteca multimedia, pero otra es la de “Subir archivos”. Desde aquí podemos subir una imagen, por lo que no será necesario subir todas las imágenes a través de “Medios => Biblioteca => Añadir nuevo”, sino que podemos subir las imágenes (o archivos) directamente desde las entradas y páginas.

Edición de imágenes

Las imágenes que hemos subido a nuestra página se muestran a un tamaño determinado por wordpress y separando los textos. Es posible que queramos otro comportamiento para las imágenes. Podemos editar las imágenes seleccionándolas con el ratón y pasando el cursor por encima. Al hacerlo veremos varias opciones. Las primeras son las que nos permiten alinear la imagen. Después tenemos el botón de editar y el de quitar la imagen de la página que estemos editando (pero seguirá en la biblioteca multimedia)

Editar imagenes en wordpress

Las opciones que nos muestra WordPress para editar una imagen son:
– Leyenda: Es un pequeño texto que se mostrará debajo de la imagen en caso de estar relleno. Como un pié de foto.
– Texto alternativo: Es una descripción en texto de la imagen. Si conoces algo de SEO te sonara el concepto texto alt. Aquí es donde debes introducirlo
– Alinación y tamaño: Con estas opciones podemos cambiar el tamaño y la posición de la imagen dentro del texto.
– Enlazado a: Por si queremos que la imagen enlace a algún sitio en el caso de que se haga click en ella. Para imágenes recomiendo usar la opción “Ninguna”. Si hemos subido otro tipo de archivo, como un PDF, las opciones “Archivo multimedia” o “Página de adjuntos” son las recomendables.

Después tenemos las Opciones avanzadas. Estás opciones nos permiten añadir clases y elementos para trabajar con CSS. Te serán útil si planeas tocar las hojas de estilo. En caso contrario, aquí tienes una opción que te puede resultar interesante “Abrir enlace en una pestaña nueva”. Esta opción es útil cuando queremos usar una imagen como enlace y queremos que ese enlace lleve a una pestaña nueva, o para enlaces de descargas de archivo.

Hay muchas más cosas que podemos hacer con las imágenes, pero con lo explicado aquí es suficiente para saber como añadir en WordPress imágenes a páginas.

 

 

Crear un menú principal y páginas

En esta capítulo vamos a ver como crear las distintas páginas de nuesta web y un menú principal. Ya hemos instalado y configurado WordPress, con lo que ahora podemos crear la estructura de contenidos para nuestra web.

Si recordáis el planteamiento inicial de nuestra web, vamos a crear 5 páginas. La portada, una explicando nuestro negocio, una de servicios, una para contacto y otra para mostrar una galería de imágenes.

 

Creando páginas.

Esta parte ya la vimos en Cambiar página de inicio en WordPress. Recuerda, para crear páginas nos vamos al menú Páginas => Añadir nueva. Ponemos un título, añadimos el contenido y le damos a publicar.

Acabaremos con un contenido similar al mostrado.

crear paginas con wordpress

 

Ubicaciones de menús

Ahora vamos a crear un menú. Antes de nada, explicar como funcionan los menús en WordPress.

A la hora de trabajar con menús, tenemos que distinguir entre las ubicaciones y los menús propiamente dicho. Los menús son listas de enlaces que podemos crear. Estos enlaces pueden ser a páginas, a entradas, a categorías o a cualquier otra dirección que queramos.

Ejemplos habituales de menús son el menú principal que estamos viendo en este ejemplo, con las páginas principales de nuestra web. Otro menú muy habitual sería uno con nuestras redes sociales.

Las ubicaciones nos indican donde podemos incluir un menú. Estas ubicaciones dependen de la plantilla que estamos usando. Cada plantilla tiene sus propias ubicaciones.

En el tema que estamos usando como ejemplo tenemos tres ubicaciones: Menú principal, Menú social y Enlaces de píe de página.

Ubicaciones menú wordpress

Podemos saber que ubicaciones tiene nuestro tema en “Apariencia => Personalizar => Menús”

 

Crear un menú principal

Por tanto lo que queremos hacer es crear un menú que contendrá las páginas que hemos creado para nuestro sitio y añadirlo a la ubicación “Menú principal”.

Para esto nos vamos a “Apariencia => Menús”. Veremos que en la pantalla que nos aparece se nos indica “Dale un nombre a tu menú, luego haz clic en Crear menú.”. Hacemos eso y creamos un menú al que llamaremos “Principal”

Vuelvo a repetirlo, pero es una confusión habitual y merece la pena dejarlo bien claro. Una cosa es la ubicación “Menú principal” y otra el menú “Principal”. La idea es que nuestro menú “Principal” esté en la ubicación “Menú principal”

Crear menú principal

En la figura de arriba vemos la pantalla para configurar nuestro menú. Lo primero es añadir las páginas al menú. Para ello las seleccionamos desde el listado de la izquierda y usamos el botón “Añadir al menú”

Una vez añadidas, nos aparecerán debajo de la sección “Estructura del Menú”. Aquí podemos reordenar los elementos del menú usando el ratón para mover los elementos. Fíjate que puedes crear jerarquías en el menú, poniendo un elemento dependiendo de otro. De momento dejaremos todas las páginas al mismo nivel.

Una vez añadidas las páginas, seleccionamos la ubicación donde queremos que vaya el menú. En nuestro caso, “Menú principal”.

Configuración de un menú

Vemos que hay una opción que dice “Añadir páginas automáticamente”. Esto sirve para que cada página que añadamos aparezca de forma automática en nuestro menú. Aunque puede resultar más cómodo, no recomiendo usarla, pues perdemos mucho control sobre nuestro menú.

Por ejemplo, seguramente más adelante tengamos que añadir páginas del tipo “Protección de datos”, “Aviso legal” o “Política de cookies”. Y lo más probable no querremos tener estas páginas en nuestro menú principal.

Si hemos hecho todo de forma correcta, podremos ver el menú en nuestra página.

Menú en wordpress

En el siguiente capítulo veremos como añadir imágenes a nuestras páginas, para hacerlas más atractivas al visitante.

 

Configuración inicial: Instalar un nuevo tema

En la anterior parte de este curso de WordPress vimos como crear páginas y como desactivar la configuración de blog. Ahora vamos a ver como instalar un nuevo tema para cambiar el aspecto visual

Temas en WordPress

Los temas (también llamados plantillas o incluso templates) son una manera rápida de cambiar totalmente el aspecto visual de nuestra web sin necesidad de tener conocimientos de html/css o programación.

Es importante resaltar que el contenido de nuestra web (entradas y páginas) es independiente de la plantilla usada. Con lo cual podemos estar un año usando un plantilla concreta y añadiendo contenidos y después cambiarla por otra sin que esto afecte al contenido.

Hay otros elementos en el diseño que pueden perderse con un cambio de tema. Por ejemplo, los menus o los widgets (los widgets son complementos que podemos instalar y que añadirán contenido o funcionalidades a nuestro diseño). Aunque no implica una pérdida total, y con un simple reajuste se pueden volver a activar.

Eligiendo un tema

Lo primero es elegir una plantilla para nuestra web. Aquí tenemos muchas posibilidades:

  • Elegir uno gratuito. Podemos buscar en Internet o ir a la página de temas gratuitos oficial de wordpress.
  • Elegir uno de pago. Hay muchos sitios donde encontrarlos, por ejemplo, Themeforest
  • Contratar a alguien para que nos haga un diseño personalizado.

Tomemos la decisión que tomemos, siempre podremos cambiarlo más adelante, como ya comenté. Para el ejemplo que estoy siguiendo, usaré Unite.

Otro detalle importante, si nos decantamos por la opción gratuita podemos instalar una plantilla de forma directa desde el panel de administración. Tenemos que ir a: Apariencia => Temas => Añadir nuevo. Y desde aquí podemos instalar con solo pulsar un botón. Más sencillo y rápido imposible.

Instalar nuevo tema en WordPress de forma sencilla

Si hemos optado por un tema de pago, o hemos descargado un tema gratuito, este irá contenido en un archivo zip con el nombre del tema. Ojo al comprar un tema de pago, porque suelen venir con documentación sobre el tema, archivos de photoshop y extras parecidos. Lo que necesitaremos es el zip con el nombre del tema.

Para instalar la plantilla, simplemente usamos el botón “Subir tema” que aparece en la anterior pantalla de selección de temas. Una vez instalado, nos aparecerá un enlace para activarlo.

En cualquier momento podemos cambiar la plantilla usada. Solo tenemos que ir a “Apariencia => Temas” y desde ahí elegir el que queramos.

Personalizando un tema

Configuración de wordpress

Una vez instalado, podemos personalizarlo en el menú “Apariencia => Personalizar”. Desde aquí podremos subir nuestro logo, poner una imagen de fondo o cambiar los colores. Hay que tener en cuenta que estas opciones dependen del tema elegido. Los temas gratuitos suelen contar con pocas opciones, mientra que los temas de pago suelen incluir tantas que disponen de un menú aparte para configurarlos.

De momento, en nuestro ejemplo no tocaremos nada aquí. En la próxima parte veremos como crear más páginas y gestionar los menús.

 

 

 

 

Configuración inicial: Página de inicio

La página de inicio de WordPress nos muestra por defecto nuestras últimas entradas. Esta es la mejor opción para un blog, pero si vamos a usarlo para una web presencial de una pequeña empresa, tendremos que cambiarlo. Necesitaremos que se muestre una página de inicio. Este es el aspecto de un WordPress recién instalado:

Wordpress recién instalado

Para cambiar este configuración inicial, tendremos que crear dos páginas, una será la home y la otra servirá para mostrar nuestras entradas o noticias. El siguiente paso será cambiar la configuración para que al entrar en la web se nos muestra la página que hayamos creado como home.

Creación de páginas en WordPress

De momento tenemos nuestra página con las últimas entradas del blog. No queremos eliminar el blog, pues lo usaremos para nuestra sección de noticias. Pero lo queremos quitar de la portada.

Lo primero es entender la diferencia entre “Entradas” y “Páginas”. Estos son los dos tipos principales de contenidos que tendremos. Son casi iguales, la diferencia es que las entradas siguen un orden cronológico, mientras que las páginas no lo hacen. En su lugar, las páginas se ordenan de forma jerárquica.

Las entradas son propias de un blog o web de noticias, mientras que las páginas son más propias para una web presencial, como la que estamos haciendo. Por supuesto, podemos tener ambas.

Así que manos a la obra. Lo primero que haremos es entrar en el panel de control de WordPress y crear dos paginas. Para ello usaremos el menú de la izquierda. Seleccionamos Páginas => Todas las páginas. Deberíamos ver que tenemos una página de ejemplo ya creada.

Crear pagina wordpress

Esta página no nos sirve de nada, así que la borramos. Para ello ponemos el ratón sobre el título y veremos que abajo nos salen varias opciones (Editar | Edición rápida | Papelera | Ver ). Pues pulsamos en “Papelera”. Con esto eliminamos la página de prueba. Que en realidad no queda eliminada, sino que va a la papelera de wordpress, pudiéndolas recuperar, en caso de que borremos algo por error.

Ahora nos deberíamos tener un listado vacío. Pulsamos en el botón “Añadir nueva”, situado a la derecha del título “Páginas”. Nos aparecerá el editor de contenidos.

Wordpress nueva página

Pues bien, escribimos “Home” en el espacio que indica “Introduce el título aquí” y después clicamos en el botón azul de la derecha, que indica “Publicar”.

Repetimos el proceso, pero creando esta vez una página llamada “Noticias”. Ambas páginas las creamos en blanco, sin contenido alguno. Si lo hemos hecho de forma correcta, deberíamos tener el siguiente listado de páginas:

Wordpress listado páginas

Cambiar página de inicio

Ahora tenemos que configurar el inicio de nuestra web para que muestre la página que hemos creado. Para ello nos vamos a Ajustes => Lectura.
Veremos que la primera opción es: “Página frontal muestra” y está configurada para que la web se comporte como un blog, mostrando las últimas entradas.

Así que seleccionamos la segunda opción, “Una página estática (seleccionar abajo)”. Como página inicial seleccionamos “Home”, y para la página de noticias seleccionamos “Noticias”

Wordpress como web corporativa

Ya que estamos en esta sección, mencionar la opción “Visibilidad para los buscadores”. Esta opción la podemos activar para que nuestra web no aparezca en buscadores como Google. Puede ser interesante hacerlo mientras estamos montando nuestra página, pero si lo hacemos recordad desactivarla una vez terminada de montar o seremos casi invisibles en Internet.

Planteamiento inicial

Antes de crear una web con WordPress debemos sentarnos a analizar que es lo que queremos exactamente. Ponernos a trabajar sin un plan en mente es perder el tiempo.

Para este pequeño curso de WordPress voy a poner como ejemplo una tienda ficticia de bicicletas. Se trataría de una pequeña tienda local llamada “Sobre Ruedas”, dedicada a la venta y reparación de bicicletas.

Antes de ponernos a trabajar deberíamos tener listos los siguientes elementos, como mínimo:

  • Estructura de la web.
  • Textos y fotos a usar.
  • Plantilla a usar.

Empezamos por el principio. La estructura de la web. Nuestra web será sencilla, y tendrá los siguientes elementos:

Estructura web sencilla wordpress

  • Una portada, en la que mostraremos un pequeño texto y un carrusel de imágenes.
  • Una sección de “Nuestra tienda”, en la que describiremos el negocio.
  • Una sección de “Servicios” en la que detallaremos los servicios ofrecidos. Esta sección tendrá dos subsecciones: Venta de Bicicletas y Reparación de Bicicletas.
  • Un formulario de contacto, para que puedan contactar con nosotros por correo electrónico. Aquí introduciremos también nuestra dirección física y un mapa.
  • Una galería de imágenes

Sobre los textos e imágenes, al ser una web de ejemplo, usaré textos de ejemplo para maquetación e imágenes gratuitas.

Un punto crucial será la elección de la plantilla a usar. Hay muchos temas, tanto gratuitos, como de pago. Para el ejemplo voy a usar la plantilla gratuita para WordPress Unite

Plantilla WordPress Unite

Sobra la plantilla, un detalle importante es que podremos cambiarla con facilidad si la web que vamos a crear es sencilla y no va a necesitar de muchas modificaciones. Si no acabamos de tener claro que es lo que queremos, mi recomendación es decantarse en inicio por una plantilla gratuita y después cambiarla si no nos gusta.

A la hora de elegir la plantilla debemos de procurar que sea responsive (adaptable a móviles) y que esté pensada para SEO (posicionamiento en buscadores). Decir que a día de hoy casi cualquier plantilla ya cumple con estos requisitos. Aún así recomiendo previsualizar la plantilla que vamos a eligir y verla en un móvil (o reduciendo la ventana del navegador). El que nuestra web se vea bien y a nuestro gusto tanto en ordenador de escritorio como en móviles es muy importante y a veces se pasa por alto hasta bien metidos en el desarrollo de la página.

En el próximo artículo veremos la configuración inicial de wordpress para nuestras necesidades. Concretamente, como dejar de que funcione en modo blog para que pase a funcionar en modo sitio web.

Introducción a WordPress

Bienvenido a este pequeño curso de introducción a WordPress, en el que podrás aprender a crear una web en WordPress. Aquí trataré de explicarte de manera sencilla como montar una web para una pequeña empresa, asociación, club o grupo similar.

Lo primero, ¿por qué WordPress? O incluso, ¿qué es WordPress? WordPress es un sistema para crear blogs cuya primera versión apareció en 2003. Con el paso de los años se ha ido perfeccionando y se ha empezado a usar para crear webs presenciales de complejidad baja o media.

Panel de control de WordPress

Ventajas de wordpress

Las principales ventajas de este sistema frente a otros son varias:

  • Sencillez de actualización de contenidos: Una vez montada una web, cambiar textos, imágenes, menús y demás es bastante sencillo
  • Sencillez y rapidez de montaje: Con instalar wordpress ya tenemos la base para crear nuestra web. Y la instalación es sencilla.
  • Variedad de plantillas: Cambiar el diseño de la web no requiere mucho esfuerzo. Hay millones de plantillas (gratuitas y de pago) que nos permiten adaptar el estilo visual de forma rápida. Y si queremos un estilo muy personalizado, tampoco es complicado hacer las modificaciones (aunque esto si requerirá conocimientos informáticos de html/css)
  • Multitud de plugins: Los plugins o complementos nos permitirán ampliar nuestra instalación de wordpress añadiendo casi cualquier cosa que queramos. Tienda online, formularios de contacto, galerías de imágenes, conexiones con redes sociales, etc. La lista es inagotable.
  • Gran comunidad: WordPress es uno de los sistemas más usados a día de hoy para crear una web, con lo que es muy sencillo encontrar ayuda, soporte o algún profesional que nos eche una mano si es necesario.

Todo esto convierte a WordPress en un sistema perfecto para crear webs sencillas sin necesidad de conocimientos de programación de ningún tipo. Es cierto que si queremos hacer algo de una complejidad media o una personalización muy fina necesitaremos algún tipo de conocimiento técnico, pero para una gran mayoría de los casos no será necesario.

Otra ventaja es que este sistema viene como opción de instalación automática en muchos hostings, desde donde podremos instalarlo con un solo click de ratón, sin necesidad de configurar bases de datos, ni usar herramientas como FTP, etc.

En el próximo artículo veremos como plantear una web que vayamos a desarrollar con este sistema.