Når du kommer til dette nettstedet fra en søkemotor eller en populær sosial eller bookmarking website, en vennlig hilsen vil ønske deg velkommen og eventuelt foreslå et par andre artikler basert på dine søkeord. Dette er høflighet WP Hils Box plugin-modulen for WordPress, utviklet av Thaya Kareeson.
Administrasjonsgrensesnitt for denne plug-in er ganske intuitiv og det vil gi administratoren en rekke alternativer for når og hvor ofte å vise meldingen. For eksempel, du kan sette den til å vise en hilsen til de som kommer fra Google og for en maksimal tidsperiode bare.
Hvis aktivert, et nettsted besøkende er også i stand til å lukke hilsen boksen manuelt og dermed i stand til å overstyre den maksimale tid satt i administrasjonen.
Dessverre hilsenen vil forbli på sitt angitt sted så lenge siden er synlig eller til brukeren lukker manuelt. For å unngå besøkende å måtte manuelt nære ting som de ikke ønsker å se, Jeg har implementert en automatisk skjul funksjonen.
Hva det gjør
Denne ekstra funksjonen fungerer sømløst med plug-in. Når hilsenen er blitt vist, Det vil vente et par sekunder før det begynner å falme. Dersom den besøkende ikke gjøre noe, hilsenen vil etter hvert forsvinne og rommet det brukes vil bli tørrlagt ved å skyve resten av nettsiden sin plass. Hvis det før eller under falmer den besøkende beveger musa over området, noen fading vil bli returnert til det normale, og brukeren kan klikke en av linkene hilsenen kan vises.
Det er ikke ulikt noe av budskapet ballongene vi har blitt vant til fra Windows Vista eller Ubuntu — hvis du ikke er interessert, det vil meldingen ballongen vil visne bort uten interaksjon din.
Hvordan implementere det
Det involverer noen ganske små endringer på nettstedet. Til å begynne med, WP Greet Box plug-in bør settes til IKKE automatisk vise en hilsen (Uncheck både “Automatisk vise hilsen melding på innlegg / Pages”).
PHP Portion
Nå må du redigere WordPress tema's file mal(Med) der du ønsker å vise hilsen. For eksempel med denne nettsiden, Jeg bruker temaets header.php fil. Det innebærer å sette inn en liten bit av PHP-kode som følge:
Etter ditt skjønn, du kanskje eller kanskje ikke ønsker å legge det i disse <div></ Div> uttalelser og det vil avhenge av hvor du finner koden samt malen.
CSS Portion
Du kan fortsette å bruke CSS-stilark som følger med plug-in (eller din egen hvis du har implementert en). Uansett, imidlertid, det er én oppføring som du må ta med spesifikke for Microsoft Internet Explorer:
#greet_block {
*background:#fff;
}
Det betyr ikke særlig må denne fargen (slik at den kan matche resten av temaet ditt), men hvor viktig er at en bakgrunnsfarge er inkludert. Hvis dette ikke er det, Internet Explorer vil gjøre noen merkelige ting å hilsenen mens det svinnende. Det er et kjent problem.
Du kan plassere denne i ditt eget stilark eller bruke bruke temaet i stilarket, vanligvis kalt style.css.
JavaScript porsjon
Mesteparten av legwork er gjort av JavaScript og det krever at jQuery er lastet med tema dine. Mange populære temaene allerede inkluderer dette, men hvis din ikke, bare legge til følgende linje (før wp_head(); uttalelse):
<?php wp_enqueue_script('jquery'); ?>
Neste kan du enten opprette et nytt JavaScript-fil eller bruk et eksisterende som vil bli lastet med tema dine, og omfatter følgende kode:
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);
}
);
});
Denne koden har ikke vært høyt optimalisert slik at det vil bli enklere for deg å forstå hva som skjer og gjør noen endringer hvis du ønsker det. Hvis du er ukomfortabel med JavaScript generelt, deretter del umiddelbart etterGreetbox Autohide kommentar vil være av interesse for deg. spesielt:
var _greeting_box_vars = {
init_timeout: 15000,
timeout: 3000,
block: '#greet_block',
_timer: 0
};
den, det init_timeout Variabelen angir hvor lenge hilsenen vil bli synlig før den starter falming og besøkende har flytt ikke hans musen over den. I eksemplet ovenfor, dette er 15 sekunder (15000 millisekunder). den, det timeout verdi som følger du kan angi hvor lenge hilsenen vil forbli synlig etter at musen har vært over det. I eksemplet ovenfor er 3 sekunder.
den, det blokk variabel angitt IDen til <div></ Div> delen som inneholder faktiske hilsen. Som standard, WP Hils Box bruker navnet forutsatt (# greet_block) men dette kan være annerledes hvis du har gjort noen endringer til standardinnstillingene.
den, det _time bør ikke endres og er internt for å holde orden på ventetiden timer.
En funksjon i skriptet, jQuery.fn.fadeThenSlide, bare tones hilsenen og hvis det ikke lenger er synlig, vil skyve det ut av veien. Alt som følger nedenfor hilsenen vil da bli gradvis flyttet på sin plass, slik at du ikke blir stående med et stort tomt område.
Hvis du skal implementere dette skriptet i en egen fil, sørge for at manuset vil bli kalt med temaet i malen. For eksempel, legge til header.php fil:
Etter dette har alle blitt implementert, ønsker du kanskje å aktivere standard hilsen hvis det var ufør før. Deretter besøker nettstedet ditt for å sjekke om alt fungerer som forventet og i riktig posisjon. Hvis du støter på noen problemer, gjerne legge inn en kommentar eller Kontakt meg direkte.
Related Posts:
