آموزش ایجاد جستجوی تمام صفحه در سایت وردپرس

آموزش ایجاد جستجوی تمام صفحه در سایت وردپرس

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

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

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

برای این که شما بتوانید استایل این جستجو را عوض کنید باید به فایل استایل افزونه دسترسی داشته باشید و باید به آدرس wp-contents/plugins/full-screen-search-overlay/assets/css بروید و در نهایت فایل full-screen-search.css را با ویرایشگر متنی باز کنید تا بتوانید از این طریق به کدهای موربوط به استایل افزونه مورد نظر دسترسی داشته باشید و ان را به سلیقه خود تغییر دهید

۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
۳۱
۳۲
۳۳
۳۴
۳۵
۳۶
۳۷
۳۸
۳۹
۴۰
۴۱
۴۲
۴۳
۴۴
۴۵
۴۶
۴۷
۴۸
۴۹
۵۰
۵۱
۵۲
۵۳
۵۴
۵۵
۵۶
۵۷
۵۸
۵۹
۶۰
۶۱
۶۲
۶۳
۶۴
۶۵
۶۶
۶۷
۶۸
۶۹
۷۰
۷۱
۷۲
۷۳
۷۴
۷۵
۷۶
۷۷
۷۸
۷۹
۸۰
۸۱
۸۲
۸۳
۸۴
۸۵
۸۶
۸۷
۸۸
۸۹
۹۰
۹۱
۹۲
۹۳
۹۴
۹۵
۹۶
۹۷
۹۸
۹۹
۱۰۰
۱۰۱
۱۰۲
۱۰۳
۱۰۴
۱۰۵
۱۰۶
۱۰۷
۱۰۸
۱۰۹
۱۱۰
۱۱۱
۱۱۲
۱۱۳
۱۱۴
۱۱۵
۱۱۶
۱۱۷
۱۱۸
۱۱۹
۱۲۰
۱۲۱
۱۲۲
۱۲۳
۱۲۴
۱۲۵
۱۲۶
۱۲۷
۱۲۸
۱۲۹
۱۳۰
۱۳۱
۱۳۲
۱۳۳
۱۳۴
۱۳۵
۱۳۶
۱۳۷
۱۳۸
۱۳۹
۱۴۰
۱۴۱
۱۴۲
۱۴۳
۱۴۴
۱۴۵
۱۴۶
۱۴۷
۱۴۸
۱۴۹
/**
* 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;
}

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