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

آموزش وردپرس

fullscreensearchoverlay

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

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

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

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

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

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

اولین کاری که باید انجام بدید این هستش که افزونه WordPress Full Screen Search Overlay رو نصب و فعال کنید. افزونه “جستجو تمام صفحه وردپرس” هیچگونه تنظیماتی نداره و نگران سنگین شدن یا … وب سایت نباشید این افزونه در کل ۵ کیلوبایت هست!

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

پیش نمایش جستجو تمام صفحه

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

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

افزونه جستجو تمام صفحه وردپرس یک فایل 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; 
}

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

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

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

یادداشت مهم:
اگه شما تغییراتی در فایل CSS افزونه اعمال کنید بعد از بروزرسانی از بین میره پس قبل از بروزرسانی از فایل CSS بک آپ بگیرید!

امیدوارم مفید باشه! همچنین پیشنهاد میکنم مطالب آموزش وردپرس ما رو دنبال کنید.

سوالات و مشکلات خود را در دیدگاه ها بیان کنید، حتما پاسخ خواهیم داد.

دیدن این مطالب رو به شما پیشنهاد میکنیم...

۷ دیدگاه برای این مطلب ارسال شده است

  1. سلام دوست عزیز وقت بخیر
    یک سوال از خدمتتون داشتم.
    چند وقته فروشگاه اینترنتی راه اندازه کردم و وبسایتم مربوط به فروشگاه اینترنتی موبایل است. بعد از یک مدت برای اینکه تعداد بازدیدکننده ها وبسایت را افزایش بدیم تصمیم گرفتیم که بخش آخرین اخبار موبایل رو هم به وبسایت اضافه کنیم و اخبار مربوط به این بخش رو در اختیار علاقه مندان قرار بدیم.
    برای اینکه رنگ سایت پیشرفت داشته باشه و بهبود پیدا کنه مقالات آموزش سئو رو بررسی کردم. در یکی از این مقالات نوشته بود که استفاده از افزونه های زیاد وردپرس تاثیر منفی روی سئوی سایت میذاره.
    میخواستم شما که در این زمینه فعالیت دارید نظر کارشناسیتونو به من بدید
    خیلی ممنون

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *