Apariencia de WordPress: guía definitiva para cambiar tu web

Si has llegado hasta aquí seguramente estés buscando cambiar la apariencia de WordPress y darle un nuevo aire a tu sitio web. Hoy en día existen millones de webs y diferenciarse en el diseño es al fin y al cabo una cosa que te hará destacar. Por eso es una parte que debes controlar.

En este post veremos como funciona paso a paso el menú de apariencia en WordPress. Y lo haremos parándonos en todas y cada una de las opciones de las que disponga el tema o plantilla en uso. Es importante que sepas que según el tema instalado las opciones pueden cambiar. Cada tema tiene sus posibilidades de personalización y sus características. En todo caso, en este tutorial incidiremos en las opciones comunes de la mayoría de temas para poder cambiar su diseño y personalizar WordPress a tu manera.

Cambia la apariencia de WordPress con temas

WordPress trae ya un tema instalado por defecto. Pero si por algo este CMS es de los más utilizados, entre muchas otras ventajas más, es por las enormes posibilidades que ofrecen las plantillas de WordPress de personalizar una página web.

Selecciona un tema para cambiar la apariencia del WordPress

Una de las primeras cosas en el momento de iniciar una web con WordPress es elegir un tema para la apariencia. Hay cientos de sitios donde es posible descargar temas gratuitos o comprarlos por un precio asequible. Sin, duda uno de los mejores lugares para empezar a buscar temas es el Repositorio de Temas del sitio oficial de WordPress.

Pero si por el contrario prefieres optar por invertir un poco en tu proyecto y quieres optar a un tema premium, mucho más profesional y estiloso, puedes optar por repositorios de pago. Uno de los más conocidos y recomendables es Themeforest. Pero existen otros donde encontrar una variedad de plantillas con las que encontrar la que más se adapte a la posible apariencia de tu WordPress. Solo hace falta buscar en en Google con búsquedas como «wordpress templates» o «temas wordpress». También puedes echarle un vistazo a las que consideramos las 10 mejores plantillas de WordPress del momento.

Veamos como manejarse por los temas de WordPress. Una vez en el escritorio de WordPress, al hacer click en la opción del menú Apariencia se mostrará la pantalla de administración de temas.

 

 

El tema que está actualmente activo es mostrado en la parte superior izquierda de la pantalla. Los demás temas se encuentran instalados, pero no están en uso, pues solo puede haber un tema activo.

Puedes observar una vista previa de la web usando otro tema que no esté activo en ese momento. Solo hace falta hacer clic en el botón Vista previa de cada tema.

En la vista previa, tendrás la opción de navegar por las opciones del menu del tema, así como también hacer varios cambios en el tema y ver su aspecto.

También puedes ver más detalles sobre un tema en especial haciendo clic en Detalles del tema. Saltará una ventana emergente con la descripción del tema y más detalles adicionales.

Para agregar un tema a WordPress solo debes hacer clic en el botón Añadir nuevo de la parte superior de la página y elegir uno entre los muchos existentes en el Repositorio de Temas de WordPress. También tienes la opción de instalarlos subiéndolos en un archivo .zip.

Previsualiza y personaliza los temas para la apariencia del WordPress

De igual forma que es posible previsualizar un tema, también se pueden actualizar varias opciones mientras se visualizan los cambios al momento y en tiempo real.

Las opciones que puedas modificar dependerán siempre del tema que esté en uso.

Para cambiar la apariencia de un tema en WordPress solo hay debes hacer click en el botón Personalizar. Hasta que hagas clic en el botón Guardar y publicar, solo se harán los cambios en la ventana de previsualización. Podrás navegar por los otros tema y ver sus previsualizaciones. Solo hasta que hagas clic en el botón Guardar y activar, se guardará de forma definitiva la apariencia modificada en esa plantilla en WordPress.

 

 

Como podrás comprobar, es una excelente forma de hacer cambios y verlos en tiempo real sin que en realidad se estén haciendo en la web. Solo hasta que hagas click en Guardar y publicar.

Añadir un nuevo tema para la apariencia del WordPress

Como decíamos antes tienes la opción de añadir temas nuevos a tu sitio desde el panel de administración de WordPress. Solo debes hacer click en el botón Añadir nuevo para buscar y añadir nuevos temas en tu web.

Debería verse similar a la imagen mostrada abajo.

 

Ahora estás en la pantalla Añadir temas en apariencia de tu WordPress que permite buscar e instalar temas del Repositorio de Temas oficial de WordPress. De forma predeterminada, se mostrará una lista de plantillas destacadas.

Puedes filtrar los resultados según temas Destacados, Populares o Novedosos. También es posible filtrar por otras características: Colores, Diseño de pantalla (la distribución de la plantilla), Características (puedes elegir entre distintas funcionalidades) y Asunto (según el tipo de sector).

También puedes hacer uso del buscador introduciendo un término en concreto. Luego hacer click en Buscar temas y ver todos los temas que puedes encontrar.

Al colocar el ratón sobre cada miniatura del tema, se mostrarán opciones extra.

Para ver los detalles de un tema y su vista previa, así como instalarlo. Cuando el tema acabe de instalarse, será posible ver una vista previa, activar el tema o volver al administrador de temas de WordPress.

Personaliza un tema y genera y una buena apariencia en tu WordPress

El Personalizador de WordPress permite cambiar ciertas partes de la web de forma sencilla. Cuando haces click en el botón Personalizar, se te desplegarán varias opciones del tema que puedes modificar. Pero siempre depende del tema en uso. Por eso pueden ser más o menos opciones las disponibles según cada tema. Incluso puede que algunos plugins muestren opciones adicionales.

Podrás navegar por las distintas opciones usando el panel y hacer los cambios deseados viendo como se actualiza el aspecto automáticamente en la vista previa.

Hasta que hagas click en el botón Guardar y publicar, solo se actualizará la vista previa.

También puedes ver el aspecto de tu sitio en varios dispositivos, como smartphones, tablets y equipos de escritorio. Solo debes hacer click en los iconos de visualización para cambiar la vista previa del sitio. Así podrás hacerte una idea de cómo se ve la página en cada dispositivo, tal como se ve en la imagen de abajo.

 

 

Gestiona widgets en la apariencia de WordPress

Los widgets son secciones independientes del contenidoen WordPress cuya ubicación depende siempre del tema en uso.

Normalmente los widgets son asociados a las sidebars o barras laterales. Estas se encuentran siempre en una columna de la web, ya sea a izquierda o derecha. Pero los widgets también pueden aparecer en otro lugar del sitio, como el footer o pie de página.

Hay diversos widgets disponibles de manera predeterminada en WordPress, que permiten dotar de contenido adicional a una web, como comentarios recientes, categorías, nubes de etiquetas o menús personalizados, entre muchos otros.

En la apariencia de WordPress, en el menú de Widgets, aparecerá la pantalla Widgets disponibles. En ella se muestran todos los widgets que  están a tu disposición, como se ve en la imagen inferior.

 

 

Puedes añadir widgets arrastrando y soltando el widget a la ubicación deseada. Después el widget se abrirá para que puedas cambiar las opciones disponibles. Luego guarda los ajustes haciendo click en el botón Guardar para conservar los cambios realizados.

Puedes eliminar un widget de la Barra lateral pero sin embargo, guardar las opciones para usarlo en un futuro. Simplemente arrástralo a la sección de Widgets inactivos y estará listo para la próxima vez que quieras usarlo.

Si por el contrario, quieres eliminar un widget, haz clic en el botón Borrar.

Configura los menús de la web en Apariencia de WordPrss

En la sección de apariencia de WordPress también es posible modificar los menús de tu página web. Podrás actualizar, añadir nuevos menús o eliminarlos. Además, también podrás agregar o eliminar elementos en ellos, entre muchas otras opciones. Vamos a verlas todas:

Añade un nuevo menú

Según el tema que te encuentres usando, tu web puede utilizar más de un menú de navegación aparte del menú principal del sitio.  Puede haber varios menús en la cabecera del sitio. O también puede haber la opción de poner diferentes menús en las barras laterales como en el footer o pie de página.

 

 

Para añadir un nuevo menú, desplaza el ratón hasta la opción Apariencia del menú de navegación del WordPress de la izquierda. En el menú emergente haz click en el enlace de Menús. También puedes acceder a el haciendo click en la opción Apariencia de WordPress y luego en el enlace Menús que aparece debajo.

Se mostrará una nueva pantalla donde debes pinchar en Crear un nuevo menú, similar a la de la imagen inferior. Introduce un nombre para el menú en Nombre del menú. Haz click en el botón Crear menú para crear tu nuevo menú.

Edita un elemento existente en el menú

La lista de los elementos del menú que desees modificar se encuentra en la columna derecha. Si existen varios menús en tu página web, verás una lista desplegable en la parte superior. Ahí podrás seleccionar el menú que quieras editar en tu web.

Simplemente elige el menú que quieres editar de la lista desplegable Elige el menú que quieras editar y luego pincha en el botón Elegir.

Los elementos del menú del menú seleccionado se mostrarán a continuación.

Los elementos de esta columna derecha son los mismos que los que se muestran en tu página web. Al pinchar en la flecha de cada elemento del menú, se mostrará un panel con diversas opciones para ese elemento elegido y que podrás actualizar según sea conveniente.

En la apariencia de WordPress podrás mostrar u ocultar campos como Destino del enlace, Clases CSS, Relación con el enlace (XFN) o Descripción, usando la pestaña Opciones de pantalla ubicada en la parte superior derecha.

• URL: se muestra para los Enlaces Personalizados, y contiene la dirección del elemento del menú.
• Etiqueta de navegación: es el título que se muestra dentro del menú actual de tu página web.
• Atributos del título: es la descripción que se muestra al pasar el ratón sobre dicho elemento del menú.
• Abrir enlace en una nueva ventana/pestaña:  esta opción está oculta por defecto. Puedes elegir que el enlace se abra en la misma ventana o pestaña del navegador o en una nueva. Esta opción se muestra si seleccionas la opción Destino del enlace en el panel Opciones de pantalla.
• Clases CSS: también está oculta por defecto. Se trata de clases CSS opcionales para añadir a ese elemento del menú. Esta opción se muestra si eliges Clases CSS en el panel Opciones de pantalla.
• Relación con el enlace (XFN): también está oculto por defecto. Permite la generación de atributos XFN de manera que pueda mostrar su relación con los autores del sitio al cual enlaza.
• Descripción: también oculto por defecto. Se trata de la descripción para el enlace. Puede o no mostrarse dependiendo del Tema. Se hace visible si seleccionas la opción Descripción en el panel Opciones de pantalla.

Debes saber que cada elemento del menú puede ser movido a una nueva ubicación en la jerarquía de dicho menú. Simplemente utiliza los enlaces debajo del campo Etiqueta de navegación. O haz click en el área del título del elemento del menú y arrastra y suelta el menú en la ubicación elegida.

Si eliges la opción ‘arrastrar y soltar’, el puntero del ratón se mostrara en forma de cruz al pasarlo sobre el área correcta.

Una vez hechas las modificaciones convenientes en los elementos del menú, solo queda hacer click en el botón Guardar menú para guardar todos los ajustes realizados.

Agrega un nuevo elemento al menú

Por defecto, WordPress solo muestra los paneles de Páginas, Enlaces y Categorías.

Si deseas añadir Entradas, Etiquetas o Formatos de Entrada como elementos de un menú, solo debes usar la pestaña Opciones de pantalla de la parte superior derecha para habilitar dichos paneles.

Para añadir una Página nueva como elemento del menú, simplemente selecciona las casillas del panel de Páginas. Podrás seleccionar una o varias Páginas al mismo tiempo. Una vez seleccionadas, haz click en el botón de Añadir al menú. Así, los elementos nuevos del menú aparecerán debajo de la lista de los elementos actuales.

El título del elemento será por defecto el título de la Página, pero para cambiarlo, simplemente debes hacer click en la Etiqueta de navegación y poner el nombre deseado.

Una vez hechos los cambios necesarios, haz click en el botón Guardar Menú y podrás ver los cambios en tu web.

De igual forma, debes saber que los pasos para agregar una Entrada, Categoría o Etiqueta como elemento de menú son igualmente los mismos que para agregar una Página.

Si deseas cambiar el orden en el que se muestran los elementos del menú, simplemente debes poner el ratón en el área del título que deseas mover y cuando veas la cruz arrastrarlo a la ubicación elegida.

De igual forma, podrás crear múltiples niveles de jerarquía para por ejemplo crear menús desplegables.

Una vez cambiados los elementos del menú, no debes olvidarte de hacer click en el botón Guardar menú para que ver los cambios en tu sitio web.

Añade un enlace personalizado al menú

Puedes utilizar el panel Enlaces para añadir al menú cualquier enlace que desees, como puede ser un enlace a un sitio web externo o a una sección de tu propia web.

Solo debes introducir la dirección del sitio al que quieres enlazar en el campo URL y el nombre del elemento en el campo Enlace de texto. Haz click en el botón Añadir al menú y estará listo.

Puedes usar los mismos pasos descritos anteriormente para ajustar el orden de los elementos del menú a tu antojo. Una vez hecho, haz click en el botón Guardar menú para guardar los ajustes.

Elimina un elemento del menú

Esto es fácil, pero aún así lo explicaremos. Para eliminar un elemento del menú haz click en el para ver su panel de opciones y luego pincha en Eliminar.

Después de hacer los cambios convenientes, haz clic en el botón Guardar menú y podrás ver los cambios en tu web.

Gestiona las ubicaciones de los menús

Después de crear un menú, también puedes indicarle en la apariencia de WordPress donde colocarlo. Aquí es donde deberemos usar la pestaña Gestionar lugares de la página de Menús.

Una vez hagas click en la pestaña Gestionar lugares de la página de Menús, se te mostrará una página similar a la imagen inferior, donde verás la lista de las distintas ubicaciones del menú del tema que estés usando en tu web.

Puedes tener una única ubicación del menú o puedes tener varias, siempre dependiendo del Tema que esté activo en WordPress.

Asigna un menú existente que ya haya sido creado a la ubicación que desees, eligiéndolo de la lista desplegable que se muestra. Finalmente, haz clic en el botón Guardar cambios para guardar los ajustes realizados.

Cambia el aspecto de la cabecera de la apariencia de WordPress

La opción del menú Cabecera solo se mostrará activa si el tema actual que tengas instalado hace uso de ella en su diseño. La Cabecera te permite elegir una imagen para que se muestre en el encabezado de WordPress. Habitualmente se utiliza para poner el logo o alguna imagen corporativa.

Un vez hagas click en la opción Cabecera se te presenta la función Imagen de Cabecera. Puedes seleccionar una de las imágenes que ya tengas en tu biblioteca de medios o puedes subir una imagen nueva pinchando en el botón Añadir nueva imagen.

Después guarda los cambios haciendo click en el botón Guardar y publicar.

 

 

Cambia el fondo de la apariencia en WordPress

La opción del menú Fondo es también dependerá del tema que tengas en uso en tu WordPress. Normalmente, la mayoría de temas traen tanto la opción de modificar el fondo y la cabecera. La opción Fondo, te permite elegir una imagen de fondo personalizada para su página web.

Haciendo click en la opción del menú Fondo se mostrará la opción Imagen de fondo en el Personalizador. Una vez más podrás seleccionar una imagen que ya tengas alojada en WordPress o subir una de tu ordenador.

Para guardar los cambios que hayas realizado, haz click en el botón Guardar y publicar y ya podrás comprobar los cambios en tu página web.

 

 

Conoce el Editor de apariencia de WordPress

Llegamos al último apartado del menú de apariencia de WordPress, el menú Editor. Si hablamos de conocer, es porque este menú te permite editar los archivos CSS y PHP que componen el tema que tengas activado en tu web. Y esto es algo que, a menos que sepas trabajar con estos lenguajes, es conveniente que no toques si no estás seguro de lo que haces.

Si aún así te aventuras a hacer cambios, un buen consejo es hacer los cambios directamente en tu FTP o un tema hijo. Y , como es lógico recuerda hacer siempre una copia de seguridad. Debes ser muy cuidadoso al hacer cambios a archivos que puedan afectar al funcionamiento de tu web. Si los archivos se modifican de manera incorrecta, puede sufrir cambios indeseados en la apariencia del WordPress o mismo dejar de funcionar por algún tipo de error.

Conclusiones sobre la apariencia en WordPress

Bien, después de este completo tutorial sobre como cambiar la apariencia de WordPress, solo te queda probar y probar hasta dar con el diseño de tu web que más te guste.