워드프레스에서 외부 이미지를 특성 이미지(Featured Image)로 사용하기

1. 워드프레스의 특성 이미지(Featured Image)란?

워드프레스의 특성 이미지(Featured Image)는 글이나 페이지를 대표하는 이미지를 의미한다. 특성 이미지가 어떻게 표현되는 지는 테마에 따라 달라진다. 어떤 테마에서는 홈페이지1에 글목록 앞에 작은 썸네일을 보여주는 식으로 나타나고, 어떤 테마에서는 글의 최상단에 크게 보여지기도 한다.

특성 이미지가 홈페이지에 썸네일 형식으로 보여지는 예시
▲ 특성 이미지가 홈페이지에 썸네일 형식으로 보여지는 예시 – 출처: 서울비 블로그

특성 이미지가 홈페이지에 썸네일 형식으로 보여지는 예시
▲ 특성 이미지가 글의 최상단에 보여지는 예시

2. 워드프레스의 특성 이미지(Featured Image) 정책

그런데 워드프레스에서는 특성 이미지를 꼭 워드프레스에 직접 업로드한 파일로만 지정하도록 되어 있다. 워드프레스측에서는 이것을 보안 문제 때문이라고 밝히고 있다.

하지만 웹호스팅의 용량과 트래픽이 부족한 사용자들, 또는 테마의 특성상 특성 이미지를 많이 사용해야 하는 사용자들에게는 이런 정책이 불만스러울 수도 있다. 이를 해결하기 위해서 다른 웹호스팅에 첨부파일을 올리게 하는 플러그인이나, 구글 드라이브에 첨부파일을 올리게 하는 플러그인을 사용할 수도 있고, 아니면 아예 특성 이미지를 외부 링크로 사용할 수 있도록 해주는 유료 플러그인을 사용할 수도 있다.

하지만 “Hacklog Remote Attachment” 플러그인을 사용하려면 다른 웹호스팅 계정이 있어야하고, “Google Drive WP Media” 플러그인을 사용할 때는 이미지의 사이즈 조절이 불가능하다.2 “External URL Link as Featured Images” 플러그인은 $9.9의 비용이 든다.

그래서 이 글에서는 사용자 정의 필드를 이용해서 외부 이미지 링크를 특성 이미지로 사용하는 방법에 대해서 설명해 보고자 한다.

3. 사용자 정의 필드를 이용해서 외부 이미지를 특성 이미지로 사용하기

3.1 방법1. 테마 파일 직접 수정하기

이 방법의 장점은, 상황에 따라서 특성 이미지를 외부 링크로 사용하거나 자체 이미지를 사용하거나를 선택할 수 있다는 것이다. 또한 외부 이미지를 특성 이미지로 사용하면 캡션 정보를 입력할 수 있는 방법이 없는데, 테마 파일을 직접 수정하면 사용자 정의 필드를 이용해서 캡션 정보를 입력하는 것도 가능하다는 것도 장점이다.

  1. 테마 파일에서 <?php the_post_thumbnail(); ?> 을 찾는다.

    위의 코드는 보통 index.php, content.php 또는 archive.php에서 찾을 수 있다. 만약에 파일을 하나하나 열어서 찾는 것이 힘들다면, notepad++등의 에디터를 이용해서 테마 폴더에 있는 php 파일을 모두 불러온 후, 모든 파일에 대해서 검색을 하는 것이 편할 수 있다.

    Notepad++에서 \<\?php the_post_thumbnail(); ?> 검색하기
    ▲ Notepad++에서 <?php the_post_thumbnail(); ?> 검색하기

    Notepad++에서 \<\?php the_post_thumbnail(); ?> 검색 결과
    ▲ Notepad++에서 <?php the_post_thumbnail(); ?> 검색했을 때의 결과

  2. <?php the_post_thumbnail(); ?> 을 다음의 코드로 바꾼다.

    <?php $src = get_post_meta($post->ID, 'ExternalUrl', true);
    if( $src ) { ?>
    <img class="wp-post-image" src="<?php echo $src; ?>">
    <?php } else {
    the_post_thumbnail();
    } ?>
    
    • “ExternalUrl”은 사용자 정의 필드의 이름이다. 만약에 사용자 정의 필드의 이름을 다른 것으로 설정하고 싶다면 바꿔도 상관없다.
    • class=”wp-post-image” 에서 “wp-post-image”는 자신의 테마에 맞게 바꿔줘야 한다.
    • 이 코드에서는 워드프레스 에디터상에서 직접 특성 이미지를 지정하는 기능은 제거하지 않았으므로, 필요할 때는 이전처럼 특성 이미지를 삽입해도 된다. 다만 외부 이미지를 우선하도록 해놓았으므로, 외부 이미지와 내부 이미지를 동시에 특성 이미지로 지정하면 외부 이미지가 출력된다.
  3. 만약에 테마에 <?php if(has_post_thumbnail()) { ?> 와 같은 부분이 있다면, 다음의 코드로 바꾼다. 없으면 넘어간다.

    <?php $src = get_post_meta($post->ID, 'ExternalUrl', true); if(has_post_thumbnail() || $src) { ?>
    
    • 만약 테마 파일에 <?php if(has_post_thumbnail()) { ?> 이 있다면 3.1.2에서 바꿨던 <?php the_post_thumbnail(); ?>보다 앞에 있을 것이다. 그런데, 그 중 <?php $src = get_post_meta($post->ID, 'ExternalUrl', true);부분이 중복되므로, 3.1.2의 코드중 첫번째 라인은 삭제해도 된다.
    • 만약에 3.1.2에서 “ExternalUrl”을 다른 이름으로 바꿨다면 여기서도 바꿔야 한다.
  4. 테마 파일을 저장하고 업로드한다.

3.2 방법2. 테마의 function.php를 수정해서 특성 이미지 함수를 완전히 대체하기

이 방법을 사용하면 테마 파일을 모두 수정하는 것보다 훨씬 간단하게 외부 링크로 특성 이미지를 넣는 것이 가능하다. 하지만, 이 방법을 사용하면 워드프레스 에디터 상에서 자체 이미지로 특성 이미지를 넣는 방법은 사용할 수 없다.

  1. 사용하고 있는 테마 폴더안에 있는 function.php 파일을 에디터로 연다.

  2. function.php 마지막에 다음 코드를 추가한다.

    add_filter('post_thumbnail_html','add_external_link_on_page_post_thumbnail',10);
    
        function add_external_link_on_page_post_thumbnail( $html ) {
        if( is_singular() ) {
                global $post;
                $src = get_post_meta($post->ID, 'ExternalUrl', true);
                $src = str_replace("/s0/", "/w1024-h576-c/", $src);
                if( $src ) {
                    $html = '<img src="' . ( $src ) . '" class="wp-post-image" >';
                }
        }
        else if( is_front_page() || is_archive() ) {
                global $post;
                $src = get_post_meta($post->ID, 'ExternalUrl', true);
                $srcthumb = get_post_meta($post->ID, 'ExternalUrlThumb', true);
                $permalink = get_permalink();
                $src = str_replace("/s0/", "/w1024-h576-c/", $src);
                $srcthumb = str_replace("/s0/", "/w1024-h576-c/", $srcthumb);
                if( $srcthumb ) {
                    $html = '<a href="' . ( $permalink ) . '"><img src="' . ( $srcthumb ) . '" class="wp-post-image" ></a>';
                }
                else if( $src ) {
                    $html = '<a href="' . ( $permalink ) . '"><img src="' . ( $src ) . '" class="wp-post-image" ></a>';
                }
        }
        return $html;
        }
    
    • ExternalUrl“은 사용자 정의 필드의 이름이다. 만약에 사용자 정의 필드의 이름을 다른 것으로 설정하고 싶다면 바꿔도 상관없다.
    • class=”wp-post-image” 에서 “wp-post-image“는 자신의 테마에 맞게 바꿔줘야 한다.
    • “$src = str_replace(“/s0/”, “/w1024-h576-c/“, $src);”는 피카사(구글+ 포토)를 사용할 때만 필요하다. 피카사는 이미지 링크의 주소를 조금 수정해주면 이미지를 실시간으로 리사이즈해서 전송해준다.
      피카사의 원본 이미지 링크에는 “/s0/”가 포함되어 있다. 그런데, 그 코드를 바꿔주면 이미지의 크기를 쉽게 조정할 수 있다. 위의 코드에서는 “/s0/”를 “/w1024-h576-c/”로 바꾸도록 했는데, 여기서 “w1024″는 너비를 “1024px”로, “h576″은 높이를 “576px”로 설정하라는 의미이고 “c”는 이미지를 사이즈에 맞게 크롭(Crop)하라는 의미이다.
      즉, 원본이미지의 링크를 사용자 정의 필드에 입력한 후, 테마에 맞게 코드에서 사이즈를 조정해주면 테마의 디자인을 해치지 않고 외부 이미지를 특성 이미지로 설정하는 것이 가능해진다. 참고로 위의 코드는 워드프레스의 기본 테마인 “Twenty Fourteen”의 썸네일 사이즈를 기준으로 했다.
    • “$srcthumb = get_post_meta($post->ID, ‘ExternalUrlThumb’, true);”은 글목록에서와 글에서 특성 이미지가 다르게 보이는 테마 때문에 추가했다. 어떤 테마는 글목록에서는 특성 이미지를 작은 썸네일의 형태로 보여주고, 글을 볼 때는 특성 이미지를 크게 보여주기도 한다.
      워드프레스에 이미지를 업로드하면 워드프레스와 테마에 설정된대로 이미지를 여러가지의 크기로 리사이즈한 후, 리사이즈된 이미지 파일들을 모두 저장해 놓는다. 그래서 테마에서 필요한 크기의 이미지를 요청하면 저장된 이미지중에서 그에 맞는 크기의 이미지가 보여지게 되는 것이다.
      하지만 외부 링크로 특성 이미지를 설정하면 워드프레스의 그런 기능을 사용하는 것이 불가능하다. 따라서 그런 테마를 쓸 때는, 사용자 정의 필드에 “ExternalUrlThumb”을 추가해서 작은 크기의 이미지 주소를 추가로 지정해주면, 문제를 해결할 수 있다.
      물론 피카사 이미지를 쓸 경우에는 “ExternalUrlThumb” 사용자 정의 필드를 추가할 필요없이, 기존의 이미지의 주소를 수정해서 실시간으로 리사이즈된 이미지를 전송하도록 할 수 있을 것이다.
  3. 만약에 테마에 <?php if(has_post_thumbnail()) { ?> 와 같은 부분이 있다면, 다음의 코드로 바꾼다. 없으면 넘어간다.

    <?php $src = get_post_meta($post->ID, 'ExternalUrl', true); if(has_post_thumbnail() || $src) { ?>
    

3.3 방법3. 간단한 플러그인을 만들어서 적용하기

3.2에서 소개한 코드를 이용해서 플러그인을 만드는 것도 가능하다. 이 방법은 플러그인을 원할 때마다 플러그인을 활성화하거나 비활성화하는 것이 자유롭다는 장정을 가지고 있다.

  1. 플러그인 파일 만들기
    텍스트 에디터를 이용해서 “featuredimage-externallink.php”와 같이 적절한 이름의 php 파일을 만든다.

  2. 플러그인 파일에 플러그인 필수 요소 입력

    <?php
    /**
     * Plugin Name: 플러그인 이름
     * Description: 플러그인 설명
     * Version: 0.1
    
     * @version 0.1.0
     */
    
    
    ?>
    
  3. 플러그인 파일에 3.2에서 소개한 코드 입력
    <?php
    /**
     * Plugin Name: 플러그인 이름
     * Description: 플러그인 설명
     * Version: 0.1
    
     * @version 0.1.0
     */
    
    add_filter('post_thumbnail_html','add_external_link_on_page_post_thumbnail',10);
    
        function add_external_link_on_page_post_thumbnail( $html ) {
        if( is_singular() ) {
                global $post;
                $src = get_post_meta($post->ID, 'ExternalUrl', true);
                $src = str_replace("/s0/", "/w1024-h576-c/", $src);
                if( $src ) {
                    $html = '<img src="' . ( $src ) . '" class="wp-post-image" >';
                }
        }
        else if( is_front_page() || is_archive() ) {
                global $post;
                $src = get_post_meta($post->ID, 'ExternalUrl', true);
                $srcthumb = get_post_meta($post->ID, 'ExternalUrlThumb', true);
                $permalink = get_permalink();
                $src = str_replace("/s0/", "/w1024-h576-c/", $src);
                $srcthumb = str_replace("/s0/", "/w1024-h576-c/", $srcthumb);
                if( $srcthumb ) {
                    $html = '<a href="' . ( $permalink ) . '"><img src="' . ( $srcthumb ) . '" class="wp-post-image" ></a>';
                }
                else if( $src ) {
                    $html = '<a href="' . ( $permalink ) . '"><img src="' . ( $src ) . '" class="wp-post-image" ></a>';
                }
        }
        return $html;
        }
    
    ?>
    
  4. 워드프레스의 플러그인 폴더에 업로드하고 플러그인 활성화

  5. 만약에 테마에 <?php if(has_post_thumbnail()) { ?> 와 같은 부분이 있다면, 다음의 코드로 바꾼다. 없으면 넘어간다.

    <?php $src = get_post_meta($post->ID, 'ExternalUrl', true); if(has_post_thumbnail() || $src) { ?>
    

3.4 특성 이미지가 들어간 글 작성하기

  1. 워드프레스 에디터의 화면 옵션에서 “사용자 정의 필드”를 체크해서 “사용자 정의 필드” 메타 박스가 보이게 한다.

    워드프레스 에디터의 화면 옵션에서 "사용자 정의 필드" 활성화하기
    ▲ 워드프레스 에디터의 화면 옵션에서 “사용자 정의 필드” 활성화하기

  2. “사용자 정의 필드” 메타 박스에 위의 코드에서 정의한 “ExternalUrl”을 추가하고 그 값에는 그 글에 넣길 원하는 특성 이미지의 외부 링크를 입력한다.

    워드프레스 에디터에서 사용자 정의 필드 추가
    ▲ 워드프레스 에디터에서 사용자 정의 필드 추가

    워드프레스 에디터에서 사용자 정의 필드 추가
    ▲ 사용자 정의 필드 이름에 “ExternalUrl”을 입력하고, 값란에 특성 이미지(Featured Image)로 사용할 이미지의 외부 링크 주소를 입력한 후 “사용자 정의 필드 추가” 버튼을 눌러준다.

    워드프레스 에디터에서 사용자 정의 필드 선택
    ▲ 한 번 “ExternalUrl” 사용자 정의 필드를 입력하면, 다음부터는 사용자 정의 필드를 추가할 때 선택하기를 눌러서 “ExternalUrl”을 선택할 수 있게된다.

  3. 이제 글을 작성 완료하면 외부 이미지가 특성 이미지로 보여지게 될 것이다.

4. 글을 맺으며

난 프로그래머도 아니고 웹프로그램에 대한 지식도 상당히 부족하다. 이 글은 검색을 통해서 발견하게 된 코드를 이용해서 내 부족하 지식으로 조금 수정한 것을 설명한 글이다. 따라서 부족한 부분이 많이 있을 수 있을 것이다. 혹시 나보다 더 많은 지식을 갖고 있는 분이 이 글을 읽고 좀 더 나은 방법을 제시해줄 수 있다면 좋겠다는 바람이다.


  1. 홈페이지라는 말이 한국에서는 웹사이트와 같은 의미로 쓰이지만, 원래는 웹사이트에 처음 접속할 때 뜨는 페이지를 홈페이지(Homepage)라고 한다. 
  2. 워드프레스에 직접 이미지를 올리면, 원본 이미지와 함께, “설정 → 미디어”에 설정된 세가지 사이즈의 이미지도 함께 저장한다. 만약에 테마 자체적으로 추가한 이미지 사이즈가 있다면 그 사이즈의 이미지 역시 함께 저장한다. 그래서 상황에 따라 그에 적합한 이미지가 쓰이게 된다. 하지만 “Google Drive WP Media” 플러그인은 한 가지 사이즈의 이미지만 저장하므로, 작은 썸네일 크기의 이미지가 쓰일만한 곳에서도 전체 사이즈의 이미지를 불러오므로 전체 페이지 용량이 너무 커지는 부작용이 있을 수 있다. 본문에서 설명한, 외부 이미지를 사용하는 방법의 경우 이미지 주소를 약간 수정하는 것으로 이미지의 사이즈를 쉽게 조정할 수 있는 피카사를 사용하면 이미지 용량 문제에서 벗어날 수 있다. 

이 글 공유하기:

댓글 남기기

36 댓글 / "워드프레스에서 외부 이미지를 특성 이미지(Featured Image)로 사용하기"

댓글 이메일 구독
avatar
정렬:   최신순 | 오래된 순
hajw
방문자

안녕하세요.

덕분에 External URL Link as Featured Images 플러그인을 알게되어 유료로 시원하게^^;; 결제하고 스트레스 없이 사용중입니다.
사실 위 방법들은 시도 해봤지만, 제가 뭔가 잘못한게 있는지 이상하게 안되더라구요..
그래서 어쩔수 없이 유료결제를 할 수밖에 없었지만, 덕분에 만족하면서 사용중입니다.

알려주신 방법은 다음에 시간날때 다시한번 시도해 봐야겠네요..

좋은 정보 감사합니다.

산호
방문자
산호

저는 link2featured image 플러그인을 구매했지만 플러그인 파일에 메타폼을 추가해서 이 방법을 사용하고 있습니다. link2featured 플러그인도 결국 스킨을 수정해야 해서 그냥 이미지 출력 부분을 일일히 수정하다 팁을 발견했습니다. 피카사 이미지 호스팅은 소개해 주신 ShareX와 함께 쓰니 정말 너무 편리하더라구요.
그리고 저는 이상하게 $post->ID는 작동하지 않고 get_the_ID() 로만 포스트 번호를 가져올 수 있었습니다. 이 둘은 같은 값을 반환해야 하지 않나요?

순기
방문자
순기

External URL Link as Featured Images을 구매했고 설치를 끝낸후
편집할때는 출력이 되는데 포스트에는 출력이 안됩니다.
테마의 어디 부분을 수정해야 되는지 몰라서 이렇게 질문드립니다.

이태훈
방문자
이태훈

안녕하세요? avada 테마를쓰고 있는데, 말씀하신 방법들 중에서 2번으로 적용하기 위해서는
wp-post-image를 어떤것으로 고쳐야할지 모르겠습니다.
archive.php내용을보면 이런식으로 구현하는것 같은데.. 초보라 잘모르겠습니다.

이경섭
방문자
이경섭

3.4의 방법을 이용하여 적용시켰더니 메인화면에는 보이지 않고 개별 포스트에서만 썸네일 이미지가 보이는데
어떻게 하면 메인에서도 보이게 설정할 수 있을까요?

zina
방문자

알려주신대로 플러그인을 제작하여 아주 쉽게 잘 적용되었습니다. 감사합니다. 정말 신뢰성있고 정확한 포스팅 감사합니다.

산호
방문자
산호

Nelio 플러그인도 Epic Plugin의 link2feature와 비슷하게 작동하네요. 새로 시도하는 분은 Nelio 플러그인도 사용해 보세요.

Nelio 플러그인에서 피카사의 이미지 리사이즈를 사용하시려면 \includes\nelio-efi-main.phpadd_filter( 'post_thumbnail_html', 'nelioefi_replace_thumbnail', 10, 5 ); 필터 부분을 이렇게 수정하시면 됩니다.

서비
방문자

우선 이런 방법을 알려주셔서 감사드립니다.

저는 티스토리의 글을 워드프레스로 긁어다가 쓰는 형식을 쓰고 있습니다.

글은 상관 없지만 티스토리 이미지를 복사해서 붙여넣는 형식이라 원본이미지 그대로의 크기 때문에

워드프레스에서 이미지가 본문 밖으로 나가는 현상이 발생합니다.

그래서 찾다가 들어오게 되었습니다.

그래서… 플러그인을 제작하여 쓰는 방식을 해 보았는데 잘 안되어서 방법이 있을까 해서 문의 드립니다.

컴미
방문자
컴미

완전 초보인데요. 동영상에서 자동적으로 썸네일을 생성하는 방법이 너무 궁금합니다.

enjoylimit.tv 여기 사이트 처럼 만들려고 하는데, 생각처럼 안되네요.ㅠ

video thumbnail 플러그인을 써도 저 사이트처럼 안되네요. 테마 코드를 직접 수정하는거 같은데

어케 수정을 해야할지 막막합니다.ㅠ

WordCracker
방문자

안녕하세요?
좋은 글 잘 읽었습니다.
워드프레스 기본 테마로 이렇게 깔끔하게 사이트를 만들 수도 있네요.
즐거운 하루 되세요^^

Happist
방문자

안녕하세요?
말씀해주신 방법대로하는 잘 됩니다.

좋은 정보를 주시어 감사드립니다.

저는 XE를 사용하다 이번에 워드프레스로 갈아타려고 DB를 옮기고 (실력이 모자라는 부분은 )노가다를 며칠해서 이전을 했는데 마지막으로 이 미지 섬네일 문제로 고민을하고 있습니다.

앞으로 작성글은 모두 미디어를 사용할 예정이므로 문제가 없는데 과거글이 문제네요.

하나씩 삽입하는것말고 첫번째 이미지를 일괄 삽입할 수 있는 방안은 없을까요?
1400개정도되는 글을 하나씩 삽이하는 것은 너무 힘들어요..

신재민
방문자

제 경우 국내 호스팅에 메인 사이트를 구성하고 해외 호스팅(고대디)에 이미지업로드만을 목적으로하는 방식을 Hacklog Remote Attachment 플러그인으로 구현하고자 했습니다. 그럼에도 불구하고 메인페이지에 특성이미지가 뜨지 않는 문제점이 있습니다 ㅠㅠ 감사하게도 이렇게 좋은 자료를 공유해주셔서 이것저것 시도해보려 합니다만, 시간되실때 짧게나마 조언해주시면 정말 감사하겠습니다. 사이트 주소는 nub.kr 입니다.

워드프레스
방문자

안녕하세요. 좋은 정보 잘 읽었습니다. 한데… 특성 이미지에 외부 링크를 걸고 사용자가 특성이미지를 클릭했을 때, 혹시 다른 사이트로 이동하게 할 수 있는 _blank 도 가능하게 할 수 있는 방법이 있을까요? 이게 정 안되면 유료 의뢰라도 해야 될 상황이라서요… 알고 계신 플로그인 있으시면 추천 좀 부탁합니다.

wpDiscuz