WordPress'te Arama Terimlerini Sonuçlarda Nasıl Vurgularsınız (2 Yöntem)

Think about the last time you searched for something on a site. You probably scanned the results looking for your keywords, right? 🔍

Web sitesi ziyaretçilerinizin sitenizi ararken yaptığı tam olarak budur. Yalnızca WordPress bu terimleri varsayılan olarak vurgulamaz.

Vurgulanan arama terimlerini ayarlamak, sitenizi hemen daha cilalı ve kullanıcı dostu hissettiren basit geliştirmelerden biridir.

Ziyaretçiler her sonucun aramalarıyla neden eşleştiğini hızlı bir şekilde görebildiğinde, içeriğinize tıklama ve etkileşimde bulunma olasılıkları daha yüksektir.

Yıllardır WordPress siteleri oluşturup yönetirken, bu küçük kullanıcı deneyimi iyileştirmelerinin büyük bir etkisi olabileceğini gördüm. 📝

That’s why I will be walking you through 2 easy ways to get search term highlighting on your WordPress site, whether you prefer using a plugin or adding some custom code.

Web Sitemde Arama Terimlerini Neden Vurgulamalıyım?

Arama terimlerini vurgulamak, ziyaretçilerin aradıkları içeriği hızlı bir şekilde fark etmelerine yardımcı olur.

Kullanıcılar sitenizin arama çubuğuna bir anahtar kelime yazdıklarında, sonuçları o tam kelimeler için tararlar. Eğer hiçbir şey öne çıkmazsa, farkında olmadan faydalı içeriği atlayabilirler.

Arama terimlerini vurgulayarak, sonuçları okumayı kolaylaştırırsınız ve hangi makalelerin en alakalı olduğunu anında gösterirsiniz.

Bu, kullanıcı deneyimini iyileştirir, ziyaretçilerin bilgileri daha hızlı bulmasına yardımcı olur ve doğru yerde olduklarından emin olmalarını sağlar. Hatta kullanıcıları sitenizde daha uzun süre kalmaya teşvik edebilir.

WPBeginner'da, arama sonuçlarımızdaki eşleşen anahtar kelimeleri arama sonuçlarında kalın yaparız - bu, vurgulama gibi çalışır. Küçük bir dokunuş ama insanların aradıklarını daha hızlı bulmalarına gerçekten yardımcı oluyor.

Bunu söyledikten sonra, WordPress'te arama terimlerini nasıl kolayca vurgulayacağınızı gösterelim. 2 yöntemi tartışacağım. Seçtiğiniz yönteme atlamak için aşağıdaki bağlantıları kullanabilirsiniz.

• Yöntem 1: SearchWP Kullanarak Arama Terimlerini Vurgulama – Önerilen
• Yöntem 2: Özel Kod Kullanarak Arama Terimlerini Vurgulama – Ücretsiz
• Bonus: Canlı Ajax Araması ile Aramanızı Daha Hızlı Hale Getirin 🚀
• SSS: WordPress'te Arama Terimlerini Vurgulama

Yöntem 1: SearchWP Kullanarak Arama Terimlerini Vurgulama – Önerilen

If you’re looking for a quick, hassle-free way to highlight search terms in your WordPress results, then using SearchWP is your best bet.

Bana kalırsa, SearchWP sitenizin arama deneyimini iyileştirmek için en iyi araçlardan biridir.

Varsayılan WordPress aramasından çok daha alakalı sonuçlar verir ve en iyi yanı? Arama terimlerini vurgulamayı inanılmaz derecede kolaylaştırır. Sadece bir düğmeyi çevirirsiniz ve tamamdır.

SearchWP'yi demo sitemizde kapsamlı bir şekilde test ettim ve sonuçlar etkileyiciydi. Sorunsuz çalışıyor ve yerleşik vurgulama özelliği, manuel kuruluma kıyasla çok zaman kazandırıyor.

We also have a full review of SearchWP if you want to see all of its features and how it works.

Öncelikle, SearchWP eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Adım adım talimatlar için, bir WordPress eklentisinin nasıl kurulacağına dair eğitimimize bakın.

Eklentiyi etkinleştirdikten sonra, WordPress kontrol panelinizdeki SearchWP » Ayarlar sayfasına gidin.

Buraya lisans anahtarınızı girmeniz gerekecek.

Bu lisans anahtarını SearchWP web sitesindeki hesabınızın altında bulabilirsiniz. Sadece kopyalayıp yapıştırın.

Bundan sonra, aşağı kaydırarak ‘Genel Ayarlar’a gidin ve ‘Terimleri Vurgula’ anahtarını ‘Açık’ konumuna getirin.

Etkinleştirildiği anda, ziyaretçilerinizin kullandığı anahtar kelimeler arama sonuçlarında otomatik olarak vurgulanacak ve ilgili içeriği fark etmek çok kolaylaşacaktır.

Bu bölümde, arama sonuçlarınızı iyileştirebilecek ek ayarlar da bulacaksınız.

Bulanık Arama ve Alıntılı Arama gibi özellikler, çok fazla içeriğe sahip WordPress blogları için özellikle yararlıdır.

Bu özellik, ziyaretçilerin küçük bir yazım hatası yapsalar bile doğru içeriği bulmalarını sağlar. Bu, onları sinir bozucu bir “sonuç bulunamadı” sayfasında gezinmekten alıkoyabilir.

Öte yandan, Alıntılanan Arama, Google'da olduğu gibi, kullanıcıların tam bir ifadeyi tırnak içine alarak aramasını sağlar.

Tüm ayarlarınızın otomatik olarak kaydedileceğini unutmayın.

Genel Ayarlarınızdan memnun kaldığınızda, SearchWP'nin diğer özelleştirme seçeneklerini keşfetmek iyi bir fikirdir.

Arama sonuçlarının nasıl sıralanacağını ince ayar yapmak için kontrol panelinizdeki SearchWP » Algorithm sayfasına gidebilirsiniz.

Bu bölüm gerçekten yardımcı oluyor çünkü içeriğinizin farklı bölümlerinin ağırlığını (önemini) kontrol etmenizi sağlıyor - bunu arama sonuçlarınız için bir puanlama sistemi gibi düşünün.

Örneğin, başlıklara daha fazla ağırlık vermek, gönderi başlığındaki eşleşmelerin, gövde içeriğindeki eşleşmelerden daha üstte görünmesi anlamına gelir. Bu şekilde, en alakalı içerik ilk görünür.

‘Kaynaklar ve Ayarlar’ düğmesine tıkladığınızda, arama dizininize neleri dahil edeceğinize de karar verebilirsiniz.

Instead of just posts and pages, you can add comments, custom post types, WooCommerce products, SKUs, and more.

Bir blog veya online mağaza çalıştırıyorsanız, bu aramanızı çok daha kullanışlı hale getirir.

Örneğin, bir müşterinin varsayılan WordPress aramasının yapamayacağı gibi, bir ürünü SKU'su ile, örneğin ‘TSHIRT-BLUE-LG’ ile bulmasına yardımcı olabilir.

WordPress arama özelliğini SearchWP ile nasıl geliştireceğinize dair tam bir rehber de hazırladık, daha derinlemesine incelemek isterseniz.

Ayarlarınızı kaydettikten sonra, SearchWP mevcut arama formunuzu otomatik olarak devralır. Ekstra adım gerekmez.

Sadece sitenize gidin ve hızlı bir arama yapın. Vurgulanan anahtar kelimeleri hemen göreceksiniz.

Sitenize henüz bir arama formu eklemediyseniz, endişelenmeyin. WordPress'te arama formu ekleme konusunda adım adım eğitimimizi takip edebilirsiniz.

Bu ayar yapıldıktan sonra işiniz bitmiş demektir ve ziyaretçileriniz en başından itibaren çok daha iyi bir arama deneyimi yaşayacaktır.

Yöntem 2: Özel Kod Kullanarak Arama Terimlerini Vurgulama – Ücretsiz

Bütçeniz kısıtlıysa, SearchWP sizin için doğru seçenek olmayabilir çünkü ücretsiz planı bu özelliği içermiyor.

İyi haber şu ki, sitenizin functions.php dosyasına bir PHP kod parçacığı ekleyerek arama terimlerini hala vurgulayabilirsiniz.

Asıl fark uzun vadeli bakımda ortaya çıkar. SearchWP gibi bir eklenti, WordPress'in yeni sürümleriyle uyumluluğu sağlamak için geliştiricileri tarafından düzenli olarak güncellenir.

With a custom code snippet, however, you’re responsible for making sure it continues to work correctly after future updates.

Bununla birlikte, tema dosyalarını doğrudan düzenlemek de riskli olabilir.

Küçük bir hata bile sitenizi çökertip yönetici kontrol panelinden çıkmanıza neden olabilir. Bu genellikle ‘Beyaz Ekran Hatası’ olarak adlandırılır ve geliştirici değilseniz düzeltmesi stresli olabilir.

Bu yüzden bunun yerine WPCode kullanmanızı öneririm. En iyi WordPress kod parçacığı eklentisidir ve tema dosyalarınıza dokunmadan özel kod eklemenin en güvenli yoludur.

Bunun nedeni, WPCode'un kod parçacıklarınızı ayrı, güvenli bir ortamda çalıştırmasıdır. Bu, bir yazım hatasının sitenizi çökertmesini önler ve kod parçacıklarını bir anahtar ile kolayca açıp kapatmanızı sağlar.

Ayrıca, ücretsiz planı bu yöntem için mükemmel çalışır.

WPCode'u farklı kurulumlarda kapsamlı bir şekilde test ettim ve her zaman güvenilir bir şekilde çalışıyor. Sunduğu her şeyi merak ediyorsanız, daha sonra göz atabileceğiniz detaylı bir WPCode incelememiz de var.

Ancak şimdilik, bunu sitenizde arama terimlerini vurgulamak için nasıl kullanacağınızı adım adım inceleyelim.

Öncelikle, WPCode eklentisini kurmanız ve etkinleştirmeniz gerekir. Ayrıntılı talimatlar için bir WordPress eklentisi yükleme rehberimize göz atabilirsiniz.

Eklentiyi etkinleştirdikten sonra, kontrol panelinden Kod Parçacıkları » + Parçacık Ekle sayfasını ziyaret edin.

Burada, ‘Özel Kodunuzu Ekleyin (Yeni Parçacık)’ seçeneğinin altındaki ‘+ Özel Parçacık Ekle’ düğmesine tıklayın.

Şimdi sizi kod türü olarak 'PHP Snippet' seçmeniz gereken yeni bir ekrana götürecektir. Bu yapıldıktan sonra, kod parçacığınıza bir ad verin.

Bu ad ziyaretçilerinize görünür olmayacak - sadece sizin referansınız içindir. Bu yüzden Arama Terimlerini Vurgula gibi açıklayıcı bir şey veya tanımayı kolaylaştıran başka bir şey kullanmanızı öneririm.

Daha sonra düzenlemek veya devre dışı bırakmak isterseniz, parçacığı hızlı bir şekilde bulmanıza ve yönetmenize yardımcı olacaktır.

Bundan sonra, aşağıdaki özel kodu ‘Kod Önizleme’ kutusuna kopyalayıp yapıştırın.

Bu kod, ziyaretçinizin aradığı anahtar kelimeleri bularak çalışır. Ardından, bu anahtar kelimeleri renkli bir arka plan ekleyen özel bir etikete sarar.

// Highlight terms in titles
add_filter('the_title', 'highlight_search_terms_in_title', 10, 2);

// Highlight terms in excerpts
add_filter('the_excerpt', 'highlight_search_terms_in_excerpt');

// Optional: Highlight terms in content (if you're using the_content() in search results)
add_filter('the_content', 'highlight_search_terms_in_excerpt');

// Common highlight logic
function highlight_search_terms($text) {
    if (!is_admin() && is_search() && is_main_query()) {
        $search_query = get_search_query();

        // Output the CSS only once
        if (!defined('HIGHLIGHT_SEARCH_TERM_CSS')) {
            define('HIGHLIGHT_SEARCH_TERM_CSS', true);
            add_action('wp_head', function () {
                echo '<style>
                    strong.search-excerpt {
                        background-color: yellow;
                        color: black;
                        font-weight: bold;
                        padding: 0 2px;
                        border-radius: 2px;
                    }
                </style>';
            });
        }

        if (!empty($search_query)) {
            $keys = preg_split('/\s+/', $search_query);
            foreach ($keys as $key) {
                if (!empty($key)) {
                    $text = preg_replace('/(' . preg_quote($key, '/') . ')/iu', '<strong class="search-excerpt">$1</strong>', $text);
                }
            }
        }
    }

    return $text;
}

// Apply highlight logic to title and excerpt/content
function highlight_search_terms_in_title($title, $post_id) {
    return highlight_search_terms($title);
}

function highlight_search_terms_in_excerpt($excerpt) {
    return highlight_search_terms($excerpt);
}

Kodu yapıştırdıktan sonra, stil bölümünü bulmak için kod parçacığının aşağısına kaydırın. Bunu echo '<style> ... </style>'; bloğunun içinde göreceksiniz. Değiştirmek isteyeceğiniz belirli satır şudur:

                        background-color: yellow;

Varsayılan olarak, eklenti vurgulanan terimin arka plan rengini sarı, metni ise siyah olarak ayarlar. Ancak bu satırı düzenleyerek bunu kolayca özelleştirebilirsiniz.

Tercih ettiğiniz herhangi bir rengin onaltılık koduyla sarı kelimesini değiştirmeniz yeterlidir. Örneğin, vurguyu açık maviye değiştirmek için #aeeffc kullanabilirsiniz. Sonundaki noktalı virgülü eklemeyi unutmayın!

Sitenizin geri kalanıyla güzelce uyum sağlaması için markanızın stiline uygun bir arka plan ve metin rengi seçmenizi öneririm.

Vurgu kutusunun görünümünü ince ayarlamak için bu bölümde yazı tipi kalınlığını, kenarlık yuvarlaklığını ve dolgusunu da ayarlayabilirsiniz.

Stil ile memnun kaldığınızda, yukarı kaydırın, anahtarı 'Etkin Değil'den 'Etkin'e getirin ve ayarlarınızı kaydetmek için 'Parçacığı Kaydet' düğmesine tıklayın.

Sitenizde zaten bir arama formu varsa, kod parçacığı hemen çalışmaya başlayacak ve arama terimlerini otomatik olarak vurgulayacaktır.

Henüz bir arama formu eklemediyseniz, WordPress'te arama formu ekleme konusundaki öğreticimizi takip edebilirsiniz.

Son olarak, web sitenizi ziyaret edin, hızlı bir arama yapın ve yeni vurgulanan terimlerinizi uygulamada göreceksiniz.

Bonus: Canlı Ajax Araması ile Aramanızı Daha Hızlı Hale Getirin 🚀

Once you’ve added search term highlighting, you might want to take things a step further by showing results as visitors type.

Bu canlı Ajax araması olarak adlandırılır ve Google'ın otomatik tamamlama özelliği gibi çalışır. Sayfa yenilemeye gerek kalmadan anında öneriler sunar.

Sitenizi daha hızlı ve daha etkileşimli hale getirmenin harika bir yoludur. Ziyaretçiler aradıklarını neredeyse anında bulabilirler, bu da etkileşimi artıracaktır.

Bunu kurmak için, premium SearchWP aracıyla harika çalışan SearchWP Live Ajax Lite Search eklentisini öneririm.

Ücretsizdir, çoğu WordPress temasıyla sorunsuz çalışır ve her şeyi otomatik olarak halleder. Kapsamlı bir şekilde test ettim ve her zaman daha iyi, daha hızlı bir arama deneyimi sunuyor.

Eklentiyi diğer WordPress eklentileri gibi yükleyin, etkinleştirin ve ardından SearchWP ayarlarında canlı aramayı etkinleştirin.

Arama formunu herhangi bir yazıya, sayfaya, kenar çubuğuna veya widget alanına kolayca ekleyebilirsiniz.

Başlamak için yardıma mı ihtiyacınız var? WordPress sitenize canlı Ajax araması ekleme hakkındaki tam eğitimimize göz atın: WordPress sitenize canlı Ajax araması nasıl eklenir.

SSS: WordPress'te Arama Terimlerini Vurgulama

Here are some questions I frequently get asked about highlighting search terms in WordPress:

Can I highlight terms in AJAX or live search results?

Evet! Eğer SearchWP'yi SearchWP Live Ajax Lite Search eklentisiyle birlikte kullanıyorsanız, vurgulanan terimler canlı arama sonuçlarında da görünecektir - sayfa yenilemeye gerek kalmadan.

Her iki araç da aynı ekip tarafından yapıldığı için, kutudan çıktığı gibi sorunsuz bir şekilde birlikte çalışırlar.

However, if you’re using a different live search plugin or a custom AJAX search setup, you’ll need to test for compatibility.

Tüm eklentiler dinamik sonuçlarda terim vurgulamayı desteklemez, bu nedenle her şeyin doğru görüntülendiğinden emin olmak için önce bir hazırlık sitesinde test etmek iyi bir fikirdir.

Bu vurgulama özellikleri performansı veya site hızını etkiler mi?

Pek sayılmaz. Bahsettiğim her iki yöntem de — SearchWP kullanmak ve WPCode ile özel kod eklemek — hafiftir ve performans için optimize edilmiştir.

Vurgulama işlemi ön uçta çalışır, bu nedenle sunucunuza fazla yük bindirmez.

That said, if your site has a large number of search results or heavy custom styling, it’s always a good idea to test things first. I recommend trying it out in a staging environment to make sure the highlighting looks good and performs smoothly before rolling it out live.

Özel gönderi türleri veya WooCommerce ile arama terimi vurgulama çalışacak mı?

Evet, kesinlikle! SearchWP kullanıyorsanız, özel gönderi türleri ve WooCommerce ürünleriyle kutudan çıktığı gibi mükemmel çalışacak şekilde tasarlanmıştır. Aranacak öğeler üzerinde tam kontrol sağlar, buna ürün SKU'ları ve özel alanlar dahildir.

Yöntem 2'deki özel kod parçacığı, temanız içeriği görüntülemek için the_title() gibi standart WordPress fonksiyonlarını kullandığı sürece özel gönderi türleri için de çalışabilir. Ancak, en güvenilir ve güçlü sonuçlar için, özellikle bir e-ticaret mağazasıyla, SearchWP en iyi çözümdür.

Umarım bu makale, WordPress'te arama terimlerini sonuçlarda kolayca nasıl vurgulayacağınızı öğrenmenize yardımcı olmuştur. Ayrıca, akıllı bir WooCommerce ürün araması nasıl yapılır hakkındaki nihai rehberimize ve WordPress sitenize sesli arama yeteneği ekleme konusundaki eğitimimize de göz atmak isteyebilirsiniz.

Bu makaleyi beğendiyseniz, lütfen WordPress video eğitimleri için YouTube Kanalımıza abone olun. Bizi ayrıca Twitter ve Facebook'ta da bulabilirsiniz.