워드프레스 태그라인 문구 없애기

워드프레스에서 사이트 제목과 태그라인 정보는 설정 > 일반 또는 테마 디자인 > 사용자 정의하기 > 사이트 아이덴티티에서 입력할 수 있습니다. (워드프레스 버전에 따라 "테마 디자인" 대신 "외모"라는 용어가 사용될 수도 있습니다.)

워드프레스 사이트 아이덴티티

사용하는 테마 혹은 테마 설정에 따라 사이트 제목과 태그라인이 헤더에 표시되는 경우가 있습니다. 보통 로고를 업로드하여 설정하면 로고가 표시되지만, 로고 대신 사이트 제목을 표시하도록 설정하는 경우에 태그라인이 함께 표시될 수 있습니다.

예를 들어, 이 블로그에 현재 사용된 Newspaper 테마에서는 특정 헤더 스타일을 사용할 경우에 로고 이미지 대신 텍스트 로고를 지정할 수 있습니다.

뉴스페이퍼 텍스트 로고 지정

TEXT LOGO TAGLINE에 아무 내용을 입력하지 않으면 기본적으로 'DISCOVER THE ART OF PUBLISHING'라는 문구가 지정됩니다. 텍스트 로고는 스타일 9, 스타일 10, 스타일 11에서만 표시됩니다.

다른 블로그에도 뉴스페이퍼 테마를 설치하고 로고는 이미지 대신 텍스트로 설정해보았습니다. 그러면 다음과 같이 '태그라인' 문구도 함께 표시됩니다.

워드프레스 태그라인 표시

이것은 하나의 예시일 뿐입니다. 테마에 따라 로고 이미지를 업로드하지 않을 경우 사이트 제목과 함께 태그라인 문구도 표시될 수 있습니다. 그런 경우 여러 가지 방법으로 태그라인 문구를 없앨 수 있습니다.

  1. 테마 옵션에서 지원할 경우 테마 옵션을 통해 제거
  2. 테마 소스 파일에서 태그라인 부분을 제거 (차일드 테마 이용)
  3. CSS 사용

테마 옵션에서 태그라인을 숨기는 옵션을 제공하지 않을 경우 테마 소스 파일에서 직접 수정하는 것이 가능합니다. 개인적으로는 테마 파일을 수정하는 것을 그다지 좋아하지 않습니다. 가장 간편한 방법은 CSS를 사용하는 것입니다.

구글 크롬에서 F12를 눌러 개발자 도구를 열고, 요소 검사를 하여 해당 태그라인에 적용된 클래스를 찾도록 합니다.

구글 크롬 요소 검사

위의 그림에서는 태그라인 문구에 해당하는 클래스가 오른쪽 동그라미로 표시되어 있습니다. 다음과 같은 CSS 코드를 자식 테마 내의 스타일시트 파일에 추가하면 '태그라인' 문구가 사라집니다.

/* 뉴스페이퍼 텍스트 로고 - 태그라인 숨기기 */
.td-logo-text-container .td-tagline-text {
display: none;
}

display: none;을 사용하면 실제로 제거되는 것은 아니고 프런트엔드에서 표시만 안 됩니다. display에 대한 자세한 내용은 https://www.w3schools.com/CSS/css_display_visibility.asp 문서를 참고해보시기 바랍니다.

다른 요소도 구글 크롬에서 요소 검사를 하여 쉽게 숨길 수 있습니다. display: none;의 사용법만 알면 됩니다. 간단하죠~ㅇ.

참고로 알림판 > 설정 > 일반에서 태그라인 필드에 입력한 값은 다음 PHP 코드로 표시할 수 있습니다(https://developer.wordpress.org/reference/functions/bloginfo/ 참고).

<p><?php bloginfo('description'); ?> </p>

참고:


댓글 남기기

* 이메일 주소는 공개되지 않습니다.