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

سفارشی کردن صفحه جستجو در وردپرس
ابتدا پلاگین  WordPress Full Screen Search Overlay را نصب کنید.
برای سفارشی کردن صفحه جستجو شما نیاز به ویرایش فایل CSS پلاگین دارید، برای اینکار با استفاده از FTP به سایت خود متصل شوید.
اکنون پوشه CSS پلاگین را در مسیر زیر را پیدا کنید:

yourwebsite.com/wp-content/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: #1bc69e;

/**
* 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;
/* We have added our own font color here */
color:#50B0A6;
}

در قطعه کد بالا تنها در خط ۶۲ ، رنگ پس زمینه را تغییر داده ایم و در خط ۱۵۰ فونت رنگی اضافه کرده ایم.

fullscreensearchwp
پس از اینکه تغییرات دلخواه انجام شد آن را در مسیر قبلی بارگذاری کنید. هم اکنون می توانید تغییرات را در سایت خودمشاهده کنید.

منبع: wpbeginner

امتیاز شما از 1 تا 5
1 ستاره میدم به نوشته2 ستاره میدم به نوشته3 ستاره میدم به نوشته4 ستاره میدم به نوشته5 ستاره میدم به نوشته 2 رای
Loading...