[WordPress] 워드프레스에서 사이트 아이콘(파비콘)을 설정 하고 사용 하는 방법

🕓2024.07.15 📈6

어느 웹사이트든지 사이트 아이콘(파비콘)은 아주 중요한 요소입니다. 사이트 아이콘은 마치 해당 웹사이트를 나타내는 대표적인 로고라고 할 수 있겠죠.

워드프레스에서 이 사이트 아이콘을 사용하는 방법을 정리해봅니다.

워드프레스 블로그에서 사이트 아이콘을 설정하는 방법

워드프레스 블로그에서 사이트 아이콘을 설정하는 방법은 아주 간단합니다. 필수 플러그인인 젯팩(JetPack)을 설치하기만 하면 아주 간단하게 사이트 아이콘을 설정 할 수 있어요.

젯팩을 설치하고 활성화 시킨 다음 [외모 – 사용자 정의하기 – 사이트 아이덴티티] 로 이동하면 아래와 같은 메뉴를 찾을 수 있습니다.

젯팩을 설치하고 대시보드의 외모 – 사용자 정의하기로 이동하면 사이트 아이콘을 설정 할 수 있다

이미지 변경하기를 눌러서 사이트 아이콘을 설정 하면 됩니다. 최소 512px 이상의 이미지를 사용하라고 하네요. 아마 레티나 디스플레이 대응 때문에 그런듯.

이렇게 설정된 사이트 아이콘은 파비콘이나 모바일 기기에서 아이콘으로 사용 됩니다.

원래는 웹페이지 자체에는 노출 되지 않는 사이트 아이콘이지만 테마를 개발 하는 입장에서는 사이트 아이콘이 등록 되어 있는 경우 웹페이지에 직접 표시를 하는 것도 나쁘지 않아 보입니다.

이 작업에서의 핵심은 사이트 아이콘 주소를 불러와주는 get_site_icon_url 함수입니다. 이 함수에 대한 자세한 내용은 아래 링크를 참고 하세요.

테마에서 사이트 아이콘을 표시 하기 위해서는 아래와 같은 과정을 거치면 될 것 같습니다.

하나씩 해봅시다.

테마 사용자가 사이트 아이콘을 등록 했는지 여부는 위에서 언급한 get_site_icon_url 함수가 반환하는 값을 보면 확인 할 수 있습니다.

<?php
    if ( get_site_icon_url() != '' ) {
        ...
    }
?>

get_site_icon_url 함수가 빈칸을 반환하지 않으면, 무엇인가를 실행 하겠다는 것입니다.

실제로 사이트 아이콘을 img 태그로 표시되도록 해보겠습니다.

<?php
    if ( get_site_icon_url() != '' ) {
        echo '<img src="' . get_site_icon_url() . '" id="site-icon" />';
    }
?>

img 태그를 출력 하면서 src 값에 주소를 넣어 줍니다. 그리고 id 를 site-icon 으로 설정해서 스타일링을 준비하면 됩니다.

위 코드에서 img 태그의 id 를 site-icon 으로 설정했죠? 이제 스타일링을 해봅시다. 스타일링은 style.css 파일을 이용 하면 됩니다.

사실 스타일링은 뭐 각자 알아서 하면 됩니다. 여기서는 워드프레스가 사이트 아이콘 등록하라고 했을때 512px 을 요구 했으므로 사이즈만 적절하게 줄여 보겠습니다.

#site-icon {
    width:      64px;
    height:     auto;
}

사이즈 조절은 거의 필수로 해줘야 할 것이고, 그 외에 필요한 부분을 추가하면 됩니다.

미션 성공!