Добавление пользовательского ввода для атрибута данных в модальный режим вставки мультимедиа
Я пытаюсь добавить ввод текста в модальный режим "Вставить носитель" в надежде добавить атрибут html5 data-
к родительскому якорю изображений.
<a class="fancybox" href="..." data-fancybox-group=" ">
<-- Эта часть<img class="wp-image-871" src="..." alt="..." width="245" height="333" />
</a>
До сих пор мне удавалось добавлять входные данные в модальный:
Используя приведенный ниже код в моем functions.php файл:
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 );
И я добавил data-fancybox-group=""
в якорь, используя:
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);
Вот где я застрял... У меня есть место чтобы ввести данные, и у меня есть место для передачи данных, но я не уверен, как получить данные из ввода в атрибут data-fancybox-group.
3 answers
Я взглянул на источник, к сожалению, я не видел хорошего способа передать информацию без ее сохранения. Что отстойно - по-крупному - потому что на самом деле это не то, что нужно спасать.
Обходным решением было бы включить Сеансы PHP, поместив следующее в начале вашего functions.php
:
if (!session_id()) {
session_start();
}
Теперь вы можете использовать переменные $_SESSION
, например:
$_SESSION[ 'your-key' ] = 'your-value';
Создайте поле формы следующим образом:
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
);
Используйте переменная сеанса, подобная этой:
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
);
Измените вывод соответствующим образом:
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
);
Вот и все. Должно быть в значительной степени самоописывающимся, в противном случае просто спросите.
Вы должны быть в состоянии вытянуть поле с помощью 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);
Кроме того, вам нужно подключиться к фильтру attachment_fields_to_save
, если вы еще этого не сделали, чтобы сохранить добавленное вами поле.
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);
Вам также следует обновить свою функцию add_fancybox_input
. Измените значение, чтобы вытащить поле 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 );
Я не уверен, что это лучшее для вас, но я думаю, вы могли бы попробовать.
Получите данные из поля ввода и поместите их в форму на скрытый ввод или что-то в этом роде и выполните атрибут данных, когда окно выбора носителя закроется
$inputValue = $('.some_class').val();
$('.fancybox').data('fancybox-group', $inputValue);
Я знаю, это звучит безумно, но для вас это может быть очень просто, и это может сработать.