Setiap kali Anda mencapai situs ini dari mesin pencari atau yang populer bookmark sosial atau situs, sapaan yang ramah akan menyambut Anda dan mungkin menyarankan beberapa artikel lain yang didasarkan pada kata kunci pencarian Anda. Ini adalah sopan santun menyapa Kotak WP plug-in untuk Wordpress, dikembangkan Thaya Kareeson.
Administrasi antarmuka untuk plug-in ini cukup intuitif dan itu akan memberikan administrator sejumlah pilihan tentang kapan dan seberapa sering untuk menampilkan pesan. Misalnya, Anda dapat mengaturnya untuk menampilkan salam kepada mereka yang datang dari Google dan untuk jumlah waktu maksimal yang hanya.
Jika diaktifkan, pengunjung website juga dapat menutup kotak sapaan secara manual dan dengan demikian dapat menimpa jumlah waktu maksimal yang ditetapkan dalam administrasi.
Sayangnya, salam akan tetap pada lokasi yang ditetapkan selama halaman terlihat atau sampai pengguna menutup secara manual. Untuk menghindari pengunjung harus secara manual dekat hal-hal yang mereka tidak ingin melihat, Saya telah menerapkan fitur menyembunyikan otomatis.
Apa yang dilakukannya
Fitur tambahan ini bekerja secara lancar dengan plug-in. Setelah salam telah ditunjukkan, itu akan menunggu beberapa detik sebelum mulai memudar. Jika pengunjung tidak mengambil tindakan apapun, salam akhirnya akan hilang sama sekali dan ruang yang digunakan akan direklamasi dengan menggeser sisa website di tempatnya. Jika sebelum atau selama memudar pengunjung menggerakkan mouse ke daerah, setiap memudar akan kembali normal dan pengguna dapat mengklik salah satu link salam mungkin menunjukkan.
Ini tidak seperti beberapa pesan balon kita sudah terbiasa dari Windows Vista atau Ubuntu — jika Anda tidak tertarik, itu akan pesan balon akan berangsur hilang tanpa interaksi Anda.
Bagaimana mengimplementasikannya
Ini melibatkan beberapa perubahan yang agak kecil ke situs web Anda. Untuk mulai dengan, menyapa Kotak WP plug-in harus diatur ke TIDAK secara otomatis menampilkan salam (Uncek kedua “Secara otomatis menampilkan pesan pada posting salam / Pages”).
PHP Porsi
Sekarang anda perlu mengedit file tema Wordpress template(Dengan) di mana Anda ingin menampilkan salam. Sebagai contoh dengan situs ini, Saya menggunakan tema's header.php file. Melibatkan memasukkan sedikit kode PHP sebagai berikut:
Kebijaksanaan Anda, Anda mungkin atau mungkin tidak ingin melampirkan dalam waktu ini <div></ Div> pernyataan dan akan tergantung pada di mana Anda menempatkan kode serta template Anda.
CSS Porsi
Anda dapat 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 spesifik untuk Microsoft Internet Explorer:
#greet_block {
*background:#fff;
}
Tidak terutama harus warna ini (sehingga dapat sesuai dengan sisa tema), tapi pentingnya adalah bahwa warna latar belakang termasuk. Jika ini tidak ada, Internet Explorer akan melakukan hal-hal aneh salam ketika sedang memudar. Ini masalah yang dikenal.
Anda dapat menempatkan ini dalam stylesheet Anda sendiri atau menggunakan menggunakan tema's stylesheet, umumnya bernama style.css.
JavaScript porsi
Sebagian besar dilakukan dengan kerja keras dan membutuhkan JavaScript jQuery yang penuh dengan tema. Banyak tema-tema populer sudah termasuk ini, tetapi jika Anda tidak, cukup tambahkan baris berikut (sebelum wp_head(); pernyataan):
<?php wp_enqueue_script('jquery'); ?>
Selanjutnya Anda dapat membuat sebuah file JavaScript yang baru atau menggunakan yang sudah ada yang akan dimuat dengan tema, dan masukkan kode 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);
}
);
});
Kode ini belum sangat optimal sehingga akan lebih mudah bagi Anda untuk memahami apa yang terjadi dan membuat modifikasi jika Anda ingin. Jika Anda merasa tidak nyaman dengan JavaScript pada umumnya, maka bagian segera setelahGreetbox autohide komentar akan menarik bagi Anda. Khusus:
var _greeting_box_vars = {
init_timeout: 15000,
timeout: 3000,
block: '#greet_block',
_timer: 0
};
Itu init_timeout variabel menentukan berapa lama salam akan terlihat sebelum mulai memudar dan pengunjung tidak menggerakkan mouse di atas itu. pada contoh di atas, ini 15 detik (15000 milidetik). Itu timeout nilai yang mengikuti Anda dapat menentukan berapa lama salam akan tetap terlihat setelah mouse telah lewat itu. Pada contoh di atas ini 3 detik.
Itu blok menetapkan variabel ID <div></ Div> bagian yang berisi ucapan yang sebenarnya. Default, menyapa Kotak WP menggunakan nama yang diberikan (# greet_block) tapi ini mungkin berbeda jika Anda telah membuat modifikasi ke pengaturan standar.
Itu _time tidak boleh diubah dan secara internal digunakan untuk melacak batas waktu.
Suatu fungsi pada skrip, jQuery.fn.fadeThenSlide, hanya memudar salam dan jika sudah tidak lagi terlihat akan geser keluar dari jalan. Sesuatu yang berikut di bawah salam kemudian akan secara bertahap bergerak di tempatnya sehingga Anda tidak kiri dengan area kosong besar.
If you are implementing this script in a separate file, make sure the script will be called with the theme’s template. Misalnya, add to the header.php file:
After this has all been implemented, you may wish to enable the default greeting if it was disabled before. Then visit your website to check if everything is working as expected and in the proper location. If you run into any issues, feel free to post a comment or Contact Me directly.
Related Posts:
