Chaque fois que vous atteignez ce site à partir d'un moteur de recherche ou un site Web ou bookmarking sociaux populaires, un accueil sympathique vous accueillera et, éventuellement, suggérer quelques autres articles en fonction de vos mots clés de recherche. Ceci est la courtoisie du WP Greet Box plug-in pour WordPress, développé par Thaya Kareeson.
L'interface d'administration pour ce plug-in est assez intuitive et il donnera à l'administrateur d'un certain nombre d'options de savoir quand et à quelle fréquence pour voir le message. Par exemple, vous pouvez définir pour montrer un salut à ceux qui arrivent de Google et pour un montant maximum de temps seulement.
Si elle est activée, un visiteur du site est aussi capable de fermer la boîte de salutation à la main et ainsi être en mesure de remplacer la quantité maximale de temps ensemble dans l'administration.
Malheureusement, le message d'accueil restera à son emplacement défini pour aussi longtemps que la page est visible ou jusqu'à ce que l'utilisateur le ferme manuellement. Pour éviter aux visiteurs d'avoir à la fermeture manuelle des choses qu'ils ne souhaitent pas voir, J'ai mis en place une fonction de masquage automatique.
Ce qu'il fait
Ce dispositif supplémentaire fonctionne de manière transparente avec le plug-in. Une fois le message d'accueil a été démontré, il attendra quelques secondes avant qu'il ne commence à s'effacer. Si le visiteur ne se prononce pas, la salutation finira par disparaître complètement et que la place qu'elle utilisés seront récupérés en faisant glisser le reste du site Web à sa place. Si, avant ou pendant la décoloration, le visiteur se déplace la souris sur la zone, toute décoloration sera retournée à la normale et l'utilisateur peut cliquer sur un des liens le salut pourrait présenter des.
Ce n'est pas contrairement à certains de ballons le message que nous avons pris l'habitude de partir de Windows Vista ou Ubuntu — Si vous n'êtes pas intéressé, ça va le ballon message disparaîtra sans votre interaction.
Comment la mettre en œuvre
Il implique une plutôt quelques petits changements à votre site Web. Pour commencer, le GT Greet Box plug-in doit être mis à PAS affiche automatiquement un message d'accueil (Décochez les deux “Affiche automatiquement un message de vœux sur les postes / Pages”).
PHP Portion
Maintenant, vous devez éditer le fichier le thème de WordPress template(Avec) où vous souhaitez afficher le message d'accueil. Par exemple avec ce site, J'utilise le thème en question header.php fichier. Elle consiste à insérer un petit bout de code PHP comme suit:
À votre discrétion, vous mai mai ou ne pas vouloir l'enfermer dans ces <div></ Div> déclarations et il dépendra de l'endroit où vous recherchez le code ainsi que votre modèle.
CSS Portion
Vous pouvez continuer à utiliser la feuille de style CSS inclus avec le plug-in (ou les vôtres si vous avez mis en œuvre un). Cependant, il ya une entrée que vous devrez inclure spécifiques pour Microsoft Internet Explorer:
#greet_block {
*background:#fff;
}
Il n'a pas particulièrement d'être de cette couleur (afin qu'il puisse correspondre au reste de votre thème), mais l'importance est que la couleur de fond est inclus. Si ce n'est pas là, Internet Explorer va faire des choses bizarres à la salutation alors qu'elle se fane. C'est un problème connu.
Vous mai placer ceci dans votre propre feuille de style ou de l'utilisation utiliser la feuille de style du thème en question, généralement nommé style.css.
JavaScript Portion
Essentiel de l'effort est fait par JavaScript et elle exige que jQuery est chargé avec votre thème. De nombreux thèmes populaires incluent déjà cette, mais si le vôtre ne pas, il suffit d'ajouter la ligne suivante (avant la wp_head(); déclaration):
<?php wp_enqueue_script('jquery'); ?>
Ensuite vous pouvez soit créer un nouveau fichier JavaScript ou utiliser un existant qui sera chargé de votre thème, et inclure le code suivant:
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);
}
);
});
Ce code n'a pas été fortement optimisé de sorte qu'il sera plus facile pour vous de comprendre ce qui se passe et d'apporter les modifications si vous le souhaitez. Si vous êtes à l'aise avec JavaScript en général, alors le passage qui suit immédiatement laGreetbox Autohide commentaire sera de vous intéresser. spécifiquement:
var _greeting_box_vars = {
init_timeout: 15000,
timeout: 3000,
block: '#greet_block',
_timer: 0
};
Le init_timeout variable indique depuis combien de temps le message d'accueil sera visible avant le début du fondu et le visiteur n'a pas bougé sa souris dessus. Dans l'exemple ci-dessus, Ceci est 15 seconde (15000 millisecondes). Le timeout valeur qui suit, vous pouvez spécifier combien de temps le message d'accueil restent visibles après que la souris est sur elle. Dans l'exemple ci-dessus est 3 seconde.
Le bloc variable spécifiée, l'ID de la <div></ Div> section qui contient le message d'accueil réelle. Par défaut, le GT Greet Box utilise le nom fourni (# greet_block) mais cela mai être différente si vous avez apporté des modifications aux paramètres par défaut.
Le _time ne doit pas être changé et est utilisé en interne pour suivre le timer timeout.
Une fonction dans le script, jQuery.fn.fadeThenSlide, simplement s'estompe la salutation et si elle n'est plus visible sera la glisser hors du chemin. Tout ce qui suit ci-dessous le message d'accueil sera ensuite progressivement transférés à sa place si vous n'êtes pas en reste avec une zone vide de grandes.
Si vous mettez en oeuvre ce script dans un fichier séparé, Assurez-vous que le script sera appelé avec le thème du modèle. Par exemple, ajouter à la header.php fichier:
Après cela tout a été mis en œuvre, mai vous souhaitez activer l'option par défaut de voeux si elle a été désactivée avant. Puis visiter votre site pour vérifier si tout fonctionne comme prévu et au bon endroit. Si vous rencontrez des problèmes, n'hésitez pas à poster un commentaire ou Contactez-moi directement.
Related Posts:
