FORMACIÓN WORDPRESS ESEC · a wordpress.org y descargaremos la última versión de Wordpress en...

1

FORMACIÓN WORDPRESS ESEC

2

Índice:

1. WORDPRESS ………………………………………………………………………………… 3

2. INSTALAR WORDPRESS…………………………………………………………………. 7

1. VISUAL COMPOSER……………………………………………………………………….. 8

2. PLUGGINS DE INTERÉS…………………………………………………………………. 13

3. ANALYTICS……………………………………………………………………………………. 14

Tutores:

Carlos Fernández ([email protected])

Josep Colet ([email protected])

3

3. WORDPRESS

Què és Wordpress?

WordPress es un sistema de gestión de contenidos o CMS (por sus siglas en inglés, Content

Management System) enfocado a la creación de cualquier tipo de sitio. Originalmente alcanzó

una gran relevancia usado para la creación de blogs, para convertirse con el tiempo en una de

las principales herramientas para la creación de páginas web comerciales. Ha sido desarrollado

en el lenguaje PHP para entornos que ejecuten MySQL y Apache, bajo licencia GPL y es software

libre. Su fundador es Matt Mullenweg. WordPress fue creado a partir del desaparecido

b2/cafelog y se ha convertido en el CMS más popular de la blogosfera y en el más popular con

respecto a cualquier otro CMS de uso general. Las causas de su enorme crecimiento son, entre

otras, su licencia, su facilidad de uso y sus características como gestor de contenidos.

Otro punto a considerar sobre su éxito y extensión es la enorme comunidad de desarrolladores y

diseñadores, encargados de programarlo en su núcleo o creando complementos (llamados

plugins) y plantillas (llamados temas) para la comunidad. En febrero de 2015 era usado por el

23,4% de todos los sitios existentes en Internet basados en gestores de contenido.

(Font: Wikipedia)

• Exemple de webs realitzades en Wordpress

Woocommerce: http://www.masaje-sabadell.com/

Web corporativa: http://apen.es/

• Beneficis i avantatges de Wordpress

Responsive

Seo Friendly

Auto Administrable

Open Source (pluggins, themes…)

Social Media

Blog

E-commerce

2. Servidors i dominis

Servidor propio de wordpress

Versión gratuita de wordpress

Proveedor de hosting. Ejemplo: 1and1, WebEmpresa…

Comprobar volumen de BDD MySQL disponibles

Diferentes tipologíes de domini (.ES, .CAT, .COM…)

http://www.masaje-sabadell.com/

http://apen.es/

4

Configuració de correus

Demostració 1and1

3. Instal·lació de Wordpress

1. Creació de BDD MySQL

2. Descarregar wordpress

3. Configuració de arxiu: config-sample.php

4. Renombrar arxiu com a config.php

5. Pujar wordpress via FTP

6. Apuntar domini a la carpeta “wordpress”

7. Instalar wordpress de manera online

Eines necesaries:

(Gestor FTP: https://filezilla-project.org/)

(Editor de codi: https://www.sublimetext.com/)

(Wordpress: https://es.wordpress.org/)

(Hosting: https://www.1and1.es/)

4. Instal·lació de plantilles

Themeforest

Plantilles gratuites

Pluggins inclosos

Comprobar volum de descàrrega de cada plantilla

Accesos FTP:

Usuari: ESEC

Servidor: webseofriendly.es

contrasenya: M0ny5ruy?

Subdominis:

alumne1.webseofriendly.es







https://filezilla-project.org/

https://www.sublimetext.com/

https://es.wordpress.org/

https://www.1and1.es/

5

BDD MySQL

Alumne1:

Nombre de la base de datos : db652409111

Nombre del Host : localhost

Puerto : 3306

Nombre de usuario : dbo652409111

Descripción : alumne1

Versión : MySQL5.5

Contrasenya: 123456789

Alumne2:



Puerto : 3306



Versión : MySQL5.5


Alumne3:



Puerto : 3306



Versión : MySQL5.5

Estado : Se ha iniciado la configuración


6

Alumne4:



Puerto : 3306



Versión : MySQL5.5


Alumne5:



Puerto : 3306



Versión : MySQL5.5


Alumne6:



Puerto : 3306



Versión : MySQL5.5


Alumne7:

7



Puerto : 3306



Versión : MySQL5.5


4. COMO INSTALAR WORDPRESS

Instala Wordpress en Español en tu servidor

Es necesario instalar Wordpress para empezar a utilizar este servicio, por lo que, accederemos

a wordpress.org y descargaremos la última versión de Wordpress en Español haciendo click en

el botón situado en la derecha de la pantalla:

Descargar e instalar Wordpress

Una vez el formato comprimido en .zip se haya descargado procederemos a descomprimirlo

para posteriormente subir los archivos al servidor mediante un Gestor FTP, para ello

recomendamos utilizar FileZilla. En Filezilla introduciremos los datos del servidor (que nos ha

proporcionado nuestro servicio de hosting para Worpress), el nombre de usuario, la

contraseña y el puerto y posteriormente haremos click en “Conexión rápida” y

seleccionaremos todo el contenido del interior de la carpeta de Wordpress que hemos

extraído para subir todos los archivos a la carpeta inicial en nuestro servidor, puede tardar

varios minutos.

Carga en el hosting

Cuando finalice el proceso, abriremos nuestro navegador y accederemos a la url donde

acabamos de instalar nuestro Wordpress: www.midominio.com/wp-admin. Una vez dentro,

nos avisará que de que no existe el archivo wp-config.php por lo que será necesario crear un

archivo de configuración. Haremos clic en “Crear un archivo de configuración” y en la siguiente

pantalla picaremos en “Vamos allá” para comenzar.

Configuración del wordpress

A continuación, la siguiente pantalla nos solicita información acerca de nuestra base de datos

que ha de tenido que estar creada previamente: nombre, usuario y contraseña. Después de

haber introducido estos datos, puede que nos aparezca una pantalla en la que nos notifique

que no ha sido posible crear/modificar el archivo de configuración wp-login.php. Si nos pasa

esto simplemente tendremos que abrir el bloc de notas, copiar el texto que nos proporciona,

crear el archivo y subirlo al servidor mediante Filezilla.

8

Seguidamente, una vez tengamos creado el archivo wp-login, accederemos a otra página para

completar la información sobre nuestro Wordpress: Título, correo electrónico, nombre de

usuario, contraseña… y haremos clic en “instalar Wordpress”.

instalar wordpress

En la siguiente pantalla, accederemos a la pantalla donde proporcionaremos la información de

nuestro sitio para finalizar la instalación:

Una vez hayamos completado todos los campos y haciendo clic en el botón “Instalar

Wordpress”, llegaremos a la pantalla siguiente y habremos finalizado nuestra instalación.

5. COMO FUNCIONA VISUAL COMPOSER

A continuación, te enumero un listado completo de los elementos que tienes disponibles

en Visual Composer y te explico su funcionamiento:

Fila. Una fila es un contenedor horizontal en el que

puedes insertar contenido estructurado en columnas. Para escoger una estructura

determinada haz click en el icono de líneas horizontales situado en la parte superior

izquierda del elemento y escoge el número de columnas que quieras.

Cada fila o franja de Visual Composer se puede desplazar y cambiar de orden, borrar y

duplicar. En cada franja puedes elegir el color de fondo y otras característica especiales

para cada una.

Text Block. Los Text Block son cajas de texto a los

cuales puedes dar formato mediante un editor sencillo similar al de cualquier procesador

de texto.

Separator. Línea separadora a la que puedes dar el aspecto y la

anchura que quieras. Sirve para separar visualmente el contenido y estructurar mejor

el diseño.

Separator with text. Añade una línea separadora con un texto

incluido. Te va a servir para separar visualmente el contenido y estructurar mejor

el diseño.

Message Box. Crea una caja con mensaje a la que se le

puede asignar un estilo prediseñado y una animación que puedes elegir de una lista.

9

Facebook Like. Crea una caja típica de Facebook para que los

usuarios puedan dar un Me Gusta y el enlace sea visible en su propio perfil.

VER UN EJEMPLO

Tweetmeme Button. Muestra un botón de Twittear para que los

usuarios puedan hacer un tweet con el contenido de la página o post. Incluye cifra de

tweets totales.

Google+ Button. Despliega un botón de Google Plus para que

los usuarios puedan recomendar el contenido en esta red social perteneciente a Google.

Pinterest Button. Muestra un botón de Pinterest para que los

visitantes puedan pinear el contenido y colocarlo en unos de sus muros de Pinterest.

Preguntas Frecuentes. Añade una caja de FAQ o preguntas

frecuentes que podemos personalizar, añadirle una animación predefinida, etc.

Single Image. Para insertar una imagen de la librería multimedia

o subida desde el ordenador. Podemos darle tamaño y alineación, además de un enlace.

Image Gallery. Añade una galería de imágenes que vamos a

cargar desde nuestra librería multimedia o el ordenador. Podemos editar el formato de la

galería.

Image Carousel. Para insertar un carrusel animado de

imágenes desde nuestra librería multimedia o subidas desde nuestro propio ordenador.

Pestañas. Añade una caja con diversas pestañas que

permiten navegar entre diferentes contenidos haciendo click en cada una de ellas.

http://aulacm.com/guia-visual-composer-wordpress/#group58076a66e330b

10

Barra adicional con widgets. Este elemento nos va a

servir para crear una zona adicional en la que podemos insertar todo tipo de widgets.

Botón. Para insertar un botón que elegimos de entre una serie de

estilos predeterminados. También podemos añadirle un icono de la biblioteca de

iconos.

Botón 2. Muy parecido al anterior, con la ventaja de que

podemos elegir entre más opciones de estilos predefinidos y añadir color y tamaño.

VER UN EJEMPLO

Tour. Sirve para añadir una caja de contenido vertical que

clasificaremos en distintas pestañas, las cuales muestran dicho contenido al hacer click

sobre ellas.

Accordion. Inserta una caja con franjas de contenido que

pueden desplegarse y mostrar más contenido al hacer click en cada una de ellas.

Entradas recientes. Este elemento sirve para añadir entradas

recientes que hayamos publicado y filtrarlas por categorías determinadas.

Call to Action Button. Inserta un llamativo botón call to action

o llamada a la acción que podemos personalizar, cambiarle el color, añadir una

animación, etc.

Call to Action Button 2. Este elemento nos va a servir para

añadir un botón Call to Action muy similar al anterior y que podemos personalizar de

diversos modos.

http://aulacm.com/guia-visual-composer-wordpress/#group58076a66e4a07

11

Video Player. Permite insertar un reproductor con un vídeo de

Youtube o Vimeo. Para añadirlo, simplemente introducimos la URL del vídeo.

Google Map. Muestra un mapa con la dirección que insertemos

mediante un código iframe que extraemos directamente en Google Maps. Es posible

editar la altura.

Blog Carousel. Este elemento muestra artículos o entradas del

blog en forma de carrusel animado que podemos filtrar por categorías determinadas.

Post Slider. Muestra un slider con artículos o entradas del blog

en forma de carrusel animado que podemos filtrar por categorías determinadas.

HTML Puro. Para los más avanzados, este elemento permite

insertar código HTML puro para realizar acciones que así lo requieran.

JS Puro. Al igual que el anterior, este elemento avanzado nos va

a servir para implementar directamente código puro en nuestra página, en este caso

Javascript.

Widget de Flickr. Con este elemento podrás añadir un widget

con fotos de tu cuenta de Flickr y editar diversos aspectos relacionados con el modo de

mostrarlas.

Barra de Progreso. Inserta una barra de progreso con un

porcentaje. A la barra podemos asignarle estilos y animaciones predefinidas.

VER UN EJEMPLO

Pie Chart. Con el elemento Pie Chart vamos a poder insertar un

cuadro en forma circular que muestra diferentes porcentajes de manera proporcional.

http://aulacm.com/guia-visual-composer-wordpress/#group58076a66e64a8

12

Empty Space. Es un espacio en blanco al que podemos dar una

altura. Esencial para separar verticalmente los diferentes bloques de contenido y dar

“aire” a la web.

Custom Heading. Como el anterior, pero con mayor cantidad

de opciones, como la elección del tipo de letra de Google Fonts, color, interlineado, etc.

WP Buscar. Para insertar un campo de búsqueda dentro de

nuestra web. Podemos personalizar su estilo mediante añadiéndole una clase de CSS.

WP Meta. Este elemento nos va a servir para insertar

automáticamente diversos botones de log in, log out, admin, feed y enlaces de

WordPress.

WP Recent Comments. Con este elemento podemos

incluir un widget de Comentarios Recientes realizados en mi blog y editar algunos

aspectos.

WP Calendar. Nos permite añadir un widget de calendario que

incluye enlaces a las diferentes fechas de publicación de las entradas de mi blog.

WP Pages. Con este elemento podemos insertar en nuestra

página un widget que lista todas las páginas existentes en mi sitio web de WordPress.

WP Tag Cloud. Para insertar en mi página web un listado en

forma de nube de tags con las etiquetas más usadas en las entradas de mi sitio.

WP Custom Menu. Con este elemento podemos insertar en un

lugar determinado cualquiera de los menús que hayamos creado en Apariencia >

Menús.

13

WP Text. Este elemento nos va a permitir insertar un texto

determinado o un código HTML en nuestro sitio web, como un widget de texto.

WP Recent Posts. Para mostrar en nuestro sitio web un widget

con los comentarios recientes que los visitantes han realizado en nuestro blog.

WP Links. Con este elemento añadiremos en la zona que

queramos un widget con los enlaces que tenemos en nuestra sección de Blogroll.

WP Categories. Este elemento nos va a servir para añadir donde

queramos un widget con un listado de las categorías existentes en nuestro sitio.

WP Archives. Con el módulo WP Archives, al igual que en los

casos anteriores, podemos mostrar un widget que contiene un listado con los archivos

de nuestro sitio.

WP RSS. Este elemento lo vamos a poder utilizar para

colocar en nuestro sitio web un widget de sindicación RSS a nuestros contenidos.

6. PLUGGINS DE INTERÉS

a) NK GOOGLE ANALYTICS

google analytics wordpress

El plugin NK Google Analytics tiene como gran ventaja la gran cantidad de información que es

capaz de mostrar en el panel de WordPress mediante API.

NK Google Analytics permite insertar el código de seguimiento de Google Analytics en

WordPress, pero además también permite insertar la barra de aviso de cookies.

14

En cuanto a la configuración, NK Google Analytics no llega a ser tan flexible como sus

competidores (Google Analytics by Yoast y Better Google Analytics) pero permite elegir

también algunas opciones interesantes como elegir entre Universal Analytics y Classic

Analytics.

Este plugin no lo he probado, por lo que no tengo mucho que decir sobre él, por esta razón te

dejo una URL para que puedas encontrar más información sobre el:

https://es.wordpress.org/plugins/nk-google-analytics/

b) Yoast SEO

Yoast SEO, merecidamente considerado como el mejor plugin SEO para WordPress, cuenta con

un amplio conjunto de características y críticas muy favorables. Incluye funciones XML

Sitemap, Metatags sociales, acceso a Robots.txt y .htaccess y mucho más. Es crítico para el SEO

de tu web.

c) Lockdown WP

Admin canvia la URL de l'administrador de WordPress, (URL de l'àrea d'administració) perquè

ningú pugui accedir sense ser detectat en el seu lloc de WordPress.

7. GOOGLE ANALYTICS

Tráfico Directo: son aquellos usuarios que han entrado tecleando la url directamente en la

barra del navegador…. Bueno, ojalá fuera tan sencillo, más abajo extiendo la explicación

Tráfico de Referencia: también conocido como tráfico “Referral”. Son aquellas visitas que nos

llegan a través de otra web, es decir a través de enlaces en otros sites. Aquí dentro tenemos

desde las visitas de las redes sociales hasta de partners nuestros que tienen algún enlace en su

web.

Tráfico de Búsqueda: es el tráfico que nos traen los diferentes buscadores, es decir son visitas

de usuarios que llegaron a nuestros sitio web porque estaban buscando algo en internet y

aparecimos nosotros. Existen dos tipos de tráfico de búsqueda:

Tráfico Orgánico: aparecimos ante los ojos del usuario posicionados de forma natural (si

tenemos SEO, no olvidemos agradecérselo). Es la forma “gratuita” (debería poner más comillas

;P) de aparecer en Google, eso sí al SEO le pagamos, eso no es gratis.

Tráfico de pago: solo aparecerán visitas en este apartado si en algún momento hemos

realizado alguna campaña SEM (Adwords), si nunca hemos hecho campañas, esta línea ha de

aparecer completamente plana.

Tráfico social: Generado desde las redes sociales

https://es.wordpress.org/plugins/nk-google-analytics/

FORMACIÓN WORDPRESS ESEC · a wordpress.org y descargaremos la última versión de Wordpress en...

Documents

Transcript of FORMACIÓN WORDPRESS ESEC · a wordpress.org y descargaremos la última versión de Wordpress en...