آیا در بسیاری از وب سایت های معروف نماد جستجو را با اثر ضامن مشاهده کرده اید؟ برای مثال به پروژه خواهر ما List25 نگاهی بیندازید. ایده این است که یک نماد جستجوی ساده نمایش داده شود ، و هنگامی که کاربر بر روی آن کلیک می کند فرم های جستجو به صورت جلویی تغییر نام می یابد. این یک اثر شسته و رفته است که باعث صرفه جویی در فضا می شود و به کاربران شما اجازه می دهد تا روی محتوا تمرکز کنند. ناگفته نماند ، این برای تم های پاسخگو برای موبایل عالی است. در این مقاله ، ما به شما نشان خواهیم داد که چگونه می توانید جلوه ضامن جستجو را در تم های وردپرس اضافه کنید.
توجه: این آموزش برای کاربران میانی است که دارای دانش عملی برچسب های قالب وردپرس ، HTML و CSS هستند. به کاربران سطح مبتدی توصیه می شود که روی سرور محلی .
نمایش فرم جستجوی وردپرس h4>
وردپرس کلاسهای پیش فرض CSS به HTML ایجاد شده توسط برچسب های الگوی مختلف درون یک موضوع. مضامین وردپرس از برچسب الگو برای نمایش فرم جستجو. این می تواند از دو فرم جستجو مختلف ، یکی برای تم های HTML4 و دیگری برای تم با پشتیبانی از HTML5 ، خارج شود. اگر طرح زمینه شما دارای پرونده add_theme_support ('html5'، array ('search-form'))) در پرونده functions.php باشد ، این برچسب الگو از فرم جستجوی HTML5 خارج می شود. در غیر این صورت ، از فرم جستجوی HTML4 خارج می شود.
روش دیگر برای پیدا کردن اینکه فرم شما چه شکلی ایجاد می کند ، جستجوی کد منبع فرم جستجو است.
این فرم برچسب الگوی get_search_form () است که تم شما از HTML5 پشتیبانی نمی کند نمایش داده می شود:
و این شکلی است که برای یک موضوع با پشتیبانی از HTML5 ایجاد می کند.
به خاطر این آموزش ، ما از فرم جستجوی HTML5 استفاده خواهیم کرد. اگر طرح زمینه شما فرم جستجوی HTML4 را ایجاد می کند ، این خط کد را در پرونده توابع.php طرح زمینه خود اضافه کنید:
add_theme_support ('html5'، array ('فرم جستجو'))؛
پس از اطمینان از ایجاد فرم جستجوی خود در فرم HTML5 ، مرحله بعدی قرار دادن فرم جستجو در جایی است که می خواهید آن را با جلوه ضامن نمایش دهید.
افزودن جلوه Toggle به فرم جستجوی وردپرس h4>
اولین چیزی که شما نیاز دارید یک نماد جستجو است. قالب پیش فرض بیست و سیزده در وردپرس با یک آیکون بسیار زیبا همراه است ، و ما از آن در آموزش خود استفاده خواهیم کرد. با این حال ، در صورت تمایل خود را در فتوشاپ ایجاد کنید یا یکی را از وب بارگیری کنید. فقط مطمئن شوید که نام فایل search-icon.png است.
اکنون باید این نماد جستجو را در پوشه تصاویر طرح زمینه خود بارگذاری کنید. با استفاده از سرویس گیرنده FTP مانند Filezilla به وب سایت خود متصل شوید و فهرست زمینه خود را باز کنید.
اکنون این آخرین و مهمترین مرحله است. شما باید این CSS را به صفحه سبک طرح زمینه خود اضافه کنید:
.site-header .search-form {
موقعیت: مطلق؛
راست: 200 پیکسل
بالا: 200 پیکسل
}
.site-header .search-field {
background-color: transparent؛
background-image: url (images / search-icon.png)؛
موقعیت پس زمینه: مرکز 5 پیکسل؛
background-تکرار: بدون تکرار؛
اندازه پس زمینه: 24px 24px؛
مرز: هیچ؛
مکان نما: اشاره گر؛
ارتفاع: 37 پیکسل؛
حاشیه: 3px 0؛
بالشتک: 0 0 0 34px؛
موقعیت: نسبی؛
-webkit-transfer: عرض 400 میلی متر سهولت ، پس زمینه 400 میلی متر سهولت ؛
انتقال: عرض 400 میلی متر سهولت ، پس زمینه 400 میلی متر سهولت ؛
عرض: 0؛
}
.site-header .search-field: تمرکز {
background-color: #fff؛
حاشیه: 2px solid # c3c0ab؛
مکان نما: متن؛
رئوس مطالب: 0؛
عرض: 230 پیکسل
}
فرم جستجو
. جستجو-ارسال {
نمایش: هیچ؛
}
نکته مهمی که باید در مورد این CSS به آن توجه شود ، اثرات گذار CSS3 است که به ما امکان می دهد تا اثر ضامن را با سهولت ایجاد کنیم. همچنین توجه داشته باشید که همچنان باید موقعیت نماد و فرم جستجو را مطابق با طرح زمینه خود تنظیم کنید.
امیدواریم این مقاله به شما کمک کند تا جلوه ضامن جستجو را در قالب وردپرس خود اضافه کنید. نظر شما درباره فرم جستجوی ضامن چیست؟ ما شاهد سایت های بیشتری هستیم که از این اثر استفاده می کنند. نظرات و س questionsالات خود را در نظرات زیر بنویسید یا با ما در گفتگو در Google+ .