خانهآموزش المنتورآموزش ساخت فیلد جستجوی دراپ داون در المنتور
https://rayawp.ir/?p=20617

آموزش ساخت فیلد جستجوی دراپ داون در المنتور

سلام😘 اگر تو هم از المنتور برای طراحی سایت استفاده می‌کنی و می‌خوای یه فیلد جستجوی حرفه‌ای و کاربردی به سایتت اضافه کنی، این مقاله رو از دست نده. توی این آموزش بهت نشون میدم

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

دراپ داون یعنی چی؟

قبل از هر چیزی، بذار یه توضیح بدم که “دراپ داون” چیه. دراپ داون یه منوی کشویی هست که وقتی کاربر روش کلیک می‌کنه، یه لیست از گزینه‌ها برای انتخاب نمایش داده میشه. این ویژگی به کاربر کمک می‌کنه خیلی سریع و راحت چیزی که دنبالش هست رو پیدا کنه و انتخاب کنه. 👌 حالا اگر می‌خوای این قابلیت رو به سایتت اضافه کنی، ادامه مقاله رو از دست نده! 😉

🪶آموزش ساخت فیلد جستجوی دراپ داون در المنتور

گام اول: آماده‌ سازی المنتور

برای شروع، اول باید مطمئن بشی که افزونه المنتور رو روی سایتت نصب شده باشه. البته نگران نباش! تو این آموزش حتی بدون المنتور هم می‌تونی این فیلد جستجو رو با استفاده از شورت کدی که تو فایل functions.php قالب تعریف می‌کنیم، نمایش بدی. 😉

ایجاد یک شورت کد برای فیلد جستجو دراپ داون

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

✨ فیلم و سریال های جدید رو از اینجا دانلود کن✨ کلیک کن AD

کد زیر رو تو فایل functions.php قالب وردپرس خودت قرار بده:

// Search field dropdown shortcode by RayaWp.ir
function raya_wp_search_shortcode() {
    ob_start();
    global $wpdb;
    $search_query = get_search_query();
    $search_type = isset($_GET['search_type']) ? $_GET['search_type'] : 'articles';

    $search_data = $wpdb->get_results("
        SELECT search_term, COUNT(*) as count 
        FROM {$wpdb->prefix}search_history 
        GROUP BY search_term 
        ORDER BY count DESC 
        LIMIT 6", ARRAY_A);

    $default_searches = ['وردپرس', ' طراحی وب', ' رایا وردپرس', ' المنتور', 'مقاله', 'RayaWp.ir'];
    $popular_searches = !empty($search_data) ? array_column($search_data, 'search_term') : $default_searches;

    ?>
    <div class="raya-search-container">
        <form method="get" action="<?php echo esc_url(home_url('/')); ?>" id="rayaSearchForm">
            <div class="search-input-wrapper">
                <input type="search" class="raya-search-field" placeholder="🔍 جستجو..." 
                       value="<?php echo esc_attr($search_query); ?>" name="s" autocomplete="off">
                <button type="submit" class="search-icon-btn"><i class="fas fa-search"></i></button>
                <div class="search-results-container">
                    <div class="search-banner">
                            <a href="https://rayawp.ir">
                            <img src="https://www.rayawp.ir/wp-content/uploads/2025/01/das-1.jpg" alt="search banner">
                        </a>  </div>
                    <div class="popular-searches">
                        <h4>بیشترین جستجوها:</h4>
                        <?php foreach ($popular_searches as $search_term): ?>
                            <a href="#" class="search-term" data-search="<?php echo esc_attr($search_term); ?>">
                                <?php echo esc_html($search_term); ?>
                            </a>
                        <?php endforeach; ?>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const searchField = document.querySelector('.raya-search-field');
            const resultsContainer = document.querySelector('.search-results-container');
            const searchTerms = document.querySelectorAll('.search-term');

            searchField.addEventListener('focus', function() { resultsContainer.style.display = 'block'; });

            document.addEventListener('click', function(e) {
                if (!e.target.closest('.raya-search-container')) { resultsContainer.style.display = 'none'; }
            });

            searchTerms.forEach(term => {
                term.addEventListener('click', function(e) {
                    e.preventDefault();
                    searchField.value = this.dataset.search;
                    resultsContainer.style.display = 'none';
                    document.getElementById('rayaSearchForm').submit();
                });
            });
        });
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode('raya_search', 'raya_wp_search_shortcode');

حالا که شورت کد رو ساختی، وقتشه که اون رو تو صفحه‌ای که می‌خوای فیلد جستجو رو نمایش بدی، استفاده کنی. خیلی ساده از ویجت “Shortcode” در المنتور استفاده کن و شورت کد [raya_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');

📌 ویژگی‌های این فیلد سرچ:

✅ نمایش ۶ جستجوی محبوب از دیتابیس یا به صورت دستی
✅ استایل مدرن و زیبا
✅ نمایش بنر دلخواه در دراپ داون
✅ قابلیت استفاده و نمایش در هر جایی از سایت با استفاده از شورت کد
✅ نمایش بنر دلخواه در دراپ داون

🔑 نکته اول: تو این فیلد سرچ می‌تونی هم جستجوهای محبوب یا بیشترین سرچ‌ها رو دستی وارد کنی، هم خودکار دریافت میشه. برای تغییر کلمات بیشتر جستجو شده، کافیه خط 15 کد بالا رو ادیت و عبارات مدنظر خودت رو جایگزین کنی.

🔑 نکته دوم: برای تغییر لینک بنر و تصویر اون، کافیه خط 27 و 28 کد بالا رو ادیت کنی.

استایل دهی به فرم جستجو با CSS

حالا وقتشه که با CSS یه کم رنگ و لعاب به فرم جستجو بدی! 😎 این کار باعث میشه ظاهر و استایل فرم جستجو خیلی جذاب‌تر و حرفه‌ای‌تر بشه. ✨ برای اینکار کدهای CSS زیر رو در بخش CSS سفارشی وردپرس یا ویجت شورت کد المنتور (در تب پیشرفته) قرار بده و نتیجه رو ببین! 👇

/*Dropdown Search Form Styles by RayaWp.ir*/
 #rayaSearchForm .search-input-wrapper input[type=search]{
     border-width:0px!important;
     border-radius: 10px;
}
 .raya-search-container {
     position: relative;
     max-width: 600px;
     margin: 0 auto;
}
 .search-input-wrapper {
     position: relative;
}
 .raya-search-field {
     width: 100%;
     padding: 12px 40px 12px 20px;
     border: 2px solid #ddd;
     border-radius: 8px;
     font-size: 16px;
     transition: 0.3s;
     box-shadow: 0 4px 12px rgba(0,0,0,0.1);
     text-align: center;
}
 .raya-search-field:focus {
     border-color: #f1c40f;
     outline: none;
     box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}
 .search-icon-btn {
     position: absolute;
     top: 50%;
     right: 10px;
     transform: translateY(-50%);
     background: transparent;
     border: none;
     cursor: pointer;
     color: #333;
     font-size: 18px;
}
 .search-results-container {
     display: none;
     position: absolute;
     top: 100%;
     left: 0;
     right: 0;
     background: #fff;
     border: 1px solid #eee;
     border-radius: 8px;
     box-shadow: 0 4px 12px rgba(0,0,0,0.1);
     margin-top: 5px;
     z-index: 1000;
}
 .search-banner {
     padding: 10px;
     border-bottom: 1px solid #eee;
}
 .search-banner img {
     width: 100%;
     height: 120px;
     object-fit: cover;
     border-radius: 10px;
}
 .popular-searches {
     padding: 15px;
}
 .searches-title {
     margin: 0 0 10px 0;
     color: #333;
     font-size: 14px;
}
 .search-term {
     display: inline-block;
     margin: 3px;
     padding: 6px 12px;
     background: #f8f9fa;
     border-radius: 20px;
     color: #2c3e50;
     text-decoration: none;
     font-size: 13px;
     transition: 0.2s;
}
 .search-term:hover {
     background: #f1c40f;
     color: #fff;
     transform: translateY(-1px);
}

حالا که فیلد جستجوی دراپ داون رو به سایتت اضافه کردی، کاربران می‌تونن راحت‌تر جستجو کنن و تجربه بهتری از سایتت داشته باشن. این ویژگی هم کاربردی و هم جذابه! 😍

اگر سوالی داشتی یا کمک بیشتری می‌خواستی، در خدمتم. موفق باشی! 💪

4.6/5 - (5 امتیاز)

اگه از مطالب سایت خوشت اومده و کارت رو راه انداخته، می‌تونی با یه حمایت کوچیک کمک کنی بهتر و قوی‌ترش کنیم! هر مبلغی که کمک کنی، مستقیم میره برای توسعه سایت و تولید محتوا و آموزش های جذاب‌ تر. 🌟

ارسال نظر ( 0 نظر تایید شده )

نظرات پس از رویت و تایید مدیران نمایش داده می‌شود

📖 آنچه خواهید خواند

Toggle
    🔥
    33 نفر در حال مطالعه این مقاله
    Picture of SaeID
    SaeID

    عاشق یادگیری وردپرس و کلن طراحی سایت هستم. سعی میکنم دانش و تجربیات خودمو در رایا وردپرس باهاتون به اشتراک بزارم :)

    مقالات بیشتر
    بستن