워드프레스 input 태그에 autocomplete off 속성 넣기

목차
1. An element doesn't have an autocomplete attribute 문제
2. 사용할 수 있는 코드 스니펫 탐색
3. 코드 적용 시 유의 사항
4. 코드 작성 및 적용
4-1. 기본 버전
4-2. 수정 버전

1. An element doesn't have an autocomplete attribute 문제

크롬 개발자 도구를 보다 보니 다음의 메시지를 확인할 수 있었다.

An element doesn't have an autocomplete attribute

A form field has an id or name attribute that the browser's autofill recognizes. However, it doesn't have an autocomplete attribute assigned. This might prevent the browser from correctly autofilling the form.

To fix this issue, provide an autocomplete attribute.

내용인즉, 폼 필드(form field)에 autocomplete 속성이 없다는 것.

워드프레스에서 <form> 이 사용되는 곳은 기본적으로 댓글(comments)의 입력 양식이다. 해당 양식에 자동완성이 필요 없다면 autocomplete 속성을 안 넣는 것이 아니라 autocomplete off 속성을 넣어 주어야 하는 것 같다.

autocomplete attribute invalid
autocomplete 속성을 넣으라는 메시지

'문제' 항목에서 '위반 노드' 부분을 클릭하면 해당 요소가 있는 부분으로 이동한다. 크롬 개발자 도구가 지적하고 있는 부분은 댓글 입력 폼 <input> 에서 이메일(email) 부분이었다. 이를 해결하기 위한 코드를 만들어 보았다.
(*적용 테마: GeneratePress 무료 버전)

2. 사용할 수 있는 코드 스니펫 탐색

Javascript
document.getElementById() 함수를 사용해 보았다.

<script>
document.getElementById('email').autocomplete = 'off';
</script>

JQuery
JQuery의 .attr 함수를 사용해도 된다. JQuery는 slim minified 버전을 가져오도록 했다(releases.jquery.com). 만약 JQuery를 이미 사용 중이라면 마지막 줄의 .attr 함수 부분만 넣어주면 되겠다.

<script
src="https://code.jquery.com/jquery-3.7.1.slim.min.js"
integrity="sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8="
crossorigin="anonymous"></script>
<script>$( '#email' ).attr( 'autocomplete', 'off' );</script>

3. 코드 적용 시 유의 사항

코드 넣는 위치에 대해서는 주의사항이 있는데, idemail 인 부분을 찾아 autocomplete 속성을 넣어주는 것이기 때문에 댓글 양식이 로드된 다음에 위의 코드가 실행되도록 해 주어야 제대로 적용된다. 즉, 헤더 <head> 에 넣어 주면 댓글 부분이 아직 로딩되지 않은 상황이라 목표 지점을 찾지 못하고 끝나버린다. 물론 이 상황에서 Delay All JavaScript 등과 같은 옵션 등을 사용하면 해당 코드가 헤더에 있어도 마지막쯤에 실행되기 때문에 적용할 수는 있다. 이런 관계로 코드 스니펫을 넣는 플러그인을 사용 중이라면 댓글을 포함한 메인 콘텐츠가 모두 로딩된 뒤쪽 위치에 넣어 주자.

추가적인 고려 사항으로, 댓글은 일반적으로 포스트(single post)에만 설정하는 경우가 많기 때문에 위의 코드도 포스트에서만 작동되도록 하는 것이 좋을 것 같다.

4. 코드 작성 및 적용

4-1. 기본 버전

위에 서술한 내용을 반영하여 functions.php에 넣을 수 있게 만들어 보았다. 참고로 자바스크립트 버전을 활용했고, 적용 테마는 GeneratePress 무료 버전.

// email autocomplete off
function email_autocomplete() {
if(is_single()) {
echo '<script>
document.getElementById("email").autocomplete = "off";
</script>';
}
}
add_action( 'generate_after_main_content', 'email_autocomplete' );
autocomplete attribute function
functions.php

적용 결과 이메일 <input>autocomplete="off" 속성이 추가되었고 귀찮게 떠 있던 메시지가 사라졌다.

autocomplete attribute valid
autocomplete 속성이 추가되었고 지적 사항이 사라짐

4-2. 수정 버전

모든 글에서 댓글 작성이 가능하게 설정되어 있다면 위의 기본 코드 버전을 사용해도 아무런 문제가 없다. 하지만 댓글을 비활성화한 글의 경우 코드가 헛발질을 하게 되면서 오류가 나타났다. 이를 해결하기 위해 코드를 약간 수정하게 되었다.

autocomplete attribute error when there is no comment area
댓글 입력란이 비활성화된 포스트에서 나타나는 문제 (PageSpeed Insights)

댓글 입력란이 없을 때 발생하는 문제를 해결하기 위해, 댓글 입력란이 활성화되어 있을 때에만 코드가 실행되도록 수정했다.

if(comments_open()) {
function email_autocomplete() {
if(is_single()) {
echo '<script>
document.getElementById("email").autocomplete = "off";
</script>';
}
}
add_action( 'generate_after_main_content', 'email_autocomplete' );
}


카테고리의 다른 글

  1. 티스토리에서 쓸 수 있는 간단한 글 상자 박스 태그 연습
  2. 워드프레스 블록 그룹의 여백을 조절하거나 없애기 (GeneratePress)
  3. 네이버 서치어드바이저 색인 수가 수십 개 감소하는 일이 종종 발생
  4. 워드프레스 Object Cache Pro 플러그인 업데이트는 자동 (feat. 클라우드웨이즈)
  5. 워드프레스 미디어 라이브러리 사진의 날짜 카테고리 위치 변경하기

댓글 남기기