با نحوه ایجاد جستجوی تمام صفحه در سایت وردپرس آشنا شوید.
در این مطلب بر آنیم تا شما را با نحوه ایجاد جستجوی تمام صفحه در سایت ورد÷رس آشنا کنیم.اگر شما هم یکی از کاربران وردپرس هستید مطالب ما را از دست ندهید.
امروزه در بیشتر سایت ها جستجوی تمام صفحه به صورتی رواج پیدا کرده است و همه گیر شده!!!!! و حتما شما وب مستران عزیز هم به دنبال روشی هستید که از این جست و جوی در وب سایت وردپرسی خود بهره مند شوید و این مدل جستجوی تمام صفحه علاوه بر زیبایی که برای وب سایت شما دارد ، می تواند در گوشی های همراه که صفحه ی کوچکتری دارند به صورت کاربردی تر باشد و کاربران شما می توانند به راحتی و با کلیک بر روی جست و جو ، متن مورد نظر خودشان را را وارد کنند و می توانند این متن را به صورت واضح تری هم مشاهده کنند . تنها نکته ای که در اینجا وجود دارد این است که این افزونه ی وردپرسی که امروز برای شما معرفی می کنیم تنها از قابلیت جستوجو وردپرس پشتیبانی می کند و از افزونه جست و جوی گوگل پشتیبانی ندارد . برای آشنایی بیشتر با این افزونه وردپرسشما می توانید آن را از لینک زیر دانلود کنید :
پس از این که افزونه را از لینک فوق دانلود کردین در وب سایت خود نصب و فعال سازید و چگونگی عملکرد این افزونه به این صورت می باشد که شما با کلیک کردن بر روی کادر جست و جوی سایت ، باکس جست و جوی را به صورت تمام صفحه باز می شود و شما می توانید متن و عبارت مورد نظر خودتون را بنویسید و جست و جو کنید و همچنین شما می توانید استایل کلی آن را عوض کنید و استایل مورد نظر خود را قرار دهید و برای این کار شما باید فایل 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: #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;
این کدی که مشاهده می کنید ، کد استایل افزونه می باشد که در ادامه بخش های مختلف آن را برای شما معرفی می کنیم :
نکته اول : اگر به ابتدای کد دقت کنید شما فونت هایی که برای جستجوگر استفاده شده است را مشاهده می کنید که می توانید آنها را تغییر بدهید .
نکته دوم : اگر به کد نوشته شده در خط 52 دقت کنید Background را مشاهده کنید که نشان دهنده ی پس زمینه پاپ آپ کل سایت می باشد ، در این بخش با تغییر کد background: rgba(255,255,255,0.95) در خط 62 می توانید رنگ پس زمینه را تغییر دهید و این المان هایی که شما مشاهده می کنید نشان دهنده ی میزان شفافیت ، r،g،b می باشد .
نکته سوم : در خط 65 هم قطعه کد نحوه ی نمایش دادن پس زمینه را می بینید.
نکته چهارم : در خط 94 هم قطعه کد مربوط به تغییر استایل پاپ آپ است که با تغییر ویژگی color می توانید رنگ آن را عوض نمایید .
نکته پنجم : خطوط 120 و 140 هم مربوط به رنگ نوشته پیش فرض و پس زمینه جعبه جست جو می باشد .
منبع:بیگ تم
