Visual Composer附加所需的媒体文件

Question

我是否需要创建新的参数类型，因为https://wpbakery.atlassian.net/wiki/pages/viewpage.action?pageId=524332#vc_map()-Availabletypevalues

中没有“attach_file”类型

为什么缺少这种元素？

我需要的是“附加文件” - 按钮到后端。

Answer 1

我和你有同样的问题，这就是我想出来的。

这允许添加可视化作曲家内容元素，您可以在其中从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的第3个参数。这是我们为媒体管理器添加脚本的地方。

请注意，此保存附件ID，但显示网址。使用附件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（）中使用param。这也应该放在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