جستجوی تمام صفحه سایت با WordPress Full Screen Search OverlayReviewed by محمد امین مجیدی on May 24Rating: جستجوی تمام صفحه سایت با WordPress Full Screen Search Overlayدر مقاله جستجوی تمام صفحه سایت با WordPress Full Screen Search Overlay نحوه قرار دادن جستجوی سایت به صورت تمام صفحه مانند سرچ همیاروردپرس راتوضیح خواهیم داد
سلام دوستان
مقاله ای که امروز آماده کرده ایم ویژه ایجاد قابلیت جستجو به صورت تمام صفحه (پاپ آپ) می باشد که خیلی از مدیران سایت ها به دنبال آن هستند. امروزه قابلیت جستجو به صورت تمام صفحه در اکثر سایت ها دیده می شود و کاملا می توان گفت استفاده از این قابلیت در سایت ها فراگیر شده است. قابلیت جستجوی تمام صفحه علاوه بر زیبایی، برای صفحه نمایش های کوچکتر مانند موبایل ها بسیار کاربردی است و کاربر با کلیک بر روی دکمه جستجو می تواند متن دلخواهش را به آسانی و کاملا واضح تایپ نماید.
این افزونه تنها از قابلیت جستجوی وردپرس پشتیبانی می کند و متاسفانه از افزونه جستجوی گوگل پشتیبانی به عمل نمی آورد.
نحوه کار افزونه به این صورت است که با کلیک بر روی کادر جستجوی سایت، جعبه جستجو سایت به صورت تمام صفحه باز می شود و می توانید متن مورد نظرتان را در آن تایپ نمایید.
حتما بخوانید ایجاد دسترسی محدود برای نویسندگان با Restrict Author Posting
در ضمن قالب کلی آن را هم می توانید تغییر دهید و استایل مورد علاقه تان را با تغییر فایل css آن ایجاد نمایید.
افزونه فوق را در پنل وردپرس نصب نمایید تا به صورت خودکار تنظیمات انجام شود. برای شخصی سازی قالب جستجوی تمام صفحه و تغییر رنگ ها و انیمیشن آن بخش زیر را مطالعه نمایید.
برای دسترسی به فایل استایل (css.) افزونه باید به آدرس wp-contents/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: 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; }
کد بالا همان کد استایل افزونه است که به بخش های مختلف آن میپردازیم:
حتما بخوانید ارسال پرسش ناشناس با Ask me anything
با استفاده از این افزونه به راحتی یک کلیک و بدون هیچ کدنویسی ای می توانید قابلیت جستجوی تمام صفحه را به سایت بیاورید.
توجه!!! به صفحه پیش نمایش آنلاین بروید و بر روی باکس جستجو در ستون سمت چپ کلیک نمایید تا عملکرد این افزونه را مشاهده نمایید.
A laptop, A coffee, A table, That's My World
برچسب : نویسنده : جمشید رضایی بازدید : 168