پنهان‌سازی و تغییر استایل، ابعاد و مکان ریکپچا

 وندا نوژن .

اگر برای محافظت از سایت خود در برابر ربات‌ها و اسپم‌ها از نسخه 3 سرویس ریکپچای گوگل (reCAPTCHA V3) استفاده می‌کنید، احتمالا یکی از چیزهایی که روی اعصابتان راه می‌رود آیکون ریکپچا است که در قسمت پایین سمت راست صفحات ظاهر می‌شود. قرارگیری آیکون در این قسمت، می‌تواند با محتوای فوتر سایت شما، آیکون اسکرول صفحه، آیکون چت زنده با پشتیبانی و امثالهم تداخل پیدا کند و ظاهر سایت شما را به هم بریزد.

تداخل ریکپچا با محتوای سایت

برای رفع این مشکل، چند گزینه وجود دارد که در ادامه به آن می‌رسیم:

پنهان کردن آیکون ریکپچا

خوشبختانه گوگل اجازه پنهان کردن آیکون ریکپچا را داده، منتها به این شرط که اگر حذف می‌کنید، لااقل در جایی که در معرض دید کاربر باشد ذکر کنید که سایت شما دارد از سرویس ریکپچا استفاده می‌کند.

برای قسمت اول، یعنی پنهان کردن آیکون، چنانچه از وردپرس استفاده می‌کنید می‌توانید به قسمت سفارسی‌سازی و سپس css اضافی سایت بروید و همین یک خط کد css زیر را قرار بدهید:

1.grecaptcha-badge { visibility: hidden; }

و این نکته هم در نظر داشته باشید که هرگز به جای visibility: hidden از display: none استفاده نکنید، چون باعث از کار افتادن ریکپچا می‌شود.

حالا که آیکون را برداشتید، به قسمت دوم یعنی درخواست گوگل می‌رسیم. گوگل پیشنهاد می‌کند که در صفحات فُرم‌ها یا هر جای دیگری که لازم است از کدهای html مشابه زیر استفاده کنید:

123
This site is protected by reCAPTCHA and the Google
    <a href="https://policies.google.com/privacy">Privacy Policy</a> and
    <a href="https://policies.google.com/terms">Terms of Service</a> apply.

شما می‌توانید زیر فرم‌های تماس، صفحه سبد خرید و تسویه حساب، صفحه ثبت‌نام و ورود کاربر و خلاصه هر صفحه‌ای که منطقا به ریکپچا نیاز دارد، خودتان یک جمله دلخواه فارسی اضافه کنید و به قسمت سیاست حریم خصوصی و شروط خدمات گوگل لینک بدهید؛ مثلا:

این سایت از سرویس reCAPTCHA گوگل استفاده می‌کند و تابع سیاست حریم خصوصی و شروط خدمات گوگل است.

اگر هم بخواهید به جای متن بالا کد html آن را به صفحه‌ای اضافه کنید، مشابه چنین چیزی را می‌توانید استفاده کنید:

1<p style="direction: rtl;">این سایت از سرویس reCAPTCHA <span>گوگل استفاده میکند و تابع<a href="https://policies.google.com/privacy">سیاست حریم خصوصی</a> و<a href="https://policies.google.com/terms">شروط خدمات</a> گوگل است.</span></p>

تغییر ابعاد آیکون ریکپچا

اگر بخواهید ابعاد آیکون ریکپچا را کوچک‌تر کنید، می‌توانید از کد css زیر استفاده کنید (در اینجا برای مثال مقیاس از 1 به 0.9 کاهش داده شده و این عدد به دلخواه شماست):

1234
.grecaptcha-badge {
transform:scale(0.9); 
-webkit-transform:scale(0.9);
 }

جابجایی آیکون ریکپچا

برای اینکه آیکون ریکپچا را بالاتر ببرید تا احیانا با آیکون اسکرول صفحه، چت زنده با پشتیبانی و امثالهم تداخل نداشته باشد، می‌توانید از کد css زیر استفاده کنید (در اینجا برای مثال 200 پیکسل بالاتر از جای فعلی برده شده):

1.grecaptcha-badge {bottom: 200px !important;}

واکنش‌گرا کردن آیکون ریکپچا

اگر می‌خواهید متناسب با اندازه صفحه (دسکتاپ، تبلت و موبایل) ابعاد آیکون هم کوچک‌ و بزرگ شود، می‌توانید از مشابه کد css زیر استفاده کنید (در اینجا برای مثال اگر اندازه صفحه از 1000px کوچکتر شود، ابعاد ریکپچا از 1 به 0.8 کاهش پیدا می‌کند):

12345
@media screen and (max-width: 1000px){
.grecaptcha-badge {
transform:scale(0.85);
-webkit-transform:scale(0.85); }
}