するたびに、検索エンジンや人気の社会的、またはブックマークのWebサイトからこのウェブサイトに達する, フレンドリーな挨拶とあなたを歓迎する可能性があるいくつかの他の記事を検索キーワードに基づいて提案する. これは礼儀WPグリートボックスのプラグインをワードプレスのためにある, 開発 Thaya Kareeson.
このプラグインの管理インターフェイスで非常に直感的であり、それは管理者のオプションの番号を与えるが、いつ、どのように頻繁にメッセージを表示する. 例えば, あなたがこれらは、Googleから到着するためのあいさつを表示すると時間の上限額を設定することが唯一の.
有効にした場合, ウェブサイトの訪問者も手動で、それによって時間の管理で設定された最大量を上書きすることがグリーティングボックスを閉じることができます.
残念ながら、あいさつとしては、ページ、または表示されるまで、ユーザーが手動で閉じ限り、その設定した場所にとどまる. 訪問者を手動で物事は、それらを参照してしたくない終了することを避けるために, 私の自動機能を非表示を実装しました.
それは何
この追加機能をシームレスにプラグインで動作で. いったんグリーティング示されている, 前に消えていくのを開始するには、数秒待って. 場合は、訪問者の行動をしない, あいさつ、最終的に完全にして、その場所には、ウェブサイトの残りの部分をスライドさせ回収される使用領域が消える. 場合の前または訪問フェージング時の領域の上にマウスを移動する, 任意のフェーディングとは、ユーザーが正常に任意のあいさつのリンクが表示される可能性がありますすることができますクリックして返されます。.
いくつかのメッセージとは違っていないのは、Windows VistaまたはUbuntuのに慣れている風船 — もし興味がない, は、メッセージバルーンを離れての操作なしでフェードれるだろう.
どのように実装するために
それはあなたのウェブサイトにいくつかのより小規模な変更が含ま. を開始するには, WPグリートボックスのプラグインを設定する必要があります しない 自動的に挨拶文を表示 (チェックボックスをオフの両方 “自動的に投稿メッセージのあいさつを見る / ページ”).
PHPの部分
ここでは、ワードプレステーマのファイルを編集するテンプレートが必要(〜とともに) ここでは、挨拶文を表示したい. このウェブサイトでたとえば、, 私は使用して、テーマの header.php ファイル. それは次のようにPHPのコードのほんの少しを挿入し:
ご自身の判断で, これらの中にそれを囲むために希望されない場合がありますか <部></部> 文とそれがあなたと同様のコードを探しますテンプレートに依存する.
CSSの部分
場合は、CSSスタイルシートを使用し続けることができるプラグインに含まれてで (か、自分の場合は1を実装して). しかしばがら, ある1つのエントリには、Microsoft Internet Explorer用の特定を含むようにする必要がありますの:
#greet_block {
*background:#fff;
}
特に、この色にする必要はありません (ので、あなたのテーマの残りの部分と一致することができます), しかし、重要性は、背景色が含まれている. この場合はされていません, 中には退色れているInternet Explorerのあいさつをするいくつかの奇妙なことを行います. これは、既知の問題の.
あなた自身のスタイルシート内のこの場所にしたり、テーマのスタイルシートを使用する, 一般的に名前 style.css.
JavaScriptの部分
取材のほとんどはJavaScriptで行われ、そのjQueryの必要なテーマがロードされ. 数多くの人気テーマはすでにこの部分を含める, しかし、もしあなたのいない, 単純に次の行を追加する (の前に wp_head(); 声明):
<?php wp_enqueue_script('jquery'); ?>
次のいずれかのファイルまたは既存の1つは、あなたのテーマでロードされますを使用する新しいJavaScriptを作成することができます, とは、次のコードを含める:
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);
}
);
});
このコードは、高度に最適化されていないので、それを何が起こっている場合は、任意の変更を加えることを理解しやすくなる. 場合、JavaScriptを使って一般的に違和感を覚えている, その部分はすぐには、次のGreetbox自動的に隠す コメントをするに興味を持たれる. 特に:
var _greeting_box_vars = {
init_timeout: 15000,
timeout: 3000,
block: '#greet_block',
_timer: 0
};
その init_timeout 変数の前には、フェージングを開始する訪問者は、上の彼のマウスを移動していないどのくらいの挨拶が表示されることを指定. 上記の例では、, これは 15 秒 (15000 ミリ秒). その タイムアウト 値は、どのくらいの目に見えるままになり、あいさつを指定することができます次の後に、マウスがそれにされている. 上記の例では、これは 3 秒.
その ブロック 変数のIDを指定 <部></部> ここでは、実際の挨拶が含まれて. デフォルトでは、, WPグリートボックス提供された名前を使用して (＃greet_block) しかし、この場合は、デフォルト設定への変更を行ったが異なることがあります.
その _time 変更すべきではない、内部的にタイムアウトのタイマーを追跡するために使用されて.
スクリプト内の関数, jQuery.fn.fadeThenSlide, 単にフェードあいさつし、それはもはや方法の外にスライドショーが表示されます. ので、大規模な空白の領域が残っていないものは、グリーティング、以下を徐々にその場所に移動される次の.
場合は、別のファイルにこのスクリプトを実装している, 確認してくださいスクリプトでは、テーマのテンプレートと呼ばれるよう. 例えば, に追加 header.php ファイル:
この後、すべての実装されている, 場合、その前に無効にされた場合は、既定のグリーティングを有効にしたい場合があります. している場合、すべてが期待の動作を確認するあなたのウェブサイトを参照して適切な場所に. もし問題に遭遇する, コメントやポストまでお気軽に 私に連絡し 直接.
関連記事:
