[WordPress] 워드프레스 커스텀 로고 사용법 총정리
워드프레스 테마를 만들거나 수정할 때, 커스텀 로고(Custom logo, 사용자 정의 로고)를 설정하고 편집하는 방법을 총정리 했습니다.
Custom logo
커스텀 로고란 워드프레스 테마 사용자가 자신의 블로그 또는 사이트의 정체성을 나타 낼 수 있도록 사용자 직접 설정 할 수 있는 이미지 형식의 로고를 의미합니다.
보통의 경우 사이트 상단에 사이트의 이름과 함께 표시되지만 사실상 페이지의 어느 곳에 표시해도 큰 문제는 없습니다.
설정
모든 테마가 커스텀 로고를 지원하는 것은 아니니 본인이 커스텀 로고를 사용하고자 한다면, 커스텀 로고를 지원하고 올바르게 표시해주는 테마를 선택해야 합니다.
만약 본인이 테마를 직접 만들어 쓰고 있다면, 해당 테마가 커스텀 로고를 지원할 수 있도록 초기 설정을 해주어야 하며, 올바르게 커스텀 로고가 표시 될 수 있도록 직접 만들어 주어야 합니다.
테마의 커스텀 로고 지원
워드프레스 테마가 커스텀 로고를 지원하도록 하기 위해서는 아래와 같은 내용이 해당 테마의 functions.php 파일에 들어가 있어야 합니다.
function theme_initialize() {
add_theme_support( 'custom-logo' );
}
add_action( 'after_setup_theme', 'theme_initialize' );add_theme_support 를 이용해 테마가 커스텀 로고를 지원하도록 만들어 주는 것입니다.
add_theme_support 로 커스텀 로고를 지원하도록 하면서 아래과 같은 인수들을 설정 할 수 있습니다.
- width – 커스텀 로고의 가로 크기(단위는 px)
- height – 커스텀 로고의 세로 크기(단위는 px)
- flex-width – true / false
- flex-height – true / false
- header-text
width 와 height 에는 픽셀 단위의 숫자를 넣어 커스텀 로고의 크기를 설정 할 수 있습니다. 둘 모두 기본 값은 150 입니다.
flex-width 와 flex-height 는 사용자가 커스텀 로고의 폭과 높이를 원하는대로 설정 할 수 있는지 여부입니다. 기본 값은 false 입니다.
실제 인수를 적용해 테마가 커스텀 로고를 지원 하도록 하는 코드 예시는 아래와 같습니다.
function theme_initialize() {
$args = array(
'width' => '200',
'height' => '200',
'flex-width' => true,
);
add_theme_support( 'custom-logo', $args );
}
add_action( 'after_setup_theme', 'theme_initialize' );커스텀 로고 설정
테마가 커스텀 로고를 지원 하도록 만들었다면, 사용자 입장에서는 커스텀 로고를 직접 설정할 수 있어야 합니다.
커스텀 로고에 사용될 이미지를 설정하기 위해서는 워드프레스 블로그 대시보드에서 외모 – 사용자 정의하기 – 사이트 아이덴티티 항목에서 로고를 설정 하면 됩니다.
표시
테마가 커스텀 로고를 지원하고, 테마 사용자가 실제 커스텀 로고로 사용될 이미지를 업로드 하고 선택했다 하더라도, 테마에서 실제 코드상에서 표시를 하지 않으면 사이트 또는 방문자는 죽어도 커스텀 로고를 볼 수 없습니다.
아래는 실제 커스텀 로고를 표시 해주는 코드입니다.
<?php
if ( has_custom_logo() ) {
the_custom_logo();
}
?>위 코드가 실행되면 사용자가 커스텀 로고를 설정 했을 경우(has_custom_logo() == true) 실제 커스텀 로고를 표시 해주는 the_custom_logo 함수를 사용해 화면하는 것입니다.
추가 내용
- 커스텀 로고와 관련된 워드프레스 내장 함수는 아래와 같음
- add_theme_support – 테마가 커스텀 로고를 지원할 수 있도록 함
- has_custom_logo – 테마 사용자가 커스텀 로고를 설정 했는지 여부
- the_custom_log – 사용자가 지정한 커스텀 로고를 페이지에 표시
- get_custom_log – 커스텀 로고의 정보를 코드상에서 반환
- the_custom_logo 를 통해 페이지에 표시된 내용은 custom-logo-link 라는 클래스를 가진 a 태그와, 실제 이미지를 표시 되는 img 태그
- 커스텀 로고로 사용될 이미지의 기본 크기는 가로 세로 모두 150px 수준임
댓글 남기기