Sorun: Nextend Social Login eklentisini kurup Google girişini aktif ettim. Ama wpForo kendi giriş formunu kullandığı için buton ya hiç görünmedi ya da formun dışında, sayfanın en altında, logosuz ve renksiz çıktı.

Çözüm: Butonu giriş formunun içine, “Merhaba!” yazısının hemen altına taşıyıp wpForo’nun bozduğu görünümü geri verdim. Hiçbir eklenti dosyasını elle düzenlemediğim için wpForo güncellemelerinde bozulmuyor.

Başlamadan önce

Şunların hazır olması gerekir:

• WordPress’te Nextend Social Login eklentisi kurulu olmalı.
• Nextend’de Google sağlayıcısı kurulmuş ve etkinleştirilmiş olmalı (Google Cloud’dan Client ID ve Secret alınmış olmalı).
• Ücretsiz bir snippet eklentisi gerekir (ör. Code Snippets veya WPCode).
• wpForo’da özel CSS ekleyebileceğiniz bir alan olmalı. Kontrol Paneli > wpForo > Ayarlar > Renkler ve Stiller > Özel CSS

Adım 1: Eski denemeleri temizleyin

İnternette bulduğunuz top:-60px, position:relative ya da background: transparent !important gibi kodları kullandıysanız hepsini silin. Bunlar logoyu ve renkleri gizleyen kodlardır.

Adım 2: Butonu form içine taşıyan PHP snippet’i

Snippet eklentinizde yeni snippet oluşturun, türünü PHP seçin, aşağıdaki kodu yapıştırın ve etkinleştirin:

<?php

add_action( 'wp_footer', function () {
	?>
	<script>
	document.addEventListener('DOMContentLoaded', function () {
		var wrap = document.getElementById('wpforo-wrap');
		var nsl  = document.querySelector('[id^="nsl-custom-login-form"]');
		if (!wrap || !nsl) return;

		// KAYIT SAYFASI: "Bize şimdi katılın!" başlığının altına
		var regContent = wrap.querySelector('.wpforo-register-content');
		if (regContent) {
			var title = regContent.querySelector('h3');
			var regNote = document.createElement('p');
			regNote.className = 'nsl-or-text';
			regNote.textContent = 'veya aşağıdaki formu doldurun';

			if (title) {
				title.insertAdjacentElement('afterend', nsl);
			} else {
				regContent.insertBefore(nsl, regContent.firstChild);
			}
			nsl.insertAdjacentElement('afterend', regNote);
			return;
		}

		// GİRİŞ SAYFASI: kullanıcı adı alanının üstüne
		var pass = wrap.querySelector('input[type="password"]');
		if (!pass) return;
		var form  = pass.closest('form');
		var field = form ? form.querySelector('.wpf-field') : null;

		var loginNote = document.createElement('p');
		loginNote.className = 'nsl-or-text';
		loginNote.textContent = 'veya kullanıcı adı ve şifrenizle giriş yapın';

		if (field && field.parentNode) {
			field.parentNode.insertBefore(nsl, field);
		} else if (form && form.parentNode) {
			form.parentNode.insertBefore(nsl, form);
		}
		nsl.insertAdjacentElement('afterend', loginNote);
	});
	</script>
	<?php
}, 99 );

Bu kod ne yapıyor? Nextend butonunu bulur ve giriş formunun en üstüne taşır. Giriş formu olmayan sayfalarda hiçbir şey yapmaz.

Adım 3: Görünümü düzelten CSS

wpForo’nun özel CSS alanına (wpForo → Ayarlar içindeki renkler ve stiller bölümü) aşağıdakini ekleyin:

#wpforo #wpforo-wrap [id^="nsl-custom-login-form"] {
  text-align: center;
  margin: 0 0 10px;
}
#wpforo #wpforo-wrap .nsl-or-text {
  text-align: center;
  color: #666;
  margin: 0 0 20px;
  font-size: 14px;
}
#wpforo #wpforo-wrap div.nsl-container {
  display: block !important;
  text-align: center !important;
}
#wpforo #wpforo-wrap div.nsl-container .nsl-container-buttons {
  display: inline-block;
}
#wpforo #wpforo-wrap div.nsl-container .nsl-button-default {
  display: inline-flex !important;
  align-items: center !important;
  background: #fff !important;
  border: 1px solid #dadce0 !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}
#wpforo #wpforo-wrap div.nsl-container .nsl-button-svg-container {
  display: flex !important;
  align-items: center;
  flex: 0 0 auto !important;
  width: auto !important;
  height: auto !important;
  padding: 8px 0 8px 8px !important;
  margin: 0 !important;
}
#wpforo #wpforo-wrap div.nsl-container .nsl-button-svg-container svg {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  visibility: visible !important;
  opacity: 1 !important;
}
#wpforo #wpforo-wrap div.nsl-container .nsl-button-label-container {
  color: #3c4043 !important;
  margin: 0 24px 0 12px !important;
}

Bu kod ne yapıyor? wpForo’nun kendi stillerinin butonu ezmesini engeller. Beyaz zemini, Google’ın renkli “G” logosunu ve gri yazıyı geri getirir.

Adım 4: Önbelleği temizleyin

LiteSpeed, WP Rocket gibi bir önbellek eklentisi kullanıyorsanız önbelleği temizleyin. Sonra tarayıcıda sayfayı Ctrl + F5 ile yenileyin.

Adım 5: Girişten sonra yönetim paneline gitmesin

Varsayılan ayarda Google ile giren üyeler wp-admin sayfasına yönlenmeye çalışabilir. Bunu düzeltmek için:

1. Nextend Social Login → Settings → General bölümüne gidin.
2. Default redirect url (veya Fixed redirect url) alanına forum adresinizi yazın.
3. Kaydedin ve bir test hesabıyla deneyin.

Sorun çıkarsa

• Buton hâlâ sayfanın altında: Snippet’in etkin olduğundan ve önbelleğin temizlendiğinden emin olun.
• Logo çıkmıyor: Butona sağ tıklayıp İncele deyin. Logo (<svg>) öğesini seçin ve sağ taraftaki Computed sekmesinde display, width ve height değerlerine bakın. none ya da 0 yazan varsa onu ezen bir kural var demektir. Yeni bir CSS satırıyla düzeltilir.
• Renkler farklı çıkıyor: Nextend’de Google sağlayıcısının Button skin ayarını “Light” yapın.

Umarım işinize yarar. Takıldığınız yeri yazarsanız birlikte bakarız.