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

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


چگونگی ایجاد صفحه جستجوی تمام صفحه در وردپرس

اولین چیزی که باید انجام دهید این است که افزونه وردپرسی WordPress Full Screen Search Overlay را نصب و فعال کنید.  افزونه WordPress Full Overlay Search بصورت خودکار کار می کند و تنظیماتی برای پیکربندی شما وجود ندارد.

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

 

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

 

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

 

سفارشی سازی جستجو به تمام صفحه

افزونه WordPress Full Screen Search Overlay با شیوه ی خاص خود کار می کند . برای تغییر ظاهر جستجو، شما باید فایل CSS افزونه را ویرایش  کنید.

شما باید اول وارد هاست خود شوید سپس ، شما باید پوشه CSS افزونه را پیدا کنید. شما آن را زیر مسیر زیر پیدا خواهید کرد:

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

شما یک فایل full-screen-search.css در پوشه 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 : none ;
     border-radius: ;
     -webkit-border-radius: ;
     -moz-border-radius: ;
     float : none ;
     font-size : ۱۰۰% ;
     height : auto ;
     letter-spacing : normal ;
     list-style : none ;
     outline : none ;
     position : static ;
     text-decoration : none ;
     text-indent : ;
     text-shadow : none ;
     text-transform : none ;
     width : auto ;
     visibility : visible ;
     overflow : visible ;
     margin : ;
     padding : ;
     line-height : ۱ ;
     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: ;
     z-index : ۹۹۹۹۹۸ ;
     top : ;
     left : ;
     width : ۱۰۰% ;
     height : ۱۰۰% ;
     background : #۱bc69e ;
 
     /**
     * Add some CSS3 transitions for showing the Full Screen Search
     */
     transition: opacity ۰.۵ s 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: ۱ ;
}
 
/**
* Search Form
*/
#full-screen-search form {
     position : relative ;
     width : ۱۰۰% ;
     height : ۱۰۰% ;
}
 
/**
* Close Button
*/
#full-screen-search button.close {
     position : absolute ;
     z-index : ۹۹۹۹۹۹ ;
     top : ۲۰px ;
     right : ۲۰px ;
     font-size : ۳۰px ;
     font-weight : ۳۰۰ ;
     color : #۹۹۹ ;
     cursor : pointer ;
}
 
/**
* Search Form Div
*/
#full-screen-search form div {
     position : absolute ;
     width : ۵۰% ;
     height : ۱۰۰px ;
     top : ۵۰% ;
     left : ۵۰% ;
     margin : -۵۰px -۲۵% ;
}
 
/**
* 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 : ۱۰۰% ;
     height : ۱۰۰px ;
     background : #eee ;
     padding : ۲۰px ;
     font-size : ۴۰px ;
     line-height : ۶۰px ;
     /* We have added our own font color here */
     color : #۵۰B0A6 ;
}

 

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

پس از اتمام کار، شما می توانید این فایل را به پوشه CSS افزونه با استفاده از هاست آپلود کنید. شما هم اکنون می توانید تغییرات خود را با بازدید از وب سایت خود ببینید.

 

فهرست