نحوه اضافه کردن جستجوی بازشونده به پوسته وردپرس

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

افزودن منوی باز شونده به وردپرس

نکته:این آموزش برای کسانی است از تگ های زبان های Html,Css آشنایی دارند لطفا برای یادگیری این دو زبان به منابع مورد نظر مراجعه کنید.اگر اول کار هستید ما به شما پیشنهاد می کنیم که این کار را اول در لوکال هاست انجام بدهند.

وردپرس استایل های css را به قالب html  که با استفاده از تگ های پوسته های متفاوت که در فایل های یک قالب تولید می شود اضافه می کند.

پوسته های وردپرس از تگ قالب <?php get_search_form(); ?>  برای نشان دادن قسمت جستجو بهره می برند.فرم های جستجو که تولید می شوند به دو صورت متفاوت می باشند یکی آنهایی که توسط html نسخه 4 پشتیبانی می شوند و دیگری آنها که با استفاده از نسخه html 5  پشتیبانی می شوند.

اگر در پوسته شما در فایل functions.php خطی با کد (‘add_theme_support(‘html5’, array(‘search-for قرار دارد و بعد تگ پوسته فرم جستجوی نسخه html5 را تولید می کند,که اگر اینطور نباشد فرم جستجویی که تولید می شود نسخه html4  خواهید داشت.

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

تگ پوسته ()get_search_form که زمانیکه پوسته سایت شما از html 5  پشتیبانی نمی شود نشان داده می شود.

<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>

و اگر پوسته شما از html 5 پشتیبانی می شود کدی بالا خروجی می شود.

<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 استفاده خواهیم کرد در صورتی که پوسته شما از html 4 پشتیبانی می شود لطفا کدی که در زیر قرار گرفته را در فایل فانکشن functions.php پوسته خود اضافه کنید.

add_theme_support('html5', array('search-form'));

افزودن آیکون به قسمت جستجوی سایت در وردپرس:

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

میتوانید آیکون فرم جستجو را خودتان طراحی کنید در نزم افزار هایی مثل فوتوشاپ که البته فراموش نکنید که در آخر نام فایل مورد نظر search-icon.png خواهد بود,اکنون باید این آیکون را در فولدر تصاویر پوسته در هاستتان آپلود کنید,بعد کدی که در زیر قرار گرفته از به استایل قالبتان یعنی فایل style.css اضافه کنید.

میتوانید وارد هاست خود شوید یا مثلا با ابزار های گیرنده  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;
}

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