reCAPTCHA'nın Görünümünü ve Tarzını Özelleştirme

Önemli: reCAPTCHA API'nin 1.0 sürümü artık desteklenmiyor. Lütfen sürüm 2.0'a yükseltin. Daha fazla bilgi

Sitenize başarıyla reCAPTCHA'yı yükledikten sonra görünümünü değiştirmek isteyebilirsiniz. Bu sayfa (1) Standart reCAPTCHA temalarından birinin nasıl seçileceği; (2) reCAPTCHA'nın görünümünü tamamen özelleştirme; ve (3) Widget'ın dilini değiştirerek reCAPTCHA'yı uluslararası hale getirme.

Standart Temalar

reCAPTCHA widget'ının farklı bir tema görüntülemesi için önce ana sayfanıza aşağıdaki kodu eklemeniz gerekir: <form> ifadesinden önce herhangi bir yerde bulunan HTML sayfası öğesidir (bu işlev, reCAPTCHA'nın reCAPTCHA'nın ilk çağrıldığı ana komut dosyasından sonra yerleştirilir):

 <script type="text/javascript">
 var RecaptchaOptions = {
    theme : 'theme_name'
 };
 </script>

Standart bir tema kullanmak için 'theme_name' öğesini aşağıdaki dört temadan biriyle değiştirmeniz gerekir adlar:

"red" (varsayılan tema)	"white" (beyaz)
"siyah cam"	"temiz"

Özel Tema

Özel tema oluşturma, reCAPTCHA resminin tam olarak nasıl görüneceğini kontrol etmenizi sağlar. (Özel tema oluşturma demosunu burada görebilirsiniz.) Bu sürümde özel tema oluşturmak için öncelikle RecaptchaOptions öğesinin tema özelliğini "özel" olarak ayarlamanız gerekir. Bu reCAPTCHA'ya, kendi kullanıcı arayüzünü oluşturmaması gerektiğini bildirir. reCAPTCHA, Kullanıcıya CAPTCHA'yı göstermek için aşağıdaki kimliklere sahip HTML öğeleri:

• recaptcha_image kimliğine sahip boş bir div. Burada gerçek resim yerleştirilir. Div 300x57 piksel olacaktır.
• Hem kimlik hem de ad ayarlanmış bir metin girişi recaptcha_response_field numaralı telefona. Kullanıcılar buradan yanıtını girin.
• Dilerseniz reCAPTCHA'nın tamamını içeren bir div widget'ını tıklayın. Bu kimlik div öğesinin, custom_theme_widget ve div stili de display:none olarak ayarlanmalıdır. reCAPTCHA tema kodundan sonra div öğesi tamamen yüklendiğinde, div görünür hale gelir. Bu öğe, sayfa yüklenirken titreşir.

Tüm bunları uygulamak için öncelikle aşağıdaki kodu ana HTML sayfanıza, reCAPTCHA'nın göründüğü <form> öğesinden önce herhangi bir yere yerleştirin:

 <script type="text/javascript">
 var RecaptchaOptions = {
    theme : 'custom',
    custom_theme_widget: 'recaptcha_widget'
 };
 

Ardından, <form> öğesini kullanın:

 <div id="recaptcha_widget" style="display:none">

   <div id="recaptcha_image"></div>
   <div class="recaptcha_only_if_incorrect_sol" style="color:red">Incorrect please try again</div>

   <span class="recaptcha_only_if_image">Enter the words above:</span>
   <span class="recaptcha_only_if_audio">Enter the numbers you hear:</span>

   <input type="text" id="recaptcha_response_field" name="recaptcha_response_field" />

   <div><a href="javascript:Recaptcha.reload()">Get another CAPTCHA</a></div>
   <div class="recaptcha_only_if_image"><a href="javascript:Recaptcha.switch_type('audio')">Get an audio CAPTCHA</a></div>
   <div class="recaptcha_only_if_audio"><a href="javascript:Recaptcha.switch_type('image')">Get an image CAPTCHA</a></div>

   <div><a href="javascript:Recaptcha.showhelp()">Help</a></div>

 </div>

 <script type="text/javascript"
    src="http://www.google.com/recaptcha/api/challenge?k=your_public_key">
 </script>
 <noscript>
   <iframe src="http://www.google.com/recaptcha/api/noscript?k=your_public_key"
        height="300" width="500" frameborder="0"></iframe><br>
   <textarea name="recaptcha_challenge_field" rows="3" cols="40">
   </textarea>
   <input type="hidden" name="recaptcha_response_field"
        value="manual_challenge">
 </noscript>

Son birkaç satırın giriş bölümünde açıklanan reCAPTCHA'yı görüntülemenin standart yolu olduğuna dikkat edin. inceleyebilirsiniz.

Yukarıdaki kodda neler olduğu burada açıklanmaktadır. Recaptcha JavaScript nesnesi, aşağıdakileri yapmanıza olanak tanıyan yöntemler sağlar: ve CAPTCHA'nın durumunu değiştirebilirsiniz. reload yöntemi, yeni bir CAPTCHA sorgulamasını ve switch_type, resim ve işitsel CAPTCHA'lar arasında geçiş yapar. reCAPTCHA için eksiksiz bir kullanıcı arayüzü oluşturmak amacıyla CAPTCHA farklı durumlarda olduğunda farklı bilgiler görüntüler. Örneğin, kullanıcı bir resim CAPTCHA, "Sesli CAPTCHA alın" bağlantısı gösterilir. Google Analytics 4'te Google Cloud Platform'un durum bilgili kullanıcı arayüzü:

CSS Sınıfı	Şu durumda görünür:
recaptcha_only_if_image	bir CAPTCHA görüntüleniyor
recaptcha_only_if_audio	sesli bir CAPTCHA görüntüleniyor
recaptcha_only_if_incorrect_sol	önceki çözüm yanlıştı
recaptcha_only_if_no_incorrect_sol	önceki çözüm yanlış değildi

Tema oluşturmak size birçok seçenek sunsa da bazı kullanıcı arayüzü tutarlılık kurallarına uymanız gerekir:

• CAPTCHA widget'ının yanında reCAPTCHA kullandığınızı belirtmeniz gerekir.
• Yeniden yükleme işlevini çağıran görünür bir düğme sağlamanız gerekir.
• Görme engelli kullanıcıların sesli CAPTCHA'ya erişebilmesi için bir yol sağlamanız gerekir.
• reCAPTCHA widget'ında düğme olarak kullandığınız tüm resimler için alternatif metin eklemeniz gerekir.

Uluslararasılaştırma: Widget'ın Dilini Değiştirme

reCAPTCHA widget'ını uluslararasılaştırmanın iki yolu vardır:

Yerleşik çeviriler

reCAPTCHA'da birçok yerleşik çeviri bulunur. Bunları, RecaptchaOptions:

<script type="text/javascript">
var RecaptchaOptions = {
   lang : 'fr',
};
</script>

Özel Çeviriler

Diliniz için çeviri yoksa kendi dilinizi oluşturabilirsiniz. reCAPTCHA JavaScript'indeki tüm dizeleri çevirmeniz ve RecaptchaOptions'ın "custom_translations" değişkenini ayarlamanız gerekir. Ayarlamadığınız tüm dizeler, dili'ne dokunun. Varsayılan bir çevirinin yalnızca bir kısmını geçersiz kılmak için bunu kullanabilirsiniz (örneğin, seçtiğimiz çeviri uygun olmalıdır). Örneğin:

<script type= "text/javascript">
var RecaptchaOptions = {
   custom_translations : { instructions_visual : "This is my text:" }
};
</script>

Aşağıda, özel bir İtalyanca çevirinin çalışan bir örneği verilmiştir (bu kodu reCAPTCHA'yı çağırmadan önce yerleştirin):

<script type="text/javascript">
        var RecaptchaOptions = {
                custom_translations : {
                        instructions_visual : "Scrivi le due parole:",
                        instructions_audio : "Trascrivi ci\u00f2 che senti:",
                        play_again : "Riascolta la traccia audio",
                        cant_hear_this : "Scarica la traccia in formato MP3",
                        visual_challenge : "Modalit\u00e0 visiva",
                        audio_challenge : "Modalit\u00e0 auditiva",
                        refresh_btn : "Chiedi due nuove parole",
                        help_btn : "Aiuto",
                        incorrect_try_again : "Scorretto. Riprova.",
                },
                lang : 'it', // Unavailable while writing this code (just for audio challenge)
                theme : 'red' // Make sure there is no trailing ',' at the end of the RecaptchaOptions dictionary
        };
</script>

RecaptchaOptions Referansı

Aşağıdaki alanlar RecaptchaOptions sözlüğünde ayarlanabilir:

Anahtar	Muhtemel değerler	Varsayılan değer	Anlamı
tema	"red" | "white" (beyaz) | "siyah cam" | "temiz" | "özel"	"kırmızı"	reCAPTCHA için kullanılacak temayı tanımlar. Kırmızı, beyaz, siyah cam ve net temalar reCAPTCHA'nın kullanıcı arayüzünü sağladığı önceden tanımlanmış temalardır. Özel temada, Siteniz, reCAPTCHA görünümü üzerinde tam kontrole sahiptir.
dil	Desteklenen dil kodları.	"tr"	Önceden tanımlanmış temalar için arayüzde kullanılan dil. Şu diller desteklenir: Dil Kod İngilizce en Felemenkçe nl Fransızca fr Almanca de Portekizce pt Rusça ru İspanyolca es Türkçe tr Sitenizin dili desteklenmiyorsa reCAPTCHA'yı sayfanıza yerleştirmek için istediğiniz zaman özel tema dili'ne dokunun.
custom_translations	Çeviri sözlüğü	null	reCAPTCHA dizelerinin özel çevirilerini belirtmek için bunu kullanın.
custom_theme_widget	DOM öğesinin kimliğini içeren bir dize	null	Özel tema oluştururken bu öğe, widget'ı içeren bir div öğesidir. Bunun nasıl kullanılacağını öğrenmek için özel tema oluşturma bölümüne bakın.
tabindex	herhangi bir tam sayı	0	Bir tabindex onay kutusunu işaretleyin. Formdaki diğer öğeler bir tabindex, kullanıcının gezinmesini kolaylaştıracak şekilde ayarlanmalıdır

Örneğin, bu komut dosyası etiketi reCAPTCHA'nın beyaz temaya sahip olmasını ve tabindex 2'yi kullanmasını sağlar:

<script>
var RecaptchaOptions = {
   theme : 'white',
   tabindex : 2
};
</script>