Cada vegada que arribi a aquest lloc web d'un motor de cerca o un lloc web de bookmarking social o popular, una salutació li donarà la benvinguda i, possiblement, suggereixen alguns articles d'altres basat en les seves paraules clau de cerca. Aquesta és la cortesia de l'endoll Greet WP Box-in per a WordPress, desenvolupat per Thaya Kareeson.
La interfície d'administració d'aquest plug-in és molt intuïtiu i es donen a l'administrador una sèrie d'opcions de quan i amb quina freqüència ha de mostrar el missatge de. Per exemple, pot establir-lo treure una salutació als que arriben de Google i per un import màxim de temps només.
Si està habilitat, un visitant lloc web també és capaç de tancar el quadre de salutació de forma manual i per tant la capacitat d'anular l'import màxim de temps establert en l'administració.
Lamentablement, la salutació es mantindrà en la seva ubicació pel temps que la pàgina és visible o fins que l'usuari tanca de forma manual. Per evitar que els visitants haver de tancar manualment les coses que no volen veure, He implementat un acte oculta la característica.
Què fa?
Aquesta característica addicional funciona a la perfecció amb el plug-in. Una vegada que la salutació s'ha demostrat que, que va a esperar uns segons abans que comenci a desaparèixer. Si el visitant no prendre cap mesura, la salutació eventualment desapareixerà per complet i l'espai que utilitzen serà reclamat per lliscament la resta de la pàgina web en el seu lloc. Si abans o durant l'esvaïment del visitant mou el ratolí sobre l'àrea, la decoloració es va tornar a la normalitat i l'usuari pot fer clic en qualsevol dels enllaços la salutació podria estar mostrant.
No és a diferència d'alguns dels globus de missatge que ens hem acostumat a la de Windows Vista o Ubuntu — Si vostè no està interessat, Va el globus missatge desapareixerà sense la seva interacció.
Com posar-la en pràctica
Es tracta d'uns pocs i no petits canvis en el teu lloc web de. Per començar, Saluda el plug-in WP Caixa s'ha d'establir en NO automàticament una salutació (Desactiveu tant “Mostrarà automàticament el missatge de salutació en els llocs / Pàgines”).
Porció de PHP
Ara cal editar el fitxer de la plantilla de WordPress tema(Amb) on voleu mostrar la salutació. Per exemple, amb aquest lloc web, Estic usant el tema de header.php arxiu. Consisteix en introduir una mica de codi en PHP com els següents:
A la seva discreció, vostè pot o no vol posar-la dins d'aquests <div></ Div> declaracions i que dependrà d'on es localitzi el codi, així com la seva plantilla.
CSS Porció
Vostè pot continuar utilitzant el full d'estils CSS s'inclou amb el plug-in (o la seva pròpia si han implementat una). No obstant això, hi ha una entrada que haurà d'incloure específics per a Microsoft Internet Explorer:
#greet_block {
*background:#fff;
}
No tot ha de ser de color (pel que pot coincidir amb la resta del teu tema), però la importància és que s'inclou un color de fons. Si això no existeix, Internet Explorer li farà algunes coses estranyes per al salutació, tot i que s'està esvaint. És un problema conegut.
Podeu posar això en el teu full d'estil propi ús o l'ús d'estils del tema, en general, el nom style.css.
Part de JavaScript
La majoria del treball es realitza per JavaScript i requereix que jQuery està carregat amb el seu tema. Molts dels temes populars ja inclouen aquest, però si la seva no, només ha d'afegir la següent línia (abans de la wp_head(); declaració):
<?php wp_enqueue_script('jquery'); ?>
A continuació, podeu crear un nou fitxer de Javascript o utilitzar una ja existent que serà carregada amb el seu tema, i incloure el següent codi:
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);
}
);
});
Aquest codi no ha estat altament optimitzada de manera que serà més fàcil per que vostè entengui el que està succeint i fer les modificacions si així ho desitja. Si se sent incòmode amb el llenguatge Java en general,, a continuació, la part immediatament després de laGreetbox Autohide comentari serà d'interès per a vostè. Específicament:
var _greeting_box_vars = {
init_timeout: 15000,
timeout: 3000,
block: '#greet_block',
_timer: 0
};
l' init_timeout l'paràmetre especifica el temps que la salutació serà visible abans que comenci la decoloració i el visitant no ha mogut el ratolí a sobre. En l'exemple anterior, Aquesta és la 15 segon (15000 milisegons). l' temps d'espera el valor que segueix podeu especificar el temps que la salutació romandrà visible després que el ratolí ha estat més que. En l'exemple anterior es tracta d' 3 segon.
l' bloc variable especificada i l'identificador de la <div></ Div> secció que conté la salutació real. Per defecte, Saluda a la Caixa WP utilitza la denominació prevista (greet_block #) però això pot ser diferent si ha realitzat cap modificació en la configuració predeterminada.
l' _time no ha de ser canviat i la utilitza internament per a no perdre de vista el temporitzador de temps d'espera.
Una funció en el guió, jQuery.fn.fadeThenSlide, simplement s'esvaeix la salutació i si ja no l'enviarem llisqui cap a fora de la forma. Tot el que segueix a continuació la salutació serà traslladat gradualment en el seu lloc pel que no es quedin amb una àrea en blanc gran.
Si va a implementar aquesta seqüència en un arxiu separat, Assegureu-vos que l'script es diu amb el tema de la plantilla de. Per exemple, afegir a la header.php arxiu:
Després de tot això ha estat implementat, podeu activar la salutació predeterminat si s'ha desactivat abans de. A continuació, visiteu el seu lloc web per comprovar si tot funciona com s'espera i en la ubicació correcta. Si trobeu qualsevol problema, no dubteu a enviar un comentari o Contact Me directament.
Llocs relacionats:
