목차
매우 일반적인 요청은 관리자 측에 자체 켜기/끄기 버튼이 없는 웹 사이트의 특정 부분을 숨기는 것과 관련이 있습니다. 프론트 엔드의 각 세부 사항에 대한 테마 관리 버튼을 가질 수 없기 때문에 HTML 코드 편집에 익숙하지 않은 경우 CSS를 사용하여 원하지 않는 부분을 숨기고 부분을 전혀 제거할 수 있습니다.
제거할 부품 찾기
제거하려는 정확한 부분을 찾을 수 있는 브라우저 개발자 도구를 사용할 수 있습니다.
블로그 게시물 아래에 날짜와 작성자가 있는 부분을 제거하고 싶다고 가정해 보겠습니다. 요소 검사 부분을 마우스 오른쪽 버튼으로 클릭하고 브라우저 개발자 도구를 엽니다.
소스 코드 위로 마우스 커서를 이동하면 페이지에서 마우스 커서 아래의 소스 코드 행을 참조하는 강조 표시된 섹션을 볼 수 있습니다.
이렇게 하면 숨기고 싶은 부분을 찾을 수 있습니다. 예를 들어 날짜와 작성자가 있는 모든 섹션이거나 날짜 섹션만 있거나 작성자 섹션만 있는 경우 위의 스크린샷을 참조하세요.
선택한 섹션을 숨기도록 CSS 작성
숨길 부분을 선택한 경우 선택한 HTML 태그의 ID 또는 CLASS 속성을 자신의 CSS 스타일로 사용하거나 이 태그의 테마에서 사용하는 정확한 CSS 선택기를 사용합니다. 브라우저 개발자 도구의 오른쪽에서 찾을 수 있는 테마에서 사용하는 선택된 태그에 대한 CSS 선택기입니다.
예를 들어 날짜와 작성자가 있는 전체 부분을 제거하기로 결정한 경우 테마에서 사용되는 선택기는 다음과 같습니다. .elm-posts-main .item .item-info
측면에서 HTML 태그를 숨기는 CSS 스타일은 "display: none;"입니다. 또한 사용할 수 있습니다. !중요한 다른 CSS로 CSS 스타일을 더 이상 덮어쓰는 것을 방지하는 문.
따라서 날짜와 작성자가 포함된 부분을 숨기는 최종 CSS 스타일은 다음과 같습니다.
.elm-posts-main .item .item-info { 표시: 없음 !important; }
Customizer에 사용자 정의 CSS 코드 추가
사용자 지정 CSS 코드를 다음 위치에 추가할 수 있습니다. 모양 > 사용자 정의 > 추가 CSS
게시 후 웹사이트에서 확인할 수 있습니다.
