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

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

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

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

افزونه WordPress Full Screen Search Overlay

/**
* 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;
}

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

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

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

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

توضیحات کد

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

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

تا درودی دیگر بدرود

[button color=”red” link=”https://wordpress.org/plugins/full-screen-search-overlay/” size=”big” align=”center” target=”_blank” radius=”۳″ icon=”momizat-icon-box-add”]دانلود افزونه[/button]