افزودن جستجو تمام صفحه به وردپرس

یکی از بازدیدکنندگان از ما خواست که یک مطلب آموزشی درباره اینکه “چطور یک جستجو تمام صفحه برای وردپرس بسازیم؟” منتشر کنیم!

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

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

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

اولین کاری که باید انجام بدید این هستش که افزونه wordpress.org/plugins/full-screen-search-overlay/”>wordpress Full Screen Search Overlay رو نصب و فعال کنید. افزونه “جستجو تمام صفحه وردپرس” هیچگونه تنظیماتی نداره و نگران سنگین شدن یا … وب سایت نباشید این افزونه در کل 5 کیلوبایت هست!

بعد از فعال کردن افزونه شما به سادگی میتونید بر روی باکس جستجو سایتتان کلیک کنید و نتیجه رو بیینید!

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

سفارشی کردن صفحه نمایش جستجو

افزونه جستجو تمام صفحه وردپرس یک فایل CSS به همراه خودش داره که شما به آسونی میتونید اون رو طبق سلیقه خودتون ویرایش کنید و ما هم یک نمونه برای شما در ادامه قرار دادیم!

برای ویرایش این فایل وارد فایل منیجر هاست و یا FTP بشید و به این آدرس برید:

yourwebsite.ir/wp-content/plugins/full-screen-search-overlay/assets/css/

شما در این پوشه یک فایل 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: byekan, b yekan, tahoma;
    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; 
}

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

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