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 [email protected]

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.

Instalación y configuración de temas

Diseño adaptable (Responsive Web Design).

Paginas estáticas.

Creación y edición de páginas estáticas.

Organización de jerarquías de páginas.

Menús.

Creación y edición de menús.

Cómo y dónde mostrar nuestros menús.

Integración con Google Analitycs

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 formularios (contacto, petición de datos, etc.)

Cómo y dónde mostrar nuestros formularios.

Internacionalización.

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




Paginas estáticas.


Organización jerarquías de páginas.

Menús.












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.

26

Fuente: http://commons.wikimedia.org/wiki/File:Complete.png

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/responsive-wordpress-themes/

http://www.tripwiremagazine.com/2013/02/responsive-wordpress-themes.html

Y por supuesto en:

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

28



















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




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






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


48

Qué mostrar

Cómo mostrarlo

(estructura)


49

Menú(s) del tema


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




Paginas estáticas.



Menús.












Complementos

Instalación de nuevos complementos (plugins) Complementos interesantes

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 multi-idioma, 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


69

Para ver que plugins tenemos instalados:


70


71


72

Podemos instalar nuevos plugins:

Obteniendo el fichero .zip por nuestra cuenta, descomprimiéndolo y copiando/subiendo la carpeta con todo su contenido al directorio /wp-content/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.


73

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 incom-patible 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.


74


75


76


77


78

Para deshabilitar/borrar los plugins:


79


80

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).

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

82

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






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

http://contactform7.com/docs/




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




Paginas estáticas.



Menús.






Como contactar con el usuario (formularios).





Cómo gestionar contenidos multi-idioma. 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


109

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:


110

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


111

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):


112

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):


113

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

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

http://codex.wordpress.org/WordPress_in_Your_Language


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

116


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

117




Paginas estáticas.



Menús.






Como contactar con el usuario (formularios).






Complementos Instalación de nuevos complementos (plugins)


118

Complementos interesantes 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

Education