WordPress 비디오를 추천 이미지로 설정하는 3가지 완벽한 방법

게시 됨: 2022-12-24

WordPress에서 비디오를 추천 이미지로 사용할 수 있다는 것을 알고 계십니까?

기본적으로 WordPress는 추천 동영상 추가를 지원하지 않습니다. 페이지 또는 게시물에 대한 추천 이미지만 설정할 수 있습니다. 글쎄요, 어떤 것이 어렵다고 해서 그것이 불가능하다는 의미는 아닙니다.

이 기사에서는 이 작업을 완료하기 위한 몇 가지 트릭을 보여줍니다. 하지만 먼저 추천 동영상 미리보기 이미지가 필요한 이유를 이해해 보겠습니다.

  • WordPress 추천 동영상의 이점
  • #1 추천 비디오 플러그인 사용
  • #2 URL을 사용하여 동영상 삽입
  • #3 동영상을 추천 이미지로 설정하는 코드 적용

WordPress 추천 동영상의 이점

오늘날 거의 모든 인기 있는 WordPress 테마를 사용하면 게시물과 제품에 추천 이미지를 삽입할 수 있습니다. 이러한 기본 이미지는 콘텐츠의 주요 아이디어를 나타냅니다.

좋은 추천 이미지는 많은 사용자 참여를 얻을 수 있습니다. 그러나 추천 동영상을 사용하면 더 많은 클릭, 페이지 조회 및 판매를 얻을 수도 있습니다.

게시물 또는 제품의 추천 이미지를 추천 동영상으로 바꾸면 여러 면에서 이점이 있습니다.

추천 동영상은 사이트를 훨씬 더 활기차고 역동적으로 만듭니다. 방문자는 블로그 아카이브, 홈페이지 및 제품 페이지를 포함하여 거의 모든 곳에서 이러한 비디오를 볼 수 있습니다. 또한 비디오는 텍스트보다 브랜드 메시지를 더 잘 전달하고 사람들이 사이트에 더 오래 머물도록 하는 데 도움이 됩니다.

더 많은 양질의 리드를 얻을 수 있습니다. 온라인 상점을 소유하고 있는 경우 제품 페이지 상단에 비디오를 표시하는 것은 고객의 관심을 끌 수 있는 좋은 방법입니다. 제품에 대해 자세히 알아보고 스크롤하고 싶어집니다. 결과적으로 판매 가능성이 높아집니다.

이제 WordPress에서 비디오를 추천 이미지로 설정하는 방법을 살펴보겠습니다.

#1 추천 비디오 플러그인 사용

시장에서 사용할 수 있는 수많은 플러그인을 사용하면 비디오를 WordPress의 추천 이미지로 설정할 수 있습니다. 귀하의 임무는 올바른 것을 선택하는 것이며 플러그인이 나머지를 처리합니다.

이 자습서에서는 FIFU(Featured Image from URL) 플러그인을 사용하여 추천 동영상을 추가하는 과정을 안내합니다. 게시물 또는 WooCommerce 제품의 추천 미디어에 외부 이미지, 비디오, 오디오 또는 슬라이더를 할당할 수 있습니다.

  1. 플러그인을 설치하고 활성화합니다.

pda-featured-image-from-url-fifu-plugin

2. WordPress 관리 대시보드에서 FIFU → 설정 으로 이동합니다.

3. 추천 동영상 탭에서 추천 동영상 버튼을 켜기 로 전환합니다. 자체 호스팅 또는 외부 동영상을 추천 이미지로 사용할 수 있습니다.

pda-set-video-as-featured-image-wordpress

4. 비디오 썸네일 , 재생 버튼 , 너비 , 자동 재생 , 음소거 , 갤러리 아이콘 등 비디오 설정을 원하는 대로 구성합니다.

5. 추천 동영상을 추가하려는 페이지 또는 게시물로 이동합니다.

6. 비디오의 URL을 복사하여 추천 비디오 필드에 붙여넣습니다.

pda-set-video-as-featured-image-wordpress-post-fifu

7. 게시 또는 업데이트 버튼을 누르고 결과를 즐기십시오.

다른 옵션

우리는 FIFU가 여러 고급 기능을 갖춘 가장 강력한 추천 비디오 플러그인 중 하나라는 것을 발견했습니다. 그러나 추천 동영상 기능을 사용하려면 추가 요금이 부과됩니다.

기본 추천 동영상 기능이 있는 무료 플러그인을 선호한다면 정말 간단한 추천 동영상 플러그인을 고려해 보세요.

YouTube 및 Vimeo와 같은 타사 플랫폼에서 호스팅되는 비디오를 삽입하고 추천 비디오로 사용할 수 있도록 지원합니다. 플러그인은 또한 WooCommerce와 완벽하게 작동하여 제품 페이지 상단에 추천 동영상을 표시합니다.

  1. 플러그인을 설치하고 활성화합니다.

pda-really-simple-featured-video-wordpress-plugin

2. 관리자 패널에서 설정 → 정말 간단한 추천 동영상 으로 이동합니다.

3. 추천 동영상 썸네일을 추가할 위치를 결정합니다: Pages , Posts 또는 WooCommerce Products .

pda-enable-featured-video-wordpress

4. 변경 사항 저장 버튼을 누릅니다.

5. 컨트롤 탭으로 이동합니다. 여기에서 자체 호스팅 비디오와 포함된 비디오 모두에 대한 설정을 구성할 수 있습니다.

pda-configure-featured-video-wordpress

6. 변경 사항 저장 버튼을 눌러 완료합니다.

#2 URL을 사용하여 동영상 삽입

게시물에 동영상을 포함하려는 경우 동영상의 URL을 활용하는 것은 훌륭한 기술입니다. 이렇게 하면 사람들이 기사를 클릭하지 않고도 블로그 갤러리 페이지에서 추천 비디오를 볼 수 있습니다. 이 방법은 페이지가 아닌 WordPress 게시물과만 호환됩니다.

  1. 추천 동영상을 추가하려는 게시물로 이동합니다.
  2. 게시물 내용 상단에 동영상 공유 URL을 삽입합니다.
  3. 화면 옵션 에서 형식 옵션을 활성화했는지 확인하십시오.

pda-enable-format-screen-options-wordpress

4. 형식 필드에서 비디오 를 선택합니다.

pda-워드프레스-포맷-비디오

5. 게시물을 게시 하거나 업데이트 합니다.

그게 다야! 이제 동영상이 게시물 목록 페이지에 추천 이미지로 표시됩니다. 방문자는 게시물을 클릭하지 않고도 썸네일에서 비디오를 재생할 수 있습니다.

pda-add-wordpress-video-as-featured-image

#3 동영상을 추천 이미지로 설정하는 코드 적용

코드를 사용하여 WordPress 게시물 및 페이지에 대한 추천 비디오 썸네일을 만들려면 다음 단계를 수행하십시오.

  1. WordPress 관리자 패널에서 Appearance → Theme Editor 로 이동합니다.
  2. 테마 파일 메뉴에서 functions.php 파일을 엽니다.

pda-워드프레스-테마-기능

3. 아래 코드를 파일 끝에 붙여넣어 페이지 또는 게시물에 추가 필드를 추가합니다.

 <?php


// 페이지 메타 박스 추가
함수 codeless_add_custom_meta_box() {
    add_meta_box(
            'codeless_meta_box', // $id
            '코드 없는 페이지 옵션', // $title 
            'codeless_show_custom_meta_box', // $콜백
            '페이지', // $페이지
            '정상', // $context
            '높은'); // $우선순위
}


add_action('add_meta_boxes', 'codeless_add_custom_meta_box');


// 포스트 메타 박스 추가
함수 codeless_add_custom_post_meta_box() {
    add_meta_box(
            'codeless_meta_box', // $id
            '코드 없는 페이지 옵션', // $title 
            'codeless_show_custom_post_meta_box', // $콜백
            '포스트', // $포스트
            '정상', // $context
            '높은'); // $우선순위
}


add_action('add_meta_boxes', 'codeless_add_custom_post_meta_box');


$prefix = '코드리스_';


// 필드 배열(페이지 메타)
$codeless_meta_fields = 배열();


// 필드 배열(게시물 메타)
$codeless_post_meta_fields = 배열(
    정렬(
        'label' => '추천 동영상 임베드 코드',
        'desc' => '추천 이미지 대신 동영상을 표시하려면 동영상 코드를 여기에 붙여넣으세요.',
        'id' => $prefix . '비디오_삽입',
        '유형' => '텍스트 영역'
    )
);


// 페이지 메타 박스에 대한 콜백
function codeless_show_custom_meta_box() {
    글로벌 $codeless_meta_fields;
    codeless_show_page_meta_box($codeless_meta_fields);
}


// 포스트 메타 박스에 대한 콜백
함수 codeless_show_custom_post_meta_box() {
    글로벌 $codeless_post_meta_fields;
    codeless_show_page_meta_box($codeless_post_meta_fields);
}


// 콜백
기능 codeless_show_page_meta_box($meta_fields) {


    글로벌 $post;
// 확인을 위해 nonce 사용
    echo '<input type="hidden" name="custom_meta_box_nonce" value="' . wp_create_nonce(basename(__FILE__)) . '" />';


    // 필드 테이블 시작 및 루프
    echo '<table class="form-table">';
    foreach ($field로 $meta_fields) {
        // 이 게시물에 대해 존재하는 경우 이 필드의 값을 가져옵니다.
        $meta = get_post_meta($post->ID, $field['id'], true);
        // 테이블 행 시작
        에코 '<tr>
        <th><label for="' . $field['id'] . '">' . $필드['라벨'] . '</label></th>
        <td>';
        스위치 ($field['type']) {


            // 텍스트
            케이스 '텍스트':
                echo '<input type="text" name="' . $field['id'] . '" value="' . $meta . '" />
                                                    <br /><span class="description">' . $field['desc'] . '</span>';
                부서지다;


            // 텍스트 영역
            케이스 '텍스트 영역':
                echo '<textarea rows="2" name="' . $field['id'] . '">' . $메타 . '</textarea>
                                                    <br /><span class="description">' . $field['desc'] . '</span>';
                부서지다;


            // 체크박스
            케이스 '확인란':
                echo '<input type="checkbox" name="' . $field['id'] . '" ', $meta ? ' 체크="체크"' : '', '/>
                                                    <label for="' . $field['id'] . '">' . $field['desc'] . '</label>';
                부서지다;


            // 선택하다
            케이스 '선택':
                echo '<select name="' . $field['id'] . '">';
                foreach ($field['options']를 $option으로) {
                    echo '<옵션', $meta == $option['value'] ? ' selected="selected"' : '', ' value="' . $option['value'] . '">' . $option['라벨'] . '</옵션>';
                }
                에코 '</select><br /><span class="description">' . $field['desc'] . '</span>';
                부서지다;
        } //종료 스위치
        에코 '</td></tr>';
    } // foreach 종료
    에코 '</table>'; // 탁자
}


// 데이터 저장
function codeless_save_custom_meta($post_id) {
    글로벌 $codeless_meta_fields;
    글로벌 $codeless_post_meta_fields;


    // 논스 확인
    if (!wp_verify_nonce($_POST['custom_meta_box_nonce'], basename(__FILE__)))
        $post_id 반환;
    // 자동 저장 확인
    if (정의('DOING_AUTOSAVE') && DOING_AUTOSAVE)
        $post_id 반환;
    // 권한 확인
    if ('페이지' == $_POST['post_type']) {
        if (!current_user_can('edit_page', $post_id))
            $post_id 반환;
    } elseif (!current_user_can('edit_post', $post_id)) {
        $post_id 반환;
    }


    //작업할 게시물 또는 페이지 필드
    $필드;


    // 권한 확인(페이지 또는 게시물)
    if ('페이지' == $_POST['post_type']) {


        $fields = $codeless_meta_fields;
    } 그렇지 않으면 ('post' == $_POST['post_type']) {


        $fields = $codeless_post_meta_fields;
    }


    // 필드를 반복하고 데이터를 저장합니다.
    foreach ($필드를 $필드로) {
        $old = get_post_meta($post_id, $field['id'], true);
        $new = $_POST[$field['id']];
        if ($new && $new != $old) {
            update_post_meta($post_id, $field['id'], $new);
        } elseif ('' == $new && $old) {
            delete_post_meta($post_id, $field['id'], $old);
        }
    } // foreach 종료
}


add_action('save_post', 'codeless_save_custom_meta');
?>

4. 추천 이미지를 담당하는 함수 찾기: the_post_thumbnail()

 if ( has_post_thumbnail() && $post_format != 'gallery' && ( ! is_single() || is_single() ) ) :

get_template_part( 'template-parts/blog/parts/entry', '썸네일' );

끝; ?>

5. 다음 코드로 바꿉니다.

 if ( has_post_thumbnail() && $post_format != '갤러리' && ( ! is_single() || is_single() ) ) 
    
    get_template_part( 'template-parts/blog/parts/entry', '썸네일' );





그렇지 않으면 (get_post_meta(get_the_ID(), 'codeless_video_embed', true)) { ?>


<!-- 추천 동영상 보기-->
        <사업부 클래스="동영상 래퍼">
            <?php echo get_post_meta(get_the_ID(), 'codeless_video_embed', true); ?>
        </div>


<?php } 다른 { ?>


        <!--추천 이미지나 미리보기 이미지가 없으면 조치를 취하세요...-->


<?php } ?>

6. 파일 업데이트 버튼을 눌러 변경 사항을 저장합니다.

마지막으로 게시물이나 페이지에 추천 동영상을 추가할 수 있는 새 필드가 표시됩니다.

추천 동영상 썸네일을 최대한 활용하세요

WordPress에서 동영상을 추천 이미지로 설정하는 3가지 방법을 시연했습니다. 플러그인 사용, 내장 기능으로 비디오의 URL 삽입 또는 코드 작성 중에서 선택할 수 있습니다.

테마 파일에서 게시물 썸네일 기능을 찾을 수 없다면 첫 번째와 두 번째 방법을 적극 권장합니다.

지침을 따르는 데 문제가 있는 경우 아래 의견란에 언제든지 알려주십시오. 그리고 가장 중요한 것은 더 유용한 자습서를 보려면 웹 사이트를 구독하는 것을 잊지 마십시오.