Móntate un sitio web completo con WordPress en 4 horas

Móntate un sitio web completo con
WordPress en 4 horas
Iñaki Arenaza
Mondragon Unibertsitatea
iarenaza@mondragon.edu
https://twitter.com/iarenaza
https://linkedin.com/in/iarenaza
Creative Commons
Attribution Non-commercial Share Alike
3.0 Spain License

Objetivos
 Ser capaz de construir un sitio web estático usando la
plataforma WordPress.
 Ser capaz de integrar Google Analytics en nuestro
sitio web para poder hacer analítica del tráfico que
nos llega.
 Ser capaz de implementar una estrategia de
internacionalización de nuestro sitio web creando
múltiples sitios web usando una única instalación de
WordPress.

2

Programa


El aspecto de mi sitio web.





Paginas estáticas.











Creación y edición de formularios (contacto, petición de datos, etc.)
Cómo y dónde mostrar nuestros formularios.

Internacionalización.





Instalación y configuración de plugins de integración.
Generación de eventos.

Como contactar con el usuario (formularios):




Creación y edición de menús.
Cómo y dónde mostrar nuestros menús.

Integración con Google Analitycs




Creación y edición de páginas estáticas.
Organización de jerarquías de páginas.

Menús.




Instalación y configuración de temas
Diseño adaptable (Responsive Web Design).

Cómo crear y gestionar una red de blogs.
Cómo gestionar contenidos multi-idioma.

Complementos



Instalación de nuevos complementos (plugins)
Complementos interesantes

3

Programa






Paginas estáticas.







Menús.

























Organización jerarquías de páginas.


Complementos




4

 Los temas son una forma de configurar el aspecto
de un sitio WordPress: la portada, los artículos,
las páginas, las categorías, etc.
 Un tema es una colección de ficheros que
trabajan juntos para producir una interfaz de
usuario.
 Estos ficheros de denominan ficheros de plantilla,
y pueden incluir plantillas personalizadas,
ficheros de imagen (*.jpg, *.gif), hojas de estilo
(*.css), Páginas personalizadas así como los
ficheros de código necesarios (*.php).
 Los temas vienen en forma de ficheros .zip
5

 Al ser tan variados y no necesarios para todo el
mundo, no son parte de la versión estándar de
WordPress (que sólo trae de serie los temas Twenty
Eleven, Twenty Twelve y Twenty Thirteen).
 Es por ello que la práctica totalidad de los mismo son
desarrollados por terceras personas y su madurez y
calidad varían mucho de unos a otros.
 Podemos encontrar muchos de ellos en
http://wordpress.org/extend/themes/
 Pero también en otros sitios web que venden temas
para WordPress o los desarrollan a medida.
6

 Para ver que temas tenemos instalados:

7

 Podemos instalar nuevos temas:




Obteniendo el fichero .zip por nuestra cuenta,
descomprimiéndolo y copiando/subiendo la carpeta con
todo su contenido al directorio /wp-content/themes.
Desde el Escritorio de WordPress, en la entrada del menú
'Apariencia'. Esta opción a veces no funciona en algunos
proveedores de hosting, por lo que no queda más remedio
que usar la opción anterior.

8


9


10


11

 Para borrar los temas:

Puede que algunos temas no se puedan borrar
de esta forma (no tengamos permisos en disco
para hacerlo desde el Escritorio).
En ese caso hay que borrar el directorio del
tema de /wp-content/themes de forma
manual (en el servidor o via FTP).

 Los temas suelen ser más o menos configurables.
 Los elementos concretos que se pueden configurar
dependen de cada tema:







Número y disposición de las columnas de contenido
Widgets
Menús
Imágenes, cabecera, fondo, pie, etc.
Hojas de estilo (CSS),
Etc.

20

 Casi todos ellos permiten configurar widgets:

21


22

 Algunos la cabecera, el pie, el fondo, …

24


25

Diseño Adaptable (Resposive Web Design)
 Técnicas que permiten a la página web
adaptarse al medio a través del cual
se accede a la misma.
 Utilizando HTML y CSS podemos servir
una versión de la página en función
del ancho de pantalla utilizado.
 Es decir, nuestra web se adapta al
ancho de pantalla, responde ante
los cambios del tamaño la misma.
 Abandonamos los anchos fijos. El
diseño fluido está pensado en términos
de proporciones: para los anchos de los
elementos, fuentes, imágenes, etc.
Fuente: http://commons.wikimedia.org/wiki/File:Complete.png
26

Diseño Adaptable
 En el caso de WordPress, el diseño adaptable es
responsabilidad del tema, ya que es quien genera el
HTML y CSS
 Por tanto nos interesará instalar un tema que sea
adaptable (responsive).
 Algunas posibilidades:








Montezuma (por BytesForAll)
Responsive (por ThemeID by CyberChimps)
Attitude (por Theme Horse)
Custom Community (por Themekraft)
EvoLve (por Theme4Press)
Nusantara (por Hendro Prayitno)
PageLines (por PageLines)
27

Diseño Adaptable
 Más opciones (de pago o gratuitas) en:





http://responsivethemes.org/
http://mashable.com/2013/03/08/responsivewordpress-themes/
http://www.tripwiremagazine.com/2013/02/resp
onsive-wordpress-themes.html

 Y por supuesto en:


http://wordpress.org/extend/themes/

28

Programa








Paginas estáticas.




Menús.



























Complementos




29

Creación y edición de páginas estáticas
 Para hacer que WordPress no permita por defecto
comentarios en las nuevas páginas o entradas:

30

 Para hacer que WordPress muestre una página en la
portada, en vez de entradas del blog:

31

 Para usar permalinks (URLs amigables) con las
páginas y las entradas del blog (mejora el SEO):

32


33


34


35


36


37


38


39

Organización de jerarquías de páginas
 Por defecto las páginas no tienen estructura
jerárquica:

40

 Y se muestran también sin ella, y ordenadas por
fecha de edición más reciente:

41

 Sin embargo seguramente nos interesará algo
como esto (1/2):

42

 Sin embargo seguramente nos interesará algo
como esto (2/2):

43

Programa








Paginas estáticas.






Menús.
























Complementos




46

Creación y edición de menús
 Como hemos visto, si creamos páginas WordPress
crea un menú por defecto con ellas (si el tema lo
soporta).
 Si queremos usar más de un menú, o uno que no
sea sólo de páginas, podemos crear otros. De
nuevo el tema debe soportarlo.
 En estos menús podemos usar:





Páginas,
Categorías,
Enlaces personalizados (a URLs deseadas)
Otros (dependiendo del tema).
47


Qué
mostrar

Cómo
mostrarlo
(estructura)

48


Menú(s)
del tema

49


50


51


52


53


54


55


56


57


58


59

Cómo y dónde mostrar nuestros menús
 Podemos mostrar nuestros menús en:





la barra lateral (usando widgets de tipo menú),
la cabecera de la página (depende del tema, pero
casi todos los temas lo soportan),
cualquier otro sitio que nos deje el tema actual
(depende del tema).

60


61


62


63


64

Programa







Paginas estáticas.






Menús.






















Complementos
 Instalación de nuevos complementos (plugins)


65

Instalación y configuración de plugins de integración

 Los plugins son conjuntos de scripts PHP que
añaden funcionalidad a WordPress. Vienen en
forma de fichero .zip.
 A veces mejoran la funcionalidad existente en
WordPress y otras añaden funcionalidades
inexistentes.
 Hay una infinidad de plugins que cubren
funcionalidades muy variadas: sistemas de
puntuación de artículos, integración con redes
sociales, SEO, analítica web, artículos multiidioma, etc.
66

Instalación y configuración de plugins
 Al ser tan variados y no necesarios para todo el
mundo, no son parte de la versión estándar de
WordPress.
 Es por ello que la práctica totalidad de los mismo
son desarrollados por terceras personas y su
madurez y calidad varían mucho de unos a otros.
 Podemos encontrar la mayoría de ellos en
http://wordpress.org/extend/plugins/
 Casi todos ellos indican en su página en la base
de datos de plugins para qué versiones de
WordPress son compatibles.
67


68

 Para ver que plugins tenemos instalados:

69


70


71

 Podemos instalar nuevos plugins:




Obteniendo el fichero .zip por nuestra cuenta,
descomprimiéndolo y copiando/subiendo la
carpeta con todo su contenido al directorio /wpcontent/plugins.
Desde el Escritorio, en la entrada del menú
'Plugins'. Esta opción a veces no funciona en
algunos proveedores de hosting, por lo que no
queda más remedio que usar la opción anterior.

72

 Algunos (pocos) plugins necesitan acciones
manuales adicionales. Suelen indicar qué
acciones son en el fichero README.txt que
hay dentro del .zip.
 ¡ATENCIÓN!: Un plugin con errores o incompatible con nuestra versión de WordPress
puede dejar nuestro blog fuera de servicio.


Hacer una copia de seguridad completa del blog
antes de instalar un nuevo plugin, por si acaso.

73


74


75


76


77

 Para deshabilitar/borrar los plugins:

78


79

 Puede que algunos plugins no se puedan
borrar de esta forma (no tengamos permisos
en disco para hacerlo desde el Escritorio).
 En ese caso hay que borrar el directorio del
plugin de /wp-content/plugins de forma
manual (en el servidor o vía FTP).

80

Integración con Google Analytics
 WP Google Analytics (por Aaron D. Campbell):











No registrar nada de la actividad en el Escritorio.
No registrar nada de la actividad por rol
(administradores, editores, autores, etc.),
Registrar los errores 404 como eventos con la URL
/404/{url}?referrer={referrer}
Registrar los enlaces salientes como eventos con al
URL /outgoing/{url}?referrer={referrer}
(Obsoleto) Registrar las búsquedas como
/search/{search}?referrer={referrer}
Se pueden incluir datos en los registros/eventos,
usando variables personalizadas y tokens especiales.
81

Integración con Google Analytics

https://developers.google.com/analytics/devguides/collection/gajs/gaTrackingCustomVariables
82

Programa







Paginas estáticas.






Menús.
























Complementos



83

Creación y edición de formularios
 Contact Form 7 (por Takayuki Miyoshi):








Puede gestionar múltiples formularios
Son completamente personalizables,
Usando marcadores sencillos,
Con varios tipos de campos,
Disponible en varios idiomas,
Incluye CAPTCHAs, filtrado de spam con Akismet, etc.
Envía los datos del formulario por correo electrónico

 Tiene documentación muy completa en la
dirección http://contactform7.com/docs/
84


85


86


87


88


89

Cómo y dónde mostrar los formularios
 Los formularios creados con Contact Form 7 se
puede mostrar en:





Páginas
Artículos (Entradas)
Widgets (en cualquiera de las zonas donde el
tema nos permita colocar widgets).

90


91


92


93


94


95

 Podemos hacer seguimiento de los envíos de los
formularios con Google Analytics.
 Añadir el texto (todo el la misma línea)
on_sent_ok: "_gaq.push(['_trackPageview',
'/pagina-tracking-formulario.html']);"

 En el ajuste ”Configuraciones adicionales” del
formulario:

96

Programa







Paginas estáticas.














Menús.






Como contactar con el usuario (formularios).











Complementos


97

Cómo crear y gestionar una red de blogs
 A partir de la versión 3.0 de WordPress, se
fusionan la versión mono-blog (WordPress) y
multi-blog (WordPress-MU).
 Sólo existe una versión que se instala como
instalación mono-blog inicialmente.
 Podemos convertirla en instalación multi-blog
(red de sitios, en terminología de WordPress).
 Nos permite tener múltiples sitios (blogs) con
una única copia de WordPress y una única
base de datos.
98

 Una vez convertida en una instalación de red de
sitios, WordPress nos permite:








Administrar de forma centralizada, con único usuario*
(con el rol de super admin), todos los sitios wordpress.
Delegar la administración de cada sitio a otros
usuarios (con el rol de administrador).
El rol de administrador de un sitio no pueden crear,
editar o borrar usuarios, sólo pueden asignarles roles
en su sitio.
El rol de administrador de un sitio no puede instalar ni
borrar plugins ni temas, sólo puede habilitarlos o
deshabilitarlos.
99

 NOTA: Los siguientes pasos que muestras
como llevar a cabo la conversión a una red de
blogs necesitan de ciertos conocimientos
técnicos.
 Por tanto es mejor dejar que un técnico se
ocupe de ellos, y nosotros simplemente
sacarle partido a la funcionalidad una vez
habilitada .

100

 Tenemos que decidir como vamos a acceder a
cada sitio de la red:


Usando subdominios del dominio original:
• http://primer-sitio.midominio.com/
• http://segundo-sitio.midominio.com/



Usando "subdirectorios" del dominio original:
• http://midominio.com/primer-sitio
• http://midominio.com/segundo-sitio

 El segundo de los métodos es más sencillo de
configurar (no hay que configurar el DNS).
 Además es mucho más interesante desde el
punto de vista de la internacionalización del SEO.
101

 No podremos usar el segundo de los métodos
si nuestro WordPress tiene más de un mes de
vida (por la forma en que se construyen los
enlaces permanentes)
 El segundo de los métodos es más sencillo de
configurar si usamos el servidor web Apache.
 En este caso necesitamos la extensión de
Apache llamada mod_rewrite, instalada y
habilitada (existe la misma funcionalidad en
IIS 7.0 o posterior).
102

 Los pasos a seguir son:




Hacer una copia de seguridad COMPLETA de
WordPress (base de datos + ficheros).
Editar el fichero wp-config.php y añadir la siguiente
línea antes de la línea que pone /* That's all,
stop editing! Happy blogging. */:
define('WP_ALLOW_MULTISITE', true);






Desactivar los plugins instalados.
Ir al menú 'Herramientas, opción 'Configuración de la
Red' (ver figura siguiente).
Opcionalmente cambiar el título del sitio y el correo
electrónico del administrador.
103


104


105


106


107

 Una vez identificados de nuevo no parece que haya muchos
cambios, pero aparece una nueva opción en el menú
'Escritorio', llamada 'Mis sitios' (sitios a los que tengo acceso
con algún tipo de rol):

108

 Si pasamos el ratón por el texto “Mis sitios” de la zona
superior izquierda nos aparece una nueva opción:
'Administrador de la red‘, con varias opciones:

109

 Pulsando en el menú 'Sitios', nos enseña la
lista de los existentes y nos permite añadir
nuevos:

110

 Si pasamos el ratón por encima del nombre de un
sitio existente, nos aparecen los enlaces para editar
los datos del sitio, ir a su escritorio para gestionarlo o
visitar el sitio (la portada del mismo):

111

 Si creamos un sitio nuevo se nos pide la dirección del
nuevo sitio, su título y el correo del administrador (se
crea un nuevo usuario si ese correo no es de ningún
usuario existente):

112

 Una vez creado, se nos da la posibilidad de visitar el
sitio, o editarlo para configurarlo o introducir
contenidos:

113

Cómo gestionar contenidos multi-idioma
 Hay dos estrategias posibles:




Cada sitio (blog) tiene un idioma diferente, pero sólo
uno.
Un mismo sitio tiene múltiples idiomas.

 La primera alternativa es más interesante desde
el punto de vista de la internacionalización del
SEO.
 Para el segundo escenario necesitaríamos plugins
como WPML (contenido + interfaz usuario) o
qTranslate (sólo contenido).
 Nosotros vamos a trabajar con la primera opción.
114

 Lo primero es instalar el paquete de idioma euskera,
español, francés, etc. (el inglés siempre está
disponible).
 Por desgracia todavía es un proceso manual, que
requiere de cierta operativa técnica.




Para ello buscar el fichero de idioma ".mo" (p.ej.
"es_ES.mo") en
http://codex.wordpress.org/WordPress_in_Your_Language
Copiarlo/subirlo al directorio "/wp-content/languages" (si
no existe, crearlo primero).

 Ir a los “Ajustes” del sitio, en los “Ajustes Generales” y
configurar el idioma deseado para ese sitio.
115

 Si elegimos ‘French’ y le damos a ‘Guardar Cambios’:

116

 Nos aparece el Escritorio (y el sitio) en Francés

117

Programa







Paginas estáticas.


















Como contactar con el usuario (formularios).










Menús.






Complementos





118















WordPress SEO by Yoast
WP Google Analytics / Google Analytics for WordPress
Contact Form 7
Akismet
Embedly
Google XML Sitemaps
Share This!
WPML / qTranslate
Twitter Widget
Video Sidebar Widgets
Black Studio TinyMCE Widget
Add Tags And Category To Page and Post Types
BackWPup Free - WordPress Backup Plugin / UpdraftPlus WordPress Backup and Restoration

119

Móntate un sitio web completo con WordPress en 4 horas

Más contenido relacionado

La actualidad más candente (20)

Destacado (8)

Similar a Móntate un sitio web completo con WordPress en 4 horas (20)

Más de Iñaki Arenaza (18)

Último (20)

Móntate un sitio web completo con WordPress en 4 horas