Wordpress Google'da tercih edilen kaynak butonu ekleme

Merhaba, son dönemde Google News takibi yerine tercih edilen kaynaklar öne çıkarıldı. Google Tercih Edilen Kaynaklar, kullanıcıların arama ve haber sonuçlarında görmek istedikleri güvenilir web sitelerini ve yayıncıları öncelikli olarak seçmesini sağlayan bir kişiselleştirme özelliğidir. Verilere göre site kullanıcılar tarafından bu özellikte kullanıldığında CTR oranında artış alıyor ve Keşfet kısmında çıkma ihtimali de yükseliyor.

Wordpress tarafında böyle bir eklenti bulunmadığından (en azından denk gelmedik) bir müşterimizin web sitesini tasarlarken kullandığımız kodu paylaşıyoruz.

Temanızın functions.php dosyasını açıp en alta eklemeniz yeterlidir;

NOT: siteadi.com kısmını kendi siteniz ile değiştirmeyi unutmayın. Responsive uyumludur ama punto, boyut, renk vb gibi özellikleri tabii ki kendiniz istediğiniz gibi düzenleyebilirsiniz.

Bir not daha: İçerik (post) sonunda buton çıkar, yine kendinize göre istediğiniz alanda çıkmasını sağlayabilirsiniz. Tema kodlarıyla uğraşmak istemezseniz WPCode gibi eklentiler ile istediğiniz yerde çıkmasını sağlayabilirsiniz.

function siteadi_google_bar_otomatik( $content ) {
    if ( is_single() && in_the_loop() && is_main_query() ) {
        $bar_html = '
        <style>
            .siteadi-google-bar {
                display: flex;
                align-items: center;
                justify-content: space-between;
                background: #ffffff;
                border: 1px solid #e0e0e0;
                border-left: 4px solid #1a73e8;
                border-radius: 8px;
                padding: 16px 20px;
                margin: 30px 0;
                box-shadow: 0 4px 12px rgba(0,0,0,0.05);
                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
                gap: 15px;
                box-sizing: border-box;
                width: 100%;
            }

            .siteadi-google-bar-left {
                display: flex;
                align-items: center;
                gap: 15px;
            }

            .siteadi-google-bar-logo {
                width: 36px;
                height: 36px;
                flex-shrink: 0;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .siteadi-google-bar-logo svg {
                width: 100%;
                height: 100%;
            }

            .siteadi-google-bar-content h4 {
                margin: 0 0 4px 0;
                font-size: 16px;
                color: #202124;
                font-weight: 700;
            }

            .siteadi-google-bar-content p {
                margin: 0;
                font-size: 13px;
                color: #5f6368;
                line-height: 1.4;
            }

            .siteadi-google-bar-btn {
                background-color: #1a73e8;
                color: #ffffff !important;
                padding: 10px 18px;
                border-radius: 6px;
                font-size: 13px;
                font-weight: 600;
                text-decoration: none;
                white-space: nowrap;
                transition: background-color 0.2s ease;
                box-shadow: 0 2px 4px rgba(26,115,232,0.2);
                flex-shrink: 0;
            }

            .siteadi-google-bar-btn:hover {
                background-color: #1557b0;
            }

            @media (max-width: 768px) {
                .siteadi-google-bar {
                    flex-direction: column;
                    align-items: flex-start;
                    padding: 15px;
                }

                .siteadi-google-bar-left {
                    width: 100%;
                }

                .siteadi-google-bar-btn {
                    width: 100%;
                    text-align: center;
                    box-sizing: border-box;
                    margin-top: 10px;
                }
            }
        </style>

        <div class="siteadi-google-bar">
            <div class="siteadi-google-bar-left">
                <div class="siteadi-google-bar-logo">
                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
                        <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
                        <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.06H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.94l2.85-2.22.81-.63z" fill="#FBBC05"/>
                        <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.06l3.66 2.84c.87-2.6 3.3-4.52 6.16-4.52z" fill="#EA4335"/>
                    </svg>
                </div>

                <div class="siteadi-google-bar-content">
                    <h4>Haberlerimizi Google\'da Takip Edin</h4>
                    <p>Gelişmelerden anında haberdar olun, Google\'da tercih edilen kaynak olarak ekleyin.</p>
                </div>
            </div>

            <a href="https://www.google.com/preferences/source?q=siteadi.com" target="_blank" rel="noopener noreferrer" class="siteadi-google-bar-btn">
                Google\'da Takip Et
            </a>
        </div>';

        $content .= $bar_html;
    }

    return $content;
}

add_filter( 'the_content', 'siteadi_google_bar_otomatik' );

Çok teşekkürler.