WP Greet Box autohide feature當你達到這個網站從搜索引擎或普遍的社會或書籤網站, 一個友好的問候並歡迎您,並可能提出其他一些條款的基礎上搜索關鍵字. 這是禮貌的可濕性粉劑迎接盒插件為WordPress, 開發 Thaya Kareeson.

管理界面此插件是非常直觀而且也會給管理員一個數字選擇的時間和頻率顯示的信息. 例如, 你能設置它顯示這些問候語抵港谷歌和最高金額為1只的時間.

如果啟用, 網站訪問者也能關閉問候框手動,從而能夠推翻的最高限額規定的時間在行政.

不幸的是,迎接將保持在既定的位置,只要在頁面可見或直到用戶關閉它手動. 為了避免旅客不必手動關閉的事情,他們不希望看到, 我已經實現了自動隱藏功能.

它是什麼

這種額外的功能適用於無縫的插件. 一旦已被證實的問候, 它將等待幾秒鐘才開始消失. 如果訪問者沒有採取任何行動, 的問候,並最終將完全消失的空間,它會被回收使用的滑動,其餘的網站在自己的位置. 如果之前或期間褪色的遊客移動鼠標地區, 任何衰退將會恢復正常,用戶可以點擊任何的鏈接可能會顯示的問候語.

這不是不像有些郵件的氣球,我們已經習慣於從 Windows Vista或Ubuntu的 — 如果你不感興趣, 它會消息氣球將消失沒有你的互動.

如何實現它

它涉及幾個比較小的修改到您的網站. 首先, 可濕性粉劑迎接盒插件設置為真棒 自動顯示問候語 (同時取消選中 “自動顯示問候語上篇 / 頁”).

PHP的部分

現在,您需要編輯 WordPress的主題的文件模板(帶有) 如果你想顯示的問候語. 例如與本網站, 我使用的主題的 的header.php 文件. 它涉及插入一點點的PHP代碼如下:

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

在您決定, 您可能會或可能不希望在這些包圍它 <科></分區> 聲明和它取決於你在哪裡找到的代碼以及您的範本.

部分的CSS

您可以繼續使用CSS樣式表包含在插件 (如果你或你自己已實施一). 但是, 有1項,您將需要包括特定的Microsoft Internet Explorer:

#greet_block {
*background:#fff;
}

它並不特別要這種顏色 (因此它可以匹配您的主題,其餘), 但重要的是,背景顏色是包括. 如果這是不存在, Internet Explorer會做一些奇怪的事情的問候,同時它是衰落. 這是一個已知的問題.

您可能會發生在您自己的樣式或使用使用主題的樣式表, 一般命名 style.css文件.

JavaScript的部分

大多數跑腿是通過 JavaScript和jQuery的要求,它裝載你的主題. 許多流行的主題,已包括本, 但如果你不, 只需添加以下行 (前 wp_head(); 聲明):

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

接下來,您可以創建一個新的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 <科></分區> 節,其中包含的實際問候. 默認情況下, 可濕性粉劑迎接盒提供的使用名稱 (#greet_block) 但是這可能是不同的,如果您有任何修改為默認設置.

那個 _timer 應該不會改變,在內部用來跟踪超時定時器.

函數在腳本, jQuery.fn.fadeThenSlide, 簡單的問候語消失,如果它是不可見將滑出的方式. 凡是遵循以下的問候便會逐漸取而代之的是讓你不留下一個大空白區.

如果要實現這個腳本在一個單獨的文件, 確保該腳本將被調用主題的模板. 例如, 添加到 的header.php 文件:

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

在此之後已全部實施, 您可能希望啟用默認問候語,如果之前被禁用. 然後訪問您的網站,檢查,如果一切正在按預期在適當的位置. 如果您遇到任何問題, 隨意張貼或發表評論 與我聯繫 直接.

相關崗位:

  1. 花式WordPress的翻譯
  2. 可濕性粉劑的Flickr背景Alpha測試
  3. 添加hashtags支持WordTwit
  4. 更快可濕性粉劑超高速與nginx的
  5. Myatu的是流動的