WORDPRESS: CREACIÓN,

ADMINISTRACIÓN Y DINAMIZACIÓN

DE UN BLOG EN ECO ESCUELA 2.0

5 Modificar la apariencia del Blog

1

Contenido 1. Introducción .................................................................................................................................2

2. Temas ...........................................................................................................................................2

Buscar temas ....................................................................................................................................3

Cambiar / Activar nuevos temas ......................................................................................................4

Cabecera ...........................................................................................................................................5

Cargar una imagen de encabezado personalizado ......................................................................5

Otras opciones .............................................................................................................................7

Eliminación de imágenes de cabecera .........................................................................................7

Configuración de varias imágenes encabezado personalizado ....................................................8

Las imágenes destacadas .............................................................................................................8

La eliminación de una imagen destacada ....................................................................................9

Fondo................................................................................................................................................9

Personalizar con un color el fondo de nuestro blog ....................................................................9

Personalizar con una imagen el fondo de WordPress: ............................................................. 10

3. Widgets: .................................................................................................................................... 12

Panel de administración de widgets ............................................................................................. 13

Configuración de Widgets: ...................................................................................................... 13

Quitar un Widget: .................................................................................................................... 13

Activar el modo de accesibilidad: ........................................................................................... 14

Descripciones de los widgets más comunes: ................................................................................ 14

Como colocar una imagen en la barra lateral de WordPress a través de un widget de texto ..... 21

2

1. Introducción

La apariencia de un blog se consigue mediante las opciones del subpanel Apariencia de nuestro panel de administración de WordPress. La opción más determinante es el Tema. El nombre que se le suele dar en WordPress a las plantillas es de “Temas”. Por tanto, cambiar una plantilla en Wordpress, consiste en cambiar el tema de nuestro blog. El objetivo del tema siempre debe ser agradable, personalizable, senillo y sobre todo, legible. Generalmente nos ofrecen la posibilidad de escoger de entre varias propuestas aquella que se ajusta más a nuestro particular gusto o necesidad.

Otras opciones importantes que modifican el aspecto de nuestro blog son las secciones denominadas widgets, que tradicionalmente se sitúan en el lateral del mismo, la Cabecera y el Fondo. También disponemos de plugins, como por ejemplo Google Fonts, que nos ayudarán en nuestra labor de personalizar el aspecto de nuestro blog, para que se diferencie del resto.

2. Temas

Un tema de WordPress es una colección de archivos que trabajan juntos para producir una interfaz gráfica con un diseño subyacente, unificador de un blog. Blog de los Centros y Blogs del profesorado cuentan actualmente con una colección diversa de temas (esperamos en breve seguir agregando más), que se pueden navegar en el subpanel Apariencia.

Aquí puedes ver que tema tienes actualmente

Para ver todos los temas disponibles o activar uno de ellos, visita Apariencia → Temas del escritorio de tu blog de centro educativo. Puedes cambiar el tema tan a menudo como quieras.

Si no ves el subpanel apariencia significa que no eres un administrador en el blog.

3

Tema activo en la parte superior

Puedes ver tu tema activo en la parte superior de la pantalla de “Administrar Temas”.

Buscar temas

¿Buscas un tema o característica en particular del tema? Introduce en el cuadro de búsqueda, haz clic en buscar, y sólo te mostrarán los temas que coincidan. Ten en cuenta que los temas se muestran en orden alfabético por su nombre.

No se puede cargar cualquier tema en tu blog (incluso si están disponibles en el repositorio de temas de WordPress.org)

También puedes limitar la búsqueda mediante el uso de la opción filtrar por características junto a la caja de búsqueda:

4

Esto mostrará todos los filtros disponibles

Cambiar / Activar nuevos temas

Es posible que desees probar uno y ver la apariencia de tu blog. Puedes ver esto haciendo clic en el enlace vista previa que aparece a continuación del tema.

Si crees que este es el tema que deseas, puedes seguir adelante y hacer clic en Activar.

Al hacer clic en la captura de pantalla del tema o en el enlace vista previa, se abrirá una ventana de pre-visualización del tema. Puedes desplazarte hacia arriba, hacia abajo y hacer clic en todo, incluso en tu blog para tener una idea de cómo será trabajar con su contenido en el nuevo tema . Si te gusta lo que ves, haz clic en Activar en la esquina superior derecha de la ventana de vista previa.

Si sientes que este no es el tema idóneo, haz clic en la X en la parte superior izquierda de la ventana de vista previa para retirarte y seguir navegando a través del repositorio de temas para realizar una nueva y mejor elección.

5

Cabecera

La cabecera del blog es donde se coloca la imagen que identifica y personaliza nuestro blog. Por defecto, se carga una que se repite en todos los centros.

Puedes poner una imagen de cabecera personalizada en tu sitio. Muchos de los temas en WordPress cuentan con una opción que permite a los usuarios subir su propia imagen de encabezado para obtener una apariencia mucho más personalizada y diferenciada. El uso de esta opción es muy sencillo, y no es necesario grandes conocimientos en programación para el fin de cambiar tu cabecera (siempre y cuando utilices uno de los temas que incluye la opción, por supuesto).

Cargar una imagen de encabezado personalizado

Simplemente sube una imagen, recórtala y/o ajústala y la nueva cabecera aparecerá inmediatamente en tu sitio. Para ello debes Ir a Apariencia → Cabecera en el escritorio de tu blog. Si no ves la opción, significa que el tema actual no es compatible con el uso de una cabecera de imagen personalizada. Puedes elegir otro tema que lo permita.

Busca el archivo en tu ordenador y haz clic en Upload. Sólo se puede utilizar archivos de imagen con formato “Jpeg“, “Gif” y “Png“. Todas las imágenes recortadas se convertirán en archivos JPEG.

Importante: la más recomendable es utilizar una imagen de tamaño exacto, pues es la que produce los mejores resultados. A fin de preservar la transparencia en el uso de una imagen gif o png, debe tener las dimensiones exactas que necesita el tema.

6

Si has subido una imagen que no coincide con las dimensiones exactas de la cabecera de tu tema actual, será necesario recortarla apropiadamente.

Selecciona la parte de la imagen que deseas utilizar para la cabecera y, a continuación, haz clic en el botón “Recortar y publicar”. La imagen debe aparecer inmediatamente.

7

Otras opciones

Muchos de los temas tienen otras opciones de personalización disponibles. Si deseas eliminar el título del blog (y el subtitulo, si aparece) de la cabecera del blog, porque has subido una imagen de encabezado que ya lo incluyen, debes de buscar la opción “Visualización del texto” en Apariencia → Cabecera. Si el tema tiene esa opción, tendrá este aspecto:

Una vez que el texto se elimina, haz clic en el botón “Guardar cambios”.

Si deseas mantener el título y el subtitulo del blog, también tienes la opción de cambiar el color del texto. Haz clic en el botón “Elige un color”, y podrás marcarlo tal como se aprecia en la siguiente imagen:

Eliminación de imágenes de cabecera

Si decides eliminar una de las imágenes de cabecera personalizada, puedes hacerlo dirigiéndote en tu escritorio de WordPress a la opción Librería multimedia del subpanel Multimedia (Multimedia → Librería multimedia) y, en el menú que aparece al posicionar el ratón sobre el nombre de la imagen

8

subida en la tabla que aparece en la pantalla de Librería Multimedia, haz clic en “Borrar permanentemente” al lado de la imagen.

Configuración de varias imágenes encabezado personalizado

Algunos temas llevan incluidas imágenes de cabecera adicionales. Si ves que se muestran varias imágenes elige la que te guste y haz clic en el botón “Guardar cambios”. También puedes elegir que se muestren aleatoriamente una de las cabeceras que ya has subido.

Las imágenes destacadas

Las imágenes destacadas permiten una personalización aún mayor de las cabeceras de tu blog, que te dan la opción para mostrar imágenes de encabezado personalizado únicas para entradas específicas y páginas. Esto hace que cuando un usuario visualiza una página o una entrada completa, la imagen de cabecera de tu blog deja de ser la imagen personalizada por defecto, y en su lugar aparece la imagen destacada de dicha página o entrada. El requisito básico es que dicha imagen destacada no puede tener unas dimensiones menores a las requeridas para la imagen de cabecera personalizada del blog.

Para ello, abre el editor de publicación de la entrada, o la página en la que desea mostrar una imagen única de cabecera personalizada, y localiza el módulo de “Imagen destacada” en la esquina inferior derecha y haz clic en “Establecer la imagen destacada”.

9

Verás una pantalla de carga idéntica a la utilizada cuando se inserta una imagen en una entrada de blog. Sigue las instrucciones en pantalla para elegir la imagen desde tu ordenador y subirlo o seleccionarla de una de las imágenes que ya están en la Librería multimedia.

Una vez que la imagen se ha cargado con éxito, mira debajo de las opciones de tamaño y haz clic en “Usar como imagen destacada”, tal como aparece en la siguiente imagen:

No olvides hacer clic en “Actualizar” en el módulo “Publicar” de la entrada / página para guardar los cambios.

La eliminación de una imagen destacada

Para eliminar o cambiar una imagen destacada, basta con volver a abrir el editor de la entrada o de la página y hacer clic en “Quitar la imagen destacada” en el módulo de “Imagen destacada”. Si elimina una imagen destacada, se mostrará la imagen de cabecera personalizada del blog por defecto.

Fondo

Puedes personalizar el aspecto de tu blog sin saber nada de código HTML, usando un fondo personalizado. Tu fondo puede ser una imagen o un color. Para ello lo primero que debes hacer es acceder a la pantalla de “Fondo personalizado” a través del subpanel Apariencia →Fondo de tu escritorio de WordPress.

Personalizar con un color el fondo de nuestro blog

Para tener un color de fondo personalizado hay dos maneras de configurar:

1. El primero es escribiendo en el recuadro el valor hexadecimal, tales códigos puedes hallarlos en http://html-color-codes.info/ para seleccionar un color a tu gusto.

2. El segundo paso es haciendo clic en “elegir un color” donde se mostrará la siguiente imagen.

10

Aquí puedes ajustar el color. Si deseas un color azul o celeste arrastra con el ratón el “selector del color” que se encuentra en el anillo exterior al lugar del color que deseas seleccionar. Para cambiar la tonalidad del color seleccionado arrastra el selector del tono en el “área de selección del tono”. Luego haz clic en guardar cambios. De este modo tendrás un fondo más elegante del que tenías al principio.

Personalizar con una imagen el

fondo de WordPress:

1. Desde el subpanel Apariencia, haz clic en la opción Fondo.

2. Para elegir un fondo personalizado pulsa en “Examinar”.

3. Seleccione la imagen y presione el botón “abrir”.

4. pulse en “Subir imagen”.

5. Para terminar, no te olvides en presionar el botón “Guardar cambios”.

Un detalle importante es configurar las opciones de visualización, aunque esto es un criterio personal.

Como ejemplo, lo podemos personalizarde la siguiente manera.

Posición = izquierda

Repetir = mosaico horizontal

Adjunto = fijo

6. Para terminar la personalización presiona el botón “Guardar cambios”.

11

Al actualizar la página ya se ven los cambios con un aspecto mucho más profesional y personalizado.

12

3. Widgets:

Los Widgets son secciones independientes de contenido que pueden ser colocados en cualquier parte de tu tema que esté preparado para ello (comúnmente en la barra lateral y en el pié de página). Puedes configurar widgets en la barra lateral por medio del subpanel Apariencia → Widgets.

13

Panel de administración de widgets

Muchos temas muestran varios widgets de barra lateral por defecto hasta que editas tus barras laterales, pero no se muestran automáticamente en tu herramienta de gestión de barras laterales. Una vez hagas tu primer cambio en un widget puedes volver a añadirlo desde el área de widgets disponibles.

Configuración de Widgets:

Para colocar en tus áreas de widgets, algunos widgets de forma individual, arrastra y suelta la barra del título del widget al área deseada. Por defecto, sólo la primera área está desplegada. Para poner widgets en otras aéreas haz clic en el barra del título para desplegarlas.

La sección de widgets disponibles contiene todos los widgets que puedes elegir. Cuando arrastres el widget al lateral, se abrirá para que puedas configurar sus opciones. Cuando las tengas a tu gusto, haz clic en botón de guardar① y el widget se pondrá a funcionar en tu sitio. Si pulsas borrar②, se quitará el widget.

Quitar un Widget:

Si quieres quitar el widget, pero también guardar los ajustes por si los necesitaras en el futuro, simplemente arrástralo al área de widgets inactivos. Puedes añadirlos de nuevo en cualquier otro momento desde ahí. Esto es especialmente útil cuando cambias a un tema con pocas o distintas áreas de widgets.

Los widgets pueden usarse varias veces. Puedes proporcionar a cada widget un título para ser mostrado en tu sitio, pero no es necesario.

14

Activar el modo de accesibilidad:

La pestaña de “Opciones de Pantalla“, te permite usar los botones de Añadir y Editar en vez de arrastrar y soltar.

Descripciones de los widgets más comunes:

Aquí está una descripción de los distintos tipos de widget, junto con sus opciones de configuración:

1. Archivos – Muestra enlaces a cada mes que tiene entradas publicadas.

Título – descripción que aparece sobre la lista de vínculos de archivo. Mostrar como desplegable – Si está activada esta casilla, los archivos se muestran en una

lista desplegable. Mostrar la cantidad de entradas – si está marcada esta casilla, se muestra el recuento del

número de entradas para cada período mensual.

Mostrar por defecto (izquierda) y como desplegable + cantidad de entradas (derecha)

15

2. Calendario – muestra un calendario del mes en curso. Se muestran enlaces en las fechas si hay entradas para ese día.

Título – descripción que aparece en el calendario

3. Categorías – muestra una lista de tipos de entradas como enlaces a los blogs.

Título - descripción que aparece sobre la lista de categorías.

Mostrar como desplegable – Si está activada esta casilla, las categorías se muestran en una lista desplegable.

Mostrar la cantidad de entradas – si está marcada esta casilla, se muestra el recuento del número de entradas para cada categoría.

Mostrar jerarquía – si está marcada, muestra las relaciones padre/hijo mostrado por cambios en la sangría.

4. Enlaces – muestra la lista de enlaces (blogroll) separados por categoría. Por defecto, una vez que se da de alta tu sitio, se cargan una serie de enlaces relacionados con sitios de la comunidad de WordPress. Para administrar estos enlaces, eliminarlos y crear los tuyos propios, debe hacerse por un usuario con perfil “administrador” o de “editor”, a través del subpanel Enlaces del escritorio de WordPress.

16

Categorías de los enlaces a mostrar – Puedes elegir que

categoría de enlaces quieres mostrar. Si no quieres

mostrar todos los enlaces, pero sí más de una

categoría, debes de insertar un widget de “Enlaces” por

cada categoría en la barra lateral, seleccionando en

esta lista la categoría específica en cada uno de los

widget.

Mostrar la imagen del enlace – Muestra la imagen

asociada a cada enlace creado, si lo hubieras echo, al

configurar los enlaces a través del subpanel de

administración de “Enlaces”. Es importante tener en

cuenta el tamaño del ancho de la imagen que

asociemos a cada enlace, para que esta encaje

visualmente en la zona de widgets a mostrar. En el

caso de la barra lateral de un blog, lo más común es un

máximo de 200 pixeles. Pero esto depende del tema

activado para el blog.

Mostrar el nombre del enlace – Muestra el título del

enlace

Mostrar la descripción del enlace – Muestra la

descripción que has añadido a cada enlace.

Mostrar la clasificación del enlace – En la pantalla de

edición de un enlace en el Subpanel “Enlaces”, se

puede valorar dicho enlace con un valor numérico del 1

al 10 (0 para no valorar). Pues bien, esta opción

muestra esta valoración en cada enlace en el widget de

texto.

5. Meta – muestra los vínculos a meta funciones tales como Inicio/Cierre de sesión, administración, RSS y enlaces de WordPress.

Título – descripción que aparece en la lista de enlaces mostrados del widget meta.

17

6. Páginas – muestra un enlace a cada página.

Título – descripción que aparece en la lista de páginas. Ordenar por – Seleccione el criterio para ordenar la lista de páginas. Elija Título de la

página, Orden de las páginas o Identificación de la página (ID) en el menú desplegable. Excluir (IDs de página, separados por comas.) – introduzca el ID de la página (s) para excluir,

separar cada Identificación de página con una coma.

7. Comentarios recientes – muestra una lista de los comentarios más reciente que han sido aprobados en el blog.

Título – descripción que aparece en la lista de comentarios recientes.

Número de comentarios a mostrar: (máx.15), introduzca el nº de comentarios a mostrar.

8. Entradas recientes – Lista de las entradas más recientes publicadas en el blog.

18

Título – descripción que aparece en la lista de las últimas entradas. Número de entradas a mostrar: (máx. 15) – introduzca el nº de entradas a mostrar.

9. RSS – muestra una fuente RSS. Varias instancias de este widget se puede agregar a la lista de Widgets actual. Entradas desde cualquier feed RSS o Atom.

Introduce la URL del feed RSS aquí – introducir una URL completa, por ejemplo, http://wordpress.org/development/feed/

Dale un título al feed (opcional): – entrar una descripción que aparecerá en la lista de elementos de la fuente RSS.

¿Cuántos elementos te gustaría mostrar? – elija el número de elementos de la fuente RSS que desea mostrar.

¿Mostrar el contenido? – seleccionar esta opción para mostrar el contenido de los “feed“

¿Mostrar el autor si está disponible? – seleccionar esta opción para mostrar el autor de este elemento de contenido particular.

¿Mostrar la fecha? – marque esta casilla para mostrar la fecha en que se publicó el artículo.

10. Buscar – muestra un cuadro de búsqueda para introducir texto para buscar en tu blog. También se proporciona un botón de envío.

Título – descripción que aparece en la lista de páginas.

19

11. Nube de etiquetas – Es, históricamente, el widget más característico de un blog. Muestra la lista de etiquetas (las 45 más utilizadas) en una nube. Las etiquetas en las entradas son muy útiles para clasificar contenido, y ofrecer al lector de nuestro blog una agrupación de estas por términos. Es recomendable utilizar etiquetas en cada entrada, pero sólo con las palabras más relevantes al tema principal, y evitar aumentar la densidad de palabras clave que no son relevantes, aunque se hablen de ellos.

Título – descripción que aparece en la nube de etiquetas.

Taxonomía – seleccione el tipo de palabras clave en la que estará basado la nube (etiquetas o categorías).

12. Texto – se usa para introducir código HTML, Javascript, o simplemente texto plano. Se puede añadir este widget tantas veces como necesitemos.

Título – descripción del widget de texto

Área de texto – utilice esta área para introducir texto y/o HTML.

Lo podemos para colocar una imagen en la barra lateral. También podemos usuarlo, por ejemplo, para colocar nuestra información de contacto en zona de widget del pie de página. O incluso, para hacer una declaración de derechos de autor de los contenidos

20

publicados en nuestro blog (tipo creative commons, etc.). Veamos algunos ejemplos de la versatilidad que nos reportan los widget de texto para insertar contenido en las áreas de la barra lateral y pie de nuestro blog:

No es necesario recurrir a un programa editor de HTML (tipo CODA, Dreamweaver, etc.). Si deseas agregar un enlace, fotografía, etc. en la barra lateral y no sabes cómo escribir código HTML, es más fácil hacerlo a través de una nueva entrada (asegúrate de que está vacía) y usar el editor para crear el vínculo.

Después de que el vínculo sea creado, cambia al editor de HTML.

Si tu mensaje estaba vacío cuando empezó, el único código HTML en el editor debe ser para tu enlace. Si se trata de un simple enlace de texto tendría el siguiente aspecto:

Si se trata de un enlace a una imagen sería similar a:

21

Copia todo el código HTML en el editor y pégalo en un Widget de texto.

13. Menú personalizado – Usa este widget para añadir uno de tus menús de navegación personalizados, que creaste a través del subpanel Apariencia →Menús, en la zona de widgets (comúnmente en la barra lateral).

Título – descripción del widget de texto. Elegir menú – Se despliega una lista con todos los

menús creados a través de la pantalla de “menús personalizados” en tu escritorio de WordPress, donde poder elegir el menú que quieres que se muestre a través del widget.

En ocasiones, al activar algunos plugins pueden aparecer disponibles su respectivo widget para añadirlo a la barra lateral o al pie del blog. Ejemplos de estos plugins es el WP-Polls, que nos proporciona el widget “Polls”, o el plugin “Sidebar Login”, que te permite ofrecer un widget para que se conecten los usuarios registrados o registrarse a los que no lo estén.

Como colocar una imagen en la barra lateral de WordPress a través de un widget de texto

Para insertar una imagen, o un logo en tu blog solo debes seguir los pasos sencillos que se detallan a continuación:

1. En tu escritorio de WordPress en el subpanel Entradas, haz clic en la opción “Añadir nueva”.

Ejemplo de widget “menú personalizado”

22

2. A continuación, subir la imagen o logo que se desea insertar en la barra lateral desde el botón “Añadir objeto”.

3. Al hacer clic en el botón “Añadir objeto” aparece una nueva pantalla de carga de archivos.

23

Arrastra los archivos (método “arrastrar y soltar” con el ratón) en el recuadro punteado desde una carpeta de tu ordenador, o haz clic en el botón “Elegir archivos” para que se te abra una ventana de búsqueda de los archivos de tu ordenador.

Es importante tener en cuenta el tamaño del ancho de la imagen que subamos, para que esta encaje

visualmente en la zona de widgets a mostrar. En el caso de la barra lateral de un blog, lo más común

es un máximo de 200 pixeles. Pero esto depende del tema activado para el blog.

4. Una vez terminada la carga de archivos, aparecerá una pantalla, donde debemos tener en cuenta algunos detalles.

a. En el título debes considerar que el nombre de la imagen se mostrará o no al pasar por ella el ratón, y si deseas que no se vea simplemente borrarlo.

b. Del mismo modo ten en cuenta que la imagen tendrá URL de enlace o no, igual si eliges no tener el enlace presione el botón ninguna caso contrario dejarlo tal como está.

c. En esta sección debes elegir la posición de la imagen preferiblemente según el caso elegir el centro.

d. Aquí elige el tamaño de tu imagen.

e. Ahora haz clic en insertar en la entrada.

24

5. Después que resulte la siguiente imagen haga clic en el botón HTML, para copiar el código HTML de la imagen en la barra lateral del sitio.

25

6. Ahora dirígete al subpanel “Apariencia” y selecciona la opción “widgets”. Busca el Widget “texto” y arrastra con el puntero del ratón a la zona de widget de la barra lateral de tu blog. Posteriormente, pega el código HTML, anteriormente copiado, en el recuadro. Escribe el título de la imagen, si así lo decides, si no dejarlo en blanco.

Ahora selecciona guardar, y cerrar.

26

Puedes deslizar la imagen de la barra para situar su ubicación al lugar más conveniente, por ejemplo la ubicamos en la parte superior.

7. Al actualizar tu blog quedará similar a este ejemplo.