옵션 트리 - 고급 옵션-Word누르다-php.cn

옵션 트리 - 고급 옵션

이전 기사에서는 옵션 트리를 설치하는 방법과 테마와 통합하는 방법을 다루었습니다. 또한 옵션 트리가 제공하는 가장 기본적이지만 매우 유용한 옵션 유형을 탐색했습니다. 이 옵션은 옵션 트리의 Easy UI 테마 옵션 빌더를 사용하여 몇 분 안에 구현할 수 있습니다. 키 테이크 아웃

옵션 트리는 날짜 선택기 및 측정 장치와 같은 고급 테마 옵션의 통합을 단순화하여 광범위한 코딩없이 사용자 정의를 향상시킵니다. '날짜 선택기', '날짜 시간 선택기'및 '측정'유형과 같은 고급 옵션은 자세한 사용자 입력을 허용하며 UI 테마 옵션 빌더를 통해 쉽게 관리 할 수 있습니다. ‘숫자 슬라이더’및‘온/오프’스위치는 숫자 값을 설정하고 테마 내에서 설정을 토글링하여 사용자 경험을 간소화하기위한 사용자 친화적 인 인터페이스입니다. > 옵션 트리는 측정 용 배열 및 날짜 및 시간에 대한 문자열을 포함한 다양한 데이터 유형을 지원하여 테마 옵션을 처리하는 데있어 유연성을 보장합니다. 사용자 정의는 날짜 형식 또는 측정 단위 변경과 같은 기존 옵션 유형을 수정하여 개발자에게 특정 요구에 맞게 기능을 조정할 수있는 기능을 제공합니다.

더 고급 옵션을 탐색 우리는 이제 몇 번의 클릭만으로 테마에 포함시킬 수있는 가장 고급 옵션을 계속 탐색 할 것입니다. 옵션 트리는 '고급 옵션'이라는 용어로 놀라지 말고 옵션 트리는 모두 통합하기 쉽지만 처음부터 직접 코딩해야하기 때문에 '고급'으로 간주됩니다. 여기 우리는 간다! 날짜 선택기 '날짜 선택기'옵션 유형은 표준 양식 입력 필드에 묶여 있으며, 이는 입력 필드에 초점이 주어질 때 날짜를 선택할 수있는 캘린더 팝업을 표시합니다. 반환 된 값은 날짜 형식의 문자열 (yyyy-mm-dd)입니다

날짜 시간 선택기

'날짜 시간 선택기'옵션 유형은 표준 양식 입력 필드에 묶여있어 캘린더 팝업이 표시되어 사용자가 입력 필드에 초점이 제공 될 때 날짜와 시간을 선택할 수 있습니다. 반환 된 값은 날짜 및 시간 형식의 문자열입니다 (yyyy-mm-dd hh : mm).

'측정'옵션 유형은 입력 및 선택 필드의 혼합입니다. 텍스트 입력은 값을 허용하고 SELECT 필드를 사용하면 해당 값에 추가 할 측정 단위를 선택할 수 있습니다. 현재 기본 장치는 PX, %, EM 및 PT입니다. 그러나 필터로 변경할 수 있습니다
숫자 슬라이더

'숫자 슬라이더'옵션 유형은 jQuery UI 슬라이더를 표시합니다. 사용자 정의 함수 또는 루프에서 사용하기 위해 단일 숫자 값을 반환합니다.

<span>array(
</span>    <span>'id'          => 'spyr_demo_date_picker',
</span>    <span>'label'       => __( 'Date Picker', 'text-domain' ),
</span>    <span>'desc'        => __( 'Your description', 'text-domain' ),
</span>    <span>'type'        => 'date-picker',
</span>    <span>'section'     => 'your_section',
</span><span>)
</span>
<span>// Get the value saved on Theme Options Page
</span><span>$spyr_demo_date_picker = ot_get_option( 'spyr_demo_date_picker' );
</span>
<span>// Get the value saved for a Page, Post or CPT ( Within the loop )
</span><span>$spyr_demo_date_picker = get_post_meta( $post->ID, 'spyr_demo_date_picker', true );
</span>
<span>// Checking if the date has passed
</span><span>$date = new DateTime( ot_get_option( 'spyr_demo_date_picker' ) );
</span><span>$now  = new DateTime( "now" );
</span>
<span>// Compare the 2 dates
</span><span>// Not that this example assumes you have not changed the date format
</span><span>// through the ot_type_date_picker_date_format filter like shown below
</span><span>if( $now > $date ) {
</span>    <span>echo 'Date is in the past';
</span><span>} else {
</span>    <span>echo 'Date has not passed yet';
</span><span>}
</span>
<span>// Change displayed format and returnd value
</span><span>// Defaults to yy-mm-dd
</span><span>// Not recommended but it's possible
</span><span>add_filter( 'ot_type_date_picker_date_format', 'spyr_modify_date_picker_date_format', 10, 2 );
</span><span>function spyr_modify_date_picker_date_format( $format, $field_id ) {
</span>    <span>if( 'spyr_demo_date_picker' == $field_id ) {
</span>        <span>return 'mm-dd-yy';
</span>    <span>}
</span><span>}</span>

로그인 후 복사

ON/OFF > 'ON/OFF'옵션 유형은 물건을 'ON'또는 'OFF'로 돌리는 데 사용할 수있는 간단한 스위치를 표시합니다. 저장된 반환 값은‘on’또는‘Off’입니다

갤러리 '갤러리'옵션 유형은 쉼표로 분리 된 이미지 첨부 파일 ID 목록을 저장합니다. 테마의 이미지를 표시하려면 프론트 엔드 기능을 작성해야합니다. 테마가

add_image_size () .

<span>// OptionTree Date Time Picker Option Type
</span>
<span>// Example code when being used as a Metabox or
</span><span>// Exported OptionTree file to be used in Theme Mode
</span>
<span>array(
</span><span>'id'          => 'spyr_demo_date_time_picker',
</span><span>'label'       => __( 'Date Time Picker', 'text-domain' ),
</span><span>'desc'        => __( 'Your description', 'text-domain' ),
</span><span>'std'         => '',
</span><span>'type'        => 'date-time-picker',
</span><span>'section'     => 'your_section',
</span><span>)
</span>
<span>// Get the value saved on Theme Options Page
</span><span>$spyr_demo_date_time_picker = ot_get_option( 'spyr_demo_date_time_picker' );
</span>
<span>// Get the value saved for a Page, Post or CPT ( Within the loop )
</span><span>$spyr_demo_date_time_picker = get_post_meta( $post->ID, 'spyr_demo_date_time_picker', true );
</span>
<span>// Checking if the date has passed
</span><span>$date = new DateTime( ot_get_option( 'spyr_demo_date_time_picker' ) );
</span><span>$now  = new DateTime( "now" );
</span>
<span>// Compare the 2 dates
</span><span>// Not that this example assumes you have not changed the date format
</span><span>// through the ot_type_date_time_picker_date_format filter like shown below
</span><span>if( $now > $date ) {
</span>    <span>echo 'Date is in the past';
</span><span>} else {
</span>    <span>echo 'Date has not passed yet';
</span><span>}
</span>
<span>// Change displayed format and returnd value
</span><span>// Defaults to yy-mm-dd
</span><span>// Not recommended but it's possible
</span><span>add_filter( 'ot_type_date_time_picker_date_format', 'spyr_modify_date_time_picker_date_format', 10, 2 );
</span><span>function spyr_modify_date_time_picker_date_format( $format, $field_id ) {
</span>    <span>if( 'spyr_demo_date_time_picker' == $field_id ) {
</span>        <span>return 'mm-dd-yy';
</span>    <span>}
</span><span>}</span>

로그인 후 복사

슬라이더 '슬라이더'옵션 유형을 사용하면 몇 분 안에 슬라이더를 만들 수 있습니다. 그런 다음이 반복 가능한 필드를 사용하여 나중에 슬라이더를 채우는 데 사용할 정보를 유지할 수 있습니다. 이 옵션은보다 유연한 '목록 항목'옵션을 선호하여 곧 더 이상 사용되지 않습니다.

목록 항목 '목록 항목'옵션 유형을 사용하면 많은 사용자 정의가 가능합니다. '목록 항목'에 설정을 추가 할 수 있으며 새 '목록 항목'을 추가하면 해당 설정이 사용자에게 표시됩니다. 일반적으로 이것은 사용자 정의 레이아웃을위한 슬라이딩 컨텐츠 또는 코드 블록을 작성하는 데 사용됩니다. 슬라이더는 4 개의 사전 정의 된 필드가있는 '목록 항목'옵션 유형이므로 몇 분 안에 이미지 슬라이더를 만들 수 있습니다. '목록 항목'옵션 유형을 사용하면 고유 한 필드, ID 및 이러한 필드를 자체 옵션 유형을 가질 수 있습니다. 가능성은 끝이 없습니다.

'목록 항목'설정의 예는 다음과 같습니다 업로드 '업로드'옵션 유형은 지원되는 WordPress 지원 미디어를 업로드하는 데 사용됩니다. 업로드 후 사용자는 해당 미디어의 URI로 입력을 채우려면 '옵션 트리로 보내기'버튼을 누릅니다. 이 기능에는 한 가지 경고가 있습니다. 테마 옵션을 가져와 한 사이트에 미디어를 업로드 한 경우 이전 URI는 새 사이트의 URI를 반영하지 않습니다. 미디어를 새 서버에 다시 업로드하거나 FTP로 변경하고 필요한 경우 URI를 변경해야합니다. '업로드'옵션 유형은 클래스 속성에 를 추가하여 첨부 파일 ID로 저장할 수 있습니다. 이렇게하면 add_image_size ()를 통해 등록 된 이미지 크기를 얻을 수 있습니다. 반환 된 값은

<span>// OptionTree Measurement Option Type
</span>
<span>// Example code when being used as a Metabox or
</span><span>// Exported OptionTree file to be used in Theme Mode
</span>
<span>array(
</span>    <span>'id'          => 'spyr_demo_measurement',
</span>    <span>'label'       => __( 'Measurement', 'text-domain' ),
</span>    <span>'desc'        => __( 'Your description', 'text-domain' ),
</span>    <span>'type'        => 'measurement',
</span>    <span>'section'     => 'your_section',
</span><span>)
</span>
<span>// Get the value saved on Theme Options Page
</span><span>// Returns an array
</span><span>$spyr_demo_measurement = ot_get_option( 'spyr_demo_measurement' );
</span>
<span>// Get the value saved for a Page, Post or CPT ( Within the loop )
</span><span>// Returns an array
</span><span>$spyr_demo_measurement = get_post_meta( $post->ID, 'spyr_demo_measurement', true );
</span>
<span>// Displaying the result side by side
</span><span>echo $spyr_demo_measurement[0] . $spyr_demo_measurement[1];
</span>
<span>// Adding a new measurement option to the list
</span><span>add_filter( 'ot_measurement_unit_types', 'spyr_ot_measurement_unit_types', 10, 2 );
</span><span>function spyr_ot_measurement_unit_types( $measurements, $field_id ) {
</span>    <span>if( 'demo_measurement' == $field_id ) {
</span>        <span>return array_merge( $measurements, array( 'rem' => 'rem' ) );
</span>    <span>} 
</span><span>}
</span>
<span>// Override list of measurements
</span><span>add_filter( 'ot_measurement_unit_types', 'spyr_ot_measurement_override_unit_types', 10, 2 );
</span><span>function spyr_ot_measurement_override_unit_types( $measurements, $field_id ) {
</span>    <span>if( 'demo_measurement' == $field_id ) {
</span>        <span>return array( 'rem' => 'rem' );
</span>    <span>} 
</span><span>}</span>

로그인 후 복사

ot-upload-attachment-id

가 CSS 클래스 필드에 추가되었는지 여부에 따라 첨부 파일 ID 또는 이미지에 대한 소스 링크가됩니다.

탭 '탭'옵션 유형을 사용하면 일반적으로 페이지를 확장하는 필드 세트를 함께 그룹화 할 수 있습니다. 이 옵션을 반복해서 사용할 수 있습니다. 이 필드에는 반환 값이 없습니다. 평소와 같이,이 옵션을 구현하는 데는 몇 번의 클릭 만 소요되며 UI는 귀하와 고객에게 놀랍습니다. 테마 옵션 UI Builder를 통해 탭을 만들려면 '탭'옵션 유형이 그룹화하려는 필드 그룹 위에 있는지 확인하기 만하면됩니다. 그룹화하려는 다른 옵션에 대해 동일한 작업을 수행하여 더 많은 '탭'을 추가 할 수 있습니다. ‘탭’은 다른‘탭’또는 새 섹션의 시작 부분이 발생하면 끝납니다. 이를 시각화하는 데 도움이 되려면 실제 세계 예를 들어 UI 빌더를 살펴 보겠습니다.

'외관'아래 테마 옵션 페이지를 방문하면 해당 옵션에서 얻을 수있는 것입니다.

컬러 피커

'컬러 피커'옵션 유형은 CSS에서 사용하기위한 16 진 컬러 코드를 저장합니다. 테마에서 무언가의 색상을 수정하는 데 사용하십시오.

결론 옵션 트리의 가장 진보 된 기능 중 일부이지만, 최고는 아직 오지 않았습니다. OptionTree를 사용하면 타이포그래피를 향상시키는 것이 정말 간단하여 귀하와 고객이 HTML 요소를 쉽게 스타일링 할 수 있습니다. 향후 기사에서는 CSS 작업을 수행하고 WordPress 테마를 완전히 새로운 수준으로 끌어 올리는 '배경'및 '타이포그래피'옵션 유형을 만들 것입니다. 옵션 트리 고급 옵션에 대한 자주 묻는 질문

내 WordPress 사이트에 옵션 트리를 설치하는 방법은 무엇입니까? 옵션 트리 - 고급 옵션

WordPress 사이트에 옵션 트리를 설치하는 것은 간단한 프로세스입니다. 먼저 WordPress 대시 보드의 '플러그인'섹션으로 이동하십시오. ‘새 새로운 추가’를 클릭하고 검색 창에서‘옵션 트리’를 검색하십시오. 플러그인을 찾으면‘지금 설치’를 클릭 한 다음‘활성화’를 클릭하십시오. 이제 플러그인은 사이트에서 사용할 준비가되어 있어야합니다.

옵션 트리 UI 빌더를 어떻게 사용합니까?

<span>array(
</span>    <span>'id'          => 'spyr_demo_date_picker',
</span>    <span>'label'       => __( 'Date Picker', 'text-domain' ),
</span>    <span>'desc'        => __( 'Your description', 'text-domain' ),
</span>    <span>'type'        => 'date-picker',
</span>    <span>'section'     => 'your_section',
</span><span>)
</span>
<span>// Get the value saved on Theme Options Page
</span><span>$spyr_demo_date_picker = ot_get_option( 'spyr_demo_date_picker' );
</span>
<span>// Get the value saved for a Page, Post or CPT ( Within the loop )
</span><span>$spyr_demo_date_picker = get_post_meta( $post->ID, 'spyr_demo_date_picker', true );
</span>
<span>// Checking if the date has passed
</span><span>$date = new DateTime( ot_get_option( 'spyr_demo_date_picker' ) );
</span><span>$now  = new DateTime( "now" );
</span>
<span>// Compare the 2 dates
</span><span>// Not that this example assumes you have not changed the date format
</span><span>// through the ot_type_date_picker_date_format filter like shown below
</span><span>if( $now > $date ) {
</span>    <span>echo 'Date is in the past';
</span><span>} else {
</span>    <span>echo 'Date has not passed yet';
</span><span>}
</span>
<span>// Change displayed format and returnd value
</span><span>// Defaults to yy-mm-dd
</span><span>// Not recommended but it's possible
</span><span>add_filter( 'ot_type_date_picker_date_format', 'spyr_modify_date_picker_date_format', 10, 2 );
</span><span>function spyr_modify_date_picker_date_format( $format, $field_id ) {
</span>    <span>if( 'spyr_demo_date_picker' == $field_id ) {
</span>        <span>return 'mm-dd-yy';
</span>    <span>}
</span><span>}</span>

로그인 후 복사

옵션 트리 UI 빌더는 사용자 정의 테마 옵션을 만들 수있는 강력한 도구입니다. 이를 사용하려면 WordPress 대시 보드의 '옵션 트리'섹션으로 이동하십시오. ‘설정’을 클릭 한 다음‘UI Builder’를 클릭하십시오. 여기에서 테마에 섹션, 설정 및 옵션을 추가 할 수 있습니다. 완료되면 변경 사항을 저장해야합니다.

옵션 트리에서 데이터를 업데이트하려면 옵션 트리에서 데이터를 업데이트하는 것이 간단합니다. WordPress 대시 보드의 '옵션 트리'섹션으로 이동하십시오. ‘설정’을 클릭 한 다음 업데이트하려는 옵션을 클릭하십시오. 변경 한 다음 '업데이트'를 클릭하여 저장하십시오.

옵션 트리에서 변수의 실제 값을 어디서 찾을 수 있습니까?