Visual Composer 연결 미디어 파일 필요

Visual Composer 연결 미디어 파일 필요

https://wpbakery.atlassian.net/wiki/pages/viewpage.action?pageId=524332#vc_map()-Availabletypevalues 에는 "param_file" 타입이 없기 때문에 새로운 param 타입을 작성해야 합니까?

왜 이런 요소가 없어졌지?

제가 필요한 것은 백엔드에 "파일 첨부" 버튼이다.

나는 방금 너와 같은 문제를 겪었고 그것이 내가 생각해낸 것이다.

이를 통해 WordPress 미디어 관리자에서 원하는 파일을 선택할 수 있는 시각적 작곡가 컨텐츠 요소를 추가할 수 있습니다.

이것을 다른 기능과 분리해 주세요(모듈러 방식 사용).

템플릿 내functions.php더하다

/**
 * Visual Composer Functions
 */
require get_template_directory() . '/functions/vc-functions.php';

새 쇼트코드 매개 변수 추가

인your_template/functions/vc-functions.php더하다

/**
 * Add file picker shartcode param.
 *
 * @param array $settings   Array of param seetings.
 * @param int   $value      Param value.
 */
function file_picker_settings_field( $settings, $value ) {
  $output = '';
  $select_file_class = '';
  $remove_file_class = ' hidden';
  $attachment_url = wp_get_attachment_url( $value );
  if ( $attachment_url ) {
    $select_file_class = ' hidden';
    $remove_file_class = '';
  }
  $output .= '<div class="file_picker_block">
                <div class="' . esc_attr( $settings['type'] ) . '_display">' .
                  $attachment_url .
                '</div>
                <input type="hidden" name="' . esc_attr( $settings['param_name'] ) . '" class="wpb_vc_param_value wpb-textinput ' .
                 esc_attr( $settings['param_name'] ) . ' ' .
                 esc_attr( $settings['type'] ) . '_field" value="' . esc_attr( $value ) . '" />
                <button class="button file-picker-button' . $select_file_class . '">Select File</button>
                <button class="button file-remover-button' . $remove_file_class . '">Remove File</button>
              </div>
              ';
  return $output;
}
vc_add_shortcode_param( 'file_picker', 'file_picker_settings_field', get_template_directory_uri() . '/vc_extend/file_picker.js' );

@ojrask가 옳았습니다.의 세 번째 파라미터에 주의해 주십시오.vc_add_shortcode_param여기서 미디어 매니저의 스크립트를 추가합니다.

첨부 파일 ID가 저장되지만 URL이 표시됩니다.첨부 파일 ID를 사용하면 다른 WP 기능(프런트 엔드 출력을 위해 작업을 수행할 때 편리함)에서 사용할 수 있습니다.

js 추가

인your_template/vc_extend/file_picker.js더하다

!function($) {

  var _custom_media = true,
      _orig_send_attachment = wp.media.editor.send.attachment

  $( '#vc_ui-panel-edit-element .file-picker-button' ).click( function( e ) {
    var send_attachment_bkp = wp.media.editor.send.attachment,
        file_picker_button = $( this ),
        file_remover_button = $( this ).parent().find( '.file-remover-button' ),
        input = $( this ).parent().find( '.file_picker_field' ),
        display = $( this ).parent().find( '.file_picker_display' );

    _custom_media = true;
    wp.media.editor.send.attachment = function( props, attachment ) {
      if ( _custom_media ) {
        display.html( attachment.url );
        input.val( attachment.id );
        file_picker_button.addClass( 'hidden' );
        file_remover_button.removeClass( 'hidden' );
      } else {
        return _orig_send_attachment.apply( this, [props, attachment] );
      };
    }

    wp.media.editor.open( file_picker_button );
    return false;
  });

  $( '#vc_ui-panel-edit-element .file-remover-button' ).click( function( e ) {
    var file_picker_button = $( this ).parent().find( '.file-picker-button' ),
        file_remover_button = $( this ),
        input = $( this ).parent().find( '.file_picker_field' ),
        display = $( this ).parent().find( '.file_picker_display' );

    display.html( '' );
    input.val( '' );
    file_picker_button.removeClass( 'hidden' );
    file_remover_button.addClass( 'hidden' );
  });

  $( '.add_media' ).on( 'click', function() {
    _custom_media = false;
  } );

}(window.jQuery);

새로 만든 매개 변수 유형 사용

파라미터는 vc_map()에서 사용할 수 있게 되었습니다.이것도 넣어야 합니다.your_template/functions/vc-functions.php그런 식으로 해야 합니다.

vc_map( array(
  'name' => __( 'your_element_name', 'js_composer' ),
  'base' => 'your_element_base',
  'content_element' => true,
  'class' => '',
  'icon' => 'icon-wpb-images-stack',
  'params' => array(
    array(
      'type' => 'file_picker',
      'class' => '',
      'heading' => __( 'Attach Media', 'js_composer' ),
      'param_name' => 'file_picker',
      'value' => '',
    ),
  ),
) );

산출량

프론트 엔드에 출력을 표시하려면 파일 생성your_template/vc_templates/your_element_base.php이런 걸 더하면

echo wp_get_attachment_url( $atts['file_picker'] );

그러면 선택한 파일에 URL만 출력됩니다.

이 작업을 수행하는 데 유용한 리소스는 다음과 같습니다.

vc_map docs https://wpbakery.atlassian.net/wiki/pages/viewpage.action?pageId=524332

작성, 새로운 파라미터 타입의 https://wpbakery.atlassian.net/wiki/display/VC/Create+New+Param+Type

미디어 매니저 스크립트 추가 https://wordpress.stackexchange.com/a/82874/99164

언급URL : https://stackoverflow.com/questions/36195200/visual-composer-attach-media-file-needed