WP Greet Box autohide featureKui jõuad oma veebisaidi otsingumootori või populaarne sotsiaalse või järjehoidja koduleheküljel, sõbralik tervitus ootab teid ja võib oletada, mõned muud tooted põhinevad teie otsingu märksõnad. See on viisakus WP Greet Box plugin for WordPress, väljatöötatud Thaya Kareeson.

Kasutajaliides selle plug-in on täiesti arusaadavad ja see annab administraator mitmeid võimalusi, millal ja kui tihti näidatakse sõnumit. Näiteks, võid määrata seda näidata tervitus neile saabuvate Google ja maksimaalse aja ainult.

Kui see on lubatud, koduleheküljel külastaja on ka võimalik sulgeda tervitus kasti käsitsi ja seega võimalik tühistada maksimaalse aja sätestatud haldus -.

Kahjuks tervitus jäävad oma määratud kohas nii kaua, kui leht on nähtav või kuni kasutaja sulgeb selle käsitsi. Et vältida külastajad võttes käsitsi sulgeda asju, mida nad ei soovi näha, Olen rakendanud Auto peida funktsioon.

Mida see teeb

See täiendav funktsioon toimib sujuvalt plug-in. Pärast tervitust on näidanud, siis oodake paar sekundit, enne kui ta hakkab hajuvad. Kui külastaja ei tee midagi, tervitus lõpuks kaovad täielikult ja ruumi ta kasutas on taastatud nihutades ülejäänud veebilehel selle asemel. Kui enne või ajal pleegib külastaja liigutab hiirt üle ala, kõik kahanemine on normaliseerunud ning kasutaja saab klõpsata mõni lingid tervitus võiks näidata.

See ei ole erinevalt mõned sõnum õhupallid oleme harjunud Windows Vista või Ubuntu — Kui te ei ole huvitatud, it'll sõnum õhupalli saab hajuvad ilma teie suhtlemist.

Kuidas seda rakendada

See hõlmab mõningaid üsna väikesi muutusi oma kodulehel. Alustuseks, WP Greet Box plug-in tuleb määrata EI kuvada automaatselt tervitus (Kustuta nii “Näitab automaatselt tervitus sõnum postitused / Leheküljed”).

PHP osa

Nüüd tuleb muuta WordPress Theme toimiku malli(Koos) Kui soovite kuvada tervitus. Näiteks käesoleva veebilehe, Ma kasutan teema's header.php fail. See eeldab paigaldamisel mõnevõrra PHP koodi järgmine:

<div style="clear:both"><?php if(function_exists('wp_greet_box')){wp_greet_box();} ?></div>

Teie omal äranägemisel, teil võib või ei soovi lisada see nendes <div></ Div> avaldused ja see sõltub kus sa leida koodi, samuti oma malli.

CSS osa

Te saate endiselt kasutada CSS-stiil kaasas Plug-in (või teie enda kui teil on rakendatud ühe). Sellegipoolest, seal on üks kanne, siis peavad sisaldama konkreetseid Microsoft Internet Explorer:

#greet_block {
*background:#fff;
}

See ei ole eriti tuleb seda värvi (nii et see vastaks teie ülejäänud teema), kuid tähtis on see, et taustavärvi lisada. Kui seda ei ole olemas, Internet Explorer teeme mõned kummalised asjad, tervitus, kui see on hääbumise. See on teada probleem.

Võite koht seda oma stiili või kasutamise kasutamise teema stiil, üldiselt nimetatakse style.css.

JavaScript osa

Enamik legwork saab teha JavaScript ja ta nõuab, et jQuery on koormatud oma teema. Paljud populaarsed teemad juba sisaldab käesoleva, aga kui teie ei ole, lihtsalt lisage (enne wp_head(); teatamine):

<?php wp_enqueue_script('jquery'); ?>

Järgmine võite luua uue JavaScripti faili või kasutada olemasolevat, mis on koormatud oma teema, ning järgmine kood:

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);
        }
    );
});

See kood ei ole väga optimeeritud nii et see on lihtsam aru saada, mis toimub ja teha muudatusi, kui soovite. Kui teil on ebameeldiv JavaScript üldiselt, Seejärel osa vahetult pärastGreetbox Autohide kommentaar teile huvi pakkuda. Täpsemalt:

var _greeting_box_vars = {
 init_timeout: 15000,
 timeout: 3000,
 block: '#greet_block',
 _timer: 0
 };

The init_timeout muutuja määrab, kui kaua tervitus on nähtavad, enne kui ta käivitub pleegib ja külastaja on ei liigu oma hiirega üle selle. Eespool toodud näites, See on 15 sekundit (15000 millisekundites). The timeout väärtus, mis tuleneb saate määrata, kui kaua tervitus jääb nähtavaks pärast hiir on selle üle. Eespool toodud näites on 3 sekundit.

The Blokeeri muutujate ID <div></ Div> lõik, mis sisaldab tegelikult tervitus. Vaikimisi, WP Greet Box kasutab tingimusel nimi (# greet_block) kuid see võib olla erinev, kui olete teinud muudatusi vaikeseadeid.

The _time ei tuleks muuta ja on sisemiselt kasutada jälgida timeout timer.

Funktsiooni koodi, jQuery.fn.fadeThenSlide, lihtsalt kaob tervitus ja kui see ei ole enam nähtav libiseb ta eest ära. Midagi, et alljärgnevalt tervitus siis liikunud selle asemel et sa ei jää suurt tühja ala.

Kui teil on rakendamisel skript eraldi faili, veenduge, et skript kutsutakse välja teema on mall. Näiteks, Lisa header.php fail:

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/my-greetbox-autohider.js"></script>

Pärast seda on kõik ellu viidud, võiksite võimaldab vaikimisi tervitust, kui ta oli puudega enne. Siis teie veebisaidi külastamiseks et vaadata, kas kõik toimib nagu peaks ja õige koht. Kui sul tekib mingeid küsimusi, vabalt kommenteerida või Contact Me otse.

Seonduvad postitused:

  1. Fancy WordPress tõlked
  2. WP Flickr tausta alfa testimine
  3. Lisa hashtags toetust WordTwit
  4. Kiirem WP Super vahemällu nginx
  5. Myatu's mobiil