آموزش ساخت سرچ باکس در HTML + ویدیو آموزشی

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

⭐ (پیشنهاد می کنم برای یادگیری بهتر، ابتدا ویدیو بالا که قسمتی از دوره رایگان آموزش HTML CSS به زبان ساده است را ببینید سپس ادامه متن را مطالعه نمایید.)⭐

آموزش ساخت سرچ باکس در html

برای ایجاد سرچ باکس مراحل زیر را باید به ترتیب انجام دهیم:

• یک فرم ایجاد کنیم و با کد php فرم خود را پویا کنیم (یعنی این فرم بتواند در مطالب سایت به درستی جستجو کند)
• با استایل دهی ظاهر فرم خود را زیبا کنیم.
• یک صفحه ایجاد کنیم تا نتایج جستجو داخل آن صفحه نمایش داده شود.

1- ایجاد فرم جستجو با html و php

به صورت کلی هر کجا کاربر بخواهد چیزی در سایت ما بنویسد نیاز به ایجاد فرم داریم تا بتوانیم اطلاعات را از او دریافت کنیم. ساخت جستجوگر سایت هم از این قاعده مستثنی نیست. در ادامه به صورت عملی یک فرم جستجو ایجاد می کنیم و راجع به آن توضیحات مورد نیاز را ارائه می کنیم. (برای آشنایی بیشتر با فرم ها می توانید مقاله تگ Form در HTML را مطالعه کنید)

<form method="get" action="<?php home_url('/'); ?>">
<input type="text" name="s" value="<?php the_search_query(); ?>" placeholder="جستجو کنید...">
<button class="fas fa-search"></button>
</form>

form: تگ باز و بسته <form> برای ما یک فرم ایجاد می کند. این تگ دارای دو خصوصیت method و action می باشد که باید مقادیر آن را تعیین کنیم.

method=get: باعث می شود هر چیزی کاربر جستجو می کند در URL هم ظاهر شود.

action: خصوصیت اکشن تعیین می کند که کاربر بعد از کلیک به کجا هدایت شود. ما می خواهیم به صفحه اصلی هدایت شده و جستجو را در آنجا انجام دهد. برای اینکار به یک کد php نیاز داریم. مقدار home_url ما را به صفحه اصلی هدایت می کند و جلو آن یک اسلش (/) قرار می دهیم تا کلمه ای که سرچ می کند را بعد از این اسلش قرار دهد. برای مثال زمانی که ما عبارت «آموزش طراحی قالب وردپرس» را جستجو کنیم حالت نهایی به صورت زیر نوشته و اجرا می شود:

action=”<?php home_url(‘/’);

نتیجه

⇓ 

نکته: تا اینجا فرم خود را به وجود آورده و تعیین کردیم در بک اند (پشت صحنه) چه اتفاقی رخ دهد. از این به بعد باید باکس خود را به وجود بیاوریم و مقادیر آن را مشخص کنیم.

input: تگ <input> یک باکس به وجود می آورد که کاربر می تواند اطلاعاتی در آن وارد کند. input تگ بسته ندارد و مقادیر مانند type، name، value و placeholder می گیرد که در زیر درباره آنها توضیح می دهیم.

type=text: خصوصیت type می تواند مقادیر متفاوتی از نوع متن، ایمیل، چک باکس و … دریافت کند. برای جستجو مقدار text را برای آن قرار می دهیم زیرا کاربر یک کلمه یا متن را جستجو می کند

name=s: برای جستجو همیشه این مقدار را می نویسیم و ثابت است.

value: می خواهیم کاربر هر چیزی را جستجو کرد بعد از زدن اینتر حذف نشود و در کادر جستجو بماند. برای اینکار مقدار value را به صورت زیر تعریف می کنیم (تابعی که برای آن نوشتیم یک تابع تعریف شده است و همیشه ثابت است)

value=”<?php the_search_query(); ?>”

placeholder: هر چیزی جلو placeholder بنویسیم به صورت کمرنگ در کادر جستجو نشان داده می شود.

button: برای ایجاد دکمه از تگ button در html  استقاده می کنیم. برای کادر سرچ باید یک دکمه در نظر بگیریم که کاربر بعد از نوشتن متن روی آن کلیک کند. در اینجا ما از یک آیکن برای دکمه استفاده کرده ایم (این آیکن یکی از آیکن های سایت Font Awesome می باشد که در قالب خود آن را تعریف کرده ایم)

نتیجه کار تا اینجا

⇓

2- آموزش ساخت فرم جستجو با css

همانطور که مشاهده می کنید فرم جستجو به درستی اجرا شده ولی ظاهر درستی ندارد. این کار به راحتی با css درست می شود. کافی است مقداری با استایل دهی آشنا باشید. (اگر با استایل دهی آشنا نیستید می توانید برای یاددگیری از آموزش رایگان html css وبسافت3 استفاده کنید که لینک آن را در ابتدای همین صفحه برای شما قرار داده ایم.)

برای ایجاد ظاهری زیبا استایل های زیر را به فرم خود می دهیم:

 input[type="text"] {
width: 600px;
outline: 0;
padding: 17px 13px;
transition: all .2s;
font-family: iransans;
background: none;
}

button {
float: left;
padding: 18px 0 17px 25px;
font-size: 20px;
color: #95a5a6;
cursor: pointer;
}

ساخت سرچ باکس با جاوا اسکریپت

ساخت سرچ باکس با جاوا اسکریپت در حالتی که میخواهید با کلیک روی آیکون سرچ، فرم جستجو ظاهر شود کاربرد دارد برای این کار کافیست کل فرم جسجو را که بالاتر ایجاد کردیم داخل یک div با کلاس مشخص قرار دهید بعنوان مثال div با کلاس .searchbox و آن را از طریق css با خصوصیت display:none مخفی کنید تا کل فرم جستجو مخفی شود حالا میخواهیم با کلیک روی یک آیکون فرم جستجو ظاهر شود…

قدم اول این است که برای آیکون مورد نظر یک کلاس در نظر بگیرید ضمنا مهم نیست آیکون را از چه طریقی ایجاد کردید آیکون شما میتواند یک عکس باشد یا فونت آیکون، چیزی که نیاز دارد فقط یک کلاس است که با نام دلخواه به آن اختصاص میدهید. بعنوان مثال نام کلاس را .search-icon قرار میدهیم حالا کافیست تکه کد زیر را در فایل js خود قرار دهید تا پروژه ساخت سرچ باکس با جاوا اسکریپت بدرستی عمل کند. (اگر فایلی برای نوشتن جاوا اسکریپت در قالب خود ندارید میتوانید در همان فایل html یک تگ <script></script> به این شکل باز کنید و کد زیر را داخل آن قرار دهید)

$(document).ready(function (){
$('.search-icon').click(function (){
$('.searchbox').slideToggle();
})
});

3- ایجاد یک صفحه برای نمایش نتایج جستجو

با انجام کارهای بالا یک کادر جستجوی بسیار زیبا داریم که به درستی عمل می کند و با جستجوی کاربر نتایج را پیدا می کند ولی نمایش نمی دهد. چرا؟ زیرا برای نمایش نتایج صفحه ای وجود ندارد و جایی برای نمایش وجود ندارد.

ایجاد یک صفحه برای نمایش نتایج سرچ بسیار ساده است کافی است یک صفحه با نام search.php در صفحه اصلی قالب خود ایجاد کنیم و کدهای زیر را داخل آن بنویسیم:

<?php
if (have_posts()) :
while (have_posts()) : the_post(); ?>

<div class="box-serch">
<?php
the_post_thumbnail();
?>
<h2><a href="<?php the_permalink(); ?>" target="_blank"><?php the_title(); ?></a></h2>
<?php the_excerpt(); ?>
<div class="btn-more"><a href="<?php the_permalink(); ?>" target="_blank">بیشتر بخوانید</a></div>
</div>

<?php
endwhile;
endif;
?>

جمع بندی | آموزش ساخت سرچ باکس در html

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