워드프레스에서 입력폼을 사용 시 input type 필드에 숫자나 텍스트를 입력할 수 있는 박스가 생성됩니다. 이러한 숫자나 텍스트 입력 필드를 만들었을 때 입력 칸이 너무 작거나 클 경우 사이즈를 지정하게 됩니다.
지정했음에도 불구하고 편집 중에는 변경 된 사이즈로 올바르게 나오나 최종 글을 발행 시 input type 필드 크기가 원래의 사이즈로 고정되어 변경이 안되는 경우가 있습니다.
편집 중 미리보기 때는 다음 이미지 같이 입력 필드가 지정 된 크기로 올바르게 나옵니다.
하지만 최종 글 발행 후에는 다음과 같이 원래의 크기로 줄어들어 숫자 입력은 가능하나 숫자 전체가 보이지 않는 불편함이 있습니다.
body form input[type=”number”] {
max-width: 250px;
}
높이 지정은 적용이 되었으나 폭 크기가 적용이 안 된 경우입니다.
사용 중인 테마에서 폭에 대해 사이즈가 고정 된 경우 변경되지 않는 것으로 확인되었습니다.
- 이 현상은 테마 별로 다를 수 있으나 다음과 같은 방법으로 해결 가능합니다.
워드프레스 input type 필드 크기 지정 방법
추가 CSS에 코드 삽입
- 관리자모드 > 외모 > 사용자정의하기 > 추가 CSS 로 들어가 다음 코드를 삽입하여 줍니다.
body form input[type=”number”] {
max-width: 250px;
}
위의 코드를 삽입하면 최종 글 발행 후에도 원하는 크기로 표시됩니다.
또는 직접 style.css 파일을 수정할 수도 있겠으나 오류 발생이 있을 수 있으니 수정 시 주의가 필요하며 테마의 해당 CSS 파일 위치는 다음과 같습니다.
테마 style.css 파일 수정 (Oceanwp 테마)
- FTP 접속 (파일질라 등)
- 파일경로 : /www/wp-content/themes/oceanwp/assets/css
- style.css 또는 style.min.css 에서 form input[type=”number”] 항목 확인 후 수정
멋진 워드프레스가 되길 바랍니다.
댓글
댓글 쓰기