آموزش ساخت فیلد جستجوی پاپ آپ در المنتور- سلام رفیق! 😘💚
چطوری؟ امیدوارم امروزت پر از حال خوب و انرژی مثبت شروع شده باشه. 🌟
میدونی، یکی از ویژگیهای مهم هر سایت حرفهای، یه بخش جستجوی کارآمد و جذابه؛ بخشی که نه تنها کاربرا عاشقش بشن، بلکه تجربهشون از سایتت رو هم چندین برابر بهتر کنه.
✨ تصور کن! یه فیلد سرچ شیک و حرفهای به صورت پاپ آپ داشته باشی که کاربرا بتونن خیلی راحت بین مقالات و محصولات سایتت دنبال چیزی که میخوان بگردن و سریع پیداش کنن جالب نیس؟
💡 حالا سوال اینه: چطوری همچین چیزی رو طراحی کنیم؟ اصلاً جای نگرانی نیست، چون تو این آموزش، مرحله به مرحله کنارت هستم. همه چیزو با هم یاد میگیریم تا بتونی با المنتور، یه فیلد جستجوی مدرن و کاربردی بسازی که مثل الماس تو سایتت بدرخشه! 💎
پس خودتو آماده کن، چون قراره با هم یه تجربه هیجانانگیز و آموزنده داشته باشیم. تا آخر این مقاله همراه من باش و ببین چطوری یه قابلیت عالی به سایتت اضافه میشه! 🚀
✨ فیلم و سریال های جدید رو از اینجا دانلود کن✨ کلیک کن AD
چرا جستجوی پاپ آپ (popup)؟ 🤔
خب اول از همه، به این سوال جواب میدم که پاپآپ چیه اصلاً؟
پاپآپ یه جور المان یا پنجره هست که وقتی کاربر روی یه دکمه یا آیکون کلیک میکنه، یهو ظاهر میشه و توجه رو به خودش جلب میکنه. انگار یه قاب جداگانه باز میشه که کاربر میتونه توش کاری انجام بده، مثلاً جستجو کنه، فرم پر کنه یا اطلاعات خاصی رو ببینه.
حالا چرا پاپآپ را برای فیلد جستجو انتخاب کردیم؟ چون:
1️⃣ ظاهر جذاب و مدرن: این قاب شیک که یهو باز میشه، حس حرفهای بودن سایت رو چند برابر میکنه. دیگه لازم نیست یه فیلد جستجو همیشه وسط صفحه باشه، پاپآپ میاد و همه چی رو مرتب و خاص نشون میده.
2️⃣ تمرکز کامل کاربر روی جستجو: وقتی پاپآپ باز میشه، همه حواس کاربر فقط به اون قاب و جستجو جمع میشه. دیگه چیزای اضافی مثل تبلیغات یا موارد پرتکننده حواس نیستن.
3️⃣ صرفهجویی در فضا: بجای اینکه یه جای بزرگ از سایت رو به فیلد جستجو اختصاص بدی، پاپآپ همه چیزو جمعوجور میکنه. فقط یه دکمه کوچیک کافیه تا کاربر با کلیک، یه فضای کامل و حرفهای برای جستجو داشته باشه.
4️⃣ سرعت و دسترسی آسون: با یه کلیک ساده، کل جستجو در دسترس کاربره. لازم نیست تو صفحه بالا پایین بره یا دنبال فیلد بگرده.
5️⃣ هیجان و جذابیت: پاپآپ حس زنده بودن به سایتت میده. انگار سایت داره با کاربر تعامل میکنه، و این خودش یه تجربه فوقالعاده میسازه.
✨ پس خلاصه بگم: پاپآپ یعنی چیزی که یهو ظاهر میشه و کل حواس کاربر رو جمع میکنه. حالا اگه این قابلیت رو برای جستجو بذاری، هم ظاهر سایتت شیکتر میشه، هم کاربرا راحتتر دنبال چیزی که میخوان میگردن.
مراحل ساخت فیلد جستجوی پاپ آپ در المنتور 🛠️
حالا که فهمیدیم چرا جستجوی پاپآپ میتونه سایت رو جذابتر و کاربرپسندتر کنه، وقتشه که خودمون دست به کار بشیم و فیلد جستجوی پاپآپ رو تو سایت بسازیم. با المنتور این کار خیلی آسونه! فقط کافیه یه سری مراحل ساده رو دنبال کنی.

1️⃣ افزودن کد PHP به فایل functions.php
برای ایجاد فیلد جستجوی پاپ آپ
برای شروع، باید یه کد PHP رو به فایل functions.php
سایتت اضافه کنی. این کد به سایت کمک میکنه که فیلد جستجوی پاپ آپ رو به درستی بارگذاری و اجرا بشه. فقط کافیه که کد زیر رو کپی کنی و در فایل functions.php
قرار بدی:
// Popup Search Field by RayaWp.ir
function raya_wp_search_shortcode() {
ob_start();
$search_type = isset($_GET['search_type']) ? $_GET['search_type'] : 'articles';
?>
<button id="openSearchPopup" class="search-popup-button">🔍 جستجو</button>
<div id="searchPopup" class="search-popup">
<div class="search-popup-content">
<form method="get" action="<?php echo home_url('/'); ?>" id="searchForm">
<div class="search-field-wrapper">
<input type="search" class="search-field" placeholder="تایپ + کلید اینتر" value="<?php echo get_search_query(); ?>" name="s" title="<?php echo esc_attr_x('جستجو برای:', 'label'); ?>" />
</div>
<div class="search-filters">
<span class="filter-text">فیلتر نتایج جستجو :</span>
<label class="filter-option">
<input type="radio" name="search_type" value="products" <?php echo $search_type == 'products' ? 'checked' : ''; ?>>
<span class="filter-label">محصولات</span>
</label>
<label class="filter-option">
<input type="radio" name="search_type" value="articles" <?php echo $search_type == 'articles' ? 'checked' : ''; ?>>
<span class="filter-label">مقالات</span>
</label>
</div>
</form>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const openButton = document.getElementById('openSearchPopup');
const popup = document.getElementById('searchPopup');
const searchField = document.querySelector('.search-field');
const searchForm = document.getElementById('searchForm');
openButton.addEventListener('click', function () {
popup.style.display = 'block';
document.body.classList.add('blurry');
searchField.focus();
});
window.addEventListener('click', function (e) {
if (e.target === popup) {
popup.style.display = 'none';
document.body.classList.remove('blurry');
}
});
window.addEventListener('keydown', function (e) {
if (e.key === 'Escape') {
popup.style.display = 'none';
document.body.classList.remove('blurry');
}
});
searchField.addEventListener('keydown', function (e) {
if (e.key === 'Enter') {
searchForm.submit();
}
});
});
</script>
<?php
return ob_get_clean();
}
add_shortcode('RayaWp_search', 'raya_wp_search_shortcode');
function enqueue_raya_wp_search_styles() {
wp_enqueue_style('theme-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'enqueue_raya_wp_search_styles');
این کد یه فیلد جستجوی پاپآپ حرفهای برای سایتت میسازه که وقتی روی دکمه جستجو کلیک میکنی، یه باکس پاپآپ باز میشه. این باکس به کاربر امکان جستجو بین محصولات و مقالات رو میده.
اگر از المنتور استفاده میکنی، کافیه هر جایی از سایتت که میخواهی فیلد جستجو نمایش داده بشه، ویجت شورتکد المنتور رو اضافه کنی و شورتکد [RayaWp_search]
رو داخلش قرار بدی 🙂
برای هایلایت شدن کلمه جستجو شده در عناوین جستجو کافیه کد زیر رو در انتهای کد بالا درون فایل فانکشن قالب سایت قرار بدی:
function highlight_search_keyword_in_title($title) {
if (is_search() && !is_admin()) {
$search_query = get_search_query();
if (!empty($search_query)) {
$title = preg_replace('/(' . preg_quote($search_query, '/') . ')/i', '<span style="background-color: #FFFF99; border-radius: 4px;">$1</span>', $title);
}
}
return $title;
}
add_filter('the_title', 'highlight_search_keyword_in_title');
2️⃣ افزودن کد CSS برای استایل دهی به فیلد جستجوی پاپ آپ
برای اینکه فیلد جستجوی پاپ آپ سایتت ظاهر جذاب و حرفهای داشته باشه، نیاز داریم که یه سری استایلهای CSS بهش بدیم. این کدهای CSS ظاهر باکس پاپآپ، دکمهها، فیلد جستجو و فیلترهای نوع جستجو رو تنظیم میکنه و باعث میشه تجربه کاربری بهتری داشته باشی. کدهای CSS زیر رو به فایل style.css اضافه کن تا فیلد جستجو به شکلی زیبا و کاربرپسند نمایش داده میشه:
/* Popup Search Field Styles by RayaWp.ir */
body.blurry {
position: relative;
overflow: hidden;
}
body.blurry::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(3px);
z-index: 999;
}
#openSearchPopup {
width: 100%;
background-color: #fff;
color: #000;
padding: 8px;
border-width: 0px !important;
color: #7f8c8d !important;
border-radius: 4px;
font-size: 1rem;
cursor: text;
}
.search-field::placeholder {
color: #ccc;
opacity: 1;
}
#searchForm .search-field-wrapper input[type=search] {
background-color: rgba(156, 150, 129, 0.18) !important;
border: none;
border-radius: 4px;
padding: 8px 35px 8px 10px;
font-size: 1rem;
}
.search-popup {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
z-index: 1000;
}
.search-popup-content {
background: #fff;
width: 90%;
max-width: 380px;
margin: 15% auto;
padding: 15px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
}
.search-filters {
margin: 15px 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
}
.filter-text {
margin-right: 10px;
color: #333;
}
.filter-option {
padding: 8px 14px;
cursor: pointer;
border-radius: 8px;
transition: background-color 0.3s, transform 0.2s;
display: inline-block;
margin: 0 5px;
}
.filter-option input[type="radio"] {
display: none;
}
.filter-option input[type="radio"]:checked + .filter-label {
border-radius: 8px;
background-color: #f1c40f;
color: #fff;
transform: scale(1.05);
}
.filter-option:hover .filter-label {
background-color: #e4f0f7;
}
.filter-label {
display: inline-block;
color: #333;
padding: 5px 12px;
border-radius: 8px;
background-color: #f4f4f4;
transition: background-color 0.3s;
}
.search-field-wrapper {
position: relative;
width: 100%;
}
.search-field {
width: 100%;
padding: 8px 35px 8px 10px;
margin: 10px 0;
font-size: 1rem;
border: none;
border-radius: 4px;
box-sizing: border-box;
}
نتیجه گیری 🎉
تبریک! حالا یه فیلد جستجوی پاپ آپ کاملاً سفارشی توی سایتت داری .
اگه سوالی داشتی یا به مشکلی خوردی، توی بخش نظرات مطرح کن. خوشحال میشم کمکت کنم! 😎
ارسال نظر ( 2 نظر تایید شده )
در پاپ آپ باز شده فقط مقالات میاره ، محصولات نشون نمیده ایراد از کجاست ؟
سلام وقت بخیر اگه دقیقا طبق آموزش برین فیلتر محصولاتم نشون میده من کد رو تست کردم مشکلی نبود باز هم اگه نیاز به کمک داشتین در تلگرام بهمون پیام بدید بررسی بشه @rayawpir