تخصيص شكل ومضمون 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' بأحد أسماء المظاهر الأربعة التالية:

‎'red' (المظهر التلقائي)	'white'
"أسود زجاجي"	"نظيف"

المظهر المخصّص

تتيح لك المظاهر المخصصة التحكم بشكل دقيق في كيفية ظهور صورة reCAPTCHA. (إليك عرض توضيحي للمواضيع المخصّصة). من أجل استخدام تخصيص المظهر، يجب أولاً ضبط سمة المظهر في RecaptchaOptions على "custom". هذا النمط إبلاغ reCAPTCHA بأنّه يجب ألا تنشئ واجهة مستخدم خاصة بها. سيعتمد reCAPTCHA على وجود عناصر HTML بالأرقام التعريفية التالية لعرض اختبار CAPTCHA للمستخدم:

• div فارغ يحمل رقم التعريف recaptcha_image هذا هو المكان الذي سيتم فيه وضع الصورة الفعلية. سيكون حجم div بحجم 300×57 بكسل.
• إدخال نصي يتضمّن المعرّف والاسم، تم ضبطهما إلى recaptcha_response_field. هذا هو المكان الذي يمكن للمستخدم فيه إدخال إجابته.
• div اختياري يحتوي على Widget reCAPTCHA بالكامل يجب وضع قسم المعرِّف هذا في يجب أن تتضمن 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 شرحًا في المقدّمة. في هذا الدليل.

إليك ما يحدث في الرمز أعلاه. يوفّر كائن JavaScript reCAPTCHA طرقًا تتيح لك تغيير حالة اختبار CAPTCHA. تعرِض الطريقة reload تحدّي CAPTCHA جديدًا، وتتيح الطريقة switch_type التبديل بين اختبارات CAPTCHA الصورية والصوتية. لإنشاء واجهة مستخدم كاملة لاختبار reCAPTCHA، ستعرض معلومات مختلفة عندما يكون اختبار CAPTCHA في حالات مختلفة. على سبيل المثال، عندما يشاهد المستخدم صورة اختبار CAPTCHA، ورابط إلى "الحصول على اختبار CAPTCHA صوتي" تظهر. تتوفر لك أربع فئات CSS لإنشاء واجهة المستخدم ذات الحالة:

فئة 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>

الترجمات المخصّصة

إذا لم تتوفر ترجمة للغتك، يمكنك إنشاء ترجمة بنفسك. عليك ترجمة جميع السلاسل في الرمز البرمجي JavaScript لخدمة reCAPTCHA وضبط المتغيّر "custom_translations" في RecaptchaOptions. سيتم أخذ أي سلاسل لا تضبطها من الترجمة التلقائية لlanguage. يمكنك استخدام هذا الخيار لإلغاء جزء فقط من ترجمة افتراضية (على سبيل المثال، إذا لم تكن الترجمة التي اخترناها تناسب منطقتك). على سبيل المثال:

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

المفتاح	القيم المحتملة	القيمة التلقائية	المعنى
المظهر	‎'red' | ‎'white' | ‎'blackglass' | ‎'clean' | ‎'custom'	'red'	يحدد هذا الإعداد المظهر الذي يجب استخدامه في reCAPTCHA. المظاهر الأحمر والأبيض والأسود والزجاج هي مظاهر محددة مسبقًا يوفر فيها reCAPTCHA واجهة المستخدم. في المظهر المخصص، يكون لموقعك الإلكتروني تحكّم كامل في مظهر reCAPTCHA.
lang	أي رمز لغة متوافق	'en'	اللغة المستخدَمة في الواجهة للمواضيع المُحدَّدة مسبقًا اللغات التالية متاحة: Language الرمز الإنجليزية en الهولندية nl الفرنسية fr الألمانية de البرتغالية pt الروسية ru الإسبانية es التركية tr إذا لم تكن لغة موقعك الإلكتروني متوافقة، يمكنك في أي وقت استخدام مظاهر مخصّصة لوضع reCAPTCHA في .
custom_translations	قاموس الترجمات	قيمة فارغة	استخدِم هذا الحقل لتحديد الترجمات المخصّصة لسلاسل reCAPTCHA.
custom_theme_widget	سلسلة معرّف عنصر DOM	قيمة فارغة	عند استخدام المظهر المخصّص، يكون هذا عنصر div يحتوي على التطبيق المصغّر. يمكنك الاطّلاع على قسم "المظاهر المخصصة" لمعرفة كيفية استخدام هذه الميزة.
tabindex	أي عدد صحيح	0	لضبط tabindex لمربع نص reCAPTCHA. إذا كانت عناصر أخرى في النموذج تستخدم فهرس علامة التبويب، يجب ضبط هذا الخيار لتسهيل التنقّل على المستخدم.

على سبيل المثال، تجعل علامة النص البرمجي هذه reCAPTCHA لها مظهر باللون الأبيض وتحتوي على Tabindex 2:

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