Thêm đầu vào tùy chỉnh cho thuộc tính dữ liệu trong phương thức chèn phương tiện

Tôi đang cố gắng thêm một kiểu nhập văn bản vào phương thức "Chèn phương tiện" với hy vọng có thể thêm data-thuộc tính html5 vào neo cha của hình ảnh.

<a class="fancybox" href="..." data-fancybox-group=" "> <- Phần này
<img class="wp-image-871" src="..." alt="..." width="245" height="333" />
</a>

Cho đến nay tôi đã có thể thêm đầu vào vào phương thức:

Sử dụng mã dưới đây trong tệp tin.php của tôi:

function add_fancybox_input( $form_fields, $post ) {
$form_fields['fancyboxGroup'] = array(
'label' => 'fancybox group',
'input' => 'text',
'value' => 'testing',
'helps' => 'use this to group images in fancybox',
);
return $form_fields;
}

add_filter( 'attachment_fields_to_edit', 'add_fancybox_input', 10, 2 );

Và tôi đã thêm vào data-fancybox-group=""neo bằng cách sử dụng:

function give_linked_images_class($html, $id, $caption, $title, $align, $url, $size, $alt = '' ){
  $classes = 'fancybox'; // separated by spaces, e.g. 'img image-link'

  // check if there are already classes assigned to the anchor
  if ( preg_match('/<a.*? class=".*?">/', $html) ) {
    $html = preg_replace('/(<a.*? class=".*?)(".*?>)/', '$1 ' . $classes . '$2', $html);
  } else {
    $html = preg_replace('/(<a.*?)>/', '$1 class="' . $classes . '" data-fancybox-group="" >', $html);
  }
  return $html;
}
add_filter('image_send_to_editor','give_linked_images_class',10,8);

Đây là nơi tôi bị kẹt ... Tôi đã có một nơi để nhập dữ liệu và tôi đã có một nơi để dữ liệu đi, nhưng tôi không chắc làm thế nào để lấy dữ liệu từ đầu vào vào dữ liệu thuộc tính -fancybox-nhóm.

Tôi đã xem qua nguồn, thật không may, tôi đã không thấy một cách hay để truyền thông tin mà không lưu nó. Thật tệ - thời gian lớn - bởi vì đây thực sự không phải là bất cứ điều gì cần phải được lưu.

Một cách giải quyết khác là kích hoạt các Phiên PHP bằng cách đặt các mục sau vào đầu functions.php:

    if (!session_id()) {
        session_start();
    }

Bây giờ bạn có thể sử dụng $_SESSIONcác biến, như thế này:

    $_SESSION[ 'your-key' ] = 'your-value';

Tạo trường biểu mẫu của bạn như thế này:

    function wpse_154330_attachment_fields_to_edit( $form_fields, $post ) {
        $current_screen = get_current_screen();
        // we are not saving, so no need to show the field on the attachment page
        if ( $current_screen->id == 'attachment' ) {
            return $form_fields;
        }
        $form_fields['fancyboxGroup'] = array(
            'label' => 'fancybox group',
            'input' => 'text',
            'value' => '', // leave the value empty
            'helps' => 'use this to group images in fancybox',
        );
        return $form_fields;
    }
    add_filter(
        'attachment_fields_to_edit',
        'wpse_154330_attachment_fields_to_edit',
        10,
        2
    );

Sử dụng biến phiên như thế này:

    function wpse154330_save_attachment_field( $post, $attachment ) {
        // we're only setting up the variable, not changing anything else
        if ( isset( $attachment[ 'fancyboxGroup' ] ) {
            $_SESSION[ 'fancyboxGroup' ] = $attachment[ 'fancyboxGroup' ];
        }
        return $post;
    }
    add_filter(
        'attachment_fields_to_save',
        'wpse154330_save_attachment_field',
        10,
        2
    );

Sửa đổi đầu ra cho phù hợp:

    function wpse154330_image_send_to_editor(
        $html,
        $id,
        $caption,
        $title,
        $align,
        $url,
        $size,
        $alt = ''
    ) {
        // no need to modify the output, if no fancybox group is given
        if (
            empty( $_SESSION[ 'fancyboxGroup' ] )
            || ! isset( $_SESSION[ 'fancyboxGroup' ] )
        ) {
            return $html;
        }
        $classes = 'fancybox';
        if ( preg_match( '/<a.*? class=".*?">/', $html ) ) {
            $html = preg_replace(
                '/(<a.*? class=".*?)(".*?>)/',
                '$1 ' . $classes . '$2',
                $html
            );
        } else {
            $html = preg_replace(
                '/(<a.*?)>/',
                '$1 class="'
                    . $classes
                    . '" data-fancybox-group="'
                    . $_SESSION[ 'fancyboxGroup' ]
                    . '" >',
                $html
            );
        }
        unset( $_SESSION[ 'fancyboxGroup' ] );
        return $html;
    }
    add_filter(
        'image_send_to_editor',
        'wpse154330_image_send_to_editor',
        10,
        8
    );

Đó là về nó. Nên tự giải thích khá nhiều, nếu không thì cứ hỏi.

Bạn sẽ có thể kéo trường bằng cách sử dụng get_post_meta.

function give_linked_images_class($html, $id, $caption, $title, $align, $url, $size, $alt = '' ){
  $classes = 'fancybox'; // separated by spaces, e.g. 'img image-link'

  // check if there are already classes assigned to the anchor
  if ( preg_match('/<a.*? class=".*?">/', $html) ) {
    $html = preg_replace('/(<a.*? class=".*?)(".*?>)/', '$1 ' . $classes . '$2', $html);
  } else {
    $html = preg_replace('/(<a.*?)>/', '$1 class="' . $classes . '" data-fancybox-group="'.get_post_meta($id, 'fancyboxGroup', true).'" >', $html);
  }
  return $html;
}
add_filter('image_send_to_editor','give_linked_images_class',10,8);

Ngoài ra, bạn sẽ cần nối vào attachment_fields_to_savebộ lọc, nếu bạn chưa có, để lưu trường bạn đã thêm.

function wpse154330_save_attachment_field($post, $attachment) {
    if( isset($attachment['fancyboxGroup']) ){
            update_post_meta($post['ID'], 'fancyboxGroup', $attachment['fancyboxGroup']);
        }

    return $post;
}

add_filter( 'attachment_fields_to_save','wpse154330_save_attachment_field', 10, 2);

Bạn cũng nên cập nhật add_fancybox_inputchức năng của bạn . Sửa đổi giá trị để kéo trường Fancybox.

function add_fancybox_input( $form_fields, $post ) {
$form_fields['fancyboxGroup'] = array(
'label' => 'fancybox group',
'input' => 'text',
'value' => get_post_meta($post->ID, 'fancyboxGroup', true),
'helps' => 'use this to group images in fancybox',
);
return $form_fields;
}
add_filter( 'attachment_fields_to_edit', 'add_fancybox_input', 10, 2 );

Tôi không chắc đây có phải là điều tốt nhất cho bạn không nhưng tôi đoán bạn có thể thử nó.

Lấy dữ liệu từ trường đầu vào và đặt nó ở dạng trên một đầu vào ẩn hoặc một cái gì đó và thực hiện thuộc tính dữ liệu khi cửa sổ của Lựa chọn phương tiện sẽ đóng

$inputValue = $('.some_class').val();
$('.fancybox').data('fancybox-group', $inputValue);

Tôi biết điều này nghe có vẻ điên rồ nhưng nó có thể rất đơn giản đối với bạn và nó có thể làm điều khó khăn.