Google Invisible reCAPTCHA 배지를 숨기는 방법
답변:
Google은 이제 FAQ 에서 배지를 숨길 수 있습니다 .
reCAPTCHA v3 배지를 숨기고 싶습니다. 무엇이 허용됩니까?
You are allowed to hide the badge as long as you include the reCAPTCHA branding visibly in the user flow. Please include the following text: 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.예를 들면 다음과 같습니다.
따라서 다음 CSS를 사용하여 간단히 숨길 수 있습니다.
.grecaptcha-badge {
visibility: hidden;
}
display: none;스팸 검사를 비활성화하는 것처럼 사용하지 마십시오 (@Zade 덕분에)
나는 모든 접근법을 테스트했고
경고 :
display: none스팸 검사를 비활성화합니다!
visibility: hidden및 opacity: 0스팸 검사를 사용하지 않도록 설정하지 마십시오.
사용할 코드 :
.grecaptcha-badge {
visibility: hidden;
}배지 아이콘을 숨길 때 Google은 다음을 추가하여 양식에서 서비스 를 참조 하기를 원합니다 .
<small>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.
</small>
data-badge속성을로 설정하십시오.inline
<button type="submit" data-sitekey="your_site_key" data-callback="onSubmit" data-badge="inline" />그리고 다음 CSS를 추가하십시오
.grecaptcha-badge {
display: none;
}opacity: 0또는 을 사용 visibility: hidden합니까? 또한 당신이 그것을 통계 어디로 링크가 있습니까?
배지를 숨기는 것은 TOU에 따라 실제로 합법적이지 않으며 기존 배치 옵션이 UI 및 / 또는 UX를 손상 시켰기 때문에 고정 위치 지정을 모방하지만 대신 인라인으로 렌더링되는 다음과 같은 사용자 정의를 생각해 냈습니다.
배지 컨테이너에 CSS를 적용하면됩니다.
.badge-container {
display: flex;
justify-content: flex-end;
overflow: hidden;
width: 70px;
height: 60px;
margin: 0 auto;
box-shadow: 0 0 4px #ddd;
transition: linear 100ms width;
}
.badge-container:hover {
width: 256px;
}나는 그것이 당신이 합법적으로 그것을 추진할 수있는 한이라고 생각합니다.
transform: scale(0.6)하고opacity: 0.6
연락처 페이지를 제외한 모든 페이지에서 배지를 숨기기로 결정했습니다 (Wordpress 사용).
/* Hides the reCAPTCHA on every page */
.grecaptcha-badge {
visibility: hidden !important;
}
/* Shows the reCAPTCHA on the Contact page */
/* Obviously change the page number to your own */
.page-id-17 .grecaptcha-badge {
visibility: visible !important;
}저는 웹 개발자가 아니므로 문제가 있으면 수정 해주세요.
편집 : 표시 대신 가시성을 사용하도록 업데이트되었습니다.
Matthew Dowell의 게시물의 약간의 변형은 짧은 플래시를 피하지만 연락처 양식 7이 표시 될 때마다 표시됩니다.
div.grecaptcha-badge{
width:0 !important;
}
div.grecaptcha-badge.show{
width:256px !important;
}그런 다음 자식 테마의 header.php에 다음을 추가했습니다.
<script>
jQuery( window ).load(function () {
if( jQuery( '.wpcf7' ).length ){
jQuery( '.grecaptcha-badge' ).addClass( 'show' );
}
});
</script>내 솔루션은 배지를 숨기고 사용자가 양식 입력에 집중할 때 배지를 표시하여 Google의 T & C를 준수하는 것입니다.
참고 : 내가 수정 한 reCAPTCHA는 WordPress 플러그인에 의해 생성되었으므로 reCAPTCHA를 <div class="inv-recaptcha-holder"> ... </div>직접 포장해야 할 수도 있습니다 .
CSS
.inv-recaptcha-holder {
visibility: hidden;
opacity: 0;
transition: linear opacity 1s;
}
.inv-recaptcha-holder.show {
visibility: visible;
opacity: 1;
transition: linear opacity 1s;
}jQuery
$(document).ready(function () {
$('form input, form textarea').on( 'focus', function() {
$('.inv-recaptcha-holder').addClass( 'show' );
});
});필요한 경우 특정 양식을 대상으로 jQuery 선택기를 변경할 수 있습니다.
Wordpress의 Contact Form 7 사용자에게는이 방법이 효과적입니다. Contact 7 Forms 페이지를 제외한 모든 페이지에서 v3 Recaptcha를 숨 깁니다.
그러나이 방법은 텍스트 입력 양식 요소가있는 모든 페이지를 식별 할 수있는 고유 한 클래스 선택기를 사용하는 모든 사이트에서 작동해야합니다.
먼저 CSS에 타일을 축소 할 수있는 대상 스타일 규칙을 추가했습니다.
CSS
div.grecaptcha-badge.hide{
width:0 !important;
}그런 다음 창을로드 한 후 트리거하기 위해 헤더에 JQuery 스크립트를 추가하여 'grecaptcha-badge'클래스 선택기를 JQuery에 사용할 수 있으며 'hide'클래스를 추가하여 사용 가능한 CSS 스타일을 적용 할 수 있습니다.
$(window).load(function () {
if(!($('.wpcf7').length)){
$('.grecaptcha-badge').addClass( 'hide' );
}
});내 타일은 여전히 0.5 초 동안 모든 페이지에서 깜박일 것이지만 지금까지 내가 찾은 최선의 해결 방법은 내가 준수하기를 바랍니다. 개선을위한 제안에 감사드립니다.
Contact Form 7 업데이트 및 최신 버전 (버전 5.1.x)을 사용하는 경우 Google reCAPTCHA v3을 설치하여 설치해야합니다.
기본적으로 화면 오른쪽 하단의 모든 페이지에 Google reCAPTCHA 로고가 표시됩니다. 이것은 우리의 평가에 따르면 사용자에게 나쁜 경험을 만들고 있습니다. 그리고 귀하의 웹 사이트, 블로그는 약간 느려집니다 (PageSpeed Score에 반영). 귀하의 웹 사이트는이 배지를 표시하기 위해 Google에서 1 개의 JavaScript 라이브러리를 추가로로드해야합니다.
다음 단계에 따라 CF7에서 Google reCAPTCHA v3을 숨길 수 있습니다 (필요한 경우에만 표시).
먼저 functions.php테마 파일 (파일 관리자 또는 FTP 클라이언트 사용) 을 엽니 다 . 이 파일은 다음 위치에 /wp-content/themes/your-theme/있으며 다음 스 니펫을 추가합니다 (이 코드를 사용하여 모든 페이지에서 reCAPTCHA 상자를 제거함).
remove_action( 'wp_enqueue_scripts', 'wpcf7_recaptcha_enqueue_scripts' );다음으로,이 스 니펫을 Google reCAPTCHA를 표시하려는 페이지 (연락처 페이지, 로그인, 등록 페이지 등)에 추가합니다.
if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
add_action( 'wp_enqueue_scripts', 'wpcf7_recaptcha_enqueue_scripts', 10, 0 );
}OIW 블로그-WordPress의 연락처 양식 7에서 Google reCAPTCHA 로고를 제거하는 방법 ( ReCAPTCHA 배지 숨기기)을 참조하십시오.
예, 할 수 있습니다 . css 또는 javascript 를 사용 하여 reCaptcha v3 배지를 숨길 수 있습니다 .
- CSS Way 는 reCaptcha 배치를 사용
display: none하거나visibility: hidden숨 깁니다. 쉽고 빠릅니다.
.grecaptcha-badge {
display:none !important;
}- 자바 스크립트 방식
var el = document.querySelector('.grecaptcha-badge');
el.style.display = 'none';Google 정책에 따라 배지를 숨기는 것이 유효하며 여기 에서 FAQ로 답변되었습니다 . 아래와 같이 Google의 개인 정보 취급 방침 및 이용 약관을 표시하는 것이 좋습니다.
자체 CSS를 적용하려면 배지를 인라인으로 배치하는 것도 도움이됩니다. 그러나 API 키를 등록 할 때 Google 이용 약관을 표시하기로 동의 했으므로 숨기지 마십시오. CSS로 배지를 완전히 사라지게 할 수는 있지만 권장하지는 않습니다.
참고 : 배지를 숨기려면 다음을 사용하십시오.
.grecaptcha-badge { visibility: hidden; }
사용자 흐름에 reCAPTCHA 브랜딩을 시각적으로 포함시키는 한 배지를 숨길 수 있습니다. 다음 텍스트를 포함하십시오 :
이 사이트는 reCAPTCHA와 Google에 의해 보호됩니다
<a href="https://policies.google.com/privacy">Privacy Policy</a> and
<a href="https://policies.google.com/terms">Terms of Service</a> apply.
여기에서 자세한 내용 reCaptacha
Recaptcha 문의 양식 7 및 Recaptcha v3 솔루션.
body:not(.page-id-20) .grecaptcha-badge {
display: none;
}하나 이상의 연락처 양식 페이지?
body:not(.page-id-12):not(.page-id-43) .grecaptcha-badge {
display: none;
}문의 양식 페이지가 더 있으면 더 많은 "노트"를 추가 할 수 있습니다.
body:not(.page-id-45):not(.page-id-78):not(.page-id-98) .grecaptcha-badge {
display: none;
}본문 섹션이 다음과 같은지 확인하십시오.
<body>다음과 같이 변경하십시오.
<body <?php body_class(); ?>>