Sempre que você chegar a este site a partir de um motor de busca ou um site popular ou social bookmarking, uma saudação amigável irá recebê-lo e, eventualmente, sugerir alguns artigos, com base em palavras-chave da sua pesquisa. Esta é a cortesia do WP Greet Caixa plug-in para o WordPress, desenvolvido por Thaya Kareeson.
A interface de administração para este plug-in é bastante intuitivo e vai dar ao administrador uma série de opções de quando e quantas vezes para mostrar a mensagem. Por exemplo, você pode configurá-lo para mostrar uma saudação para quem chega do Google e por um período máximo de tempo apenas.
Se ativado, um visitante do site também é capaz de fechar a caixa de saudação manualmente e, assim, capaz de substituir a quantidade máxima de tempo definido na administração.
Infelizmente a saudação permanecerá em sua posição definida, enquanto a página é visível ou até que o usuário fecha-lo manualmente. Para evitar ter de visitantes manualmente fechar coisas que eles não querem ver, Eu tenho implementado um recurso Auto Hide.
O que ele faz
Esse recurso adicional funciona perfeitamente com o plug-in. Uma vez que a saudação foi mostrado, ele vai aguardar alguns segundos, antes que comece a desaparecer. Se o visitante não tomar qualquer acção, a saudação acabará por desaparecer e que o espaço utilizado será recuperado por correr o resto do site em seu lugar. Se, antes ou durante a esmorecer o visitante passa o mouse sobre a área, qualquer fading será devolvido ao normal eo usuário pode clicar em qualquer um dos links a saudação pode estar mostrando.
Não é ao contrário de alguns dos balões de mensagem a que nos habituámos a partir do Windows Vista ou Ubuntu — Se você não está interessado, vai o balão de mensagem irá desaparecer sem a sua interação.
Como implementá-lo
Trata-se de algumas pequenas alterações em seu site. Para começar, WP cumprimentar a Caixa plug-in deve ser definida para NÃO exibir automaticamente uma saudação (Desmarque ambas “Mostrar automaticamente mensagem de saudação aos postos / Páginas”).
PHP Parcela
Agora você precisa editar o arquivo de tema do WordPress modelo(Com) onde você gostaria de exibir a saudação. Por exemplo, com este site, Eu estou usando o tema header.php arquivo. Ela envolve a inserção de um pequeno pedaço de código PHP da seguinte forma:
Ao seu critério, você pode ou não pode querer colocá-lo dentro desses <div></ Div> declarações e vai depender de onde você localizar o código, bem como o seu modelo.
CSS Parcela
Você pode continuar a usar a folha de estilos CSS incluída com o plug-in (ou seus próprios se você tiver implementado um). Contudo, há uma entrada que você precisará incluir específicas para o Microsoft Internet Explorer:
#greet_block {
*background:#fff;
}
Não especial tem que ser desta cor (para que possa combinar com o resto do seu tema), mas a importância é que a cor de fundo está incluído. Se isso não existe, Internet Explorer irá fazer algumas coisas estranhas para a saudação ao mesmo tempo que está acabando. É um problema conhecido.
Você pode colocar isto em seu estilo próprio uso ou uso stylesheet do tema, geralmente denominado style.css.
JavaScript Parcela
A maior parte do trabalho braçal é feito por JavaScript e exige que jQuery é carregado com o seu tema. Muitos temas populares já incluem esta, mas se o seu não, basta adicionar a seguinte linha (antes da wp_head(); declaração):
<?php wp_enqueue_script('jquery'); ?>
Em seguida, você pode criar um novo arquivo JavaScript ou use uma já existente que será carregado com o seu tema, e incluir o seguinte código::
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);
}
);
});
Este código não tem sido altamente otimizado assim será mais fácil para você entender o que está acontecendo e fazer as modificações, se desejar. Se você está desconfortável com o JavaScript em geral, então a parte imediatamente após oGreetbox Autohide comentário será do seu interesse. especificamente:
var _greeting_box_vars = {
init_timeout: 15000,
timeout: 3000,
block: '#greet_block',
_timer: 0
};
o init_timeout variável especifica por quanto tempo a saudação será visível antes de começar a desvanecer eo visitante não mova seu mouse sobre ele. No exemplo acima, Esta é 15 segundo (15000 milissegundos). o timeout valor que segue você pode especificar quanto tempo a saudação permanecerá visível após o mouse sobre ele foi. No exemplo acima, isto é 3 segundo.
o bloco variável especificada a identificação do <div></ Div> seção que contém a saudação real. Por padrão, WP cumprimentar a Caixa utiliza o nome fornecido (greet_block #) mas isso pode ser diferente se você tiver feito alterações para as configurações padrão.
o _time não deve ser mudado e é usada internamente para manter o controle do timer timeout.
Uma função no script, jQuery.fn.fadeThenSlide, simplesmente desaparece a saudação e se ele não está mais visível irá deslizar para fora do caminho. Tudo o que segue abaixo a saudação será, então, moveu-se gradualmente em seu lugar para que não fiquem com uma grande área em branco.
Se você está implementando esse script em um arquivo separado, Certifique-se o script será chamado com o tema do modelo. Por exemplo, adicionar à header.php arquivo:
Depois de tudo isso tem sido implementada, você pode desejar para habilitar a saudação padrão, se ele foi desativado antes. Então visite o site para verificar se tudo está funcionando como esperado e no local adequado. Se você executar em todas as edições, Sinta-se livre para postar um comentário ou Contact Me diretamente.
Posts Relacionados:
