워드프레스 전면 페이지 또는 카테고리 페이지에 썸네일 대신 YouTube 동영상 표시하기

워드프레스 전면 페이지 또는 카테고리 페이지에 썸네일 대신 YouTube 동영상 표시하기 4

워드프레스 전면 페이지 또는 카테고리 페이지에 썸네일 대신 YouTube 동영상을 표시하는 방법

동영상을 위주로 꾸밀 사이트를 위한 워드프레스 테마가 필요하게 되었습니다. 그래서 검색을 통해 유료 테마 몇 개를 찾았는데 모두 제 맘에 꼭 들지는 않았습니다. 그래서 무료 테마를 활용할 방법으로 워드프레스 전면 페이지나 카테고리 페이지의 요약글(Excerpt)에 표시되는 썸네일(특성 이미지) 대신 YouTube 동영상을 표시하면 어떨까 구상하게 되었습니다.

그래서 위와 같이 수정하게 되었습니다. 방법은 개념만 알면 매우 간단합니다. 여러 가지 방법으로 이 기능을 구현할 수 있겠지만 저는 사용자 정의 필드(Custom Field: 커스텀 필드)를 사용하여 개별 글에 YouTube 링크를 추가하는 커스텀 필드를 만들었습니다. 그러면 글을 작성할 때 동영상 URL을 추가하여 전달하면 전면 페이지나 카테고리 페이지에 표시하는 방식입니다.

먼저 "Custom Post Type UI"라는 플러그인을 설치했습니다. 그런 다음 이 플러그인을 사용하여 "YouTube"라는 사용자 정의 필드를 만들었습니다. 이 필드에 추가하는 URl의 동영상이 요약글의 썸네일 대신 표시될 것입니다.

워드프레스 전면 페이지 또는 카테고리 페이지에 썸네일 대신 YouTube 동영상 표시하기 5

그림과 같이 사용자 정의 필드(커스텀 필드)를 만듭니다. 그러면 글쓰기 화면에 다음과 같이 방금 만든 필드가 표시됩니다.

워드프레스 전면 페이지 또는 카테고리 페이지에 썸네일 대신 YouTube 동영상 표시하기 6

YouTube 동영상 URL 또는 Vimeo 동영상 URL(예: https://vimeo.com/75791532, 참고)을 위의 "YouTube" 필드란에 입력합니다.

이제 마지막으로 개별 글에서 전달받은 사용자 정의 필드 값을 요약글(Excerpt)에 표시해야 합니다. 우선 위의 "YouTube" 커스텀 필드 값을 받아서 동영상으로 표시하는 코드는 다음과 같습니다.

<?php if( get_field('youtubeurl') ){
$embed_code = wp_oembed_get( get_field('youtubeurl'), array('width'=>300) );
echo $embed_code;
} ?>

이제 index.php, category.php, content.php(테마에 따라 파일 이름은 달라질 수 있음) 등에서 요약글 코드인 "<?php the_excerpt(); ?>"를 찾습니다. 그러면 부근에 썸네일(특성 이미지) 관련 코드가 있을 것입니다(예: "<?php the_post_thumbnail('excerpt-thumbnail', 'class=alignleft'); ?>"). 그러면 위의 Custom Field 값을 동영상으로 표시하는 코드와 썸네일 코드를 이용하여 조건문을 만들도록 합니다. 즉, 사용자 정의 필드에 URL 값이 있으면 동영상을 표시하고, 만약 없다면 특성 이미지(썸네일)가 있는지를 검사합니다. 그러면 사용자 정의 필드에 값이 우선적으로 요약글에 표시됩니다(그림 1 참고).

※이 글은 2015년도에 작성되었습니다. Custom Post Type UI 플러그인 대신 Advanced Custom Field 플러그인을 설치하여 비슷한 방식으로 진행하시면 됩니다.

예시:

<?php 
if( get_field('youtubeurl') ) {
    // If there's a YouTube URL, display the embed code
    $embed_code = wp_oembed_get( get_field('youtubeurl'), array('width' => 300) );
    echo $embed_code;
} else {
    // If there's no YouTube URL, display the post's thumbnail
    if( has_post_thumbnail() ) {
        the_post_thumbnail(); // You can also specify the size, for example: the_post_thumbnail('medium');
    }
}
?>

이미지가 누락되어 이미지를 다시 업로드했습니다. 참고로 뉴스페이퍼와 같은 테마를 사용하면 특성 이미지에 유튜브 동영상 지정이 가능합니다.

참고


댓글 남기기

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