Desarrollo de
sitios web
con WordPress
1
Plugins
¿Qué es un plug-in y para qué sirve?
Un plug-in es un módulo de software que añade una característica o un servicio específico a
un sistema más grande.
La idea es que el nuevo componente se enchufa simplemente al sistema existente. Por
ejemplo, el plug-in de Flash (Flash Player), permite ver animaciones en Flash en cualquier
navegador.
Wordpress también nos da la posibilidad de incorporar diferentes plugins a nuestro sistema.
La mayoría de estos plugins son desarrollados por personas de todo el mundo que en algún
momento necesitaron incorporar una función nueva en sus blogs y tuvieron la iniciativa de
programarla ellos mismos. Al igual que ocurre con los themes, la comunidad de Wordpress es
muy generosa, y por eso, la mayoría de los plugins son gratuitos y están disponibles para que
cualquier persona los incorpore en sus blogs.
Descarga e instalación de plugins.
De la misma forma que los themes, los plugins se descargan de la web en archivos
comprimidos en formato ZIP o RAR.
O podemos buscarlos directamente desde el panel Plugins de nuestro administrador
Si bien los plugins pertenecen a diferentes autores y se encuentran diseminados por toda la
web, los desarrolladores de Wordpress habilitaron un gran repositorio en el que aparecen
catalogados los plugins que cuentan con la aprobación de la comunidad y que fueron probados
por otros usuarios.
2
El directorio de plugins es: http://wordpress.org/extend/plugins/ y cuenta con más de 14.00
plugins.
Cada plugin tiene una descripción de sus funciones, el link de descarga, instrucciones para la
instalación, faqs, y algunas capturas de pantalla, para mostrar su utilidad.
Además, podemos ver la ficha técnica con el número de versión del plugin, la fecha de la última
actualización y la última versión de Worpress con el que es compatible. En algunos casos
también encontraremos el link al sitio web del desarrollador.
A través del motor de búsqueda de Wordpress podemos encontrar el plugin para la
funcionalidad que estamos necesitando.
Una vez encontrado el plugin, hacemos clic en instalar ahora y esperamos a que concluya la
instalación.
Una vez instalado, desde la opción Plugins del menú Plugins, podemos ver todos los instalados
y activarlos.
Allí encontraremos 2 plugins ya instalados en Wordpress (Hello Dolly, un plugin creado a modo
de broma por los desarrolladores de Wordpress y Askimet, un poderoso antispam de
comentarios)
3
Desde allí podremos activar el plugin que acabamos de instalar.
Vamos a instalar un plugin de ejemplo para que puedan implementarlo en un plugin concreto.
En el Administrador de Plugins vamos a la opción Añadir nuevo.
Dentro de la opción buscar, escribimos: Contact form 7
Y hacemos clic sobre: Instalar ahora. Esperamos a que Wordpress instale el plugin, y una vez
instalado hacemos clic en Activar.
Como los plugins no son desarrollados por Wordpress, cada plugin tiene su sistema de
administración y edición. Podemos encontrar la edición del plugin en nuestro administrador
de la izquierda, algunos plugins agregan un nuevo panel y otros se editan desde el panel de
ajustes.
El plugin que estamos utilizando como ejemplo, podemos editarlo desde el menú de la
izquierda, veremos que se agregó la opción: Contacto
Desde ahí podremos configurar nuestro plugin.
En la pantalla de configuración veremos un formulario de ejemplo ya creado.
4
Podemos editar ese formulario, o crear uno nuevo. Vamos a hacer clic en: Añadir nuevo
Lo primero que debemos configurar es el nombre del formulario. Este dato no es visible para
los usuarios, nos sirve a nosotros para identificar y organizar los formularios creados.
Una vez ingresado el título, tenemos que determinar los campos que completarán los usuarios.
La pestaña “Formulario” viene con algunos campos predeterminados, podemos mantenerlo,
modificarlos o eliminarlos y generar campos nuevos.
Para nuestro formulario de consulta, le vamos a solicitar al usuario ingresar 4 datos:
Nombre y apellido
Correo Electrónico
Edad
Mensaje
5
En el espacio de contenido de la pestaña formulario vamos a ir modificando y agregando los campos
necesarios para que el usuario pueda completar estos datos.
Voy a modificar el campo:
<label> Nombre (requerido)
[text* your-name] </label>
Por:
<label> Nombre y apellido: (requerido)
[text* your-name] </label>
Mantendremos el campo para el correo electrónico.
Voy a eliminar el campo Asunto, borrando el código:
<label> Asunto
[text your-subject] </label>
Y en ese espacio agregaremos el campo para la edad. Para esto hacemos clic en el campo de
tipo “número” en la parte superior de la pestaña
Al hacer clic en la opción “número”, abre una ventana para que configuremos el campo:
6
Tipo de campo: Las opciones son “Selector de valor” o “Selector de deslizante”, seleccionamos
la opción de Selección de valor.
Campo requerido: Marcamos esta casilla si el campo es obligatorio para poder enviar el
formulario. En este caso, vamos a dejarlo sin tildar, esto convierte al campo en opcional.
Nombre del campo: Este es el valor que va a identificar al campo y que usaremos más abajo
para incorporarlo al mail que nos enviará con los datos que completó el usuario.
Valor predeterminado: Vamos a completar esta opción, solo en los casos en los que
necesitemos que el campo tenga un valor pre-cargado.
Rango: Nos permite limitar valores mínimos y máximos
Atributo de ID: si queremos agregarle un estilo con selector de ID
Atributo de Clase: si queremos agregarle un estilo con selector de Clase
Una vez configurados todos los atributos, hacemos clic en “insertar
7
Esto inserta solo el campo, si queremos agregar un label y el dato a solicitar, lo hacemos desde
el contenido de la pestaña “formulario”
Una vez configurados todos los campos, pasamos a la pestaña “Correo electrónico”
8
En esta pestaña determinaremos la configuración del mail que enviará el sitio con los datos
que completaron los usuarios.
Para: casilla de correo a donde queremos que nos lleguen los datos de los mensajes
De: casilla de correo de remitente, es decir, desde donde nos llega el mail. Puede ser un dato
fijo o podemos establecer el valor de un campo del formulario
Asunto: el título con el que nos llegará el mail
Cabeceras adicionales: en caso de querer enviar el mail a más de un correo.
Cuerpo del mensaje: en este espacio combinaremos datos fijos (texto) con datos variables
(identificación de los campos) para armar el cuerpo del mensaje
En la pestaña “Mensajes” podemos personalizar los mensajes de éxito y error.
9
En la pestaña “Ajustes”, podemos agregar fragmentos de código personalizado. Encontramos
los ajustes personalizados en https://contactform7.com/additional-settings/
Cuando terminamos de establecer todas las configuraciones, hacemos clic en “Guardar” de la
sección “Estado”.
Una vez guardado, en la parte superior nos da el código para poder utilizar el formulario.
10
Podemos incorporar el formulario en una entrada, en una página o en un Widget.
Vamos a crear una página de contacto para nuestro sitio. Hacemos clic en “Páginas” – “Añadir
nueva”
Le ponemos como título “Contacto” y en el espacio de contenido pegamos el código del
formulario. Podemos agregar también algún texto que le indique al usuario que debe
completar los datos:
Widgets
Son secciones independientes de contenido que podemos colocar en las áreas designadas en
cada plantilla (barra lateral, footer, etc)
El número y tipo de Widgets instalados en nuestra plataforma WordPress dependen del tema
que estemos utilizando y de los plugins que tengamos instalados. Es decir, cada tema tiene un
11
conjunto de widgets propios, así como áreas predefinidas para ubicarlos. A su vez, algunos
plugins, no todos, añaden widgets a nuestra lista.
Los temas más sencillos sólo permiten ubicar los widgets en la barra lateral del tema, en tanto
que los temas más sofisticados o premium permiten ubicar widgets en diversas zonas de la
página de inicio, en la barra lateral, en franjas de la cabecera, en el pie de página, etcétera.
Cuando vamos a la opción de menú Apariencia - Widgets, vemos a la izquierda la lista de widgets
disponibles y a la derecha la zona donde esos widgets pueden ubicarse. En este caso, la barra lateral y
una zona llamada Postscript.
Para ubicar o eliminar un widget de su zona hay diversos procedimientos. Podemos desplegar
el panel de cada widget, por ejemplo, en la zona de la barra lateral (Right Sidebar) y eliminar
de ahí el widget correspondiente pulsando la opción Borrar.
12
Para ubicar un Widget podemos desplegar su panel y elegir la zona donde lo vamos a ubicar,
después pulsamos el botón Añadir widget.
13
