Personalizador de plantillas

Información Adicional

No existe información adicional para este video tutorial.

Transcripción

Ahora que sabes cómo seleccionar el diseño o plantilla que deseas usar

Es tiempo de aprender cómo podemos personalizar nuestra plantilla

Wordpress tiene una función llamada personalizar

Y te permite realizar cambios en tu plantilla, y ver esos cambios en tiempo real, para que puedas observar cómo afectan tu diseño

Voy a mostrarte cómo usar el personalizador de plantillas, pero lo haremos usando la nueva plantilla twenty fourteen

Y en el video anterior cambiamos el diseño hacia twenty twelve así que vamos a ir en la barra de herramientas, hacia temas, y activaremos el diseño twenty fourteen

Ahora podemos ingresar al personalizador de la plantilla desde muchos lugares

Si nos encontramos en este panel donde vemos nuestras plantillas, podemos simplemente dar clic en el botón que dice personalizar

Si dos clic en la miniatura de la plantilla, también puedo en esta área de abajo encontrar el botón para personalizar la plantilla

Si nos encontramos en cualquier otro lado, por ejemplo supongamos que estamos en el inicio del panel de control

Puedo ir hacia apariencia y seleccionar personalizar

Y si nos encontramos en nuestro sitio web público, podemos colocar el mouse sobre la barra de herramientas y dar clic en personalizar

Mediante todas esas opciones podemos llegar a la ventana de personalización

Y como lo hemos indicado anteriormente

Desde el personalizador, podemos hacer cambios en nuestra plantilla y podremos verlos reflejados en tiempo real

Vale destacar que lo que vemos desde aquí es una pre visualización de los cambios, y que no se muestran en nuestro sitio web al público, únicamente nosotros podemos ver los cambios desde aquí hasta que los guardemos y se publiquen

En el panel de la izquierda tenemos todas las opciones que podemos personalizar

Y podemos colapsar esta ventana si lo deseamos

Y luego tenemos la pre visualización del sitio a nuestro lado derecho

Iniciando con la primera opción

Tenemos la información del diseño, bajo el nombre de la plantilla

Luego tenemos el título del sitio y la descripción

Y desde aquí podemos cambiar el titulo o la descripción del sitio, y ver cómo queda el nuevo título o descripción en tiempo real dentro del sitio

Como puedes actualmente tenemos el título que le habíamos colocado al inicio

Pero podemos cambiarlo, colocando un nuevo título por ejemplo

Puedes observar como el titulo cambia en nuestra vista previa en tiempo real

Y también podemos cambiar la descripción corta

En algunas plantillas tenemos esta opción bajo la descripción corta

Esto nos permite ocultar o mostrar estos dos parámetros

Y si quitamos la selección, ni el titulo ni la descripción se mostrarán en el sitio

Esta es una función útil, cuando decidimos colocar una imagen de cabecera, en lugar del texto

De modo que si añadimos el logo o una imagen con el nombre del sitio y  quizá también una descripción

Desearemos que este título y descripción no aparezcan, ya que simplemente se repetirían con lo que ya tenemos en la imagen de encabezado

En nuestro caso no tenemos una imagen en la cabecera así que vamos a dejarlos activados

Bajo la opción del título y descripción, tenemos la configuración de los colores

Dependiendo de la plantilla que te encuentres usando, tendrás diferentes opciones aquí para cambiar el color del diseño

En esta plantilla en particular, podemos cambiar el color del titulo

Podemos dar clic en elegir un color, y jugar con la paleta de colores para seleccionar el que más nos agrada

Y puedes ver como el título va cambiando de color, para que podamos ver si nos agrada el cambio que hacemos o no

Y si no, nos agrada el color que hemos seleccionado, podemos regresar al color original dando clic en predeterminado

También podemos cambiar el color del fondo

Así que vamos a cambiarlo, por ejemplo hacia azul

Pero no podemos verlo ya que la pantalla es un poco pequeña, así que vamos a contraer este panel

Y podremos notar en este lado el color de fondo

Si  disminuimos el zoom un poco, podremos ver mejor el color de fondo

Las opciones del color, y todas las demás opciones que tengamos para personalizar nuestra diseño

Depende de la plantilla que estamos usando

Algunas tienen muchas opciones, y otras tienen muy pocas opciones

Así que debes entrar al personalizador de la plantilla que deseas usar

Y ver las opciones disponibles que tiene ese diseño

Bajo las opciones del color tenemos la imagen de fondo

Desde aquí puedes subir una imagen para el fondo, y esta imagen de fondo, se mostrará en donde aparece el color de fondo

Tenemos luego la opción de portada estática

Que nos permite colocar una página estática en nuestra página de inicio, y pasar el blog a otro elemento del menú

Y ya hemos visto esto en un video anterior así que podemos saltarnos esta opción

Y finalmente tenemos la opción de contenido destacado

Esta opción, es una opción especial, que es propia de la plantilla twenty fourteen

Lo que eso significa es que no podemos esperar que esta función se encuentre en otras plantillas, aunque claro dentro de otras plantillas podemos encontrar funciones similares o incluso mejores

Lo que hace esta opción es destacar nuestro contenido en la parte superior del sitio web, pero solo destaca aquellos artículos que tengan la etiqueta indicada en esta área

Que predeterminadamente es featured

Vamos a ver cómo funciona esta opción, vamos a cambiar esta etiqueta y le colocaremos destacado

Ahora vamos a guardar los cambios y cerramos para regresaremos a nuestro panel de control

Desde aquí vamos a ir a nuestros artículos en: entradas y luego damos clic en todas las entradas

Hemos creado previamente aquí 3 artículos, y los hemos llamado demo1 destacado, demo2 destacado y demo3 destacado

Lo que haremos es usar el botón de edición rápido en cada uno de estos 3 artículos que simularán nuestros artículos destacados

Iniciemos con demo1, damos clic en edición rápida, y bajo la opción de etiquetas, colocaremos la etiqueta que indicamos en el personalizador de nuestra plantilla

Solo necesitamos añadirla, de modo que si tenemos etiquetas previas no será necesario removerlas

Vamos a colocar una coma después de la última etiqueta y añadimos la palabra destacado, que es la etiqueta que configuramos

Luego debemos guardar los cambios, y la etiqueta se añade a nuestro artículo

Y ahora vamos a hacer los mismos con los otros dos artículos

Damos clic en edición rápida dentro de demo2, añadimos la etiqueta y guardamos

Y finalmente hacemos los mismos con demo 3, editamos con edición rápida, añadimos la etiqueta y damos clic en guardar

Y ahora vamos a ver nuestro sitio web

Y como podemos observar dentro del sitio, ahora tenemos estos tres artículos destacados en nuestra área de cabecera en la plantilla

Esta es una gran función que nos permite darle notoriedad a los artículos que nosotros deseemos, y nos entrega el control sobre cuales artículos se verán en esta área ya que solo salen los que tienen la etiqueta destacado

Hay algo importante sobre esta función, y es que si notas, este artículo no tiene una imagen, aparece vacía el área de la imagen a diferencia de los otros dos

Vamos a regresar a nuestro panel de control

Y daremos clic en la edición de ese artículo para qué es lo que está mal

El problema es que los artículos destacados, necesitan tener una imagen destacada para poder ser visualizada en el área donde se encuentran

Y como puedes observar si bajamos hasta la opción de imagen destacada de este articulo

El artículo no tiene una imagen destacada aún

Así que vamos a darle una

Damos clic para seleccionar la imagen, y en esta ocasión ya la he subido previamente, así que únicamente voy a seleccionarla

Y ahora guardo los cambios

Y vamos a ir a nuestro sitio web para ver ahora como ha quedado

Como puedes observar, ahora se muestra la imagen de este artículo también

Vamos a regresar al personalizador para ver un poco más sobre esta función

Vamos a nuestra barra de herramientas, y ahora hacia personalizar

Vamos a ir directamente a la opción de contenido destacado

Y podremos ver que tenemos un selector que dice rejilla que es la opción actualmente seleccionada y tenemos otra opción que es carrusel

Si damos clic en carrusel entonces la forma en la que se muestra nuestro contenido destacado cambia, del diseño rejilla hacia carrusel

Tanto la rejilla como el carrusel, pueden mostrar hasta 6 elementos destacados

De modo que si tenemos varios, se mostrarán los más recientes

En la parte de abajo tenemos la opción que dice: Ocultar etiquetas de las entradas meta y las nubes de etiquetas.

Esta opción nos permite desvincular la etiqueta de los artículos entre si

Es decir que por ejemplo, en este caso la etiqueta que hemos configurado es destacado

Pero posiblemente los artículos que estamos vinculando no tengan nada que ver entre si

Podemos por ejemplo estar destacando varios artículos de diferentes categorías o temas en nuestro sitio

Entonces si lo dejamos sin marcar, el usuario podría ver que este tema de autos por decir algo, y el tema de pastelería se encuentran relacionados, y si hemos añadido plugins como yet another related post

Que añade artículos relacionados para que el visitante los vea, entonces esto podría ser un inconveniente

Ya que mostraría contenido que en realidad no es de la misma temática

Para evitar eso, vamos a seleccionar esta opción

De modo que no relacione los artículos aunque tengan la misma etiqueta

Y una vez hemos terminado la personalización de nuestro diseño

Podemos guardar para publicar los cambios, o si no deseamos guardarlos podemos dar clic en cerrar

Y todos los cambios serán cancelados

Lo bueno del personalizador, es que mientras trabajamos en él, nada pasa en nuestro sitio web

De modo que mientras hacemos cambios en el personalizador, las personas que visitan nuestro sitio, nunca podrán ver los cambios hasta que los publiquemos, y tampoco ven el sitio web cambiando su diseño mientras lo haces

Lo único que verán es el cambio de cómo estaba tu sitio web y los cambios que apliques y guardes en el personalizador

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

¿Quieres aprender a crear sitios web?

Regístrate gratis como estudiante y aprende a crear sitios web sorprendentes. Gana certificados y medallas al completar los cursos gratuitos.
¡REGÍSTRATE GRATIS!
close-link
Crea tu sitio web con diseño profesional en menos de 15 minutos
Ver Tutorial
close-image