es.hideout-lastation.com
Paraíso Para Los Diseñadores Y Desarrolladores


Cómo agregar avisos de vacaciones a su sitio de WordPress

Las festividades están sobre nosotros y ¿qué mejor manera de difundir la alegría que publicar un aviso con tema festivo en su sitio ? Es posible que se vaya pronto de vacaciones, es posible que desee saludar a sus visitantes con una tarjeta especial, o quizás desee mostrar un mensaje especial.

Hay muchos complementos de WordPress para Navidad que ya hemos analizado, pero ¿qué tal si lo hacemos por su cuenta? ¿Tienes un poco de tiempo para un proyecto corto de WordPress durante las vacaciones? Siga a lo largo para aprender a agregar algunos avisos de Navidad a su sitio web a través de widget de texto, barra adhesiva y un widget de contador.

Crear un widget de texto

Aquí no hay ciencia espacial, ¡lo siento! Puede agregar un mensaje rápido y mostrarlo en un área de widgets yendo a Apariencia> Widgets, arrastrando un widget de texto en una barra lateral e ingresando su mensaje en el cuadro. Puedes usar HTML allí, así puedes animar las cosas con una imagen si quieres.

Estoy de acuerdo, esto es un poco aburrido, pero podría ser la cantidad justa de festividad para agregar. Muchos sitios más serios, como sitios de comercio electrónico o carteras personales, se verán afectados negativamente por los bailes de los Santas, pero las personas todavía aprecian un poco de alegría de las fiestas.

Sticky Bar

¿Qué tal una barra antiadherente, similar al complemento Quick Notice, pero que codificamos nosotros mismos? También podemos hacer que se adhiera fácilmente a la parte superior de la página.

El primer paso es crear un complemento, déjame mostrarte cómo:

En su directorio de complementos, cree una nueva carpeta llamada "my-sticky-bar". Dentro de esa carpeta crea un archivo llamado "my-sticky-bar.php" y pega el siguiente contenido en él:

Una vez que guarde este archivo, podrá activar el complemento a través de la sección de complementos en el administrador de WordPress. ¡Todavía no hace nada, pero pronto arreglaremos eso!

Necesitamos hacer dos cosas: usar PHP y HTML para generar nuestro mensaje y usar CSS para darle un estilo .

En el archivo "my-sticky-bar.php" use el siguiente código para agregar el HTML necesario en el lugar correcto:

 add_action ('wp_footer', 'my_sticky_bar_display'); function my_sticky_bar_display () {echo " 
¡Feliz Navidad a todos!
";}

La primera línea es un gancho de WordPress, le dice a WordPress que ejecute la función "my_sticky_bar_display" justo antes del final del cuerpo. Está bien cargar el HTML para nuestra barra al final de la página. No es tan importante y puede reposicionarse a través de CSS.

En esta etapa, debería poder ver su mensaje en la parte inferior de su sitio, sin ningún formato. Para agregar formato, tendremos que adjuntar una hoja de estilo al ponerla en cola.

En el mismo archivo:

 add_action ('wp_enqueue_scripts', 'my_sticky_bar_styles'); function my_sticky_bar_styles () {wp_enqueue_style ('my-sticky-bar', plugin_dir_url (__FILE__). '/my-sticky-bar.css'); } 

Enqueueing es una forma de agregar scripts y estilos de forma modular a WordPress. Sin embargo, no es necesario que comprenda todo lo anterior: si pega esto en el archivo del complemento y crea el archivo "my-sticky-bar.css" puede comenzar a agregar sus estilos. Hagámoslo ahora.

 # my-sticky-bar {position: absolute; arriba: 0px; ancho: 100%; text-align: center; color: #fff; fondo: # 810400; relleno: 11px 0; text-transform: mayúscula; espacio entre letras: 2px; } 

Lo mejor de todo es que si reemplaza "absoluto" por "fijo", el mensaje se mantendrá en la parte superior de la ventana y seguirá a los usuarios cuando se desplacen.

¡Este método es genial porque tienes control total sobre todo! Por ejemplo, ¿qué tal si mantenemos este plugin activo todo el tiempo pero solo mostramos el mensaje el 25 de diciembre? No hay problema, simplemente modifique la función my_sticky_bar_display ligeramente.

 add_action ('wp_footer', 'my_sticky_bar_display'); function my_sticky_bar_display () {if (date ('d') == 25 && date ('m') == 12) {echo " 
¡Feliz Navidad a todos!
";}}
Contador Widget

Ya hemos agregado un texto simple en nuestro widget de texto, pero ¿qué tal crear una cuenta regresiva para nuestros usuarios?

El primer paso es dejar que WordPress sepa que queremos crear un widget personalizado. Necesitamos definir una función y engancharla a widgets_init . Cree un nuevo complemento, al igual que antes, y en el archivo principal, pegue lo siguiente:

 add_action ('widgets_init', 'christmas_countdown_widget'); function christmas_countdown_widget () {register_widget ('Christmas_Countdown_Widget'); } 

Tendremos que crear una clase llamada Christmas_Countdown_Widget con algunas funciones dentro de ella. Comencemos creando una función de constructor. Pegue todo lo que está debajo en el archivo de complemento principal también.

 class Christmas_Countdown_Widget extends WP_Widget {function __construct () {parent :: __ construct ('christmas_countdown_widget', 'Christmas Countdown Widget', array ('description' => 'Una simple cuenta regresiva de Navidad')); }} 

La función de constructor contiene información importante que se usa para construir el widget. Contiene la identificación del widget (christmas_countdown_widget), el nombre que aparecerá en la interfaz de usuario del back-end (Widget de cuenta atrás de Navidad) y la descripción que también se muestra.

Podemos agregar una función llamada form() que se puede usar para generar algunas configuraciones para el widget. No lo usaremos aquí, pero téngalo en cuenta para proyectos futuros. Solo agregaré una función vacía por ahora.

Usaremos la función widget() para enviar el widget al frente. Agreguemos una cuenta regresiva simple ahora. Pegue el siguiente código dentro de la clase, debajo de la función __construct() . Tenga en cuenta que también estoy agregando la función de form() vacía form() ahora.

 function function () {} function widget () {echo "Tiempo para Navidad:". human_time_diff (time (), mktime (0, 0, 0, 12, 25, date ('Y'))); } 

Usamos la función human_time_diff() que ofrece WordPress para calcular el tiempo entre hoy y el día de Navidad. Esto mostrará algo así como: "Tiempo para Navidad: 5 días".

Esto es bastante básico, pero puedes usar cualquier tipo de imágenes, texto, estilos y Javascript para que se vea increíble. El código final y completo para nuestro widget es el siguiente:

 add_action ('widgets_init', 'christmas_countdown_widget'); function christmas_countdown_widget () {register_widget ('Christmas_Countdown_Widget'); } class Christmas_Countdown_Widget extends WP_Widget {function __construct () {parent :: __ construct ('christmas_countdown_widget', 'Christmas Countdown Widget', array ('description' => 'Una simple cuenta regresiva de Navidad')); } function function () {} function widget () {echo "Tiempo para Navidad:". human_time_diff (time (), mktime (0, 0, 0, 12, 25, date ('Y'))); }} 
¡Felices vacaciones!

¡Espero haberle dado algunas ideas para agregar algo de alegría navideña a su sitio web! Si no celebras la Navidad, siempre puedes usar estos métodos y aplicarlos a tu propia cultura.

¿Comiendo y celebrando durante las vacaciones? ¡Asegúrese de leer nuestro artículo sobre Christmas WordPress Plugins para obtener toneladas de ideas geniales y acceso rápido a fantásticas vacaciones!

5 formas de monetizar tus diseños antiguos

5 formas de monetizar tus diseños antiguos

Después de un par de años como diseñador independiente, vas a construir una gran colección de trabajo que has hecho para los clientes, e idealmente, para ti también. Si tiene muchos diseños antiguos, parece un desperdicio dejarlos simplemente sentarse en su disco duro, sin hacer nada.Hay una gran posibilidad de que pueda ganar algo de dinero extra con estos diseños. Y no

(Consejos de tecnología y diseño)

Guía para el diseño de cuadrícula de CSS Unidad de Fr

Guía para el diseño de cuadrícula de CSS Unidad de Fr

El Módulo de diseño de cuadrícula CSS se envió con una nueva unidad de CSS llamada unidad fr . Tan sencillo como puede ser, fr es la abreviatura de la palabra "fracción" . La nueva unidad permite dividir rápidamente la cuadrícula en columnas o filas proporcionales. Como resultado, la creación de redes totalmente receptivas y flexibles se convierte casi en una brisa.Como la

(Consejos de tecnología y diseño)