آموزش ایجاد جستجوی تمام صفحه در سایت وردپرس

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

آموزش ایجاد جستجوی تمام صفحه در سایت وردپرس

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

دانلود افزونه WordPress Full Screen Search Overlay

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

برای این که شما بتوانید استایل این جستجو را عوض کنید باید به فایل استایل افزونه دسترسی داشته باشید و باید به آدرس wp-contents/plugins/full-screen-search-overlay/assets/css بروید و در نهایت فایل full-screen-search.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: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:  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:  } #full-screen-search form div input:-moz-placeholder { font-family: Arial, sans-serif; color:  } #full-screen-search form div input::-moz-placeholder { font-family: Arial, sans-serif; color:  } #full-screen-search form div input:-ms-input-placeholder { font-family: Arial, sans-serif; color:  }   /** * Search Form Input */ #full-screen-search form div input { width: 100%; height: 100px; background:  padding: 20px; font-size: 40px; line-height: 60px; }   

این کدی که مشاهده می کنید ، کد استایل افزونه می باشد که در ادامه بخش های مختلف آن را برای شما معرفی می کنیم :
نکته اول : اگر به ابتدای کد دقت کنید شما فونت هایی که برای جستجوگر استفاده شده است را مشاهده می کنید که می توانید آنها را تغییر بدهید .
نکته دوم : اگر به کد نوشته شده در خط ۵۲ دقت کنید Background را مشاهده کنید که نشان دهنده ی پس زمینه پاپ آپ کل سایت می باشد ، در این بخش با تغییر کد background: rgba(255,255,255,0.95) در خط ۶۲ می توانید رنگ پس زمینه را تغییر دهید و این المان هایی که شما مشاهده می کنید نشان دهنده ی میزان شفافیت ، r،g،b می باشد .
نکته سوم : در خط ۶۵ هم قطعه کد نحوه ی نمایش دادن پس زمینه را می بینید.
نکته چهارم : در خط ۹۴ هم قطعه کد مربوط به تغییر استایل پاپ آپ است که با تغییر ویژگی color می توانید رنگ آن را عوض نمایید .
نکته پنجم : خطوط ۱۲۰ و ۱۴۰ هم مربوط به رنگ نوشته پیش فرض و پس زمینه جعبه جست جو می باشد .

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

منبع : بیگ تم ارائه دهنده قالب های وردپرس و هک وردپرس

You Might Also Like