Embed YouTube video in the front page or cateogry pages in WordPress

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

Embed YouTube video in the front page or category pages in WordPress

그림 1: 워드프레스 요약글(Excerpt)에 YouTube 동영상 표시하기

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

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

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

Create a custom field using ACF

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

Embed YouTube URL in a custom field

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 참고).

 

 



기부를 통해 이 블로그를 후원하실 수 있습니다.
워드프레스 설치/제작/문제해결이 필요한 경우 서비스(유료)를 요청해주세요.