خوش آمدید!

برای دریافت آخرین بروزرسانی‌های افزونه، استایل و ... نیازمند ثبت‌نام در انجمن می‌باشید تا با ما بروز بمانید!

ثبت نام!
آموزشهای وردپرس

WALKER

مدیر کل انجمن
تاریخ ثبت‌نام
11/13/18
نوشته‌ها
6,123
پسندها
5,533
امتیازها
113
محل سکونت
tehran
آنتی ویروس
2609

افزودن جستجوی باز شونده به قالب وردپرس

آیکون جستجو همراه با دکمه باز شونده در اکثر سایتهای محبوب دیده می شود. ایده اینست که برای نمایش یک آیکون جستجوی ساده، زمانیکه کاربر بر روی اشکال جستجو کلیک می کند، یک اسلاید به عنوان اثر ضامن شناخته می شود.

این امر باعث می شود که کاربران بر روی محتوا تمرکز کنند. در این مقاله می خواهم نحوه ساخت یک دکمه جستجوی باز شونده در وردپرس را آموزش دهم.

2610


توجه: این آموزش برای کاربران سطح متوسط که از برچسب های قالب و HTML و CSS اطلاع دارند می باشد.

به کاربران سطح مبتدی توصیه می شود که بر روی سرور محلی تمرین کنند.

وردپرس کلاسهای CSS پیش فرض را به HTML که توسط برچسب های قالب مختلف در داخل یک تم تولید می شود، اضافه می کند.

تم های وردپرس از برچسب قالب <?php get_search_form(); ?> برای نمایش فرم جستجو استفاده می کند. خروجی فرم جستجو می تواند به دو شکل مختلف باشد. یکی برای تم های HTML4 و دیگری برای تم هایی که با HTML5 پشتیبانی می شوند.

اگر تم شما خط (‘add_theme_support(‘html5’, array(‘search-form را در فایل functions.php دارد، سپس برچسب قالب، فرم جستجوی HTML5 را خروجی می دهد. در غیر اینصورت خروجی فرم جستجوی HTML4 خواهد بود.

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

این هست برچسب قالب ()get_search_form که وقتیکه تم شما توسط HTML5 پشتیبانی نمی شود، نمایش داده می شود.

کد:
<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
    <div><label class="screen-reader-text" for="s">Search for:</label>
        <input type="text" value="" name="s" id="s" />
        <input type="submit" id="searchsubmit" value="Search" />
    </div>
</form>
و این فرم تولید می شود زمانیکه تم شما از HTML5 پشتیبانی می کند.

کد:
<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
    <label>
        <span class="screen-reader-text">Search for:</span>
        <input type="search" class="search-field" placeholder="Search …" value="" name="s" title="Search for:" />
    </label>
    <input type="submit" class="search-submit" value="Search" />
</form>
در این آموزش از فرم جستجوی HTML5 استفاده می کنیم. اگر تم شما فرم جستجوی HTML4 را تولید می کند، خط کد زیر را در فایل functions.php تم خود اضافه کنید:

کد:
add_theme_support('html5', array('search-form'));

اضافه کردن اثر ضامن به فرم جستجوی وردپرس

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

هر چند شما می توانید در فتوشاپ آنرا ایجاد کنید یا آنرا از وب دانلود کنید. در هر صورت باید مطمئن شوید که نام فایل search-icon.png باشد. حال شما نیاز است که این آیکون فرم جستجو را در پوشه تصاویر تم خود آپلود کنید. سپس کد زیر را به استایل قالب اضافه کنید.

برای اینکار به وب سایت خود با استفاده از یک سرویس گیرنده FTP مانند Filezilla وصل شوید، سپس پوشه تم خود را باز کنید.

کد:
.site-header .search-form {
    position: absolute;
    right: 200px;
    top: 200px;
}

.site-header .search-field {
    background-color: transparent;
    background-image: url(images/search-icon.png);
    background-position: 5px center;
    background-repeat: no-repeat;
    background-size: 24px 24px;
    border: none;
    cursor: pointer;
    height: 37px;
    margin: 3px 0;
    padding: 0 0 0 34px;
    position: relative;
    -webkit-transition: width 400ms ease, background 400ms ease;
    transition:         width 400ms ease, background 400ms ease;
    width: 0;
}

.site-header .search-field:focus {
    background-color: #fff;
    border: 2px solid #c3c0ab;
    cursor: text;
    outline: 0;
    width: 230px;
}
.search-form
.search-submit {
display:none;
}

موفق باشید.
 
  • Love
واکنش‌ها[ی پسندها]: Admin
ارسال کننده موضوعات مشابه انجمن پاسخ ها تاریخ
maede مباحث و مشکلات افزودن ویجت به صفحه اصلی پشتیبانی زنفورو 0
maede آموزش افزودن ابزارک (تولبار) به ادیتور متن در چتروم پشتیبانی زنفورو 2
I مباحث و مشکلات افزودن فونت به ادیتور زنفورو پشتیبانی زنفورو 5
sslri آموزش افزودن ابزارک تب بندی jQuery به وردپرس آموزشهای وردپرس 0
WALKER آموزش افزودن ssl و https به سایت وردپرسی آموزشهای وردپرس 0
WALKER آموزش افزودن آیکون دلخواه به پست تایپ های سفارشی آموزشهای وردپرس 0
WALKER آموزش افزودن فرم تماس بصورت پاپ آپ در وردپرس آموزشهای وردپرس 0
WALKER آموزش افزودن لینک سفارشی به نوار ابزار وردپرس آموزشهای وردپرس 0
WALKER آموزش افزودن اسکرول به بالا با استفاده از jQuery آموزشهای وردپرس 0
WALKER آموزش افزودن شماره تلفن قابل کلیک به سایت آموزشهای وردپرس 0
WALKER دانلود JetGuten - Blocks Set Addon for Gutenberg Editor v1.1.2 افزونه افزودن قابلیت های جدید به گوتنبرگ افزونه های وردپرس 0
WALKER آموزش افزودن فرمت مجاز برای آپلود در رسانه وردپرس آموزشهای وردپرس 0
WALKER آموزش افزودن تگ Hreflang به وردپرس برای افزایش سئو آموزشهای وردپرس 0
WALKER آموزش افزودن شماره صفحات به وردپرس بدون افزونه آموزشهای وردپرس 0
WALKER آموزش غیر فعال شدن دکمه افزودن پرونده چند رسانه‌ای در وردپرس آموزشهای وردپرس 0
WALKER آموزش افزودن شبکه‌های اجتماعی به منو سایت وردپرس آموزشهای وردپرس 0
WALKER آموزش افزودن آیکون به منوهای وردپرس آموزشهای وردپرس 0
WALKER دانلود افزودن مطلب توسط کاربر در وردپرس WP User Frontend Pro Business - Ultimate Frontend Solution For WordPress v3.4.1 افزونه های وردپرس 16
WALKER آموزش افزودن نمودار تغییرات قیمت محصولات به ووکامرس آموزشهای وردپرس 0
WALKER آموزش کد افزودن تصویر شاخص مطالب در پنل مدیریت وردپرس آموزشهای وردپرس 0
WALKER دانلود افزونه افزودن فیلد دلخواه در ووکامرس WooCommerce Checkout Fields & Fees v7.7 افزونه های وردپرس 10
Magical اندروید دانلود Add Music to Voice Premium 1.7 - نرم افزار افزودن موزیک به صدای ضبط شده برای اندروید نرم افزارهای اندروید 0
Magical اندروید دانلود Add Audio to Video: Music Video Editor Pro 1.7 - نرم افزار افزودن موزیک به ویدیو برای اندروید نرم افزارهای اندروید 0
Magical اندروید دانلود PixelLab - Text on pictures 1.9.2 - نرم افزار افزودن متن روی تصاویر برای اندروید نرم افزارهای اندروید 0
Magical اندروید دانلود Phonto Pro - Text on Photos 1.7.19 - نرم افزار افزودن متن به تصاویر برای اندروید نرم افزارهای اندروید 0
Admin آموزش آموزش فعالسازی جستجوی پیشرفته در دسکتاپ ویندوز 10 آموزش های سیستم عامل ویندوز 0
WALKER دانلود WP Domain Checker v5.0.4 - WordPress Domain Name Availability افزونه جستجوی دامنه در وردپرس و ووکامرس افزونه های وردپرس 3
WALKER آموزش تغییر آدرس ( Slug ) صفحه جستجوی وردپرس آموزشهای وردپرس 0
WALKER آموزش تغییر آدرس جستجوی پیش فرض وردپرس بدون نیاز به افزونه آموزشهای وردپرس 0
boxtarahi لایه باز رابط کاربری موبایل (UI, UX) طرح لایه باز رابط کاربری 0
boxtarahi لایه باز پرچم ایران (پارت اول) طرح لایه باز رابط کاربری 0
WALKER بسته شد اکانت پرمیوم سایت مووی باز MovieBaz اکانت پرمیوم سایت های فیلم 1

موضوعات مشابه

بالا