جستجوی تمام صفحه سایت با WordPress Full Screen Search Overlay

جستجوی تمام صفحه سایت

سلام دوستان

مقاله ای که امروز آماده کرده ایم ویژه ایجاد قابلیت جستجو به صورت تمام صفحه (پاپ آپ) می باشد که خیلی از مدیران سایت ها به دنبال آن هستند. امروزه قابلیت جستجو به صورت تمام صفحه در اکثر سایت ها دیده می شود و کاملا می توان گفت استفاده از این قابلیت در سایت ها فراگیر شده است. قابلیت جستجوی تمام صفحه علاوه بر زیبایی، برای صفحه نمایش های کوچکتر مانند موبایل ها بسیار کاربردی است و کاربر با کلیک بر روی دکمه جستجو می تواند متن دلخواهش را به آسانی و کاملا واضح تایپ نماید.

این افزونه تنها از قابلیت جستجوی وردپرس پشتیبانی می کند و متاسفانه از افزونه جستجوی گوگل پشتیبانی به عمل نمی آورد.

نحوه کار افزونه به این صورت است که با کلیک بر روی کادر جستجوی سایت، جعبه جستجو سایت به صورت تمام صفحه باز می شود و می توانید متن مورد نظرتان را در آن تایپ نمایید.

در ضمن قالب کلی آن را هم می توانید تغییر دهید و استایل مورد علاقه تان را با تغییر فایل css آن ایجاد نمایید.

افزونه WordPress Full Screen Search Overlay

افزونه فوق را در پنل وردپرس نصب نمایید تا به صورت خودکار تنظیمات انجام شود. برای شخصی سازی قالب جستجوی تمام صفحه و تغییر رنگ ها و انیمیشن آن بخش زیر را مطالعه نمایید.

استایل دهی به قالب افزونه

برای دسترسی به فایل استایل (css.) افزونه باید به آدرس wp-contents/plugins/full-screen-search-overlay/assets/css مراجعه نمایید. سپس فایل full-screen-search.css را با برنامه های ویرایشگر متنی مثل Notepad باز نمایید تا به کدهای مربوط به استایل افزونه دسترسی پیدا کنید.

/**
* Reset
* - Prevents Themes and other Plugins from applying their own styles to our full screen search
*/
#full-screen-search,
#full-screen-search button,
#full-screen-search button.close,
#full-screen-search form,
#full-screen-search form div,
#full-screen-search form div input,
#full-screen-search form div input.search {
font-family: Arial, sans-serif;
background:none;
border:0 none;
border-radius:0;
-webkit-border-radius:0;
-moz-border-radius:0;
float:none;
font-size:100%;
height:auto;
letter-spacing:normal;
list-style:none;
outline:none;
position:static;
text-decoration:none;
text-indent:0;
text-shadow:none;
text-transform:none;
width:auto;
visibility:visible;
overflow:visible;
margin:0;
padding:0;
line-height:1;
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-shadow:none;
-moz-box-shadow:none;
-ms-box-shadow:none;
-o-box-shadow:none;
box-shadow:none;
-webkit-appearance:none;
transition: none;
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
-ms-transition: none;
}

/**
* Background
*/
#full-screen-search {
visibility: hidden;
opacity: 0;
z-index: 999998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255,255,255,0.95);

/**
* Add some CSS3 transitions for showing the Full Screen Search
*/
transition: opacity 0.5s linear;
}

/**
* Display Full Screen Search when Open
*/
#full-screen-search.open {
/**
* Because we're using visibility and opacity for CSS transition support,
* we define position: fixed; here so that the Full Screen Search doesn't block
* the underlying HTML elements when not open
*/
position: fixed;
visibility: visible;
opacity: 1;
}

/**
* Search Form
*/
#full-screen-search form {
position: relative;
width: 100%;
height: 100%;
}

/**
* Close Button
*/
#full-screen-search button.close {
position: absolute;
z-index: 999999;
top: 20px;
right: 20px;
font-size: 30px;
font-weight: 300;
color: #999;
cursor: pointer;
}

/**
* Search Form Div
*/
#full-screen-search form div {
position: absolute;
width: 50%;
height: 100px;
top: 50%;
left: 50%;
margin: -50px 0 0 -25%;
}

/**
* Search Form Input Placeholder Color
*/
#full-screen-search form div input::-webkit-input-placeholder {
font-family: Arial, sans-serif;
color: #ccc;
}
#full-screen-search form div input:-moz-placeholder {
font-family: Arial, sans-serif;
color: #ccc;
}
#full-screen-search form div input::-moz-placeholder {
font-family: Arial, sans-serif;
color: #ccc;
}
#full-screen-search form div input:-ms-input-placeholder {
font-family: Arial, sans-serif;
color: #ccc;
}

/**
* Search Form Input
*/
#full-screen-search form div input {
width: 100%;
height: 100px;
background: #eee;
padding: 20px;
font-size: 40px;
line-height: 60px;
}

کد بالا همان کد استایل افزونه است که به بخش های مختلف آن میپردازیم:

توضیحات کد

1. در ابتدای کد شما می توانید فونت های استفاده شده را مشاهده نمایید که با تغییر آن ها می توانید فونت دلخواهتان را در افزونه درج نمایید.
2. در خط ۵۲ به کلمه Background میرسیم که مربوط به پس زمینه پاپ آپ که کل سایت را می پوشاند، می شود. در این بخش با تغییر کد background: rgba(255,255,255,0.95) در خط ۶۲ می توانید رنگ پس زمینه را عوض کنید. المان های این کد به ترتیت از راست به چپ «میزان شفافیت، r،g،b» است.
3. خط ۶۵ هم نحوه نمایان شدن پس زمینه را مشخص می نماید که نشان دهنده افزایش آرام شفافیت است.
4. خط ۹۴ هم ویژه تغییر استایل ضربدر پاپ آپ است که با تغییر ویژگی color  می توانید رنگ آن را عوض نمایید.
5. در خط ۱۲۰ و ۱۴۰ هم می توانید به ترتیب رنگ نوشته پیش فرض جعبه جستجو و رنگ پس زمینه جعبه را تغییر دهید.

جمع بندی!

با استفاده از این افزونه به راحتی یک کلیک و بدون هیچ کدنویسی ای می توانید قابلیت جستجوی تمام صفحه را به سایت بیاورید.

توجه!!! به صفحه پیش نمایش آنلاین بروید و بر روی باکس جستجو در ستون سمت چپ کلیک نمایید تا عملکرد این افزونه را مشاهده نمایید.

 دانلود افزونه WordPress Full Screen Search Overlay

دانلود صفحه افزونه پیش‌نمایش