WordPress 테마 사용 커스터마이저 미디어 컨트롤 사용

클래스에서만 사용할 수있었습니다. 이제 우리는 라는 미디어를 관리하는 새로운 클래스를 발견했습니다. WP_Customize_Media_Control 먼저,이 새로운 클래스를 사용하여 테마 커스터마이저에서 미디어 컨트롤을 관리하는 방법을 설명합니다. 그런 다음 자르기 이미지를 제어 할 수 있도록 콘크리트 클래스 예제를 소개합니다.

WP_Customize_Upload_Control WordPress 테마 Customizer Media Control은 새로운 기능 및 클래스를 포함한 새로운 기능 및 클래스를 포함하여 미디어 관리를 개선 할 수 있도록 업데이트되었습니다. WP_Customize_Media_Control

파일 또는 새 플러그인에 추가 할 수 있습니다. WP_Customize_Media_Control

왜 새로운 수업을 소개합니까?
• 버전 4.3 이전에 WordPress는 테마 커스터마이저의 미디어 파일 업로드를 관리하는 클래스 인 WP_Customize_Media_Control를 제공했습니다. 그러나이 클래스는 업로드 된 미디어 ID를 저장하지 않고 URL 만 저장합니다. ID는 미디어 파일에 대한 정보를 검색하는 가장 일반적인 방법이므로 새로운 클래스 를 제공하기로 결정했습니다.
• WP_Customize_Media_Control를 사용하는 데 익숙해지면 클래스를 확장하여 호환성을 보장하므로 문제없이 사용할 수 있습니다. 그러나 코드를 업데이트하고 functions.php를 사용하는 것이 확실히 더 나은 아이디어입니다.
이 미디어 제어를 사용하는 방법
• 이 새로운 미디어 제어는 저장된 값을 제외하고 전임자와 동일한 방식으로 사용됩니다. 더 이상 URL이 아니기 때문에 같은 방식으로 청소할 수 없습니다. WP_Customize_Media_Control이 컨트롤을 사용하는 방법을 이해하려면 특정 예제를 검토합니다. 사용자가 방문자가 모든 페이지에서들을 수있는 오디오 파일을 선택하도록하는 방법을 볼 수 있습니다. 주제의 파일 또는 새 플러그인에 코드를 쓸 수 있습니다. 둘 다 허용 가능하며 두 옵션 모두 고유 한 장점이 있습니다.

  주제 Customizer API 가이 기사의 주요 초점이 아니기 때문에 여기에서 호출 할 기능에 사용 가능한 모든 옵션을 설명하지는 않습니다. functions.php 기본 사용 먼저, 우리는 사용자가 테마 커스터마이저를 표시하려고 할 때 WordPress에서 호출되는 WordPress 함수로 시작합니다. 이 기능은이 사용자 정의 요소를이 사용자 정의 요소에 추가합니다. WordPress에 적절한 시간에 기능을 호출하기를 원한다고 알려주기 위해

  액션을 사용합니다.
  매개 변수 (여기 )는 테마 커스터마이저를 나타내는 객체입니다. 설정을 추가하는 데 필요한 모든 메소드가 포함되어 있습니다.

  사용자 정의 사운드를 추가하기에 적합한 기본 섹션이 없으므로 간단히 "사운드"라는 고유 한 섹션을 추가합니다.

  예상 대로이 방법은 "Sound"라는 새 섹션을 만듭니다. 사용자가 열면 맨 위에 지침이 표시됩니다. 세 번째 옵션으로 인해이 섹션은 이미 주제 옵션을 편집 할 수있는 사용자 만 볼 수 있습니다. 마지막으로, 배열 옵션 앞의 첫 번째 매개 변수에 주목하십시오. 섹션의 ID를 정의합니다.이 섹션에서 컨트롤을 추가 할 때 재사용해야합니다. customize_register 지금 테마 커스터마이저를 열면이 섹션이 표시되지 않습니다. 이것은 정상입니다 : WordPress는 빈 부분을 표시하지 않으므로 그것을 보려면 하나 이상의 컨트롤로 채워야합니다.

  테마 커스터마이저 API는 컨트롤을 두 부분으로 나눕니다. 사용자가 올바른 데이터를 선택하거나 입력 할 수있는 UI 컨트롤과 현재 값을 검색하고 새 값을 저장하는 설정입니다. 설정을 UI 컨트롤과 데이터베이스 사이의 인터페이스로 취급하십시오.

  function add_my_media_controls($wp_customize) {
  }
  add_action('customize_register', 'add_my_media_controls');

  컨트롤을 만들기 전에 설정을 만들어야합니다.

  $wp_customize < "> 우리는"음악 "을 우리가 설정 한 ID로 지정합니다. 첫 번째 옵션과 같이 테마 수정입니다. 기능 옵션은

  메소드와 동일합니다. 마지막으로 를 정리 콜백 함수로 지정합니다. 이 WordPress 함수는 값이 양의 정수인지 확인하기 위해

  의 바로 가기입니다. 위에서 보았 듯이 는 ID를 저장하므로 값을 정리하는 데 사용하려는 기능입니다.

  이제 사용자가 볼 수있는 UI 컨트롤을 추가 할 준비가되었습니다.

  $wp_customize->add_section('sound', array(
      'title' => 'Sound',
      'description' => 'Add a sound to your website',
      'capability' => 'edit_theme_options'
  ));

  <<>

  객체를 빌드하려면 현재 테마 커스터마이저 인스턴스, 해당 세트 ID (위의 방금 생성) 및 옵션 배열의 세 가지 매개 변수가 필요합니다.

  섹션 옵션은 컨트롤을 배치하려는 부분을 나타내는 데 사용됩니다. 우리는이 목적을 위해 특별히 만든 섹션을 사용하고 있습니다. 그런 다음 필드의 레이블을 표시합니다. 여기에 원하는 값을 배치 할 수 있습니다.

  마지막으로, 여기서, 우리는 사용자에게 미디어 파일을 선택하는 방법을 제공 할 것입니다. 우리는 그들이 선택한 오디오 파일 만 갖기를 원하기 때문에 오디오를 원하는 마임 유형으로 지정합니다. 이런 식으로 WordPress는 다른 유형의 파일을 선택할 수 없습니다.

  이것은 컨트롤 생성에 관한 것입니다. 이제 테마 커스터마이저를 열 수 있습니다. 섹션과 컨트롤을 볼 수 있습니다.

  <🎜 🎜> 더 많은 옵션 <🎜 🎜> 생성자의 세 번째 매개 변수로 제공하는 옵션 배열은 더 많은 옵션을 수용 할 수 있습니다.

  태그 외에도 <🎜 옵션을 통해 컨트롤에 대한 자세한 정보를 표시 할 수도 있습니다. 실제로,

  옵션에 대한 비어 있지 않은 문자열을 제공하면 표시가 표시되는 위치를 설명하는 등 라벨 아래에 지침을 표시 할 수 있습니다.
  옵션을 통해 우선 순위를 설정할 수 있습니다. 이 숫자는 객체를 표시 해야하는 순서를 정의합니다. 기본적으로 우선 순위는 10으로 설정되고 개체는 생성 된 순서로 표시됩니다. 그러나 당신은 그것을 바꿀 수 있습니다. 예를 들어, 두 개의 객체를 만드는 경우 첫 번째 객체의 우선 순위를 10으로 설정하고 두 번째 객체의 우선 순위를 0으로 설정할 수 있습니다.이 방법으로 두 번째 객체가 먼저 표시됩니다. 이 옵션은 플러그인 또는 테마가 특정 순서로 표시 해야하는 여러 컨트롤을 제공하는 경우 유용 할 수 있습니다.

  저장된 설정을 검색 <🎜 🎜> 사용자가 저장 한 설정을 검색하려면 <🎜 🎜>라는 새 함수가 생성됩니다. 이 기능은 선택한 미디어에 해당하는 오디오 태그를 표시하기 위해 주제에 표시하려는 위치에 호출됩니다. WP_Customize_Media_Control <,> 우선, 우리의 설정은 테마 수정이므로 값을 검색하려면

  함수를 사용해야합니다.

  description 사용자가 선택한 경우이 변수에는 선택한 미디어의 ID가 포함됩니다. 다시 말해, 선택이 이루어 졌는지 확인하려면이 ID가 0과 다른지 확인하면됩니다. description

  오디오 태그를 빌드하려면

  를 사용하여 매개 변수가 필요합니다. 실제로 태그의 속성이 될 옵션 배열. priority 이 배열에는 오디오 파일의 URL입니다. 이 URL을 검색하기 위해

  및 ID를 이전에 검색 할 수 있습니다. 다른 속성을 사용하려면 의무적이지는 않지만 필수는 아닙니다. 사용 가능한 속성에 대한 자세한 내용은 WordPress Codex를 참조하십시오.

  이제 오디오 태그를 표시 할 준비가되었습니다. 나는 그것을 div로 마무리하기 위해 여기에 있지만 다른 태그와 다른 스타일을 선택할 수 있습니다. 예를 들어, <🎜 🎜> 함수에 대해 두 매개 변수

  및 echo_theme_sound()를 정의하여 사용자가 오디오 태그 전후에 표시된 텍스트를 제공 할 수 있습니다. $before $after 이제 원하는 곳에서 <🎜 🎜> 기능을 호출하고 결과를 즐기십시오! 이 기능을 테마 파일에서 사용하면 페이지를 새로 고치지 않고 변경을 수행 한 후 직접 테마 커스터마이저의 변경 사항을 볼 수 있습니다.

  function add_my_media_controls($wp_customize) {
  }
  add_action('customize_register', 'add_my_media_controls');

  <<> 자른 이미지 관리

  <🎜 🎜> 더 많은 기능을 추가하려면 를 확장 할 수 있습니다. 이와 같이 추가 할 수있는 기능에 대한 특정 예제가 필요한 경우 echo_theme_sound() 클래스를 사용하여 WordPress Core 자체에서 찾을 수 있습니다.

  이름에서 추측 한 바와 같이, 이것은 사용자가 이미지를 사용하기 전에 이미지를 선택하고 자르는 방법을 제공하려는 경우 유용합니다.

  여기서, 우리는이를 사용하여 현재 기본 WordPress 테마 (25)에 자막 이미지를 추가합니다. 웹 사이트 제목 바로 위의 제목 맨 위에이 이미지를 보여 주기로 선택했지만 다시 한 번 원하는대로 넣을 수 있습니다.이 기사의 목표는 새로운 API의 특정 예를 보여주는 것입니다. 먼저 설정을 만듭니다. 미디어 ID를 저장 하므로이 설정은 기본적으로 이전에 추가 된 오디오 태그와 동일합니다.

  그런 다음 흥미로운 부분 : 제어 자체. <,>와 마찬가지로 <🎜 🎜>의 생성자는 테마 커스터마이저 인스턴스, 세트 ID 및 옵션 배열의 세 가지 매개 변수를 필요로합니다.

  WP_Customize_Media_Control 여기에서는 새 섹션을 만들지 않았습니다. WordPress가 이미 컨트롤을 제공하는 데 사용한 부분을 재사용하여 사용자가 배경 이미지 제목을 선택할 수 있습니다. 레이블 옵션은 이미 알려진 옵션이며 너비와 높이의 다른 두 가지 옵션에 더 관심이 있습니다. WP_Customize_Cropped_Image_Control 이 옵션은 최종 이미지의 크기를 제어하는 ​​데 사용됩니다. 사용자는 원하는 이미지를 선택한 다음 그래픽 도구를 사용하면 원하는 이미지를자를 수 있습니다. WordPress는이 선택에 따라 이미지를 자르고 자른 이미지를 이러한 옵션으로 선택한 크기로 크기를 조정합니다.

  사용자가 이미지를 자르면 이미지 비율의 제약이 여기에 있으며 다른 비율로 이미지의 일부를 선택할 수 없습니다. 그러나 이것은 변할 수 있습니다.

  실제로 이 클래스는

  와

  의 두 가지 다른 옵션을 제공합니다. 기본적으로 두 옵션 모두 False로 설정되며 귀하가 나타내는 치수에 의해 주어진 종횡비는 제약입니다. 사용자는 동일한 비율의 영역을 선택해야합니다.

  그러나 옵션 중 하나를 true로 설정하면이 제약 조건이 제거되고 사용자는 모든 규모로 이미지의 일부를 선택할 수 있습니다. WordPress는 여전히 요청 크기로 결과를 크기로 조정하므로 변형 될 수 있습니다.

  및

  및 flex_width를 사용할 때 비율이 중요합니다. 실제로, 처음에 WordPress는 사용자에게 기본 작물 영역을 제공합니다. 이 영역은 원하는 스케일 (예 : 사각형의 가능한 사각형)을 가진 이미지에서 사용 가능한 가장 큰 영역에 해당합니다. 이것은 우리가 여기서 우리가 기본 너비와 높이를 말하는 것을 줄 것입니다. flex_height

  <🎜 🎜>가 False로 설정되면 사용자는 기본 너비보다 큰 영역을 선택할 수 없습니다. 이 옵션을 true로 설정하면이 제약 조건이 취소됩니다.

  에 대해서도 마찬가지입니다. flex_width 마지막으로, <🎜 🎜> 및 flex_height가 False (기본값)로 설정된 경우, 사용자가 너비 및 높이 옵션에 표시된 것과 정확히 같은 크기 인 이미지를 선택하면 자르기 단계는 자르기 단계가됩니다. 건너 뜁니다.

  자르기 이미지는 원본 이미지를 변경하지 않습니다. 새 하위 미디어가 자른 이미지로 생성되고 원본 파일은 동일하게 유지됩니다. 이렇게하면 사용자가 여러 장소에서 동일한 이미지를 사용해야하는 경우 동일한 이미지를 여러 번 업로드 할 필요가 없습니다.

  자른 이미지를 검색하는 방법은 이전에 사운드를 검색하는 데 사용한 방법과 유사합니다. flex_width를 사용하여 이미지 ID를 가져 와서 URL을 얻습니다. 그런 다음 우리는 그것을 원하는 방식으로 표시합니다. 여기서 나는 이미지를 반영하는 가장 쉬운 방법을 선택했습니다. flex_height

  <🎜 🎜> <<> 결론

  이러한 새로운 컨트롤을 사용하면 테마 커스터마이저가 개발자가보다 쉽게 ​​수행 할 수 있으므로 점점 더 흥미로워지고 있습니다. 이제이 커스터마이저에서 미디어 컨트롤이 필요한 경우 자신의 컨트롤을 추가하고 가장 유용한 값 인 미디어 ID를 검색 할 수 있습니다.

  이 기사에서 볼 수있는 기본 클래스는보다 구체적인 컨트롤이 필요할 때 확장 할 수 있습니다. 이는 WordPress Core의 여러 위치에서 수행됩니다. 작물 이미지 컨트롤은 get_theme_mod()를 확장 하고이 클래스 자체는 새로운 사이트 아이콘 API에서 사용하는 컨트롤에 의해 확장됩니다. 이것들은이 API로 할 수있는 행동의 예일뿐입니다. wp_get_attachment_url() 테마 또는 플러그인을 사용하여 테마 커스터마이저를 사용할 수 있습니다. 그러나 작은 플러그인을 제공하는 것이 더 실용적 이므로이 링크를 통해 찾을 수 있습니다. 이 기사에서 볼 수있는 예제를 결합합니다.

  function add_my_media_controls($wp_customize) {
  }
  add_action('customize_register', 'add_my_media_controls');

  (FAQ 섹션은 여기에 삽입되어야하며 컨텐츠는 입력 텍스트의 FAQ 부품과 일치합니다)