Cada vez que llegue a este sitio web de un motor de búsqueda o un sitio web de bookmarking social o popular, un saludo le dará la bienvenida y, posiblemente, sugieren algunos artículos de otros basado en sus palabras clave de búsqueda. Esta es la cortesía del enchufe Greet WP Box-in para WordPress, desarrollado por Thaya Kareeson.
La interfaz de administración de este plug-in es muy intuitivo y se dan al administrador una serie de opciones de cuándo y con qué frecuencia debe mostrar el mensaje de. Por ejemplo, puede establecer que muestre un saludo a los que llegan de Google y por un importe máximo de tiempo sólo.
Si está habilitado, un visitante sitio web también es capaz de cerrar el cuadro de saludo de forma manual y por lo tanto la capacidad de anular el importe máximo de tiempo establecido en la administración.
Lamentablemente, el saludo se mantendrá en su ubicación por el tiempo que la página es visible o hasta que el usuario cierra de forma manual. Para evitar que los visitantes tener que cerrar manualmente las cosas que no quieren ver, He implementado un auto oculta la característica.
¿Qué hace?
Esta característica adicional funciona a la perfección con el plug-in. Una vez que el saludo se ha demostrado que, que va a esperar unos segundos antes de que comience a desaparecer. Si el visitante no tomar ninguna medida, el saludo eventualmente desaparecerá por completo y el espacio que utilizan será reclamado por deslizamiento el resto de la página web en su lugar. Si antes o durante el desvanecimiento del visitante mueve el ratón sobre el área, la decoloración se volvió a la normalidad y el usuario puede hacer clic en cualquiera de los enlaces el saludo podría estar mostrando.
No es a diferencia de algunos de los globos de mensaje que nos hemos acostumbrado a la de Windows Vista o Ubuntu — Si usted no está interesado, Va el globo mensaje desaparecerá sin su interacción.
¿Cómo ponerla en práctica
Se trata de unos pocos y no pequeños cambios en tu sitio web de. Para empezar, Saluda el plug-in WP Caja se debe establecer en NO automáticamente un saludo (Desactive tanto “Mostrará automáticamente el mensaje de saludo en los puestos / Páginas”).
Porción de PHP
Ahora necesita editar el archivo de la plantilla de WordPress tema(con) donde desea mostrar el saludo. Por ejemplo, con este sitio web, Estoy usando el tema de header.php archivo. Consiste en introducir un poco de código en PHP como los siguientes:
A su discreción, usted puede o no quiere ponerla dentro de estos <div></ Div> declaraciones y que dependerá de dónde se localice el código, así como su plantilla.
CSS Porción
Usted puede continuar utilizando la hoja de estilos CSS se incluye con el plug-in (o su propia si han implementado una). Sin embargo, hay una entrada que tendrá que incluir específicos para Microsoft Internet Explorer:
#greet_block {
*background:#fff;
}
No todo tiene que ser de color (por lo que puede coincidir con el resto de tu tema), pero la importancia es que se incluye un color de fondo. Si esto no existe, Internet Explorer le hará algunas cosas extrañas para el saludo, si bien se está desvaneciendo. Es un problema conocido.
Puede colocar esto en tu hoja de estilo propio uso o el uso de estilos del tema, en general, el nombre style.css.
Parte de JavaScript
La mayoría del trabajo se realiza por JavaScript y requiere que jQuery está cargado con su tema. Muchos de los temas populares ya incluyen este, pero si la suya no, sólo tiene que añadir la siguiente línea (antes de la wp_head(); declaración):
<?php wp_enqueue_script('jquery'); ?>
A continuación, puede crear un nuevo archivo de Javascript o utilizar una ya existente que será cargada con su tema, e incluir el siguiente código:
jQuery(document).ready(function( $ ){
/* Greetbox Autohide */
var _greeting_box_vars = {
init_timeout: 15000,
timeout: 3000,
block: '#greet_block',
_timer: 0
};
jQuery.fn.fadeThenSlide = function() {
return this.fadeTo(4500, 0).slideUp(500);
};
if (!$(_greeting_box_vars.block).css("display") !== "none") {
_greeting_box_vars._timer = setTimeout("jQuery(function($){$('"+_greeting_box_vars.block+"').fadeThenSlide()});", _greeting_box_vars.init_timeout);
}
$(_greeting_box_vars.block).hover(
function () {
if ($(this).css("opacity") !== "0") {
// It's not sliding yet, so give the user a chance to extend his period.
clearTimeout(_greeting_box_vars._timer);
$(_greeting_box_vars.block).stop().stop().fadeTo(300,1);
}
},
function () {
_greeting_box_vars._timer = setTimeout("jQuery(function($){$('"+_greeting_box_vars.block+"').fadeThenSlide()});", _greeting_box_vars.timeout);
}
);
});
Este código no ha sido altamente optimizada de manera que será más fácil para que usted entienda lo que está sucediendo y hacer las modificaciones si así lo desea. Si se siente incómodo con el lenguaje Java en general,, a continuación, la parte inmediatamente después de laGreetbox Autohide comentario será de interés para usted. Específicamente:
var _greeting_box_vars = {
init_timeout: 15000,
timeout: 3000,
block: '#greet_block',
_timer: 0
};
El init_timeout la variable especifica el tiempo que el saludo será visible antes de que comience la decoloración y el visitante no ha movido su ratón sobre ella. En el ejemplo anterior, Esta es la 15 segundo (15000 milisegundos). El tiempo de espera el valor que sigue puede especificar el tiempo que el saludo permanecerá visible después de que el ratón ha sido más que. En el ejemplo anterior se trata de 3 segundo.
El bloque variable especificada y el ID de la <div></ Div> sección que contiene el saludo real. Por defecto, Saluda a la Caja WP utiliza la denominación prevista (greet_block #) pero esto puede ser diferente si ha realizado ninguna modificación en la configuración predeterminada.
El _time no debe ser cambiado y es usada internamente para no perder de vista el temporizador de tiempo de espera.
Una función en el guión, jQuery.fn.fadeThenSlide, simplemente se desvanece el saludo y si ya no es visible se deslice hacia fuera de la forma. Todo lo que sigue a continuación el saludo será trasladado gradualmente en su lugar por lo que no se queden con un área en blanco grande.
Si va a implementar esta secuencia de comandos en un archivo separado, Asegúrese de que el script se llama con el tema de la plantilla de. Por ejemplo, añadir a la header.php archivo:
Después de todo esto ha sido implementado, puede que desee habilitar el saludo predeterminado si se ha desactivado antes de. A continuación, visite su sitio web para comprobar si todo funciona como se espera y en la ubicación correcta. Si se encuentra con cualquier problema, no dude en enviar un comentario o Contact Me directamente.
Puestos relacionados:
