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 2.0 sürümüne yükseltin. Daha fazla bilgi

reCAPTCHA'yı sitenize başarıyla yükledikten sonra görünümünü değiştirmek isteyebilirsiniz. Bu sayfada, (1) standart reCAPTCHA temalarından birinin nasıl seçileceği, (2) reCAPTCHA görünümünün nasıl tamamen özelleştirileceği ve (3) Widget'ın dilini değiştirerek reCAPTCHA'yı nasıl uluslararası hale getireceği açıklanmaktadır.

Standart Temalar

reCAPTCHA widget'ının farklı bir tema göstermesini sağlamak için ilk olarak aşağıdaki kodu, reCAPTCHA'nın göründüğü <form> öğesinden önce herhangi bir yere ana HTML sayfanızda eklemeniz gerekir (bu kod, reCAPTCHA'nın ilk çağrıldığı ana komut dosyasından sonra yerleştirilirse çalışmaz):

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

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

"kırmızı" (varsayılan tema)	"white"
"siyah cam"	"temiz"

Özel Tema Oluşturma

Özel tema oluşturma, reCAPTCHA resminin tam olarak nasıl görüneceğini kontrol etmenizi sağlar. (Özel tema oluşturma işlemiyle ilgili demoyu burada bulabilirsiniz.) Özel tema kullanmak 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 öğelerini kullanır:

• recaptcha_image kimliğine sahip boş bir div. Asıl resim buraya yerleştirilir. Div, 300x57 piksel boyutunda olacaktır.
• Kimliği ve adı recaptcha_response_field olarak ayarlanmış bir metin girişi. Kullanıcı, yanıtını buraya girebilir.
• İsteğe bağlı olarak, reCAPTCHA widget'ının tamamını içeren bir div öğesi kullanılabilir. Bu kimlik div'i custom_theme_widget içine yerleştirilmeli ve div stili display:none olarak ayarlanmalıdır. reCAPTCHA tema kodu tamamen yüklendikten sonra div'i görünür hale getirir. Bu öğe, sayfa yüklenirken titremesini önler.

Tüm bunları uygulamak için ilk olarak aşağıdaki kodu ana HTML sayfanızda 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, reCAPTCHA'nın görünmesini istediğiniz <form> öğesinin içine şu kodu yerleştirin:

 <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, bu kılavuzun giriş kısmında açıklanan reCAPTCHA'yı görüntülemenin standart yolu olduğuna dikkat edin.

Yukarıdaki kodda ne olduğu aşağıda açıklanmıştır. Recaptcha JavaScript nesnesi, CAPTCHA'nın durumunu değiştirmenize olanak tanıyan yöntemler sağlar. Yeniden yükleme yöntemi yeni bir CAPTCHA testi görüntüler; switch_type yöntemi ise resim ve işitsel CAPTCHA'lar arasında geçiş yapar. reCAPTCHA için tam bir kullanıcı arayüzü oluşturmak amacıyla CAPTCHA farklı durumlarda farklı bilgiler gösteririz. Örneğin, kullanıcı bir resim CAPTCHA'yı görüntülerken "Sesli CAPTCHA al" bağlantısı gösterilir. Durum bilgili bir kullanıcı arayüzü oluşturmak için kullanabileceğiniz dört CSS sınıfı vardır:

CSS Sınıfı	Göründüğü durum:
recaptcha_only_if_image	bir CAPTCHA resmi görüntüleniyor
recaptcha_only_if_audio	sesli bir CAPTCHA gösteriliyor
recaptcha_only_if_incorrect_sol	önceki çözüm yanlıştı
recaptcha_only_if_no_incorrect_sol	önceki çözüm yanlış değildi

Tema oluşturma 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ı belirtmelisiniz.
• 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şebilmeleri için bir yol sağlamanız gerekir.
• reCAPTCHA widget'ında düğme olarak kullandığınız tüm görseller için alternatif metin sağlamanız gerekir.

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

reCAPTCHA widget'ını uluslararası hale getirmenin iki yolu vardır:

Yerleşik çeviriler

reCAPTCHA'nın yerleşik çevirileri vardır. RecaptchaOptions öğesinin lang parametresini ayarlayarak bunları kullanabilirsiniz:

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

Özel Çeviriler

Kendi diliniz için bir çeviri yoksa kendi çevirinizi oluşturabilirsiniz. recaptchaOptions'taki tüm dizeleri çevirmeniz ve "custom_translations" değişkenini ayarlamanız gerekir. Ayarlamadığınız tüm dizeler, dilinize ilişkin varsayılan çeviriden alınır. Varsayılan çevirinin yalnızca bir kısmını geçersiz kılmak için bunu kullanabilirsiniz (ör. seçtiğimiz çeviri bölgenize uymuyorsa). Örneğin:

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

Aşağıda, özel İtalyanca çeviri için çalışan bir örnek 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	Olası değerler	Varsayılan değer	Anlamı
tema	"kırmızı" | "beyaz" | "siyah cam" | "temiz" | "özel"	"kırmızı"	reCAPTCHA için hangi temanın kullanılacağını tanımlar. Kırmızı, beyaz, siyah cam ve temiz temalar, reCAPTCHA'nın kullanıcı arayüzünü sağladığı önceden tanımlanmış temalardır. Özel temada sitenizin reCAPTCHA görünümü üzerinde tam kontrolü vardır.
lang	Desteklenen herhangi bir dil kodu.	"tr"	Arayüzde önceden tanımlanmış temalar için kullanılan dil. Aşağıdaki 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ı kendi dilinize yerleştirmek için her zaman özel bir tema kullanabilirsiniz.
custom_translations	Çeviri sözlüğü	null	reCAPTCHA dizelerinin özel çevirilerini belirtmek için bunu kullanın.
custom_theme_widget	Bir DOM öğesinin kimliğine sahip dize	null	Özel tema kullanırken bu, widget'ı içeren bir div öğesidir. Bunun nasıl kullanılacağını öğrenmek için özel tema bölümüne göz atın.
sekme dizini	herhangi bir tam sayı	0	reCAPTCHA metin kutusu için bir tabindex ayarlar. Formdaki diğer öğelerde sekme dizini kullanılıyorsa kullanıcıların daha kolay gezinmesini sağlamak için bu ayar yapılmalıdır

Örneğin, aşağıdaki komut dosyası etiketi reCAPTCHA'nın beyaz bir temaya ve tabindex 2'ye sahip olmasına neden olur:

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