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

سلام و درود به شما دوستان عزیز و همراهان گرامی مِستر آموز.

 

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

 

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

<?php get_search_form(); ?>

 

خروجی فرم به 2 شکل می تواند باشد. برای تم های HTML4 و برای HTML5  به 2 شکل متفاوت پشتیبانی می شود.

اگر تم شما خط (‘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" />

 

ما اینجا از فرم جستجوی 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;
}

 

موفق و پیروز باشید.