Wanneer u bij deze website via een zoekmachine of een populaire sociale bookmarking website of, een vriendelijke groet zullen u verwelkomen en eventueel wijzen op een paar andere artikelen op basis van uw zoekwoorden. Dit is de hoffelijkheid WP Greet Box plug-in voor WordPress, ontwikkeld Thaya Kareeson.
De administratie interface voor deze plug-in is zeer intuïtief en geeft de beheerder een aantal opties van wanneer en hoe vaak de boodschap te tonen. bijvoorbeeld, je zou kunnen instellen op een groet laten zien aan degenen die van Google en voor een maximumbedrag van tijd alleen.
Indien ingeschakeld, een website bezoeker is ook in staat om de begroeting vak handmatig sluiten en daardoor in staat om het maximale bedrag van de ingestelde tijd in de administratie overschrijven.
Helaas is de begroeting blijft op zijn vastgesteld locatie voor zo lang als de pagina zichtbaar is of totdat de gebruiker sluit het handmatig. Om te voorkomen dat bezoekers met de hand sluiten dingen die ze niet wensen te zien, Ik heb een auto geïmplementeerd verbergen functie.
Wat het doet
Deze extra functie werkt naadloos samen met de plug-in. Zodra de begroeting is aangetoond, zal een paar seconden wachten voordat het begint te vervagen. Als de bezoeker heeft geen enkele actie, de begroeting zal uiteindelijk helemaal verdwijnen en de ruimte die het gebruikt zal worden teruggevorderd door schuiven de rest van de website in de plaats. Indien vóór of tijdens vervagen de bezoeker beweegt de muis over het gebied, een fading gaat terug naar normaal en kan de gebruiker op een van de links de begroeting kan worden weergegeven.
Het is niet in tegenstelling tot sommige van de boodschap ballonnen hebben we gewend zijn van Windows Vista of Ubuntu — als je niet geïnteresseerd, Het zal de boodschap ballon zal verdwijnen zonder uw interactie.
Hoe dit te implementeren
Het gaat om een paar vrij kleine wijzigingen aan uw website. Om te beginnen, de WP Greet Box plug-in moet zijn ingesteld op NIET automatisch een begroeting (Verwijder beide “Automatisch show begroeting bericht op berichten / Pagina”).
PHP Gedeelte
Nu moet je het bewerken van het dossier van de WordPress thema's sjabloon(Met) waar u wilt weergeven de begroeting. Bijvoorbeeld met deze website, Ik gebruik de thema's header.php bestand. Het gaat om het invoegen van een klein beetje PHP-code als volgt:
Op uw keuze, je kan wel of niet wenst te voegen in deze <div></ Div> verklaringen en het zal afhangen van waar u de code vinden als uw sjabloon.
CSS Gedeelte
U kunt doorgaan naar de CSS-stylesheet te gebruiken die bij de plug-in (of je eigen als u een geïmplementeerd). Echter, er is een item dat je nodig hebt om specifiek voor Microsoft Internet Explorer:
#greet_block {
*background:#fff;
}
Het is niet bijzonder te worden deze kleur (dus het kan overeenkomen met de rest van je thema), maar het belang is dat een achtergrond kleur is opgenomen. Als dit er niet is, Internet Explorer zal doen wat vreemde dingen aan de begroeting tijdens het vervagen. Het is een bekend probleem.
U kunt dit in uw eigen stylesheet stylesheet te gebruiken of het gebruik van de thema's, algemeen genoemd style.css.
JavaScript Gedeelte
Merendeel van de informatieverzameling wordt gedaan door JavaScript en het vereist dat jQuery is geladen met uw thema. Veel populaire thema's al bevatten deze, maar als het jouwe niet, gewoon de volgende regel toevoegen (vóór de wp_head(); verklaring):
<?php wp_enqueue_script('jquery'); ?>
Vervolgens kunt u of u een nieuwe JavaScript-bestand of een bestaand dat zal worden geladen met uw thema te gebruiken, en omvatten de volgende code:
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);
}
);
});
Deze code is niet sterk is geoptimaliseerd zodat het makkelijker voor u om te begrijpen wat er gebeurt en maken alle wijzigingen als u dat wilt. Als u zich ongemakkelijk met JavaScript in het algemeen, vervolgens het gedeelte direct na deGreetbox Autohide commentaar zal worden voor u van belang. specifiek:
var _greeting_box_vars = {
init_timeout: 15000,
timeout: 3000,
block: '#greet_block',
_timer: 0
};
De init_timeout variabele geeft aan hoe lang de begroeting zal zichtbaar zijn voordat het begint te vervagen en de bezoeker heeft niet zijn muis over het. in het bovenstaande voorbeeld, dit is 15 seconde (15000 milliseconden). De Time-out waarde die volgt, kunt u opgeven hoe lang de begroeting zal zichtbaar blijven nadat de muis is overheen. In het bovenstaande voorbeeld is dit 3 seconde.
De blok variabele aangegeven de ID van de <div></ Div> deel dat de werkelijke groet bevat. Standaard, de WP Greet Box maakt gebruik van de naam die (# greet_block) maar dit kan anders zijn als u nog wijzigingen aan de standaard instellingen.
De _time mag niet worden gewijzigd en wordt intern gebruikt voor het bijhouden van de time-out timer te houden.
Een functie in het script, jQuery.fn.fadeThenSlide, simpelweg vervaagt de begroeting en als het niet meer zichtbaar zal schuif deze uit de weg. Alles wat volgt hieronder de begroeting zal vervolgens geleidelijk worden verplaatst in de plaats zodat je niet blijven zitten met een groot leeg gebied.
Als u de uitvoering van dit script in een apart bestand, Zorg ervoor dat het script wordt aangeroepen met de thema's sjabloon. Bijvoorbeeld, toevoegen aan de header.php bestand:
Nadat dit allemaal is uitgevoerd, U kunt om de standaard begroeting als het was voordat uitgeschakeld. Dan uw website bezoeken om te controleren of alles werkt zoals verwacht en in de juiste locatie. Mocht u naar eventuele problemen, voel je vrij om een reactie of post Contact Me direct.
Verwante Posten:
