امروز پنج شنبه ۷ فروردین ۱۴۰۴

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

افکت های سی اس اس

مرجع افکت های طراحی وب CSS۳

افکت های جیکوئری

افکت های آجاکس و جیکوئری طراحی وب

مرجع وردپرس

قالب ها و افزونه های حرفه ای وردپرس

مرجع اسکریپت

اسکریپت های کلون و نال شده آماده

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

آموزش ها, وردپرس

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

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

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

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

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

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

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

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

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

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

<div><label class="screen-reader-text" for="s">Search for:</label>

</div>

</form>

و این فرم تولید می شود زمانیکه تم شما از HTML۵ پشتیبانی می کند.

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

<label>

<span class="screen-reader-text">Search for:</span>

</label>

</form>

در این آموزش از فرم جستجوی HTML۵ استفاده می کنیم. اگر تم شما فرم جستجوی HTML۴ را تولید می کند، خط کد زیر را در فایل functions.php تم خود اضافه کنید:

add_theme_support('html۵', array('search-form'));

۱	add_theme_support('html۵', array('search-form'));

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

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

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

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

.site-header .search-form {
	position: absolute;
	right: ۲۰۰px;
	top: ۲۰۰px;
}

.site-header .search-field {
	background-color: transparent;
	background-image: url(images/search-icon.png);
	background-position: ۵px center;
	background-repeat: no-repeat;
	background-size: ۲۴px ۲۴px;
	border: none;
	cursor: pointer;
	height: ۳۷px;
	margin: ۳px ۰;
	padding: ۰ ۰ ۰ ۳۴px;
	position: relative;
	-webkit-transition: width ۴۰۰ms ease, background ۴۰۰ms ease;
	transition:         width ۴۰۰ms ease, background ۴۰۰ms ease;
	width: ۰;
}

.site-header .search-field:focus {
	background-color: #fff;
	border: ۲px solid #c۳c۰ab;
	cursor: text;
	outline: ۰;
	width: ۲۳۰px;
}
.search-form
.search-submit { 
display:none;
}

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

۲۳

۲۴

۲۵

۲۶

۲۷

۲۸

۲۹

۳۰

۳۱

۳۲

۳۳

۳۴

.site-header .search-form {

position: absolute;

right: ۲۰۰px;

top: ۲۰۰px;

}

.site-header .search-field {

background-color: transparent;

background-image: url(images/search-icon.png);

background-position: ۵px center;

background-repeat: no-repeat;

background-size: ۲۴px ۲۴px;

border: none;

cursor: pointer;

height: ۳۷px;

margin: ۳px ۰;

padding: ۰ ۰ ۰ ۳۴px;

position: relative;

-webkit-transition: width ۴۰۰ms ease, background ۴۰۰ms ease;

transition: width ۴۰۰ms ease, background ۴۰۰ms ease;

width: ۰;

}

.site-header .search-field:focus {

background-color: #fff;

border: ۲px solid #c۳c۰ab;

cursor: text;

outline: ۰;

width: ۲۳۰px;

}

.search-form

.search-submit {

display:none;

}

آخرین بروزرسانی مطلب : ۱۹ مرداد ۱۳۹۸
منبع مطلب : فری اسکریپت

۲۰۳ بازدید

محمد

۱۹ مرداد ۱۳۹۸

جدیدترین نسخه سی ام اس ها

وردپرس فارسی نسخه ۴/۴/۲
تاریخ انتشار : ۱۹ مرداد ۱۳۹۸

جوملا فارسی نسخه ۳/۴/۸
تاریخ انتشار : ۱۹ مرداد ۱۳۹۸

پرستاشاپ فارسی نسخه ۱/۶/۱/۲
تاریخ انتشار : ۱۹ مرداد ۱۳۹۸

دروپال فارسی نسخه ۷/۴۱
تاریخ انتشار : ۱۹ مرداد ۱۳۹۸

پیوندها

برچسب‌ها

دسته بندی مطالب

تماس با ما / نمونه کارها / نقشه سایت

کلیـه حقــوق مـادی و معنوی این وبسایت محفـوظ می باشد.

میزبانی توسط سرورهای قدرتمند هاست دانلود

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

افکت های سی اس اس

افکت های جیکوئری

مرجع وردپرس

مرجع اسکریپت

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

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

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

مطالب پیشنهادی

جدیدترین نسخه سی ام اس ها

پیوندها

برچسب‌ها

دسته بندی مطالب