WP Greet Box autohide featureเมื่อคุณเข้าถึงเว็บไซต์นี้ได้จากเครื่องมือค้นหาหรือเว็บไซต์ของสังคมหรือบุ๊คมาร์คนิยม, คำทักทายมิตรจะต้อนรับท่านและอาจแนะนำบทความอื่นๆบางตามคำหลักที่ค้นหา. นี่คือมารยาทปลั๊กอิน WP ทักทาย Box-in สำหรับ WordPress, พัฒนาโดย Thaya Kareeson.

อินเตอร์เฟซการบริหารสำหรับปลั๊กอินนี้ค่อนข้างง่ายและจะให้ผู้ดูแลระบบจำนวนตัวเลือกของเวลาและความถี่ในการแสดงข้อความ. ตัวอย่างเช่น, คุณสามารถตั้งค่าให้แสดงคำทักทายผู้ที่เข้าจาก Google และจำนวนเงินสูงสุดของเวลาเท่านั้น.

ถ้าเปิดใช้, ผู้เยี่ยมชมที่เว็บไซต์ยังสามารถปิดกล่องทักทายด้วยตนเองและด้วยมันสามารถแทนที่จำนวนเงินสูงสุดที่กำหนดเวลาในการบริหาร.

ยับย่อยทักทายจะอยู่สถานที่ตั้งของมันตราบเท่าที่หน้านี้มีการมองเห็นหรือจนกว่าผู้ใช้ปิดมันเอง. เพื่อหลีกเลี่ยงการเข้าชมต้องปิดเองสิ่งที่พวกเขาไม่ต้องการเห็น, ฉันได้นำรถยนต์ซ่อนคุณสมบัติ.

มันไม่มีอะไร

นี้คุณสมบัติเพิ่มเติมงาน seamlessly with plug-in. เมื่อทักทายได้ถูกแสดง, จะรอสักครู่ก่อนที่จะเริ่มเลือนลาง. หากผู้เข้าชมไม่ดำเนินการใดๆ, คำทักทายในที่สุดจะหายไปทั้งหมดและใช้พื้นที่นั้นจะ reclaimed โดยเลื่อนส่วนที่เหลือของเว็บไซต์ในที่ของมัน. ถ้าก่อนหรือในระหว่างรอนๆผู้เข้าชมเลื่อนเมาส์เหนือพื้นที่, รอนๆๆจะกลับสู่ปกติและผู้ใช้สามารถคลิกลิงค์ใดๆอวยพรอาจจะมีการแสดง.

จะไม่แตกต่างบางข้อความลูกโป่งเราได้กลายเป็นชินจาก Windows Vista หรืออูบุนตู — ถ้าคุณไม่สนใจ, บอลลูนข้อความจะมันจะจางหายไม่มีปฏิกิริยาของคุณ.

วิธีการใช้มัน

มันถึงไม่กี่ค่อนข้างเปลี่ยนแปลงเล็กน้อยในเว็บไซต์ของคุณ. เพื่อเริ่มต้นกับ, ปลั๊กอิน WP ทักทาย Box-in ควรจะตั้ง NOT จะแสดงคำทักทาย (ยกเลิกทั้ง “แสดงคำทักทายข้อความที่โพสต์ / หน้าเว็บ”).

ส่วน PHP

ตอนนี้คุณต้องแก้ไขไฟล์ theme WordPress ของแม่(กับ) ที่คุณต้องการแสดงคำทักทาย. เช่นกับเว็บไซต์นี้, ฉันใช้ชุดรูปแบบของ header.php ไฟล์. มันเกี่ยวกับการแทรกนิดเล็กๆของรหัส PHP ดังต่อไปนี้:

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

ดุลพินิจของคุณ, คุณอาจจะหรืออาจจะไม่ต้องการแนบภายในเหล่านี้ <div></ Div> งบและจะขึ้นอยู่กับที่คุณค้นหารหัสเป็นแม่แบบของคุณ.

ส่วน CSS

คุณสามารถใช้ CSS สไตล์ชีทรวม plug-in (หรือของคุณเองหากคุณได้ดำเนินการหนึ่ง). อย่างไรก็ตาม, มีรายการหนึ่งที่คุณจะต้องมีเฉพาะสำหรับ Microsoft Internet Explorer ของ:

#greet_block {
*background:#fff;
}

ไม่เฉพาะต้องสีนี้ (ดังนั้นจึงสามารถตรงกับส่วนที่เหลือของชุดรูปแบบของคุณ), แต่สำคัญคือสีพื้นหลังรวม. หากไม่เกิด, Internet Explorer จะทำสิ่งแปลกที่จะทักทายในขณะที่ยังรอนๆ. เป็นปัญหาที่รู้จัก.

คุณอาจสถานที่นี้ในสไตล์ของคุณเองหรือใช้การใช้ชุดรูปแบบของสไตล์ชีท, ชื่อทั่วไป style.css.

ส่วน JavaScript

ส่วนมากของ legwork เสร็จโดย 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 ทั่วไป, แล้วส่วนทันทีต่อไปนี้Autohide Greetbox ความเห็นจะสนใจคุณ. เฉพาะ:

var _greeting_box_vars = {
 init_timeout: 15000,
 timeout: 3000,
 block: '#greet_block',
 _timer: 0
 };

The init_timeout ตัวแปรระบุระยะเวลาทักทายจะปรากฏก่อนที่จะเริ่มรอนๆและผู้เข้าชมไม่ได้เลื่อนเมาส์ของเขามากกว่านั้น. ในตัวอย่างข้างต้น, นี้คือ 15 วินาที (15000 milliseconds). The การหยุดพักชั่วคราว ค่าที่ต่อไปนี้คุณสามารถระบุวิธีทักทายยาวจะยังคงมองเห็นหลังจากที่เมาส์ถูกกว่านั้น. ในตัวอย่างข้างต้นนี้ 3 วินาที.

The ป้องกัน ตัวแปรที่ระบุ ID ของ <div></ Div> ส่วนที่มีการรับรองจริง. โดยค่าเริ่มต้น, WP เปรยปรายช่องใช้ชื่อให้ (greet_block #) แต่อาจจะแตกต่างกันหากคุณได้แก้ไขเพื่อตั้งค่าเริ่มต้น.

The _time ไม่ควรจะมีการเปลี่ยนแปลงและมีการใช้ภายในเพื่อติดตามการจับเวลาการหยุดพักชั่วคราว.

ทำงานในสคริปต์, jQuery.fn.fadeThenSlide, fades เพียงคำทักทายและหากยังไม่เห็นจะเลื่อนจากทาง. สิ่งที่ตามด้านล่างทักทายจะถูกย้ายค่อยๆในที่ของคุณจึงไม่เหลือพื้นที่ว่างขนาดใหญ่.

หากคุณกำลังใช้สคริปต์นี้ในไฟล์แยกต่างหาก, ตรวจสอบว่าสคริปต์จะถูกเรียกว่าด้วยเรื่องของแม่. ตัวอย่างเช่น, เพิ่มไปยัง header.php ไฟล์:

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

หลังจากนี้ได้รับการดำเนินการทั้งหมด, คุณอาจต้องการเปิดใช้งานเริ่มต้นทักทายหากถูกปิดใช้งานก่อน. จากนั้นไปที่เว็บไซต์ของคุณเพื่อตรวจสอบว่าทุกอย่างทำงานตามปกติและในตำแหน่งที่ถูกต้อง. หากคุณทำงานเป็นปัญหา, คุณสามารถแสดงความคิดเห็นหรือ Contact Me โดยตรง.

บทความที่เกี่ยวข้อง:

  1. แปลแฟนซี WordPress
  2. พื้นหลัง WP Flickr ในการทดสอบอัลฟา
  3. เพิ่ม hashtags สนับสนุน WordTwit
  4. เร็ว WP Super Cache with nginx
  5. Myatu คือมือถือ