ساخت فرم جستجو در وردپرس بصورت باز شونده

مقالات آموزشی
بروزرسانی شده در ۱۸ دی ۱۳۹۸

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

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

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

آنچه در این مقاله می‌خوانید

در ساخت فرم جستجو دقت کنید

فرم جستجو یکی از مهم‌ترین مواردی است که در سایت باید به آن توجه داشته باشید. لازم است که شما برای سایت خود یک فرم جستجو داشته باشید. توسط فرم جستجو کاربر امکان این را دارد که از میان مطالب مختلف موجود در سایت شما به‌راحتی مطلب موردنظر خود را پیدا کند.

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

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

این نکته را نیز در نظر داشته باشید که محل قرارگیری منو جستجو در سایت از اهمیت زیادی برخوردار است. کاربران باید بتوانند در کوتاه‌ترین زمان ممکن این منو را پیداکرده و از آن استفاده کنند. بهترین مکان برای قرارگیری منو بازشونده بالای سایت است. همچنین نکته مهم دیگری که باید به آن توجه کنید رنگ این فرم می‌باشد. شما باید رنگی متفاوت با رنگ زمینه سایت خود برای این منو در نظر بگیرید.

ساخت فرم جستجو در وردپرس

شما پس از نصب قالب خود امکان این را داریدکه درصورتی‌که آشنا با کد نویسی هستید آن را کاملاً سفارشی‌سازی کنید و مطابق با سلیقه و نیاز سایت خود در آن تغییراتی را به‌وجود آورید. افزودن جستجو بازشونده نیز یکی از کارهایی است که شما می‌توانید آن را توسط کد در سایت خود ایجاد کنید.

بنابراین برای انجام این کار شما نیاز به نصب هیچ افزونه‌ای ندارید و می‌توانید با استفاده از کد نویسی این کار را به‌راحتی انجام دهید. شما می‌توانید توسط این آموزش این فرم را در سایت خود در عرض چند دقیقه ایجاد کنید.

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

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

ساخت فرم جستجو در قالب وردپرس

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

تم‌های وردپرس از برچسب قالب برای نمایش فرم جستجو استفاده می‌کنند. خروجی فرم جستجو می‌تواند به دو شکل مختلف باشد. یکی برای تم‌های 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.webp باشد. حال لازم است که شما آیکون فرم جستجو را در پوشه تصاویر تم خود آپلود کنید. سپس کد زیر را به استایل قالب سایت خود اضافه کنید.

انجام این کار بسیار ساده است و شما می‌توانید به‌سادگی آن را انجام دهید. برای انجام این کار به وب‌سایت خود با استفاده از یک سرویس گیرنده 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.webp);
	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;
}

نتیجه‌‌گیری

شما باید به‌عنوان مدیر سایت بتوانید همواره نیاز کاربران خود را موردتوجه قرار داده و آن‌ها را برطرف نمایید. توجه داشته باشید که رعایت برخی موارد جزئی در سایت سبب می‌شود کاربر از سایت شما راضی باشد و بازهم به سایت شما مراجعه کند. این کار باعث می‌شود میزان بازدید سایت شما زیادتر شود.

در این آموزش با استفاده از چند قطعه کد به شما آموزش داده شد که چگونه این منو را در سایت خود ایجاد کنید. حتی کاربران مبتدی نیز با استفاده از این روش می‌توانند به‌راحتی منو جستجو را به سایت خود اضافه کنند.

موفق باشید. 🙂

تیم تولید محتوا

ما در تیم تولید محتوای میهن وردپرس در تلاش هستیم تا بهترین مقالات آموزشی در زمینه وردپرس و کسب‌و‌کارهای اینترنتی را تهیه کنیم. صحت محتوای این صفحه توسط رضا راد بررسی خواهد شد.