capítulo 04

Apariencia

Queda terminantemente prohibido cualquier reproducción, modificación, distribución, transmisión, posterior publicación, exhibición o representación

total o parcial del mismo, sin la autorización escrita de telecampus

apariencia

Apariencia

WordPress

Es muy importante la apariencia que tenga el sitio web. Es por ello que se debe escoger un aspecto que resulte atractivo y visual a la vez que se tienen en cuenta su usabilidad y navegación.

WordPress tiene la gran ventaja que separa completamente el contenido del aspecto y por tanto permite una gran flexibilidad para gestionar el sitio web y cambiarlo sin ningún tipo de problema.

Sí que es cierto que hay configuraciones y elementos que son dependientes del tema, como por ejemplo los menús y la distribución del contenido, pero se tiene la seguridad de que nunca se perderá el contenido por cambiar el tema.

4.1 Elección de tema

Para activar un tema hay que ir a la opción “Apariencia del menú” y seleccionar la opción “Temas”:

Queda terminantemente prohibido cualquier reproducción, modificación, distribución, transmisión, posterior publicación, exhibición o representación

total o parcial del mismo, sin la autorización escrita de telecampus WordPress

WordPress lleva por defecto dos temas: los Twenty Eleven y Twenty Ten. Si se tienen profundos conocimientos de HTML y CSS estos temas son los que usan muchos diseñadores como base para poder desarrollar los suyos. Si no es el caso, se tendrá que buscar el tema que se ajuste a las posibilidades.Sin embargo habitualmente será preferible, para ahorrar tiempo y esfuerzo, aprovechar el trabajo de un programador que pone los temas a disposición de todos. En este sentido hay dos opciones:

• Temas gratuitos: WordPress es un software de código libre u open source, esto significa que muchas personas colaboran en su desarrollo de forma desinteresada para así enriquecerlo y poder usar un software actualizado y en constante evolución. Esta filosofía hace que muchos desarrolladores pongan a disposición de la comunidad diferentes diseños y opciones de apariencia para el resto, a la vez que muchos diseñadores ponen temas sencillos para que se pueda ver qué son capaces de hacer y así comprar sus contenidos. Si se va a wordpress.org, se puede encontrar el apartado “themes” que permitirá descargar temas de forma gratuita para que el sitio web pueda tener un aspecto atractivo.

• Temas premium: son todos aquellos que, debido a las funcionalidades que añaden o al trabajo que ha llevado hacerlos, el diseñador no los pone a disposición de forma gratuita sino que requiere que se compren para que se puedan usar. Si no se quiere la exclusividad del tema o funciones extremadamente avanzadas, la mayoría de temas se sitúa en la horquilla de los 30 a los 60 dólares, aunque cada programador pone el precio que cree más conveniente.

Para encontrar temas gratuitos, se puede ir a la opción “Instalar temas” que se encuentra en la pestaña de “apariencia temas”, aunque también se puede acceder a http://wordpress.org/extend/themes/. También con Google se pueden localizar temas WordPress o temas gratuitos WordPress y encontrar muchos sitios web que ofrecen temas adaptados. Si lo que se desea es encontrar temas premium, entonces es mejor buscar “temas WordPress” o “temas WordPress Premium” en Google o ir a alguna página especializada como puede ser themeforest.net que permite encontrar temas de pago muy variados y versátiles.

• Sea de la forma que sea, llegará el momento en que se tendrá un tema para el sitio web. Si se ha encontrado desde WordPress, se puede instalar directamente; si no, se tendrá que subir. La ventaja de ser de WordPress es que al pulsar el botón “Instalar” ya lo subirá directamente al servidor y se podrá empezar a utilizarlo. Si no está en el WordPress porqué es de otros

Queda terminantemente prohibido cualquier reproducción, modificación, distribución, transmisión, posterior publicación, exhibición o representación

total o parcial del mismo, sin la autorización escrita de telecampus WordPress

aparienciasitios web se tendrán dos formas de instalarlo:

• Independientemente de la opción que se utilice, se necesitará descargar el tema y colocarlo en el disco duro.

• Una vez se tiene en el disco duro, se tendrá que subir. Para ello WordPress ofrece la opción de subirlo dentro de Apariencia>Temas>Instalar Temas. La otra opción es abrir el cliente FTP y subirlo a la carpeta themes que se encuentra en la carpeta wp-content de WordPress.

• Una vez subido, WordPress lo detecta automáticamente y se puede seleccionar para que sea la apariencia del sitio con la opción ”Activar” que figura debajo del tema en Apariencia>Temas.

4.2 Widgets

Los widgets son pequeñas aplicaciones web que realizan una función. Pueden ser: una nube de etiquetas, un listado de enlaces o un listado de entradas realizadas. Los temas habitualmente habilitan espacios para los widgets, sean las barras laterales, los pies de página o espacios concretos de la página principal. Esto permite estructurar el contenido de una forma más flexible y que se puedan destinar espacios para ciertos elementos.

Dentro de apariencia, en la opción Widgets se encuentran los espacios para colocar los propios widgets. La estructura de los widgets es muy sencilla. Hay un área central donde se observan todos los widgets disponibles y una zona al lado derecho donde están todas las partes que el tema pone a disposición para colocar los widgets.

Queda terminantemente prohibido cualquier reproducción, modificación, distribución, transmisión, posterior publicación, exhibición o representación

total o parcial del mismo, sin la autorización escrita de telecampus WordPress

Para colocar un widget en alguno de estos sitios es tan sencillo como desplegarlo (clicando en la flecha de la derecha del área) y luego pinchar y arrastrar hasta el área que se desee. Es importante tener en cuenta que el orden en que se coloquen será el orden en que aparecerán. A la vez es importante recordar que hay widgets que pueden llegar a ocupar mucho (por ejemplo el calendario de entradas) a medida que crece el sitio, es por ello que es importante vigilar cómo se van a colocar los widgets para evitar grandes espacios de scroll sin contenido principal.

4.3 Menus

Al navegar por un sitio web, siempre hay menús que permiten acceder a las diferentes secciones del sitio web. En esta sección se pueden crear y configurar los diferentes menús que tendrá el sitio web.

En la pantalla de menú, se tendrá que crear el menú introduciendo el nombre que se desee para luego estructurarlo. La herramienta de creación del menú, pese a parecer muy sencilla, permite una gran complejidad.

Dentro del menú, se pueden introducir tres opciones:

- Un enlace personalizado, sea del nuestro sitio web o de un sitio exterior.

Queda terminantemente prohibido cualquier reproducción, modificación, distribución, transmisión, posterior publicación, exhibición o representación

total o parcial del mismo, sin la autorización escrita de telecampus WordPress

apariencia- Una de las páginas fijas de las creadas en el sitio.

- Una categoría de contenidos para mostrar las entradas clasificadas con esa categoría.

Antes de crear el menú hay que tener las páginas fijas y las categorías creadas, aunque se pueden modificar cuando se desee. En la casilla “Nombre” del menú, introduzca el nombre que desee y seleccione la opción “Crear menú”. Automáticamente le aparecerá la ventana “Ubicación del tema” para que pueda seleccionar de los diferentes menús que tiene predefinidos el tema, qué menú quiere usar en cada ubicación.

Automáticamente activará las diferentes opciones del apartado izquierdo y podrá seleccionar de los diferentes elementos el que le interese y con el botón “Añadir al menú” irlos pasando. Cualquier opción se puede pinchar y arrastrarla para ir configurando la estructura.

Si quiere, por ejemplo, crear una opción de inicio en su menú, puede crear un enlace con la dirección web y darle la etiqueta “Inicio”.

Queda terminantemente prohibido cualquier reproducción, modificación, distribución, transmisión, posterior publicación, exhibición o representación

total o parcial del mismo, sin la autorización escrita de telecampus WordPress

Para estructurar el menú de WordPress se tiene que conocer que si se colocan las opciones en el mismo nivel, entiende que son diferentes opciones del menú, mientras que si las opciones están en otro nivel (tabuladas), entiende que son subopciones de la opción superior. A continuación se muestra un ejemplo:

Menú de un nivel

Queda terminantemente prohibido cualquier reproducción, modificación, distribución, transmisión, posterior publicación, exhibición o representación

total o parcial del mismo, sin la autorización escrita de telecampus WordPress

aparienciaVisualización del menú

Menú de dos niveles

Queda terminantemente prohibido cualquier reproducción, modificación, distribución, transmisión, posterior publicación, exhibición o representación

total o parcial del mismo, sin la autorización escrita de telecampus WordPress

4.4 Otras opciones dependientes del tema

Como se ha comentado más arriba, los temas pueden permitir diferentes opciones de visualización y pueden requerir cuál es la que más le interesa.

Es por ello que WordPress tiene varias opciones predefinidas para que los diseñadores puedan utilizar todas las opciones que deseen dar al usuario.

Para acceder a las opciones de tema, se tendrán que seleccionar las opciones que el menú active en el menú “Apariencia”. Algunos ejemplos que se pueden encontrar son:

- Opciones del tema: distribución de la página, combinación genérica de colores y opciones de color de texto o de enlaces.

- Cabeceras: configuración de cómo se visualiza la cabecera de la página.

- Fondos: configuración del color o de imágenes de fondo del tema.

- Theme settings: configuraciones avanzadas del tema para que el usuario pueda configurar elementos de base que aparecen o no o activación de pies o diferentes menús...

En general se pueden encontrar tantas opciones como diseñadores hay y por tanto se tendrá que navegar por las diferentes opciones y familiarizarse con lo que ofrecen.

4.5 Editor

La última opción del menú apariencia siempre es la opción Editor. Esta opción no se explicará muy detalladamente ya que es una herramienta para modificar las estructuras HTML de las diferentes plantillas junto con las hojas de estilo CSS que llevan el tema. Es por ello que si no se conoce profundamente el lenguaje HTML y CSS, es mejor no tocar ninguna de estas opciones.

El editor está dividido en dos zonas: la central, que es propiamente el código HTML o CSS que hay en el archivo seleccionado y el listado, en la parte derecha de todas las estructuras que forman parte del tema que se tenga seleccionado en ese momento.

Queda terminantemente prohibido cualquier reproducción, modificación, distribución, transmisión, posterior publicación, exhibición o representación

total o parcial del mismo, sin la autorización escrita de telecampus

Recordatorio

lección 04

!

• El tema es la base sobre como se presentará nuestro WordPress.

• Podemos encontrar multitud de temas en la propia página de WordPress.

• La opción más sencilla de buscar temas es poner Temas WordPress en Google.

• Los Widgets son pequeñas aplicaciones web para añadir pequeñas funciones a nuestra página.

• Una vez tenemos el tema seleccionado tendremos que crear los menús de navegación.

• Antes de crear un menú hemos de tener claro la organización de nuestro sitio web.

• Todos los temas tienen sus propias opciones que tendremos que investigar para poder sacar el máximo potencial de los mismos.

!

!

!

!

!

!

!

WordPress

• Si usted tiene conocimientos de HTML y CSS puede modificar su tema desde la página del Editor.

!

WordPress