Setiap kali anda mencapai halaman ini dari mesin pencari atau yang popular bookmark sosial atau laman, sapaan yang ramah akan menyambut anda dan mungkin menyarankan beberapa artikel lain yang didasarkan pada kata kunci carian anda. Ini adalah sopan santun menyapa Peti WP plug-in untuk Wordpress, dikembangkan Thaya Kareeson.
Administrasi antara muka untuk plug-in ini cukup intuitif dan itu akan memberikan pentadbir sejumlah pilihan tentang kapan dan seberapa sering anda memaparkan mesej. Misalnya, Anda boleh menetapkannya untuk memaparkan salam kepada mereka yang datang dari Google dan untuk jumlah masa maksimum yang hanya.
Jika diaktifkan, pengunjung website juga boleh menutup kotak sapaan secara manual dan dengan demikian boleh menimpa jumlah masa maksimum yang ditetapkan dalam pentadbiran.
Sayangnya, salam akan tetap pada lokasi yang ditetapkan selama laman terlihat atau sampai pengguna menutup secara manual. Untuk mengelakkan pengunjung harus secara manual berhampiran hal-hal yang mereka tidak mahu melihat, Saya telah menerapkan ciri menyembunyikan automatik.
Apa yang dilakukannya
Fitur tambahan ini bekerja secara lancar dengan plug-in. Selepas salam telah ditunjukkan, itu akan menunggu beberapa detik sebelum mulai memudar. Jika pengunjung tidak mengambil sebarang tindakan, salam akhirnya akan hilang sama sekali dan ruangan yang digunakan akan tebusan dengan menggeser sisa website di tempatnya. Jika sebelum atau selama memudar pengunjung menggerakkan tetikus ke daerah, setiap memudar akan kembali normal dan pengguna boleh mengklik salah satu link salam mungkin menunjukkan.
Ini tidak seperti beberapa mesej balon kita sudah terbiasa daripada Windows Vista atau Ubuntu — jika anda tidak tertarik, itu akan mesej balon akan beransur hilang tanpa interaksi anda.
Bagaimanakah mengimplementasikannya
Ini melibatkan beberapa perubahan yang agak kecil ke laman web anda. Untuk mulai dengan, menyapa Peti WP plug-in harus ditetapkan kepada TIDAK secara automatik memaparkan salam (Uncek kedua “Secara automatik memaparkan mesej pada posting salam / Pages”).
PHP Porsi
Sekarang anda perlu mengedit fail tema Wordpress template(Dengan) di mana anda ingin memaparkan salam. Sebagai contoh dengan halaman ini, Saya menggunakan tema's header. php fail. Melibatkan memasukkan sedikit kod PHP sebagai berikut:
Kebijaksanaan anda, Anda mungkin atau mungkin tidak ingin melampirkan dalam waktu ini <div></ Div> pernyataan dan akan bergantung pada di mana anda meletakkan kod serta template anda.
CSS Porsi
Anda boleh terus menggunakan stylesheet CSS disertakan dengan plug-in (atau anda sendiri jika anda telah menerapkan salah satu). Akan tetapi, ada satu entri yang anda akan perlu untuk memasukkan khusus untuk Microsoft Internet Explorer:
#greet_block {
*background:#fff;
}
Tidak terutama harus Warna ini (sehingga dapat sesuai dengan sisa tema), tapi pentingnya adalah bahawa warna latar belakang termasuk. Jika ini tidak ada, Internet Explorer akan melakukan hal-hal aneh salam ketika sedang memudar. Ini masalah yang dikenali.
Anda boleh meletakkan ini dalam stylesheet anda sendiri atau menggunakan menggunakan tema's stylesheet, umumnya bernama style.css.
JavaScript porsi
Sebahagian besar dilakukan dengan kerja keras dan memerlukan JavaScript jQuery yang penuh dengan tema. Banyak tema-tema popular sudah termasuk ini, tetapi jika anda tidak, cukup tambahkan baris berikut (sebelum wp_head(); pernyataan):
<?php wp_enqueue_script('jquery'); ?>
Seterusnya anda boleh membuat sebuah file JavaScript yang baru atau menggunakan yang sudah ada yang akan dimuat dengan tema, dan masukkan kod berikut:
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);
}
);
});
Kod ini belum sangat optimal sehingga akan lebih mudah bagi anda untuk memahami apa yang berlaku dan membuat pengubahsuaian jika anda ingin. Jika anda merasa tidak selesa dengan JavaScript pada umumnya, maka bahagian akan selepasGreetbox Autohide komentar akan menarik bagi anda. Terperinci:
var _greeting_box_vars = {
init_timeout: 15000,
timeout: 3000,
block: '#greet_block',
_timer: 0
};
itu init_timeout pembolehubah menentukan berapa lama salam akan terlihat sebelum mulai memudar dan pengunjung tidak menggerakkan tetikus di atas itu. Pada contoh di atas, ini 15 detik (15000 milidetik). itu timeout nilai yang mengikuti anda boleh menentukan berapa lama salam akan tetap terlihat selepas tetikus telah lewat itu. Pada contoh di atas ini 3 detik.
itu blok menetapkan pembolehubah ID <div></ Div> bahagian yang mengandungi ucapan yang sebenarnya. Default, menyapa Peti WP menggunakan nama yang diberikan (# Greet_block) tapi ini mungkin berbeza jika anda telah membuat pengubahsuaian kepada tatacara standard.
itu _time tidak boleh diubah dan secara dalaman digunakan untuk menjejaki batas waktu.
Suatu fungsi pada skrip, jQuery.fn.fadeThenSlide, hanya memudar salam dan jika sudah tidak lagi terlihat akan ricih keluar daripada jalan. Sesuatu yang seterusnya di bawah salam kemudian akan secara berperingkat bergerak di tempatnya sehingga anda tidak kiri dengan area kosong besar.
Jika anda menerapkan script ini pada fail yang berasingan, pastikan script akan dipanggil dengan tema dari template. Misalnya, menambah header. php fail:
Selepas ini semua telah dilaksanakan, Anda mungkin ingin mengaktifkan default salam apakah itu dimatikan sebelum. Kemudian melawat laman web anda untuk menyemak apakah semuanya bekerja seperti yang diharapkan dan di lokasi yang tepat. Jika anda mengalami masalah apapun, merasa bebas untuk menghantar komen atau Contact Me langsung.
Related Posts:
