사용자 정의 필드를 사용하여 WordPress에 HTML5 비디오를 추가하는 방법

일반적으로 10명의 워드프레스 개발자에게 작업 방법을 물어보면 10가지 다른 답변을 받게 됩니다. 그러나 이는 CMS의 다용성과 주어진 작업에 대해 하나 이상의 솔루션이 있음을 의미합니다.

최근에 저는 WordPress 페이지 내에서 HTML5 비디오를 설정하는 문제에 직면했습니다. 고정된 위치에 있으며 자주 교체해야 합니다. Video Shortcode를 사용하는 것도 좋지만 이 경우 페이지를 업데이트하는 사람들을 위해 작업을 더욱 간단하게 만들고 싶었습니다. 나는 그들이 Shortcode가 무엇인지 또는 그것을 사용하는 방법을 배워야 하는 것을 원하지 않았습니다.

그래서 (어쨌든 내 생각에) 가장 간단한 해결책은 관련 비디오 파일을 업로드할 수 있는 몇 가지 사용자 정의 필드를 만드는 것이었습니다. 거기에서 테마의 템플릿은 비디오를 표시하는 데 필요한 코드를 자동으로 생성합니다. 내가 한 방법은 다음과 같습니다.

프로젝트 요구 사항

물론 테마를 편집하려면 WordPress 사이트와 액세스 권한이 필요합니다(아직 사용하지 않는 경우 하위 테마를 사용하세요). PHP와 HTML에 대한 약간의 지식도 큰 도움이 될 것입니다. 그 외에도 다음이 있어야 합니다.

• 사용자 정의 필드를 만드는 방법입니다. 고급 사용자 정의 필드 (ACF)의 무료 버전은 작업을 아주 잘 수행할 것입니다. WordPress 웹 사이트에 설치하고 활성화하십시오.
• 비디오 – 여러 형식이 이상적입니다. MP4 파일은 이제 모든 주요 브라우저에서 지원되지만 추가 범위를 위해 WEBM 버전을 제공하는 것도 나쁘지 않을 수 있습니다. 그리고 실제로 고대 브라우저를 사용하는 사람들을 위한 FLV 폴백은 문제가 되지 않을 것입니다. 비디오의 각 버전이 동일한 해상도로 설정되어 있는지 확인하고 싶을 것입니다.
• '포스터' 이미지입니다. 비디오가 재생될 최고 해상도로 만들어진 화면 캡처 또는 사용자 정의 그래픽.

1단계: 사용자 정의 필드 생성

ACF 무료 버전을 설치하고 활성화했으면 WordPress 내부의 사용자 정의 필드 메뉴로 이동한 다음 새로 추가를 클릭합니다.

새로운 필드 세트('비디오 필드'라고 함) 안에 업로드하려는 각 비디오 형식에 대한 ACF 파일 필드와 포스터 이미지에 대한 다른 필드를 생성해야 합니다. 설정에는 MP4, WEBM, FLV 및 포스터용 필드가 있습니다. 각 파일 필드에 대해 "파일 URL"이라고 표시된 반환 값의 라디오 버튼을 선택해야 합니다. 또한 필드 이름을 기록해 두십시오. 나중에 필요합니다.

다음으로, ACF '위치' 설정 내에서 원하는 페이지나 게시물에 새 필드를 할당하고 작업을 저장합니다. 할당된 페이지를 편집하려면 필드가 표시되어야 합니다(찾으려면 약간 아래로 스크롤해야 할 수 있음).

2단계: 비디오 파일 업로드

새 사용자 정의 필드를 할당한 페이지 또는 게시물을 편집하려면 탐색하십시오. 거기에서 올바른 파일을 업로드하는 것이 중요합니다. 필수 파일을 업로드했으면 페이지/게시물을 저장합니다.

3단계: 템플릿 편집

이제 재미있는 부분이 나옵니다. 테마 템플릿에 PHP 마법을 추가하는 것입니다. WordPress 템플릿 계층 구조에 익숙하지 않다면 지금이 그것에 대해 공부하기에 좋은 시기일 수 있습니다.

비디오를 배치할 올바른 템플릿 파일과 위치를 찾으십시오. 그런 다음 다음 코드 조각을 복사하여 붙여넣고 필요에 맞게 사용자 지정합니다.

 <?php
// 비디오 필드 가져오기
$video_mp4 = get_field('mp4_video'); // MP4 필드 이름
$video_webm = get_field('webm_video'); // WEBM 필드 이름
$video_flv = get_field('flv_video'); // FLV 필드 이름
$video_poster = get_field('포스터_이미지'); // 포스터 이미지 필드 이름
                

// 숏코드 빌드
$attr = 배열(
'mp4' => $video_mp4,
'webm' => $video_webm,
'flv' => $video_flv,
'포스터' => $video_poster,
'미리 로드' => '자동'
);

// 쇼트코드 표시
echo wp_video_shortcode( $attr );
?>

코드의 첫 번째 섹션은 1단계에서 만든 사용자 정의 필드의 이름을 참조합니다. 각 필드에 대해 PHP 변수를 생성합니다(해당 파일의 URL을 출력함). 중간에 사용해야 합니다. 코드 섹션.

중간 섹션 아래에는 wp_video_shortcode 함수에 대한 속성 배열이 있습니다. 각 파일 유형에 대한 속성이 있습니다. 우리는 또한 비디오를 미리 로드하도록 선택하고 있지만 이는 완전히 선택 사항입니다. 여기에서 너비, 높이, 루프를 설정하고 원하는 경우 비디오를 자동으로 재생할 수도 있습니다.

코드의 맨 아래 섹션은 작업 결과를 템플릿으로 출력하고 있습니다.

모든 것이 만족스럽게 설정되면 템플릿을 저장하고 웹사이트에 업로드하고 싶을 것입니다(또는 내장된 WordPress 테마 편집기를 사용하는 경우 저장만 하면 됨). 그런 다음 프론트 엔드에서 페이지를 확인하여 비디오가 제대로 표시되는지 확인하십시오.

WordPress에는 CMS에 바로 내장된 HTML5 비디오 플레이어가 있으며 기본 플레이어는 모양과 기능이 아주 좋습니다. 하지만 좀 더 개인적인 느낌을 주고 싶다면 다양한 옵션을 스타일링할 수 있습니다. 브라우저의 개발자 도구로 출력 코드를 검사하고 다양한 CSS 클래스를 기록해 둡니다. 예를 들어 컨테이너 요소에는 .wp-video 클래스가 있습니다. 가능성에 대해 더 자세히 알아보기 위해 자습서를 살펴볼 수도 있습니다.

프로세스를 단순화하는 사용자 정의 필드

사용자 정의 필드를 사용하면 WordPress에 다양한 새로운 기능과 디자인 가능성을 가져올 수 있습니다. 그러나 그들의 대단함의 핵심 요소는 콘텐츠를 더 쉽게 관리할 수 있다는 것입니다. 누가 콘텐츠를 추가하고 편집하는지에 관계없이 사용자 정의 필드는 전체 프로세스를 간소화할 수 있습니다. 이는 우리 모두에게 도움이 되지만 전문 개발자가 아닌 사용자에게 특히 좋습니다.

위의 HTML5 비디오 필드와 같은 몇 가지 간단한 기능을 추가하면 새로운 사용자가 직면하는 학습 곡선을 크게 줄일 수 있습니다. 무엇을 해야 하는지 생각하는 대신 이제 몇 개의 파일을 업로드하는 문제가 되었습니다.

결국, 약간의 추가 작업이 웹 사이트의 수명 동안 모든 사람에게 약간의 시간과 골칫거리를 절약할 수 있습니다.