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

• علامة div فارغة برقم التعريف recaptcha_image. هذا هو المكان الذي وضع الصورة الفعلية. سيكون حجم div بحجم 300×57 بكسل.
• إدخال نصي يتضمّن المعرّف والاسم، تم ضبطهما إلى recaptcha_response_field. هذا هو المكان الذي يمكن للمستخدم فيه إدخال إجابته.
• يمكنك اختيار div يحتوي على 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. تعرض طريقة إعادة التحميل تحدي 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 JavaScript وضبط "custom_translations" متغير reCAPTCHAtchaOptions. سيتم أخذ أي سلاسل لم يتم تعيينها من الترجمة الافتراضية . يمكنك استخدام هذا الخيار لإلغاء جزء فقط من ترجمة افتراضية (على سبيل المثال، إذا لم تكن الترجمة التي اخترناها تناسب منطقتك). على سبيل المثال:

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

مرجع reCAPTCHA

يمكن ضبط الحقول التالية في قاموس reCAPTCHAOptions:

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

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

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