Cómo agregar un calendario receptivo a su sitio web de WordPress

Muchos sitios web se benefician de tener un calendario. Si anuncia eventos, coordina las actividades de un equipo o proporciona información de la comunidad, incorpora un calendario a su sitio. Ayudará a los usuarios a obtener rápida y fácilmente la información que necesitan. Si todo lo que necesita es mostrar los datos y las horas y almacenar todo esto en un calendario de Google, entonces incorporar ese calendario de Google en una de las páginas de su sitio es la forma más fácil de hacerlo. En esta publicación de WordPress de fin de semana, le mostraré exactamente cómo incorporar un calendario de Google. Además, aprenderá cómo hacer su calendario receptivo, por lo que no importa el dispositivo que los usuarios visiten el sitio, su calendario no se rompe la mirada.
Asumiré que ya tiene un calendario de Google que puede usar, pero si no lo hace, puede usar un calendario público, lo que haré aquí. Comenzaré mostrándole cómo acceder a ese calendario público: si tiene su propio calendario, puede omitir este paso. Entonces trabajaremos en tres pasos:
Acceder y suscribirse al calendario público (salta sobre él si trabaja con tu propio calendario)
Agregar el código de incorporación del calendario a nuestro sitio
Agregar CSS simple para hacer el calendario receptivo.
Luego le mostraré cómo puede llevar esto más al agregar más calendarios.
¡Vamos a empezar! Paso 1: Acceder y suscribir a un calendario público El primer paso es poner su mano en ese calendario público. Google ofrece una lista de calendarios públicos y puede acceder a ellos desde la interfaz de Google Calendar. Comience abriendo el calendario de Google en el navegador y conectando. Esto le dará la interfaz del calendario: para acceder a un calendario público, haga clic en la flecha a la izquierda de la lista otros calendarios en la parte inferior:

Haga clic en Browing Calendarios interesantes para ver una lista de calendario disponible públicamente:

Explore los calendarios y seleccione el que desea usar: selecciono vacaciones en el Reino Unido. Si desea obtener una vista previa del calendario primero, haga clic en el enlace de vista previa para abrirlo. Para agregar el calendario público a su propio calendario, para que pueda incorporarlo, haga clic en el enlace de suscripción.

Haga clic en el enlace de regreso al calendario en la parte superior de la pantalla para volver a la pantalla del calendario normal. Ahora verá su propio calendario con el calendario público adicional:
Ahora pase al siguiente paso para incorporar el calendario en su sitio Paso 2: grabar el calendario en su sitio El siguiente paso (o el primer paso si trabaja con su propio calendario) es incorporar el calendario a su sitio si ya Tenga una página en su sitio donde desee incluir el calendario, ábralo en el administrador de WordPress. O si no crea una página nueva y no comienza a editarla. Asegúrese de tener una pestaña de texto abierto, no la pestaña visual.

Ahora vuelve a su calendario en su navegador. Haga clic en la flecha a la derecha del nombre del calendario y luego haga clic en Calendario de configuración. Nota: Si trabaja con su propio calendario, asegúrese de que el calendario sea público. Puede editar esto a través de la pantalla Configuración. Esto abre la pantalla de configuración, incluida una sección incorporar este calendario: a la derecha, verá el código que necesita copiar en su sitio. Puede copiar esto tal como está o hacer clic en el enlace de arriba para personalizar el color y otras opciones . Copie ese código y vuelva a su página ahora inserte el mismo código en su página, asegurándose de que esté en la pestaña de texto. El mío se ve así:
Ahora guarde la página haciendo clic en Publicar o actualizarla y verla. Lo que ve ahora dependerá de su tema. Si usa un tema receptivo, el calendario debe cambiar el tamaño al cambiar el tamaño de la ventana del navegador. Pero si su tema no es completamente receptivo, deberá agregar una línea CSS.

Viajé en el tiempo para ver qué había mostrado mi página hace cinco años y activé el tema veinte años, que no es receptivo. Así es como se ve mi calendario:

Debido a que el ancho del calendario es mayor que el ancho de su elemento continuo, ocupa más ancho que la zona de contenido principal y se superpone en la barra lateral. Si cambio de tamaño mi ventana para reducirla, el aspecto se rompe por completo.

La buena noticia es que esto es fácil de resolver con una sola línea CSS. Agregar CSS para hacer el calendario receptivo Si su calendario no se redimensiona cuando cambia el tamaño de la ventana del navegador, deberá agregar una sola línea CSS a la hoja de estilo. Si trabaja con una tercera parte (es decir, una que no ha creado), primero debe crear un tema secundario para CSS. Si no hace esto, su trabajo se perderá la próxima vez que actualice el tema. Entonces, si tiene que crear un tema para niños, continuar y hacer esto, utilizando las instrucciones en nuestra guía para niños. Este es el único archivo que necesita el tema:

La idea de Rachelmccolin/C5FE97CFC608529B14BC está cargada
Después de haber hecho esto, active el tema del niño. Ahora abra la hoja de estilo (style.css) en su tema (o tema infantil) y agregue esta línea:
La idea de Rachelmccolin/01BF747A33C7C284A27A está cargada
Actualice su página en su navegador y descubrirá que el calendario se redimensiona para que se ajuste en el elemento que la contiene, y cuando cambia el tamaño de la ventana, el calendario se redimensiona con él:
Ir más: más calendarios si desea llevar las cosas, puede agregar más calendarios del calendario de Google y mostrarlos todos en la misma vista del calendario.
Para hacer esto, primero, debe suscribirse o crear todos los calendarios en el calendario de Google. A continuación, puede ver que me he suscrito a tres calendarios públicos en total, para las vacaciones legales en el Reino Unido, EE. UU. Y Australia:
Ahora incorporemos esos calendarios. Primero, haga clic en la flecha a la derecha de uno de los calendarios que desea incorporar. Cuando aparezca la pantalla de configuración, no copie el código: en su lugar, haga clic en el enlace para editar el color, el tamaño y otras opciones. Esto abrirá una nueva pantalla cuando pueda editar la configuración de incorporación. En el lado izquierdo, verá todos sus calendarios. Simplemente verifique la casilla de verificación junto a cada calendario que desee incluir en el código de incorporación. Puede ver a continuación que revisé los tres calendarios públicos: si lo desea, puede editar los colores para cada calendario en esa pantalla, haciendo clic en el cuadro colorido a la derecha de cada calendario y eligiendo un color. Es una buena idea usar un color diferente para cada calendario para que los usuarios puedan ver qué es. Otra cosa importante que debe hacer es agregar un título para su calendario en el campo Calendario de aliento superior izquierdo. Si no hace esto, el nombre del primer calendario listado será implícitamente, lo que podría confundirse. Copie el código que aparece en el cuadro sobre el calendario e insértelo en su sitio.

Ahora guardé mi página con ambos calendarios, uno con un solo calendario y otro con varios calendarios:
Debido a que el CSS que he agregado ya se aplica a todos los elementos de iframe, también se aplica a este calendario, por lo que también es receptivo.La incorporación de un calendario de Google en su sitio es algo que puede hacer fácilmente en aproximadamente media hora.Ya sea que trabaje con su propio calendario o un público que Google ha proporcionado, debe tomar el código de incorporación, agregarlo en su página y luego agregar algunos CSS simples para que sea receptivo si aún no es parte de su tema .Etiquetas: calendario

Google