تبلیغات تبلیغات
حراجی دامنه های ویژهمشاهده
آخرین ارسال های تالار مشاهده انجمن
اسکریپت مدیریت هاست رایگان 0 پاسخ 18 بازدید افزونه Coins MarketCap 1 پاسخ 292 بازدید درخواست پلاگین 4 پاسخ 541 بازدید اسکریپت vfm 5 پاسخ 645 بازدید تغییر جهت محتوا در وردپرس 1 پاسخ 324 بازدید افزونه ساخت شماره مجازی 14 پاسخ 1177 بازدید درخواست افزونه 1 پاسخ 519 بازدید بهترین رباط اینستاگرام 0 پاسخ 2 بازدید درخواست قالب با سبک کندو 1 پاسخ 780 بازدید به هم ریختگی سایت بعد از نصب قالب 2 پاسخ 735 بازدید
تبلیغات
تبلیغات تبلیغات

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

وردپرس , مقالات,آموزش,ترفند

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

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

 

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

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

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

 

وردپرس کلاسهای 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;
}

موفق باشید

این مقاله چقدر براتون مفید بود؟

از ۱ تا ۵ امتیاز بدید.

میانگین رتبه 0 / 5. تعداد رای : 0

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

دانلود

هاست ارزان، لایت اسپید، سرور مجازی منطبق با اسکریپت های 20script کلیک کنید >
مطلب مفیدی بود ؟
نویسنده : تیم محتوای 20اسکریپت 0 وردپرس , مقالات,آموزش,ترفند
لینک کوتاه مطلب : https://www.20script.ir/?p=47093
کلمات کلیدی پست :
مطالب مرتبط
5,592افزایش امنیت بخش ورود وردپرس بدون افزونه تاریخ : 2018/06/20
13,779پوسته مجله خبری وردپرس Bimber نسخه 6.0 تاریخ : 2018/07/26
3,048دکمه مطالب بیشتر در وردپرس با Ajax تاریخ : 2019/10/26
5,468معرفی ۴ افزونه صدور فاکتور برای وردپرس تاریخ : 2019/11/10
11,164تعیین پوسته پیشفرض در وردپرس با فایل Config تاریخ : 2014/05/1
4,700چگونه وردپرس را در مقابل حملات XML-RPC محافظت کنیم تاریخ : 2020/08/26
8,064آموزش افزودن اطلاعات فردی به جستجوی گوگل تاریخ : 2017/09/12
15,133افزونه وردپرس چندزبانه کردن وب سایت GTranslate تاریخ : 2017/04/18
6,914افزونه افزودن آیکون Iconize نسخه 1.1.4 برای وردپرس تاریخ : 2015/02/19
19,254افزودنی ایجاد منوهای مگامنو در Elementor با افزونه JetMenu تاریخ : 2017/12/4
6,269افزونه نمایش اطلاعات نویسنده مطلب وردپرس WP – Author Box تاریخ : 2015/09/27
5,776افزونه برای ایجاد تقویم در وردپرس Sugar Event Calendar تاریخ : 2018/11/16
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت هاقالب عشق بین انگشت ها
قالب دخترونه و آرایشقالب دخترونه و آرایش
قالب زیبای ماشینقالب زیبای ماشین
قالب فانتزی و طنز چِشمقالب فانتزی و طنز چِشم
قالب دختر رویاییقالب دختر رویایی
قالب وبلاگ دکوراسیونقالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درختقالب وبلاگ کلبه و درخت
قالب دختر زیباقالب دختر زیبا
قالب پسرونه غمگینقالب پسرونه غمگین
قالب عاشقانه قلبقالب عاشقانه قلب
تبلیغات
تبلیغات