Ogni volta che si raggiunge questo sito da un motore di ricerca o un sito web popolare social bookmarking o, un saluto cordiale vi accoglierà e forse suggerisce pochi altri articoli, sulla base di parole chiave di ricerca. Questa è la cortesia WP Greet Box plug-in per Wordpress, sviluppato da Thaya Kareeson.
L'interfaccia di amministrazione di questo plug-in è abbastanza intuitivo e darà l'amministratore di una serie di opzioni di quando e quanto spesso per mostrare il messaggio. Per esempio, si può impostare per mostrare un saluto a chi arriva da Google e per un importo massimo di tempo solo.
Se abilitato, un visitatore sito web è anche in grado di chiudere la finestra di saluto manualmente e quindi in grado di ignorare la quantità di tempo massimo fissato in amministrazione.
Purtroppo il messaggio di saluto rimarrà nella sua posizione insieme per tutto il tempo che la pagina è visibile o fino a quando l'utente chiude manualmente. Per evitare i visitatori di dover chiudere manualmente le cose che non vogliono vedere, Ho implementato un auto nascondere funzionalità.
Cosa fa
Questa funzionalità aggiuntive funziona perfettamente con il plug-in. Una volta che il saluto è stato dimostrato, esso attendere qualche secondo prima che cominci a svanire. Se il visitatore non intraprendere alcuna azione, il saluto alla fine scomparirà del tutto e lo spazio usato sarà recuperato facendo scorrere il resto del sito al suo posto. Se prima o durante dissolvenza il visitatore si muove il mouse sopra la zona, ogni dissolvenza sarà restituita alla normalità e l'utente può fare clic su uno dei link potrebbe essere il messaggio di saluto mostrando.
Non è differenza di alcuni del messaggio di palloncini ci siamo abituati a da Windows Vista o Ubuntu — se non siete interessati, itll il pallone messaggio svanirà senza l'interazione.
Come per la sua attuazione
Si tratta di un paio piuttosto piccole modifiche al tuo sito web. Per cominciare, WP Greet Box plug-in set da awesome NON visualizzare automaticamente un messaggio di saluto (Deseleziona entrambe le “Automaticamente visualizzati saluto messaggio su posti / Pagine”).
PHP Portion
Ora è necessario modificare il file del tema Wordpress modello del(Con) in cui si desidera visualizzare il messaggio di saluto. Per esempio con questo sito, Sto usando il tema della header.php file. Esso comporta l'inserimento di un po 'di codice PHP come seguendo:
A vostra discrezione, si può o non potrebbe desiderare di racchiuderlo all'interno di queste <div></ Div> dichiarazioni e che dipenderà da dove si individua il codice così come il modello.
CSS Portion
È possibile continuare a utilizzare il foglio di stile CSS incluso con il plug-in (o il vostro, se lo hanno messo in atto uno). Comunque, c'è una voce che hai bisogno di includere specifici per Microsoft Internet Explorer:
#greet_block {
*background:#fff;
}
Esso non deve essere particolarmente questo colore (in modo che possa corrispondere al resto del vostro tema), ma l'importanza è che un colore di sfondo è incluso. Se questo non è lì, Internet Explorer fare alcune cose strane al saluto mentre è in dissolvenza. E 'un problema noto.
È possibile inserire questo nel foglio di stile proprio uso e utilizzare fogli di stile del tema, generalmente chiamato style.css.
JavaScript Portion
La maggior parte delle legwork è fatto da JavaScript e richiede che jQuery è stato caricato con il tema. Molti temi popolari già includere questo, ma se il vostro non, è sufficiente aggiungere la seguente riga (prima della wp_head(); affermazione):
<?php wp_enqueue_script('jquery'); ?>
Poi si può creare un nuovo file JavaScript o utilizzare uno esistente che sarà caricato con il tema, e includere il seguente codice:
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);
}
);
});
Questo codice non è stato altamente ottimizzato così sarà più facile per voi di capire che cosa sta accadendo e apportare modifiche se volete. Se si è a disagio con JavaScript in generale, poi la parte che segue immediatamente laGreetbox Autohide commento sarà di vostro interesse. specificamente:
var _greeting_box_vars = {
init_timeout: 15000,
timeout: 3000,
block: '#greet_block',
_timer: 0
};
Il init_timeout variabile specifica per quanto tempo il saluto sarà visibile prima che cominci a dissolvenza e il visitatore non è spostare il suo mouse su di esso. nell'esempio precedente, questo è 15 secondo (15000 millisecondi). Il timeout valore che segue è possibile specificare per quanto tempo il saluto rimarrà visibile dopo che il mouse è su di esso. Nell'esempio precedente questo è 3 secondo.
Il blocco variabile specificata l'ID del <div></ Div> sezione che contiene l'effettivo saluto. Per impostazione predefinita, WP Greet casella utilizza il nome (greet_block #) ma questo può essere diverso se hai fatto le modifiche alle impostazioni predefinite.
Il _timer non deve essere modificato e viene utilizzato internamente per tenere traccia del timer timeout.
Una funzione nello script, jQuery.fn.fadeThenSlide, sfuma semplicemente il saluto e se non è più visibile lo scorrere fuori strada. Tutto ciò che segue sotto il saluto sarà poi gradualmente spostato al suo posto così non si è lasciato con un grande spazio vuoto.
Se si implementa questo script in un file separato, assicurarsi che lo script sarà chiamato con il tema del modello. Per esempio, aggiungere alla header.php file:
Dopo questo ha tutte stata attuata, si consiglia di abilitare di default saluto se è stato disattivato prima. Poi visitare il tuo sito web per controllare se tutto funziona come previsto e nella posizione corretta. Se si esegue in tutte le questioni, non esitate a postare un commento o Contattami direttamente.
Related Posts:
