การปรับแต่งรูปลักษณ์ของ reCAPTCHA

สำคัญ: ระบบไม่รองรับ reCAPTCHA API เวอร์ชัน 1.0 อีกต่อไปแล้ว โปรดอัปเกรดเป็นเวอร์ชัน 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' ด้วยชื่อธีมจาก 1 ใน 4 ชื่อต่อไปนี้

"สีแดง" (ธีมเริ่มต้น)	"สีขาว"
"เรือนกระจก"	"สะอาด"

ธีมที่กำหนดเอง

การกำหนดธีมที่กำหนดเองช่วยให้คุณควบคุมลักษณะการแสดงรูปภาพ reCAPTCHA ได้ (นี่คือการสาธิตการกำหนดธีมที่กำหนดเอง) หากต้องการใช้การกำหนดธีมที่กำหนดเอง คุณต้องตั้งค่าพร็อพเพอร์ตี้ธีมของ RecaptchaOptions เป็น "กำหนดเอง" ก่อน ซึ่งจะบอก reCAPTCHA ว่าไม่ควรสร้างอินเทอร์เฟซผู้ใช้เอง reCAPTCHA จะอาศัยองค์ประกอบ HTML ที่มีรหัสต่อไปนี้ในการแสดง CAPTCHA แก่ผู้ใช้

• div ที่ว่างเปล่าที่มีรหัส recaptcha_image ซึ่งเป็นตำแหน่งที่ระบบจะวางรูปภาพจริงไว้ div จะมีขนาด 300x57 พิกเซล
• อินพุตข้อความที่มีรหัสและชื่อตั้งค่าเป็น recaptcha_response_field ส่วนนี้คือส่วนที่ผู้ใช้ป้อนคำตอบได้
• (ไม่บังคับ) div ที่มีวิดเจ็ต reCAPTCHA ทั้งหมด ควรวาง 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>

โปรดทราบว่า 2-3 บรรทัดสุดท้ายเป็นเพียงวิธีมาตรฐานในการแสดง reCAPTCHA ซึ่งอธิบายไว้ในบทนำของคู่มือนี้

เกิดอะไรขึ้นในโค้ดด้านบน ออบเจ็กต์ reCAPTCHA JavaScript แสดงเมธอดที่ช่วยให้คุณเปลี่ยนสถานะของ CAPTCHA เมธอด reload แสดงคำถาม CAPTCHA ใหม่ และวิธีการ switch_type จะสลับระหว่าง CAPTCHA แบบรูปภาพและแบบเสียง ในการสร้าง UI แบบเต็มสำหรับ reCAPTCHA เราจะแสดงข้อมูลที่แตกต่างกันเมื่อ CAPTCHA มีสถานะต่างกัน เช่น เมื่อผู้ใช้กำลังดู CAPTCHA เป็นภาพ ลิงก์ "รับ CAPTCHA เป็นเสียง" จะปรากฏขึ้น คุณสามารถสร้าง UI ที่เก็บสถานะได้ 4 คลาส ดังนี้

คลาส 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 เป็นสากลมี 2 วิธีดังนี้

คำแปลในตัว

reCAPTCHA มีคำแปลในตัวจำนวนหนึ่ง คุณจะใช้การตั้งค่าเหล่านี้ได้โดยตั้งค่าพารามิเตอร์ lang ของ RecaptchaOptions:

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

คำแปลแบบกำหนดเอง

หากไม่มีคำแปลสำหรับภาษาของคุณ คุณสามารถสร้างคำแปลของคุณเองได้ คุณต้องแปลสตริงทั้งหมดใน JavaScript ของ reCAPTCHA และตั้งค่าตัวแปร "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

คุณตั้งค่าช่องต่อไปนี้ได้ในพจนานุกรม reCAPTCHA

คีย์	ค่าที่เป็นไปได้	ค่าเริ่มต้น	ความหมาย
ธีม	"สีแดง" | "สีขาว" | "กระจกดำ" | "สะอาด" | "กำหนดเอง"	"แดง"	กำหนดธีมที่จะใช้สำหรับ reCAPTCHA ธีมสีแดง ขาว ดำ และเรียบง่ายคือธีมที่กำหนดไว้ล่วงหน้าซึ่ง reCAPTCHA มีอินเทอร์เฟซผู้ใช้ ในธีมที่กำหนดเอง เว็บไซต์จะควบคุมลักษณะที่ปรากฏของ reCAPTCHA ได้อย่างเต็มรูปแบบ
lang	รหัสภาษาที่รองรับ	"th"	ภาษาที่ใช้ในอินเทอร์เฟซสำหรับธีมที่กำหนดไว้ล่วงหน้า ภาษาที่รองรับมีดังต่อไปนี้ ภาษา รหัส อังกฤษ en ดัตช์ nl ฝรั่งเศส fr เยอรมัน de โปรตุเกส pt รัสเซีย ru สเปน es ตุรกี tr หากระบบไม่รองรับภาษาของเว็บไซต์ คุณใช้ธีมที่กำหนดเองเพื่อใส่ reCAPTCHA เป็นภาษาของคุณได้เสมอ
custom_translations	พจนานุกรมการแปล	null	ใช้ตัวเลือกนี้เพื่อระบุคำแปลที่กำหนดเองสำหรับสตริง reCAPTCHA
custom_theme_widget	สตริงที่มีรหัสขององค์ประกอบ DOM	null	เมื่อใช้การกำหนดธีมที่กำหนดเอง องค์ประกอบนี้จะเป็นองค์ประกอบ div ที่มีวิดเจ็ต ดูวิธีใช้งานได้ในส่วนการกำหนดธีมที่กำหนดเอง
ดัชนีแท็บ	จำนวนเต็มใดก็ได้	0	ตั้งค่า tabindex สำหรับกล่องข้อความ reCAPTCHA หากองค์ประกอบอื่นๆ ในแบบฟอร์มใช้ Tabindex คุณควรตั้งค่านี้เพื่อให้ผู้ใช้ไปยังส่วนต่างๆ ได้ง่ายขึ้น

ตัวอย่างเช่น แท็กสคริปต์นี้ทำให้ reCAPTCHA มีธีมสีขาวและมี Tabindex 2 ดังนี้

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