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

• علامة div فارغة برقم التعريف recaptcha_image. سيتم وضع الصورة في هذا القسم. سيكون حجم علامة div 300x57 بكسل.
• تم ضبط إدخال نصي يتضمّن رقم التعريف والاسم على 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 JavaScript طرقًا تتيح لك تغيير حالة اختبار 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 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.
lang	أي رمز لغة متوافق.	'ar'	اللغة التي يتم استخدامها في الواجهة للمظاهر المحددة مسبقًا. اللغات التالية متاحة: Language الرمز الإنجليزية en الهولندية nl برنامج باللغة الفرنسية fr الألمانية de البرتغالية pt الروسية ru الإسبانية es التركية tr إذا لم تكن لغة موقعك الإلكتروني متوافقة، يمكنك في أي وقت استخدام مواضيع مخصّصة لإضافة reCAPTCHA إلى لغتك.
custom_translations	قاموس للترجمات	null	استخدِم هذا الخيار لتحديد الترجمات المخصّصة لسلاسل reCAPTCHA.
custom_theme_widget	سلسلة بها معرّف عنصر DOM	null	عند استخدام مظهر مخصص، يكون هذا عنصر div يحتوي على الأداة. راجِع قسم المواضيع المخصّصة للتعرّف على كيفية استخدام هذه الميزة.
Tabindex	أي عدد صحيح	0	تضبط هذه السياسة فهرس Tab لمربّع نص reCAPTCHA. إذا كانت هناك عناصر أخرى في النموذج تستخدم فهرس Tab، يجب ضبط هذا الإذن لتسهيل التنقّل على المستخدم.

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

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