En este artículo vamos a conocer como definir el diseño o apariencia visual de un sitio web de WordPress mediante Themes o temas.
Básicamente, un tema es un un conjunto de archivos que se instalan dentro de la estructura de WordPress y que sirven para generar la interfaz gráfica o diseño de un sitio web. La mayoría de estos archivos están escritos mediante PHP, el lenguaje de programación bajo el cual ha sido desarrollado WordPress, aunque obviamente también se utilizan otros lenguajes tales como HTML, CSS, JavaScript, etc.
WordPress cuenta un tema instalado por defecto, sin embargo, podemos instalar un tema nuevo que se adapte al aspecto visual que queremos que tenga nuestro proyecto. Para esto, existen cientos de sitios web donde se pueden descargar temas gratuitos o comprarlos por un precio muy bajos. También podemos contratar los servicios de un diseñador profesional especializado en WordPress.
Además, podemos utilizar el Directorio de Temas de WordPress, el cual cuenta con miles de temas, la mayoría de ellos son gratuitos, y su nivel de calidad es revisado personalmente por un equipo de voluntarios de la Fundación WordPress. Esta opción es la que conoceremos en este artículo.
Gestionar Temas
Para poder trabajar con los temas de WordPress es necesario ingresar al gestor de temas. Para esto, pulsamos sobre el menú Apariencia de la barra lateral del panel de administración.
Se carga el gestor de temas, y desde aquí podemos ver todos los temas que vienen intalados de forma predeterminada en WordPress.
Como regla general, en la parte izquierda de esta pantalla se muestra el tema que se encuentra activo actualmente, es decir, el tema o diseño que estamos utilizando y por tanto es el que visualizan los usuarios en la parte frontal de nuestro sitio. Esto significa, que podemos tener instalados varios temas, pero solamente uno de ellos estará activo.
Para tener una vista previa de como se vería nuestro sitio web con cualquiera de los temas que vienen instalados por defecto pero que no están activos, simplemente pasamos el puntero del ratón por encima de cualquiera de estos temas veremos como automáticamente se muestran varios botones:
El botón Vista previa que permite previsualizar como quedaría nuestro sitio web con ese tema en particular.
Con el botón Activar, convertimos el tema en predeterminado, es decir en el tema activo.
El botón Detalles del tema muestra una ventana emergente que contiene una breve descripción del tema, y además nos permite realizar una vista previa o activar el tema. También, desde esta ventana podemos borrar cualquier tema que tengamos instalado y que no estamos utilizando.
Para esto, debemos pulsar sobre el enlace “Borrar”que se encuentra en la parte inferior izquierda de la ventana, a continuación se muestra un cuadro de dialogo preguntándonos si queremos borrar este tema debemos presionar el botón “Aceptar”.
Instalar un nuevo tema desde el Directorio de WordPress
Si queremos acceder al Directorio de temas de WordPress para instalar un nuevo tema, solamente debemos presionar sobre el botón “Añadir nuevo” de la página principal del gestor de temas. A continuación, se muestran todos los temas disponibles del Directorio de temas de WordPress.
Fíjate que además tenemos una barra de navegación desde la cual podemos filtrar todos los temas del directorio en función de ciertas categorías, que son:
Destacados: muestra el listado de los 15 temas cargados al directorio que más se están utilizando en este momento.
Populares: despliega todos los temas que han sido mejor valorados por los usuarios en el repositorio de WordPress.
Recientes: muestra los nuevos temas que se han añadido al repositorio de WordPress.
Favoritos: se refiere a todos aquellos temas que han sido marcados por los usuarios como favoritos en sus cuentas de WordPress.com
Filtrar por características: permite filtrar el listado de temas en función de ciertas características, tales como colores, diseño de pantalla, asunto, etc.
Además tenemos un buscador en el cual podemos escribir el nombre del tema que nos interesa instalar.
Para instalar cualquier tema, basta con pasar el puntero del ratón encima de la imagen miniatura del tema que nos interesa, y de inmediato aparecen el botón “Instalar”, que permite que el tema en cuestión se descargue en el panel de administración y se muestre en la página principal del gestor de temas, y el botón “Vista previa» que permite previsualizar como quedaría nuestro sitio web con ese tema en particular.
Al concluir la instalación, se mostrará un botón llamado “Activar”, si lo presionamos el tema instalado pasará a estar activo, es decir que será el que definirá el aspecto visual de nuestro sitio web.
Cómo personalizar un tema
Una vez que se ha instalado y activado un tema, el siguiente paso será personalizarlo para que se adapte al aspecto visual del diseño que queremos que tenga nuestro sitio web.
Básicamente tenemos 3 formas para personalizar un tema de WordPress:
- La primera, consiste en pulsar sobre el enlace Personalizar del menú Apariencia de la barra lateral de nuestro panel de administración.
- La segunda es presionar sobre el botón de color azul que se encuentra en la imagen minuatura de nuestro tema en la página del gestor de temas.
- La tercera es desde la parte frontal de nuestro sitio web, al pulsar sobre el enlace Personalizar que se encuentra en la barra superior del panel de administración.
Con cualquiera de las 3 formas se mostrará la parte frontal de nuestro sitio web, también denominada como Front-end, es decir la parte que pueden ver los usuarios o visitantes del mismo. Pero además, se mostrará una barra lateral en la parte izquierda de la pantalla, conocida como panel de personalización o “Personalizador de temas”, y desde aquí podemos modificar el aspecto de nuestro tema y las configuraciones que vienen por defecto.
Para esto, tan sólo debemos pulsar sobre cualquiera de las diferentes pestañas que contiene este panel, las cuales están clasificadas de acuerdo a ciertas categorías predefinidas, y luego seleccionamos las opciones que nos interesan modificar. A medida que vayamos cambiando dichas opciones podremos ver los resultados en el lado derecho de la pantalla del navegador.
Debes tener en cuenta que las opciones de personalización pueden variar en función del tema que hayamos instalado, es decir, que dependiendo del tema que estemos utilizando podremos ver otras funcionalidades para modificar o personalizar el diseño del mismo.
El Personalizador de temas también permite previsualizar nuestro sitio web en diferentes tamaños de pantalla, por ejemplo, teléfono móvil, tableta y equipos de escritorio. Esto lo podemos hacer al presionar sobre cualquiera de los 3 íconos que se encuentran en la parte inferior del panel del personalización para cambiar la vista previa del sitio.
Por último, al terminar de personalizar nuestro tema simplemente debemos presionar el botón “Publicar” que se encuentra en la parte superior derecha del panel de personalización para que se guarden los cambios realizados.
Inicialmente me formé como Técnico en Anális y Diseño de sistemas. Luego ingresé a la escuela de negocios, hice una licenciatura en Administración y obtuve una especialización (Post-grado) en Alta Dirección Empresarial. Desde el año 2007 me dedico a la creación de sitios web, lo cual combino con la consultoría y la capacitación de tecnologías de Internet.
- TypeScript vs. JavaScript: ¿Cuál es mejor para tus proyectos? - octubre 31, 2024
- Optimización de imágenes: clave para un diseño web eficiente - septiembre 28, 2024
- Objetos en JavaScript - septiembre 21, 2024
