4 fragmentos de código divertido para agregar alegría navideña a su sitio web de WordPress

Con Navidad cerca, hemos codificado algunos fragmentos divertidos de vacaciones para preparar su sitio web para las vacaciones. A continuación encontrará fragmentos para un Santa CSS CSS completo, que cae, agregando una escena festiva a su sitio y un sutil fondo de árbol de Navidad. Si prefiere usar un complemento, consulte nuestro deseo de verificar más de 10 complementos gratuitos de WordPress para agregar alegría navideña a su sitio. ¡Disfruta y felices fiestas! Nociones básicas para esta publicación, agregaré todo mi código a un tema infantil, que es la mejor práctica de WordPress al hacer cambios en los archivos de temas. Si no está seguro de cómo hacer esto o necesita un recordatorio, nuestra publicación cómo crear un tema de niños de WordPress contiene todo lo que necesita saber.
Todos los ejemplos en estas publicaciones se probaron en el tema de veinte y dieciséis, el nuevo tema predeterminado para 2016. Para comenzar con un tema infantil, cree un nuevo archivo en los “temas” de su sitio y llámelo “edición dos y dieciséis- Navidad “. Cree un archivo llamado “style.css” y “functions.php” allí y agregue el siguiente código a cada uno de estos archivos, respectivamente:
Se cargan los elementos esenciales de CC55F4CDFB1FD50B0CF41C9349D4063
Cargue el BAE68AAC30843E23D88C7F31F9E8CA29 esencial
Ahora debería poder activar el tema del niño y trabajar en los ejemplos a continuación. 1. CSS Completa Santa Claus Para mi primer truco, confiaré mucho en CSS Santa Codepen de Ali Khalilifar, que crea un Santa Claus usando CSS.
Quiero agregar automáticamente este icono a cualquier publicación que se publique el 24 o 25 de diciembre. Ali ha realizado la mayor parte del trabajo por nosotros, por lo que todo lo que tiene que hacer es copiar y pegar. Aquí hay un ejemplo de cómo se verá el icono en el front-end de mi sitio: nuestro icono Santa en la publicación

Tendremos que atacar este problema en un tema infantil, porque no hay un buen gancho para usar en la sección lateral de las listas de publicación. Después de algunas exploraciones, descubrí que la función responsable de eliminar a un lado se llama TwentySexteen_entry_Meta () y se puede encontrar en el archivo Inc/Template-Tags.php. La función se incluye en la verificación function-exist () func-exist (), lo que significa que podemos anularla en nuestro hijo. Comencé copiando y atrapé todo en las funciones de las funciones.php del tema de mi hijo. Luego agregué el siguiente código al final:
La idea se carga 267679E6C3F493FC5122C797396B26ED
Esto asegura que la función ch2015_santa_icon () solo se llama si la luna es diciembre y el día es 24 o 25. También excluí a Santa en la página de búsqueda, porque la meta sección es diferente allí. Si lo desea, puede incluir una versión más pequeña allí. La función de Ch2015_Santa_icon () simplemente elimina la estructura HTML para CodePen, de la siguiente manera:
Cargue la idea 131480073674BEF7F405F8229302E799
La última pieza del rompecabezas es agregar el CSS necesario para dar vida a la estructura HTML y hacerlo Santa. Copie e inserte todos los bloques de reglas, excepto los dos primeros, en el archivo CSS de su hijo:
Cargue la idea 1FC68B819B7223D5FAA9AFF5BE4BF1D3
Hemos cambiado el conjunto de reglas inicialmente (aplicados para .senta) para obtener el posicionamiento correcto. Esto significaba eliminar los bordes y garantizar que el ícono estuviera alineado a la izquierda. 2. La nieve que cae el diseño con bordes gruesos de veinte y dieciséis nos da la oportunidad de agregar algunos efectos de nieve sin abrumar la pantalla, lo que significa nieve dentro del borde. Debido a que el borde es en realidad el fondo del cuerpo que se puede ver, nuestro trabajo será bastante fácil. Haremos tres fondos de diferentes tamaños y los animaremos. Esto dará un efecto similar al paralaje: la imagen más grande parecerá moverse más rápido debido a su tamaño. Las tres dimensiones serán 500 × 500, 400 × 400 y 300 × 300. La opción de 500 píxeles de ancho tendrá que viajar 500 píxeles al mismo tiempo que los 300 píxeles deben ir 300 píxeles, de ahí la diferencia de velocidad. ¡Incluso puede hacer las imágenes de copo de nieve solo! Cree una imagen de 500 × 500 y agregue algunos copos de nieve. Usé círculos blancos simples sobre un fondo negro. Utilicé el filtro de compensación de Photoshop para asegurarme de que la imagen se pueda cubrir. Esto es necesario para garantizar que la animación funcione sin problemas. Este filtro está en Photoshop debajo de los filtros> otros y debe configurarlo en la mitad del tamaño de su imagen. Repita el proceso para crear una versión de 400 y 300 píxeles. Siéntase libre de jugar con la opacidad y el desvanecimiento en el camino.
Si quieres usar el mío, puedes tomar nieve-1.png, nieve-2.png y nieve-3.png aquí. Es posible que desee hacer clic en el enlace y seleccionar “Guardar como”, porque será mucho más fácil de guardar. Ahora debemos agregar las imágenes como fondo al elemento del cuerpo y agregar las animaciones de CSS:. La idea 56C0E0268B0F97A94E00A4646A9960BA

En el elemento del cuerpo nos referimos a nuestras animaciones de “nieve”, diciéndole al navegador que anime linealmente, durando 20 segundos, en el bucle infinito. Los marcos clave hacen que las imágenes se muevan de las posiciones de los píxeles especificados y, debido a que todos son transparentes, parecerá que los copos de nieve se están moviendo.
Nuestra animación de nieve alrededor de la frontera 3. Una escena navideña continúa agregando una escena navideña y una tarjeta de felicitación en el sótano del sitio. Usaré la animación navideña 2014 de Texx Smith como base para este fragmento, pero esta vez cambiaremos un poco el código. Comencemos por copiar Footer.php del tema principal en el tema.php de su sitio. Después de haber terminado de abrir el archivo del archivo en el tema del niño y encontrar el final del sitio. Debería verse así: Inmediatamente después, pegue la siguiente estructura HTML:
La idea F35F0EF1D09691B47B79AE73C184F280 está cargada.
Eliminé el carácter de elfo y los elementos de las nevadas en el código de Texx y renombré dos clases, de lo contrario es casi lo mismo.

El siguiente paso es agregar el CSS necesario para que la escena cobre vida:
La idea 91B9D9E4DB3173FCECE87CF47D0A7 está cargada.
Estas son cosas bastante estándar, retengan animaciones para la luz de la ventana al final, seguido del estilo del texto en la parte inferior. Después de que haya terminado, debe obtener una bonita escena navideña en su sótano.
4. El fondo sutil para el árbol de Navidad es simple, una imagen de fondo sutil. Encontré un pequeño modelo excelente en los patrones sutiles. Descárguelo ahora y agregue el archivo PNG a la carpeta “Imágenes” del niño.
A pesar de su sutileza, todavía es un poco fuerte devolver el texto, por lo que reduciremos la opacidad. Por esta razón, no podemos simplemente agregarlo al elemento #Page de su sitio (el contenedor blanco grande). Lo adjuntaremos al pseudo-selector: antes y lo haremos estirarse hasta el final. Aquí están el CSS que hará que esto suceda:
La idea de A74E9455390DEE3D1AAA8E3B7C7C7C3 está cargada.

Juega con el valor de la opacidad para obtener el poder del modelo correcto.
Antecedentes de árboles sutiles y aquí, cuatro excelentes fragmentos de código festivo para preparar su sitio para la temporada de vacaciones.
Si agrega alguno de los fragmentos anteriores a su sitio, deje un enlace en los comentarios a continuación. ¡Me encantaría ver cómo los usas en tu sitio! Etiquetas:
Navidad