CURSO INTENSIVO DE WORDPRESS
www.pepacobos.es
Copyright ©2015 Pepa Cobos. Todos los derechos reservados. Puedes imprimir una copia de este documento para tu uso personal. Excepto para ese fin, ninguna parte de esta publicación puede ser reproducida, guardada o transmitida de cualquier forma, ya sea electrónica, mecánica, grabada, fotocopiada, escaneada o por cualquier otro medio sin el permiso expreso del autor. Las peticiones al respecto deben hacerse llegar a
[email protected] Descarga de responsabilidad: Aunque el autor ha puesto el máximo empeño en preparar esta guía y en que todo su contenido esté actualizado y correcto, los consejos y estrategias contenidos en la misma pueden no ser adecuados para tu situación particular. En caso de duda deberías consultar con un profesional. El autor no se hará responsable en ningún caso por ninguna pérdida de beneficios o cualquier otro efecto indeseado que se produzca como consecuencia de la aplicación de estos consejos. Algunos de los enlaces que aparecen en esta guía pueden ser enlaces de afiliado, lo que quiere decir que gano una pequeña comisión por cada producto vendido a través de ellos aunque NUNCA recomiendo nada que no haya probado antes y me guste.
1 - DOMINIO Y ALOJAMIENTO Antes de entrar de lleno, en la instalación y configuración de tu página web, tienes que tener muy claro la diferencia entre dos conceptos que, a veces, se confunden; estos son el dominio y el alojamiento. ¿Qué es el dominio? Es la dirección de tu web. Lo que tus usuarios, lectores, clientes,...van a teclear en su navegador para acceder a tu página. En mi caso, mi dominio es www.pepacobos.es Lo primero que necesitas saber es si el dominio que quieres está libre o no, porque los dominios son únicos, es decir no puede haber dos iguales. ¿Qué es el alojamiento? Una vez decidida cual va a ser tu dirección, dominio o URL (todas significan lo mismo) en internet, necesitas un lugar donde guardar todos los elementos que formaran tu página web. Estos elementos son las imágenes, los archivos de Wordpress, ficheros necesarios,... Obviamente este lugar tiene que estar abierto 24 horas para el acceso y tener una mínima seguridad imprescindible para su correcto funcionamiento. Para que te hagas una idea son como discos duros enormes que almacenan información. Hay muchas empresas que ponen a tu disposición el alquiler de una parte de su disco duro para que puedas acceder a él y alojar allí tus datos. Hay muchísimas y todas ellas tienen sus pros y sus contras. A mi me encanta Siteground y trabajo muchísimo con ellos pero la asistencia técnica es en inglés lo que supone un handicap importante en muchos casos. En este curso vamos a contratar el alojamiento con Host Europe que tienen un equilibrio razonable entre precio y calidad, además de asistencia las 24 horas en español. Para comenzar el proceso simplemente hay que entrar en la web de Host Europe que podrás encontrar en https://www.hosteurope.es/ Una vez en ella verás la siguiente pantalla:
©Pepa Cobos 2015
Si no tienes todavía un dominio contratado (porque si lo tienes, puedes directamente entrar en el menú superior en la opción que dice “Hosting” y contratar tan sólo el alojamiento), lo más lógico es que introduzcas en la casilla que hay detrás de www. el nombre que tenías pensado incluyendo .com o .es o .org y hagas click sobre el botón que dice “comprobar”.
Entonces comenzará el proceso de búsqueda durante el cual Host Europe comprobará si esta libre la dirección elegida y con qué extensiones lo está. Cuando hablo de extensiones me refiero a .com, .es, .org, .tv,... Todos esos añadidos son extensiones. Cuando la búsqueda haya concluido te mostrará los resultados en una tabla como la que puedes ver a continuación. Como comprobarás, al estar libre la extensión .es que es la que yo elegí como preferida no me muestra más opciones. Si quieres saber qué otras extensiones están disponibles tienes que pinchar sobre “Comprobar mas extensiones”.
©Pepa Cobos 2015
En ese momento verás todas las que están libres con ese mismo nombre de dominio. Sólo tienes que seleccionar la que más te guste.
Y una vez pulsado “Seleccionar”, pondrá entonces “Listado” y arriba a la derecha podrás ver un recuadro que confirma tu elección. Sólo tienes que pulsar en continuar.
©Pepa Cobos 2015
En la siguiente pantalla podrás elegir si lo único que quieres es contratar el dominio, si prefieres añadirle también cuentas de correo o si quieres el paquete completo, es decir, el dominio y el alojamiento, que es la última opción. En nuestro caso, es eso lo que queremos asi que pulsamos sobre “Continuar” bajo Hosting Business. *Ten en cuenta que los precios pueden variar e incluso los nombres o condiciones pero lo que tienes que mirar es la opción que te da espacio web.
©Pepa Cobos 2015
A continuación llegará el momento de dejar todos tus datos y pagar. Si ya eres cliente de Host Europe te ahorrarás algo de tiempo y si no, no te queda otra y tendrás que rellenar un montón de campos obligatorios, nombre, apellidos, dirección, email,... Una vez completado el proceso de pago te llegará un correo electrónico con los datos necesarios para poder acceder (entrar) a tu espacio alquilado. ¡Enhorabuena!, ya eres propietario de una pequeña “parcela” en internet.
©Pepa Cobos 2015
2 - INSTALACIÓN AUTOMÁTICA Para realizar una instalación automática de Wordpress los pasos variarán de un proveedor a otro. Si el tuyo tiene cPanel (como Host Europe) será casi idéntico tu camino, si no lo tiene, pregunta cómo se hace pero normalmente es un proceso muy sencillo que se finaliza con dos o tres clicks. Para entrar en cPanel (el panel de control de tu alojamiento) tienes que hacerlo a través de tudominio.com/cpanel En este momento te pide tu usuario y contraseña que son los que recibiste desde Host Europe en el mail de bienvenida al darte de alta. Una vez dentro de cPanel, bajamos hasta el apartado de “Software/servicios” y pinchamos sobre Fantastico De Luxe.
Una vez dentro, te tienes que fijar en la columna de la izquierda y hacer click sobre Wordpress.
©Pepa Cobos 2015
Ahora click en nueva instalación.
En este momento deberás decidir en qué dominio quieres realizar la instalación (probablemente sólo tengas uno que es el principal) y en qué directorio. En esta opción, que parece algo rara, lo que te está pidiendo es que indiques si tus lectores accederán a tu web a través del dominio sin más (tudominio.com) o a con una dirección más complicada (tudominio.com/blog). La casilla deberás dejarla en blanco en la mayoría de las ocasiones pues lo normal es que quieras que entren a tu web al teclear tu dominio. Y deberás escribir, si no, el nombre de lo que quieras que aparezca a continuación de tu dominio. Es decir, si quieres que accedan desde tudominio.com/cursos deberás escribir cursos, y si quieres que accedan desde tudominio.com/tienda deberás escribir tienda. Recuerda, si quieres que entren directamente desde tudominio.com déjala en blanco.
A continuación deberás elegir un nombre de administrador (que luego NO podrás cambiar) y una contraseña. Es muy importante que sean complicados para evitar los hackeos. No pongas tu nombre ni “admin” como usuario ni tu fecha de cumpleaños como contraseña. Piensa algo difícil.
©Pepa Cobos 2015
En “Configuración por defecto” cambiamos el email por el nuestro real ya que nos tienen que llegar notificaciones. Lo demás lo podemos dejar puesto que hay opción a cambiarlo más adelante. Hacemos click en “Instalar Wordpress”. Leemos la información y le damos a finalizar la instalación.
Aparecerá, entonces, una pantalla diciéndonos que la instalación ha finalizado con éxito y dándonos los datos de acceso. Además te llegará un email de confirmación. Una vez que entres al panel de control de Wordpress por primera vez deberás actualizar todo aquello que lo necesite. Y si, como pasa en el vídeo, Wordpress no está en español hay que entrar en “Settings-General” y en “Site language” elegimos español para que esté todo correcto.
©Pepa Cobos 2015
3 - INSTALACIÓN MANUAL Lo primero que tenemos que hacer es descargar los archivos de Wordpress en español desde https://es.wordpress.org , lo que se descarga es un archivo .zip (comprimido). Si quieres puedes descomprimirlo como en el vídeo para cotillear lo que tiene dentro pero lo que vamos a usar es el comprimido. Tenemos que trasladar la carpeta a nuestro alojamiento, para ello entramos en cPanel ( si no lo tienes pregunta a tu proveedor de alojamiento si disponen de algún gestor de archivos) y vamos hasta “Archivos” - “Administrador de archivos”.
Una vez dentro, tenemos que acceder a la raíz de web. Para ello seleccionamos public_html (en algunos servidores, la raíz está en una carpeta llamada www, si no estás seguro lo mejor es que preguntes).
©Pepa Cobos 2015
Aparecerá una ventana en la que veremos en la columna de la izquierda todas las carpetas que hay en nuestro servidor y a la derecha el contenido de la carpeta seleccionado. En nuestro caso, estamos viendo el contenido de public_html. Asegurándonos de que, efectivamente, estamos en esa carpeta hacemos click sobre el icono “Cargar” en el menú superior.
Ponemos los permisos a 755, hacemos click en “Seleccionar archivo” y buscamos en nuestro ordenador el archivo .zip que habíamos descargado. En el momento que aceptes, el archivo sube al alojamiento.
Ahora vemos ya nuestra carpeta zip dentro de public_html, la seleccionamos y elegimos arriba “Extraer” a public_html. Entonces aparecerá una nueva carpeta llamada “Wordpress”.
Borramos ahora el archivo zip que ya no nos vale para nada, seleccionándolo y dándole a eliminar. En este momento tenemos que trasladar todos los archivos y carpetas que están dentro de “Wordpress” a la raíz, es decir, para que me entiendas, sacarlos fuera de esa carpeta. ©Pepa Cobos 2015
Esto lo hacemos entrando en ella (con un doble click) , seleccionando todo el contenido (pinchando arriba en “Seleccionar todo”) y dándole a “Mover archivo” en el menú superior. O, si lo prefieres, al final lo más rápido es, una vez tengas todos los archivos seleccionados, arrastrarlos a la columna de la izquierda encima de public_html.
Como ya tenemos vacía la carpeta “Wordpress” nos ponemos encima de ella y la eliminamos. Llegado este momento tenemos que crear una base de datos. Para ello volvemos a la pantalla principal de cPanel. Bajamos hasta “Bases de datos” y ahí elegimos la opción “Bases de datos MySQL”
©Pepa Cobos 2015
Primero creamos la base de datos dándole un nombre y haciendo click sobre “crear base de datos”. Copiamos el nombre completo de la base de datos creada porque lo vamos a necesitar.
A continuación creamos un usuario para esa base de datos. Elegimos un nombre de usuario y contraseña y pinchamos sobre “Crear usuario”.
Ahora tenemos que vincular la base de datos con el usuario creado. Vamos a “Agregar usuario a la base de datos”, elegimos el usuario que acabamos de crear y la base de datos que acabamos de crear y le damos a “Agregar”, cuando nos lo pida marcamos todos los privilegios. Acuérdate de copiar todos los datos para usarlos después.
Toca, ahora, conectar la base de datos con Wordpress. Para ello, volvemos a entrar en administrador de archivos y buscamos wp-congig-sample.php, que debería de estar dentro de public_html, lo seleccionamos y hacemos click en “Editor de código” en el menú superior. ©Pepa Cobos 2015
Se abre una página llena de código. ¡No te asustes! Baja hasta la línea 19 que empieza con “define (‘DB_NAME’.....” Donde pone database_name_here tenemos que poner el nombre de la base de datos que habíamos creado, en DB_USER, donde pone username_here, el nombre del usuario que habíamos creado, y en DB_PASSWORD donde pone password_here la contraseña de la base de datos.
Ahora tenemos que entrar en https://api.wordpress.org/secret-key/1.1/salt y copiar todo el texto que aparezca. Una vez copiado lo sustituiremos por el que aparece más abajo en wp-config-sample.php.
Ahora guardamos el archivo haciendo click en “Guardar cambios” arriba a la derecha y tenemos que cambiarle el nombre. ¿Cómo? Seleccionándolo en la lista y haciendo click arriba en “Renombrar”. Sólo tenemos que quitarle “-sample” de manera que se quede como wp-config.php.
©Pepa Cobos 2015
Para acabar tienes que entrar en tudominio.com/wp-admin/install.php Si todo ha ido bien te aparecerá una ventana en la que tendrás que elegir el título del sitio, el nombre de usuario (que no sea admin) y la contraseña, escribir correctamente tu correo electrónico y desmarcar la casilla última para evitar que Google indexe nuestra página (mientras trabajamos en ella). Ahora ya podemos entrar a nuestra web desde tudominio.com O al panel de control de Wordpress desde tudominio.com/wp-admin
©Pepa Cobos 2015
4 - AJUSTES GENERALES, DE LECTURA Y ENLACES PERMANENTES Para entrar al panel de control de Wordpress hay que hacerlo desde tudominio.com/wp-admin Una vez en él, vamos a ir a “Ajustes-Generales”. Dentro de estos ajustes, deberás poner, si no lo pusiste ya, un título para tu página. En mi caso el título es Wordpress para todos. No es necesario que sea igual a tu dominio pero si sería conveniente de cara a ayudar a tus potenciales lectores a reconocer dónde se encuentran. A continuación tienes que dar una descripción corta. Esto es como un slogan o frase que define lo que haces. Tienes que elegir también la zona horaria desde la que publicarás la mayoría de tus posts y el formato de fecha y hora, además el día en el que comienza la semana y el idioma del sitio. Al finalizar no te olvides de hacer click en “Guardar cambios”. Vamos ahora a los Ajustes de lectura. En ellos tendremos que elegir si lo que queremos que aparezca en la página principal de nuestro sitio son las entradas del blog (elegiremos “Tus últimas entradas”) o una página estática (la elegimos aquí también). Ahora es el momento de decidir si queremos que Google encuentre nuestro sitio. Si marcas la casilla correspondiente, Wordpress intentará que Google no encuentre tu sitio. Recuerda desmarcarla al terminar de trabajar en ella. ©Pepa Cobos 2015
Vamos ahora a “Ajustes - Enlaces Permanentes”. Como ves en el vídeo, al tratar de acceder nos da un error. Si es tu caso, lo mejor que puedes hacer, después de asegurarte que el fallo es sólo relativo a los enlaces permanentes, es preguntar al servicio técnico de tu empresa de alojamiento. A mi me lo solucionaron en cuestión de unos minutos. ¿Qué son los enlaces permanentes? Son los enlaces desde los que se podrá acceder al contenido de tu web. Siempre serán los mismos y de ahí el nombre de permanentes. Lo que hacemos desde esta página es ponerlos “bonitos” cambiando la estructura que nos da por defecto Wordpress, a una más sencilla de recordar. Yo recomiendo enlaces permanentes con el nombre de la entrada.
Recuerda guardar cambios al terminar. A partir de ahora se podrá entrar en el panel de control a través de tudominio.com/login
©Pepa Cobos 2015
5.- TEMAS
¿Qué son los temas? Los temas son los distintos “vestidos” que le puedes poner a tu web. Aunque luego podrás realizar cambios y arreglos, dependerá del tema que elijas el aspecto que tendrá tu sitio. Hay infinidad de ellos. Gratuitos y de pago. Para instalar un tema tenemos que entrar a “Apariencia- Temas”
Ten en cuenta que también podrás encontrar muchos temas fuera de Wordpress pero asegúrate siempre antes de que cuentan con buenas opiniones y están actualizados. Nosotros, para seguir este curso, vamos a instalar Customizr. Una vez instalado el tema que hayas elegido te recomiendo que borres los que no vayas a usar excepto uno para evitar problemas de espacio. En nuestro caso, yo he dejado Customizr y el útimo de Wordpress, TwentyFifteen. ¡Cuidado! No borres un tema si está activo, asegúrate de el que está activo no lo borras, si no te cargarás toda la instalación.
©Pepa Cobos 2015
¿Cómo borras los temas que no usas? Tienes que entrar a través del gestor de archivos de tu alojamiento y buscar dentro de la instalación de Wordpress la carpeta que pone wp-content, dentro de ella hay otra carpeta que pone themes y dentro de themes tendrás tantas carpetas como temas tengas instalados. Borra una a una estas carpetas dejando sólo la de tu tema activo y la del tema que hayas elegido como auxiliar, en nuestro caso twentyfifteen y customizr.
©Pepa Cobos 2015
6.- PANEL DE CONTROL
PARTES DEL PANEL DE CONTROL A) Barra superior
1.- Icono de Wordpress - Tiene varias opciones para saber más sobre Wordpress. 2.- Icono con la casita y el nombre de la web. Te lleva a la página principal de tu web. Cuando estás en la página principal, el icono cambia y aparece un velocímetro o cuentakilómetros que nos lleva de vuelta al panel de control aunque en este caso podemos elegir a qué parte del panel de control queremos ir. 3.- Bocadillo con número de comentarios. Nos dice el número de comentarios nuevos que tenemos y pinchando sobre él vamos directamente a la sección de comentarios. 4.- Símbolo + y Nuevo. Desde aquí podemos añadir contenido sin tener que pasar por ninguna otra pantalla, ya sea entrada, medio, página o usuario.
En la parte derecha tenemos: 5.- Hola (o cualquier otra frase del estilo) y tu nombre. Desde aquí podemos editar perfil y salir de la sesión. 6.- Un icono de ayuda en verde que SÓLO verás si has instalado Customizr. Son las opciones de ayuda para el tema. En la página web además tenemos la opción de lupa para buscar contenido dentro de la web.
©Pepa Cobos 2015
B) Barra lateral izquierda Esta barra es la principal dentro del panel de control de Wordpress y la vamos a ver poco a poco durante los siguientes capítulos. En este hacemos un repaso a la opción de “Escritorio” que contiene “Inicio” y “Actualizaciones”. En inicio vemos de un vistazo los datos más importantes de nuestra página web y es fácilmente personalizable. Desde actualizaciones podremos actualizar los temas, plugins o la instalación de Wordpress. Nos avisará el sistema con un círculo rojo con el número de actualizaciones pendientes y con un aviso también en la barra superior junto al icono de los comentarios. C) Opciones de pantalla Esta zona pasa a menudo desapercibida pero es importante porque en ella se esconden muchas posibilidades. Entre otras el mostrar u ocultar algunas opciones de Wordpress relativas al contenido que estemos editando en ese momento.
©Pepa Cobos 2015
7.- PÁGINAS Y ENTRADAS
Lo primero que tiene que quedar claro es la diferencia entre una página y una entrada. Ten en cuenta que, a partir de ahora, podremos referirnos a las entradas también como posts o artículos, es exactamente lo mismo. Una página es algo estático. En una web “normal” serían por ejemplo “Contacto”, “Acerca de mi”, “Tienda”,... Las páginas no suelen cambiar muy a menudo. Por supuesto que, cada cierto tiempo puedes (y debes) hacer algunos cambios pero por regla general se mantendrán inalterables y, por tanto, no tendrán fecha. Un post o entrada es contenido dinámico. Suelen estar incluidas en el apartado “Blog” de la web o en la página principal. NO tiene por qué haber entradas obligatoriamente. Puedes tener una web completamente estática pero donde Wordpress da su mejor rendimiento es justo en el manejo del contenido dinámico. Estos posts se ordenan de más moderno a más antiguo y suelen incluir su fecha de publicación. Para crear un post nuevo habría que ir a “Entradas”- “Añadir nueva” o a “Entradas”- “Todas las entradas” y hacer click arriba en “Añadir nueva” o directamente desde la barra superior haciendo click en “+Nuevo” y eligiendo “Entrada”. En cualquiera de los casos aparecerá la misma pantalla:
©Pepa Cobos 2015
De momento ponemos un título y el contenido que queramos y hacemos click en publicar para crear algún post. Para crear una página haríamos exactamente los mismo sólo que desde la opción “Páginas”. La pantalla será igual, aparentemente sin diferencias pero recuerda que un post y una página NO tienen nada que ver. Creamos también algunas páginas para tener más contenido. Observa que, a pesar de haber creado páginas, éstas no aparecen en ningún menú. Más adelante averiguarás por qué.
©Pepa Cobos 2015
8.- ENTRADAS
Vamos a centrarnos ahora en la barra lateral izquierda en el apartado “Entradas”. La primera opción que encontramos es “Todas las entradas” y si hacemos click sobre ella se abrirá una pantalla en la que veremos una lista con todas las entradas que tenemos en nuestra web. Al pasar el ratón por encima de alguna de ellas verás que aparecen varias opciones, que son: editar, edición rápida, papelera y ver.
Si pinchamos en “Editar” se abrirá la pantalla completa con la entrada, idéntica a la que aparece cuando creamos una de cero. En ella podremos cambiar todo lo que necesitemos y guardar. Si pinchamos en “Edición rápida”, nos dará la opción de cambiar el título, el slug (que, como ya veremos, es la dirección en la que está el post), la fecha de publicación, la visibilidad, el autor y la categoría asignada, aunque NO podremos editar el contenido. Si pinchamos en “Papelera” borraremos la entrada. Y si pinchamos en “Ver” veremos la entrada en la web. La segunda opción que encontramos es “Añadir nueva” y con ella abriremos la pantalla que ya hemos visto para crear una nueva entrada. Y por último tenemos las opciones de “Categorías” y “Etiquetas”. Desde ellas podremos crear o modificar tanto categorías como etiquetas para asignar a nuestros posts.
©Pepa Cobos 2015
Hay dos cosas que tienes que tener claras, la primera es que NO hace falta crearlas desde aquí ya que al añadir un nuevo post tienes la opción a la derecha de crear una nueva categoría o etiqueta si las que tienes no te valen. La segunda es la diferencia entre categorías y etiquetas. Ambas sirven para ordenar el contenido de nuestra web. Podríamos decir, simplificando, que las categorías son los principales “grupos” en los que quieres distribuir tu contenido y las etiquetas serían los subgrupos. No es necesario tener ni unas ni otras pero yo te aconsejo que tengas, al menos, categorías y que intentes que sean las menos posibles y lo más concisas que puedas.
©Pepa Cobos 2015
9.- MEDIOS Vamos ahora a ver las opciones de “Medios”. La primera opción que tenemos es “Biblioteca”. Si pinchamos sobre ella accederemos a todas las imágenes o contenido multimedia que hayamos ido subiendo a nuestra web. Estará ordenado de más moderno a más antiguo y podemos verlo como rejilla o como lista. Desde aquí podemos pinchar sobre una imagen y veremos sus detalles o podemos haciendo click sobre “Añadir nuevo”, subir una nueva imagen. Para ello podemos elegirla de nuestro ordenador desde la ventana que aparece o simplemente arrastrarla. Se pueden subir varias de golpe. En la pantalla de detalles (al pinchar sobre una imagen) podemos ver su URL (dirección en la que se encuentra), su título, leyenda, texto alternativo y descripción. Como mínimo deberías ponerle un título y un texto alternativo que es el que aparecerá en caso de que, por algún motivo, no se cargara la imagen. Si pinchas sobre “Editar imagen” bajo la fotografía podrás recortar, girar y reflejar la imagen. Mi consejo es que todas estas operaciones las realices antes de subir la imagen a tu web. ahorrarás mucho espacio ya que Wordpress guarda tu imagen original y la editada con lo que consumirás muchos más recursos. En la caja de la derecha puedes ver las dimensiones exactas de la imagen. La segunda opción es “Añadir nuevo”, desde ella puedes subir directamente la imagen. Si estás escribiendo un post o página puedes insertar o subir una imagen sin necesidad de entrar en “Medios” desde el botón que dice “Añadir objeto”.
©Pepa Cobos 2015
10.- COMENTARIOS Y PLUGINS
La siguiente opción que encontramos en el panel de control es, después de “Páginas”, “Comentarios”, que no cuenta con ninguna otra opción. Si pinchamos sobre “Comentarios” veremos una pantalla en la que se muestran todos los comentarios en forma de lista ordenados de más moderno a más antiguo. Al pasar el ratón por encima de cualquiera de ellos verás varias opciones:
Puedes rechazar el comentario, responder, edición rápida (menos opciones que editar), editar, marcarlo como spam y llevarlo a la papelera. Dejando de lado la opción de “Apariencia” que veremos más adelante, lo siguiente que encontramos es “Plugins”. ¿Qué son los plugins? Los plugins son “añadidos” que ayudarán a Wordpress a realizar alguna función que, por si sólo, no puede realizar. Desde “Plugins instalados” podrás ver la lista de todos los que están ahora mismo en Wordpress. Desde esa lista podrás activarlos, desactivarlos, y borrarlos. Ten en cuenta que para ver la opción de borrar, el plugin tiene que estar previamente desactivado. Desde “Añadir nuevo” podrás buscar uno que te interese e instalarlo o subir el archivo .zip de alguno que tengas en tu ordenador. Una vez instalado hay que activarlo si quieres que funcione. Un consejo, borra los plugins que no necesites desde la pantalla de plugins instalados. Al igual que te decía para temas, es innecesario tener información que no usas y que lo único que hace es quietarte espacio.
©Pepa Cobos 2015
La última opción es “Editor” y ahí es mejor no tocar nada. Basta con que sepas que desde ella puedes acceder a todo el código de cada uno de los plugins instalados en tu web. Si tocas algo de este código el daño puede ser irreversible. Tienes a tu disposición otro PDF en el que te cuento los plugins sin los que no podría vivir ;) Además en la unidad 26 y 27 te cuento más sobre cada uno de ellos.
©Pepa Cobos 2015
11.- USUARIOS Siguiendo nuestro recorrido por la barra lateral izquierda nuestra siguiente opción es “Usuarios”. ¿Qué es un usuario? Un usuario es cualquier persona que tenga nombre de usuario y contraseña para poder acceder a distintas opciones dentro de tu instalación de Wordpress. Hay distintos tipos de usuarios con distintos tipos de privilegios que ahora veremos. Desde “Todos los usuarios” podemos ver una lista con todos los usuarios actuales y pasando el ratón por encima podremos editar a un usuario en concreto o eliminarlo (siempre y cuando no sea el administrador principal, osea tú). En “Añadir nuevo” podrás dar de alta a un nuevo usuario y podrás hacerle llegar toda la información de acceso por mail. En este momento deberás de elegir el tipo de usuario que quieres que sea. Los tipos son los siguientes: Suscriptor: Está dado de alta en tu página pero sólo puede acceder a su perfil. No puede crear ni editar contenido. Colaborador: Puede acceder a su perfil y además escribir posts aunque NO publicarlos. Una vez escritos se quedarán pendientes hasta que un editor o administrador los apruebe. Autor: Puede acceder a su perfil, escribir posts y publicarlos aunque NO puede aprobar los posts escritos por otros. Editor: Puede escribir posts, publicarlos y aprobar también los escritos por colaboradores. Administrador: Puede hacer lo mismo que el editor y además instalar o quitar plugins, temas,... Todas las tareas de administración. Poder total sobre la instalación de Wordpress. La última opción es “Tu perfil” y desde ella verás todos los datos asociados a ti además de poder cambiar tu contraseña y poder crear un alias para que aparezca en tus publicaciones.
12.- HERRAMIENTAS Y AJUSTES Siguiente opción “Herramientas” Dentro encontramos “Herramientas disponibles”. En el vídeo correspondiente a esta unidad te explico para qué sirve la opción de “publicar esto” aunque a mi no me gusta y no la uso. También aquí se encuentra la opción de convertir categorías en etiquetas y viceversa. Las siguientes dos opciones son “Importar” y “Exportar” y sirven exactamente para eso, la primera para traer contenido que ya tuvieras en otras webs y la segunda para crear un archivo donde se guarde todo tu contenido actual de manera que luego puedas usarlo en otros sitios. A continuación tenemos “Ajustes” La primera opción es “Generales” y en ella encontramos el título del sitio, su descripción corta, la dirección de Wordpress y dirección del sitio, tu dirección de correo electrónico (asegúrate de que es correcta ya que es a esa dirección a la que te llegará cualquier notificación importante), perfil predeterminado para nuevos usuarios, zona horaria (importante tenerla bien ajustada), formato de fecha y hora y por último el idioma en el que está tu web. Siguiente opción “Escritura”. No toco nada pero desde aquí podrías configurar el publicar a través de mail, las categorías predeterminadas para entradas, el tipo de entrada predeterminado y convertir los emoticonos de texto en gráficos. “Lectura” Elige qué página quieres que sea la frontal. Cuantos posts quieres que se vean en la página de blog. Número máximo de entradas a mostrar en el feed, y qué quieres que aparezca en él. “Comentarios” Fijas las opciones para los comentarios. Deberías marcar, al menos, “El autor del comentario debe rellenar el nombre y el correo electrónico” y “El autor del comentario debe tener un comentario previamente aprobado”. “Medios” Te dice los tamaños de imágenes que se van a crear por cada imagen que subas.
13.-APARIENCIA-AJUSTES GENERALES (I) Entramos ahora en “Apariencia”- “Personalizar”. Las opciones que aparecen a la izquierda dependen del tema que tengas instalado. Para este curso nos vamos a basar en Customizr. Estas son las opciones que se muestran:
1.- AJUSTES GENERALES Una vez que pinchamos sobre esta primera opción, vemos que, dentro de ella, se “esconden” muchas más: a) Título y lema (título y descripción corta). Esta opción es exactamente la misma que encontramos en el panel de control en “Ajustes”- “Generales” b) Logotipo y Favicon. Aquí podemos elegir nuestro logo si es que queremos tener uno. Las
dimensiones que ellos te aconsejan son de 250px X 100px pero, desmarcando la casilla que aparece en esta opción, puedes subir el logo del tamaño que quieras. Ten en cuenta que Customizr te permite subir un logo diferente para la cabecera normal y otro para la cabecera pegajosa (asi la llaman ellos en el tema) o sticky header. La cabecera pegajosa es esa que se queda permanentemente arriba aunque bajes hasta el final de la página. Es más pequeña que la normal y está siempre visible. Nosotros hemos utilizamos Canva para el diseño en este curso. Creas lo que te apetezca (no tiene por qué ser con Canva) y una vez creado lo subes. En este paso tenemos que crear tambien el Favicon. ¿Qué es el favicon? El favicon es ese pequeño icono o gráfico que se ve en las pestañas de los navegadores y en la barra de favoritos. Es muy pequeño con lo que ha de ser un dibujo simple sin mucho detalle. Nosotros lo hemos creado en Canva de 40px X 40px que es lo más pequeño que te permite y lo hemos guardado con formato .png ya que Customizr te permite subir el favicon con ese formato. Si tu tema te pide que tenga formato .ico tendrías que entrar en una web tipo Convertico que te pasa los archivos de .png o .jpeg a .ico de forma muy rápida y sencilla. Lo subimos igual que el logo. No te asustes si no lo ves inmediatamente. A veces puede llevar algo más de tiempo.
14.-APARIENCIA-AJUSTES GENERALES (II) c) La siguiente opción es “Apariencia” dentro de “Ajustes Generales”. Podemos elegir desde aquí el color que queremos que sea el principal o pedir que sea aleatorio por cada página. d) “Google Fuentes” - Tipografías que quieres que aparezcan. Puedes escoger sus parejas ya predeterminadas o decidir que sólo quieres una. También hay parejas de fuentes seguras para la web, que son tipos de letras que tienen todos los ordenadores y que, por lo tanto, no se tienen que cargar desde ningún sitio con lo cual la web es más rápida. También se elige desde aquí el tamaño por defecto de la fuente. e) “Redes Sociales” - Desde aquí eliges si quieres que los iconos de redes sociales se muestren en la cabecera del sitio, en el pie de página, en la barra lateral izquierda o en la derecha. Puedes elegir uno, varios o ninguno de los sitios. Cada vez que rellenes una de las casilla con la URL de tu perfil en la red social aparecerá el icono correspondiente. f) “Estilos y efectos de enlaces” - Desde aquí puedes cambiar la apariencia de los enlaces dentro de tu web. Nosotros en el vídeo lo hemos dejado como estaba. g) “Ajustes iconos títulos” - Desde aquí eliges si quieres que aparezcan o no iconos automáticamente a la izquierda de los títulos. También puedes escoger en qué títulos quieres que aparezcan y en cuales no. h) “Ajustes de imágenes” - Principalmente desde aquí elegimos si queremos que la web cargue las imágenes directamente con el efecto lightbox o no. Lo que hace este efecto es abrir la fotografía sobre la que se hace click en grande. ATENCIÓN para que funcione la imagen TIENE que estar enlazada al archivo multimedia. Esto se consigue desde medios, en la información de la imagen i) “Ajustes diseño adaptativo” - Desde aquí eliges si quieres que tu web se adapte a todos los dispositivos. Deja esta casilla marcada. j) “Autores” - Si has rellenado la información biográfica en tu perfil se mostrará tras cada artículo si tienes esta casilla activada.
15.- CREAMOS CONTENIDO Lo que hacemos en esta unidad es crear algo de contenido para poder seguir diseñando nuestra web ya que es mucho más difícil hacerlo si carecemos de él. Lo primero que tienes que darte cuenta es que, tanto en la pantalla de creación de una entrada o de una página arriba a la derecha tienes las “Opciones de pantalla“ desde las que podrás elegir qué quieres ver en esa pantalla en concreto. Entre otras cosas la posibilidad de permitir o no comentarios.
Ahora vamos a crear una entrada. Básicamente lo que hay que dar es un título y un contenido. Importante: En el contenido tienes que estar en “visual” para poder dar estilo al texto como lo harías en cualquier editor de texto. Puedes añadir una imagen a cualquier post o página simplemente haciendo click sobre el botón superior que pone “Añadir objeto”. Entrarás en la biblioteca y podrás elegir una imagen que ya tengas o subir una nueva. Arriba a la izquierda verás también una caja que pone “Opciones de diseño”, desde ella podrás elegir cuántas barras laterales quieres que tenga este post o página. Lo que decidas aquí SÓLO afectará a esta página o post, el resto de la web se mantendrá tal y como hubieras elegido. Justo debajo está el cajetín “Publicar”, podemos ver una vista previa de como quedaría en este momento la página o el post, guardar borrador para más adelante, programar la publicación para una fecha futura y decidir quien puede verla mediante contraseña. Si no asignas una “Imagen destacada”, Customizr utilizará una del post para mostrar en el blog. Si asignas imagen destacada es la que se verá en la página principal. La imagen destacada NO aparece en el post si tú no quieres.
16.- CREAR UN MENÚ Tenemos que entrar en “Apariencia”- “Menús” Si estás usando Customizr ya aparecerá uno creado, si no puedes hacerlo pulsando sobre la opción que dice “Crea un nuevo menú” Hay que borrar los elementos que no quieras que estén en tu menú, para ello pinchas sobre el elemento en cuestión y le das a eliminar. No hace falta que esté inicio porque todos saben que al pinchar en el logo vas a la página principal. Puedes crear enlaces personalizados, es decir todos los elementos del menú NO tienen por qué llevar a páginas o posts dentro de tu web. Se puede hacer desde “Enlaces personalizados”. También puedes añadir categorías. Una vez terminado le das a “Crear menú” Hay que ubicar el tema y decirle que va a ser el menú principal. Si no, aunque lo creemos no parecerá en la página. Tal y como te cuento en el vídeo de esta unidad es mejor que el menú tenga la menor cantidad de elementos posibles. Es muy fácil que los lectores se aburran o se asusten si ven mucho donde elegir.
17.- APARIENCIA - CABECERA Vamos ahora por la segunda de las opciones dentro de “Apariencia”“Personalizar”. 2.- CABECERA a) Diseño y disposición Podemos elegir mostrar borde en la parte superior si o no. A continuación, mostrar lema/eslogan en la cabecera si o no. También puedes decidir si quieres mostrar menú en recuadro/caja. Yo lo he probado en el vídeo pero no me ha gustado el resultado. Dentro de las “Opciones de diseño” tienes que decir si quieres que el logo vaya a la izquierda, a la derecha o centrado. Aquí también se encuentran las opciones relativas a la cabecera pegajosa o sticky header. Elige si quieres activar cabecera pegajosa al desplazarse. Mostar lema en cabecera pegajosa si o no. Mostrar título o logo en cabecera pegajosa si o no. Reducir el tamaño del logo o título en cabecera pegajosa si o no. Mostrar menú en cabecera pegajosa si o no. Cabecera semitransparente en cabecera pegajosa si o no. Establecer z-index. Es lo que marca si la cabecera pegajosa está más arriba (en una supuesta pila de elementos) o más abajo que los demás elementos de la página. Es decir, si se verá la cabecera todo el rato o pasarán por encima los demás objetos.
18.- NAVEGACIÓN Y PÁGINA PRINCIPAL b) Navegación En “Menú principal” eliges el menú que quieres asignar como principal. Tú puedes crear los que quieras pero sólo uno pude ser el principal, el que se muestre. Si pinchas en “Gestión de menús” te llevará directamente a la página correspondiente del panel de control. Bajo “Diseño y efectos” podrás decidir si el submenú se mostrará, en caso de estar disponible, al pasar el ratón sobre el elemento o sólo al hacer click sobre él. También eliges desde aquí si quieres que el menú esté a la izquierda o a la derecha. Mostrar submenú con efecto de desvanecimiento o no. Efecto movimiento en elementos secundarios del menú al pasar sobre ellos. Limitar altura en dispositivos móviles lo dejamos desmarcado. Entramos ahora en la tercera opción dentro de “Apariencia”- “Personalizar” 3.- CONTENIDO a) Página Principal La página de inicio muestra: página estática o últimos artículos. (También se puede cambiar desde ajustes-lectura en el panel de control) Seleccione el diseño de la página de inicio. Cuántas barras laterales quieres que aparezcan. Sólo se aplica a la página inicial NO a toda la web. Opciones del deslizador de imágenes. Cuando habla del deslizador de imágenes se refiere al pase de diapositivas o slider que aparece en la página de inicio (o en cualquiera en la que quieras introducirlo) Eliges qué slider quieres que aparezca o si no quieres ninguno. También puedes crear uno nuevo y lo vamos a ver con detalle en la siguiente unidad
19.- CREAR UN SLIDER NUEVO Se crea desde “Apariencia” o desde “Medios”- “Biblioteca” Lo primero es seleccionar las imágenes que queremos que estén en el slider. Si no están, los subimos.
Entras en una de las imágenes que quieras usar (repetirás esta misma operación con todas las que vayan a salir en el pase de diapositivas) y pinchas sobre ella. Ahora tienes que hacer click en “Editar mas detalles”, NO en “Editar imagen” y bajar hasta “Opciones de deslizador”, activas el botón y entonces: a) Pones texto del título o no si no quieres que aparezca ningún título. b) Pones texto de la descripción o no. c) Eliges el color del título y texto. d) Texto del botón (si lo dejamos en blanco no habrá botón) e) Post o página a la que te redirigirá cuando pinches en el botón. f) Elegir un deslizador para poner la imagen o crear uno nuevo. Si haces click en crear uno nuevo tienes que darle un nombre y en ese momento aparece un serie de columnas con la información de esa foto añadida. Vamos añadiendo de la misma forma todas las imágenes que queramos dentro de ese deslizador. Las fotos se pueden reordenar simplemente arrastrándolas hacia arriba o hacia abajo. Volvemos a “Apariencia” - “Contenido” - “Página principal” y seleccionamos el slider con el nombre que le hayamos dado. Podemos elegir que el slider sea de ancho total (de lado a lado de la página) o que tenga márgenes. Elegimos luego el retraso entre foto y foto en milisegundos 1000ms=1s
Altura del slider en píxeles. Por defecto es de 500px Aplicar la altura a todos los sliders de la web. Rehacer la altura predeterminada de las imágenes para ajustarlas o no. Los pases se pueden introducir en cualquier página o post simplemente marcando la casilla que está al final de cada post/página y eligiendo las opciones disponibles.
20.- OPCIONES DE PÁGINAS DESTACADAS
Seguimos dentro de “Apariencia” - “Página principal”. Ahora vamos con la parte de “Opciones de páginas destacadas”. Las páginas destacadas son esas tres zonas que hay bajo el deslizador en la página principal. Se pueden activar o desactivar. Muestra una imagen y texto además de un enlace. Puedes elegir mostrar o no las imágenes. Si no hay imágenes destacadas en esa página no se mostrará nada aunque pongas que si quieres que se muestren. Texto del botón es lo que aparecerá en los botones de cada enlace debajo del texto de cada página. Ahora eliges las tres páginas que quieres destacar desde un desplegable con todas las páginas (que no posts) publicadas. Luego el texto destacado. Si NO quieres que aparezca el extracto automático tendrás que escribir en cada una de las cajas correspondientes lo que te apetece que se lea bajo cada imagen.
21.- DISEÑO DE PÁGINAS Y ARTÍCULOS Seguimos dentro de “Apariencia” - “Contenido”. Ahora vamos a: b) Diseño de páginas y artículos. Primero elegimos el diseño por defecto PARA TODA LA PÁGINA WEB, son las barras laterales que aparecerán si no eliges otra cosa. También puedes forzar el diseño por defecto, es decir, impedir que se cambie el diseño en cada página o post. Seleccionar el diseño por defecto en los posts si quieres que sea diferente al resto de la web. Seleccionar el diseño por defecto en las páginas si quieres que sea diferente al de toda la web. c) Lista de artículos: blog, archivos... Cuando habla de lista de artículos se refiere a todas las páginas en las que aparecen un grupo de posts agrupados según un criterio X. Por ejemplo, si buscas algo, la página resultante sería una lista de búsqueda, si eliges una categoría sería una lista por categoría, su eliges un autor, sería una lista por autor,... Lo primero que tienes que decidir es el número máximo de artículos por página. Seleccionar la longitud del post en las listas (completo o fragmento) En caso de elegir un fragmento deberás decidir el número de palabras a mostrar en el extracto. En “Diseño de lista de artículos” elegirás si quieres verlos en forma de rejilla o como una lista con miniaturas a izquierda y derecha alternadas: Si eliges rejilla puedes elegir el número de columnas que quieres (posts por fila) Y, en más opciones de diseño de rejilla, puedes: Aplicar el diseño de rejilla a Inicio/blog, si quieres que tu página de inicio se muestre con rejilla. Si no, desmarcas esta opción. Aplicar el diseño de rejilla a los archivos. Aplicar el diseño de rejilla a las búsquedas. Aplicar sombra a la rejilla. Aplicar borde inferior a la rejilla.
Mostrar el tipo de artículo con un icono en el fondo. Si eliges lista puedes elegir: Mostrar o no las miniaturas. Si no hay imagen destacada mostrar o no la última imagen publicada en el post. Subir una miniatura por defecto que se mostrará en los artículos que no tengan imagen destacada asignada. Opciones de miniatura: Forma de las miniaturas, redondo con zoom, redondo sin zoom, cuadrada con zoom, cuadrada sin zoom, rectangular sin efecto, rectangular con efecto desenfocado, con efecto enfocado,... Posición de las miniaturas. Alternar miniaturas. La última opción de esta zona es “Títulos según tipos de páginas” y desde aquí podrás elegir: Títulos para las páginas de categorías. Títulos para archivos de páginas. Títulos según autor. Títulos para resultados de búsqueda.
22.- ARTÍCULOS INDIVIDUALES Seguimos dentro de “Apariencia” - “Contenido”. Vamos con:
d) Artículos individuales Puedes elegir la posición de la imagen destacada en el artículo/post, en caso de que quieras que se muestre (no es necesario ni obligatorio).. Ajustar altura máxima de la miniatura.
e) Ruta de navegación (migas de pan) Las migas de pan o breadcrumbs en inglés son la ruta que se ha seguido para llegar a la página en la que estás actualmente. Sirve para saber dónde te encuentras y poder volver en cualquier momento hacia atrás. Puedes elegir mostrarla o no mostrarla También puedes elegir si mostrarla o no en la página de inicio. Mostrar en páginas si o no. Mostrar en artículos individuales o no. Mostrar en listas de artículos o no. f) Información en los artículos Cuando hablan de información en los artículos se refieren a las taxonomías, que son, nada más y nada menos, que la información que aparece bajo el título de cada post. Normalmente suele tener la fecha, el nombre del autor, la categoría del post y el número de comentarios. Desde aquí puedes elegir: Mostrar la información o no. Diseño de la información, sólo texto o botones y texto. Mostrar en la página principal si o no. Mostrar en los artículos individuales si o no. Mostrar en listas de artículos si o no.
Qué información mostrar: Mostrar categorías si o no. Mostrar etiquetas si o no. Mostrar fecha si o no. Mostrar autor si o no. Mostrar fecha de actualización si o no. Aviso de actualización del artículo: Mostrar aviso de actualización si o no. Mostrar aviso si la última actualización es de menos de X días. Texto del aviso. Estilo del aviso.
23.- GALERÍAS DE IMÁGENES Las galerías de imágenes en Wordpress son una colección de imágenes que se muestran en miniatura en cualquier post o página. Se pueden incluir desde un post o desde una página al hacer click en “Añadir objeto” Una vez que estás en la pantalla con las imágenes que tienes (si te falta alguna más siempre puedes subirla ahora) haces click en “Crear galería” Seleccionas las imágenes que quieres incluir y pinchas en el botón azul que está abajo a la derecha que pone “Crear una nueva galería”. Ahora puedes cambiar el orden en la que aparecen las imágenes y puedes añadir un título a cada una. Recuerda que si quieres utilizar el efecto de lightbox más tarde tendrás que enlazar a archivo multimedia. También eliges ahora el número de columnas y pinchas abajo a la derecha en el botón “Inserta galería” g) Galerías En Customizr puedes decidir si quieres que Customizr aplique efectos a las galerías o no. Que aplique el efecto lightbox o no. Si eliges que no, entonces hay sombras en las miniaturas y se hacen más grandes al pasar el ratón por encima pero al pinchar en la imagen NO se hace grande, simplemente se abre en otra pestaña del navegador. Puedes desactivar los efectos al pasar el ratón por encima (hover).
h) Párrafos Desde aquí puedes activar las letras capitulares, que es simplemente poner la primera letra del primer párrafo de una página o post en mayúscula, coloreada y mucho más grande. Si eliges que si entonces: Decide si usar la letra capitular cuando el párrafo incluya al menos X palabras. Estilo de letra capitular.
Que aparezca en los posts o no. Que aparezca en las páginas o no.
i) Comentarios Mostrar el número de comentarios en una burbuja junto al título o no. Tamaño de la burbuja. Color de la burbuja. Otros ajustes: Permitir comentarios en las páginas si o no. Permitir comentarios en los posts si o no (individualmente puedes desactivarlo). Mostrar lista de comentarios. j) Post/Page Navigation Mostrar la navegación o no. Es simplemente mostrar unas flechas abajo de cada página de artículos para poder ir a posts mas recientes o a más antiguos. Enseñarlo en las páginas si o no. Mostrar en los post individuales si o no. Mostrar en las listas/archivos.
24.- PIE DE PÁGINA
Dentro de “Apariencia” - “Personalizar” seguimos con: 4.- PIE DE PÁGINA Lo único que podemos elegir aquí es si queremos mostrar flecha de desplazamiento para volver a la parte superior o no. 5.- WIDGETS Se pueden poner desde aquí los widgets o desde la zona de “Apariencia” ”Widgets” en el panel de control. Nosotros lo gestionaremos todo desde el panel de control. 6.- OPCIONES AVANZADAS a) CSS personalizado CSS es el código que utilizan los programadores web para dar estilo a las páginas. Si alguien te da una línea de código CSS o quieres probar es en este cajetín donde debes incluirlo. Haz la prueba en CSS y pega lo siguiente para quitar el título de “Navegador de artículos”: #nav-‐below h3 {display:none;}
b) Rendimiento del sitio web. Lo dejamos como está.
25.- WIDGETS ¿Qué es un widget? Un widget es un plugin que no actúa sobre toda la página web sino que sólo tiene efecto en la zona (establecida por el tema) en la que lo incluyas. Las zonas en las que puedas incluir widgets dependen del tema elegido. Lo que incluyas en cada zona aparecerá en esa zona. Desde “Apariencia” - “Menús” puedes crear más menús que, auqnue no aparecerán en otros sitios de la web, si puedes incluir en alguna zona de widgets. ¿Cómo se buscan widgets y cómo se instalan? Igual que los plugins. Instalamos Google Maps Widget. Instalamos Black TinyMCE Widget. Para cambiar el slug o URL en entradas o páginas simplemente la editas desde el post o página correspondiente.