애플 이모지, 이모티콘 PNG로 저장하는 방법

Johnnynote 블로그를 우피에서 워드프레스로 이전하면서, 아이콘 기능을 추가해야 했다. 노션의 경우는 애플의 이모지 입력, 노션에서 제공하는 아이콘, 커스텀 PNG 이미지를 업로드해서 아이콘으로 사용할 수 있다. 노션을 사용하면서 굉장히 마음에 드는 기능이었다.

워드프레스에서 이 기능을 추가하기 위해서 Multiple Post Thumbnails 플러그인을 이용해 DB에 각 포스팅과 연결된 새로운 파라미터를 추가하고, 이미지 형식으로 등록할 수 있도록 수정했다.

if (class_exists('MultiPostThumbnails')) {
    new MultiPostThumbnails(
        array(
            'label' => 'Secondary Image',
            'id' => 'secondary-image', // unique id
            'post_type' => 'post' // or 'page' or your custom post type id
        )
    );
}

functions.php에 위와 같은 코드를 추가하고

if (class_exists('MultiPostThumbnails') && MultiPostThumbnails::has_post_thumbnail('post', 'secondary-image')) :
 
MultiPostThumbnails::the_post_thumbnail(
     'post', // post_type
     'secondary-image', // id of post thumbnail
     NULL, // post id
     'full' // thumbail size ( optional )
); 
 
endif;

이 코드를 통해 원하는 위치에 아이콘이 표시될 수 있도록 조치했다.

다만, 이 방법을 사용하는 경우에는 이미지 형식으로만 업로드가 가능하다. 노션과 같이 이모지를 바로 등록할 수 없어서, 구글링을 통해 이모지를 PNG로 바꿔주는 사이트를 찾았다.

기본 옵션은 정방형 500px png로 설정되어 있다. 상단 입력창에 이모지를 입력하면 자동으로 이미지를 생성해 주며, download 버튼을 통해 내려받을 수 있다.