كلما قمت الوصول إلى هذا الموقع من محرك بحث أو شعبية أو اجتماعية أو ارتباطك الموقع, a friendly greeting will welcome you and possibly suggest a few other articles based on your search keywords. This is courtesy the WP Greet Box plug-in for WordPress, developed by Thaya Kareeson.
واجهة الإدارة لهذه المكونات في بديهية جدا وانها سوف تعطي المسؤول في عدد من الخيارات من ومتى وكيف تظهر في كثير من الأحيان إلى الرسالة. على سبيل المثال, هل يمكن تعيينها لاظهار تحية لأولئك القادمين من مجموعات ولأقصى قدر ممكن من الوقت فقط.
إذا مكنت, زائر الموقع هي أيضا قادرة على إغلاق مربع تحية يدويا ، وبالتالي قادرا على تجاوز الحد الأقصى لمقدار الوقت المحدد في الادارة.
تحية للأسف ستبقى في جلسته تعيين موقع لطالما كانت الصفحة مرئية أو حتى يغلق المستخدم يدويا. زوار لتجنب الاضطرار الى يدويا وثيق الأشياء التي لا ترغب في أن ترى, لقد نفذت إخفاء تلقائي ميزة.
What it does
This additional feature works seamlessly with the plug-in. Once the greeting has been shown, it will wait a few seconds before it starts to fade away. If the visitor does not take any action, the greeting will eventually disappear altogether and the space it used will be reclaimed by sliding the rest of the website in its place. If before or during fading the visitor moves the mouse over the area, any fading will be returned to normal and the user can click any of the links the greeting might be showing.
It’s not unlike some of the message balloons we have become accustomed to from Windows Vista or Ubuntu — if you’re not interested, it’ll the message balloon will fade away without your interaction.
How to implement it
It involves a few rather small changes to your website. To begin with, the WP Greet Box plug-in should be set to لا automatically display a greeting (Uncheck both “Automatically show greeting message on posts / صفحات”).
[فب] شطر
Now you need to edit the WordPress theme’s file template(مع) where you would like to display the greeting. For example with this website, I am using the theme’s header.php ملف. It involves inserting a tiny bit of PHP code as following:
At your discretion, you may or may not wish to enclose it within these <div></ div> statements and it will depend on where you locate the code as well as your template.
شطر المغلق
You can continue to use the CSS stylesheet included with the plug-in (or your own if you have implemented one). ومع ذلك, there’s one entry that you will need to include specific for Microsoft Internet Explorer:
#greet_block {
*background:#fff;
}
It does not particularly have to be this color (so it can match the rest of your theme), but the importance is that a background color is included. If this isn’t there, Internet Explorer will do some strange things to the greeting while it is fading. It’s a known issue.
You may place this in your own stylesheet or use use the theme’s stylesheet, generally named style.css.
جافا سكريبت شطر
Most of the legwork is done by JavaScript and it requires that jQuery is loaded with your theme. Many popular themes already include this, but if yours does not, simply add the following line (before the wp_head(); statement):
<?php wp_enqueue_script('jquery'); ?>
Next you can either create a new JavaScript file or use an existing one that will be loaded with your theme, and include the following code:
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);
}
);
});
This code has not been highly optimized so it will be easier for you to understand what is happening and make any modifications if you wish. If you are uncomfortable with JavaScript in general, then the portion immediately following the Greetbox Autohide comment will be of interest to you. على وجه التحديد:
var _greeting_box_vars = {
init_timeout: 15000,
timeout: 3000,
block: '#greet_block',
_timer: 0
};
أل init_timeout variable specifies how long the greeting will be visible before it starts fading and the visitor has not move his mouse over it. في المثال أعلاه, هذا هو 15 ثانية (15000 ميلي ثانية). أل مهلة value that follows you can specify how long the greeting will remain visible after the mouse has been over it. In the above example this is 3 ثانية.
أل block variable specified the ID of the <div></ div> section that contains the actual greeting. افتراضيا, the WP Greet Box uses the provided name (#greet_block) but this may be different if you have made any modifications to the default settings.
أل _timer should not be changed and is internally used to keep track of the timeout timer.
A function in the script, jQuery.fn.fadeThenSlide, simply fades the greeting and if it is no longer visible will slide it out of the way. Anything that follows below the greeting will then be gradually moved in its place so you are not left with a large blank area.
If you are implementing this script in a separate file, make sure the script will be called with the theme’s template. على سبيل المثال, add to the header.php ملف:
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.
المشاركات ذات الصلة:
