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

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

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

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

دانلود افزونه 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;
}

این کدی که مشاهده می کنید ، کد استایل افزونه می باشد که در ادامه بخش های مختلف آن را برای شما معرفی می کنیم :
نکته اول : اگر به ابتدای کد دقت کنید شما فونت هایی که برای جستجوگر استفاده شده است را مشاهده می کنید که می توانید آنها را تغییر بدهید .
نکته دوم : اگر به کد نوشته شده در خط 52 دقت کنید Background را مشاهده کنید که نشان دهنده ی پس زمینه پاپ آپ کل سایت می باشد ، در این بخش با تغییر کد background: rgba(255,255,255,0.95) در خط 62 می توانید رنگ پس زمینه را تغییر دهید و این المان هایی که شما مشاهده می کنید نشان دهنده ی میزان شفافیت ، r،g،b می باشد .
نکته سوم : در خط 65 هم قطعه کد نحوه ی نمایش دادن پس زمینه را می بینید.
نکته چهارم : در خط 94 هم قطعه کد مربوط به تغییر استایل پاپ آپ است که با تغییر ویژگی color می توانید رنگ آن را عوض نمایید .
نکته پنجم : خطوط 120 و 140 هم مربوط به رنگ نوشته پیش فرض و پس زمینه جعبه جست جو می باشد .

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

منبع : بیگ تم ارائه دهنده قالب های وردپرس و هک وردپرس