سفارشی کردن ظاهر و احساس reCAPTCHA

مهم : نسخه 1.0 reCAPTCHA API دیگر پشتیبانی نمی‌شود، لطفاً به نسخه 2.0 ارتقا دهید. بیشتر بدانید

هنگامی که reCAPTCHA را با موفقیت در سایت خود نصب کردید، ممکن است بخواهید ظاهر آن را تغییر دهید. این صفحه توضیح می دهد: (1) نحوه انتخاب یکی از تم های استاندارد reCAPTCHA ; (2) نحوه سفارشی سازی کامل ظاهر reCAPTCHA . و (3) نحوه بین المللی کردن reCAPTCHA با تغییر زبان ویجت .

تم های استاندارد

برای اینکه ویجت reCAPTCHA یک تم متفاوت نمایش دهد، ابتدا باید کد زیر را در صفحه اصلی HTML خود در هر جایی قبل از عنصر <form> که در آن reCAPTCHA ظاهر می شود، اضافه کنید (اگر بعد از اسکریپت اصلی جایی که reCAPTCHA برای اولین بار فراخوانی می شود قرار داده شود، کار نخواهد کرد) :

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

برای استفاده از یک تم استاندارد، باید 'theme_name' با یکی از چهار نام موضوع زیر جایگزین کنید:

"قرمز" (طرح پیش فرض)	'سفید'
"شیشه سیاه"	'تمیز'

تم سفارشی

طرح زمینه سفارشی به شما امکان می دهد دقیقاً نحوه نمایش تصویر reCAPTCHA را کنترل کنید. ( در اینجا یک نسخه نمایشی از طرح زمینه سفارشی است.) برای استفاده از تم سفارشی، ابتدا باید ویژگی theme RecaptchaOptions را روی 'custom' تنظیم کنید. این به reCAPTCHA می گوید که نباید یک رابط کاربری از خود ایجاد کند. reCAPTCHA برای نمایش CAPTCHA به کاربر به وجود عناصر HTML با شناسه های زیر متکی است:

• یک div خالی با شناسه recaptcha_image . این جایی است که تصویر واقعی قرار خواهد گرفت. div 300x57 پیکسل خواهد بود.
• یک ورودی متن با شناسه و نام هر دو روی recaptcha_response_field تنظیم شده است. اینجاست که کاربر می تواند پاسخ خود را وارد کند.
• به صورت اختیاری، یک div که شامل کل ویجت reCAPTCHA است. این ID div باید در custom_theme_widget قرار گیرد و سبک div باید روی display:none تنظیم شود. پس از اینکه کد موضوعی reCAPTCHA به طور کامل بارگیری شد، div را قابل مشاهده می کند. این عنصر از سوسو زدن صفحه هنگام بارگیری جلوگیری می کند.

برای پیاده سازی همه این موارد، ابتدا کد زیر را در صفحه اصلی HTML خود در هر جایی قبل از عنصر <form> که در آن reCAPTCHA ظاهر می شود قرار دهید:

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

سپس در داخل عنصر <form> جایی که می‌خواهید reCAPTCHA ظاهر شود، قرار دهید:

 <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>

توجه داشته باشید که چند خط آخر به سادگی روش استاندارد نمایش reCAPTCHA است که در مقدمه این راهنما توضیح داده شده است.

در اینجا چیزی است که در کد بالا اتفاق می افتد. شی جاوا اسکریپت Recaptcha روش هایی را ارائه می دهد که به شما امکان می دهد وضعیت CAPTCHA را تغییر دهید. روش بارگذاری مجدد یک چالش CAPTCHA جدید را نمایش می دهد و روش switch_type بین CAPTCHAهای تصویر و صدا جابجا می شود. به منظور ایجاد یک رابط کاربری کامل برای reCAPTCHA، زمانی که CAPTCHA در حالت های مختلف است، اطلاعات متفاوتی را نمایش می دهیم. به عنوان مثال، هنگامی که کاربر در حال مشاهده یک تصویر CAPTCHA است، پیوندی به "دریافت یک CAPTCHA صوتی" نشان داده می شود. چهار کلاس CSS برای ایجاد یک رابط کاربری stateful برای شما در دسترس است:

کلاس CSS	قابل مشاهده زمانی که ...
recaptcha_only_if_image	یک تصویر CAPTCHA در حال نمایش است
recaptcha_only_if_audio	یک CAPTCHA صوتی در حال نمایش است
recaptcha_only_if_incorrect_sol	راه حل قبلی نادرست بود
recaptcha_only_if_no_incorrect_sol	راه حل قبلی نادرست نبود

در حالی که قالب بندی گزینه های زیادی را در اختیار شما قرار می دهد، باید برخی از قوانین سازگاری رابط کاربری را دنبال کنید:

• باید اعلام کنید که از reCAPTCHA در نزدیکی ویجت CAPTCHA استفاده می کنید.
• شما باید یک دکمه قابل مشاهده ارائه کنید که تابع بارگذاری مجدد را فراخوانی می کند.
• شما باید راهی برای دسترسی کاربران کم بینا به CAPTCHA صوتی فراهم کنید.
• شما باید برای هر تصویری که به عنوان دکمه در ویجت reCAPTCHA استفاده می کنید، متن جایگزین ارائه کنید.

بین المللی سازی: تغییر زبان ویجت

دو راه برای بین المللی کردن ویجت reCAPTCHA وجود دارد:

ساخته شده در ترجمه ها

reCAPTCHA تعدادی ترجمه داخلی دارد. می توانید با تنظیم پارامتر lang RecaptchaOptions از این موارد استفاده کنید:

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

ترجمه های سفارشی

اگر ترجمه ای برای زبان شما وجود ندارد، می توانید ترجمه خود را بسازید. شما باید تمام رشته ها را در جاوا اسکریپت reCAPTCHA ترجمه کنید و متغیر "custom_translations" RecaptchaOptions را تنظیم کنید. هر رشته ای که تنظیم نکنید از ترجمه پیش فرض زبان شما گرفته می شود. می‌توانید از این برای لغو تنها بخشی از ترجمه پیش‌فرض استفاده کنید (مثلاً اگر ترجمه‌ای که انتخاب کرده‌ایم متناسب با منطقه شما نباشد). مثلا:

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

در اینجا یک مثال کاربردی از ترجمه سفارشی ایتالیایی آمده است ( قبل از تماس با reCAPTCHA این کد را قرار دهید):

<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 مرجع

فیلدهای زیر را می توان در فرهنگ لغت RecaptchaOptions تنظیم کرد:

کلید	مقادیر ممکن	مقدار پیش فرض	معنی
موضوع	"قرمز" | "سفید" | 'شیشه مشکی' | "تمیز" | 'سفارشی'	'قرمز'	تعریف می کند که از کدام موضوع برای reCAPTCHA استفاده شود. تم های قرمز، سفید، شیشه سیاه و تمیز تم های از پیش تعریف شده ای هستند که reCAPTCHA رابط کاربری را در اختیار شما قرار می دهد. در موضوع سفارشی، سایت شما کنترل کاملی بر ظاهر reCAPTCHA دارد.
زبان	هر کد زبان پشتیبانی شده	'en'	کدام زبان در رابط برای تم های از پیش تعریف شده استفاده می شود. زبان های زیر پشتیبانی می شوند: زبان کد انگلیسی en هلندی nl فرانسوی fr آلمانی de پرتغالی pt روسی ru اسپانیایی es ترکی tr اگر زبان سایت شما پشتیبانی نمی شود، همیشه می توانید از طرح زمینه سفارشی برای قرار دادن reCAPTCHA در زبان خود استفاده کنید.
سفارشی_ترجمه ها	فرهنگ لغت ترجمه ها	خالی	از این برای تعیین ترجمه های سفارشی رشته های reCAPTCHA استفاده کنید.
custom_theme_widget	رشته ای با شناسه یک عنصر DOM	خالی	هنگام استفاده از تم سفارشی، این یک عنصر div است که حاوی ویجت است. برای نحوه استفاده از آن به بخش تم سفارشی مراجعه کنید.
tabindex	هر عدد صحیح	0	یک فهرست برگه برای کادر متنی reCAPTCHA تنظیم می کند. اگر سایر عناصر فرم از tabindex استفاده می کنند، این باید به گونه ای تنظیم شود که ناوبری برای کاربر آسان تر شود

به عنوان مثال، این تگ اسکریپت باعث می شود که reCAPTCHA یک تم سفید داشته باشد و دارای tabindex 2 باشد:

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