在插入媒体模式中为数据属性添加自定义输入


8

我正在尝试将文本输入添加到“插入媒体”模式,以希望能够向data-图像的父锚添加html5 属性。

<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);

这是我遇到的问题...我有一个输入数据的地方,还有一个存放数据的地方,但是我不确定如何从输入中获取数据-fancybox-group属性。

Answers:


3

我查看了源代码,不幸的是,我没有看到一种不保存信息就传递信息的好方法。糟糕透顶-花费大量时间-因为这确实不需要保存。

一种解决方法是通过将以下内容放在您的开头来启用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
    );

就是这样。应该是不言自明的,否则就问一下。


3

您应该可以使用来拉该字段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 );

这似乎可行,我看到的唯一问题是数据保存在不同页面上。就像在一个页面上向图像添加data-attribute一样,它会保存该数据,因此,如果在另一页面上使用同一图像,则data-attribute将需要重置。
apaul

有没有一种方法可以使用户输入到data-Attribute而不保存它,或者至少有一种在将图像插入到页面后擦除元数据的方法?
apaul 2014年

我在想delete_post_meta($id, 'fancyboxGroup');应该删除存储的属性,但是我不确定如何使它启动image_send_to_editor
apaul 2014年

+1,因为这是常用的方法。有一些我需要更改的事情,例如不显示附件页面上的字段,保持表单字段为空以及不进行任何更改-就像我在回答中所做的那样。
Nicolai 2014年

一种可能性是利用具有(短)期满的瞬态。而不是保存发布元数据。这样一来,您就不必担心删除数据。@ apaul34208
Nicolai

0

我不确定这是否对您最好,但是我想您可以尝试一下。

从输入字段获取数据,并将其以表单的形式放在隐藏的输入或其他内容上,并在“媒体选择”窗口关闭时执行data属性

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

我知道这听起来很疯狂,但对您来说可能很简单,而且可以解决问题。


如果是jQuery,我认为这不是.data()应该使用的方式api.jquery.com/jquery.data
apaul 2014年

如果不确定,请进行测试。jQuery.data将需要元素(选择器),但是由于选择器被赋予了$('。fancybox'),因此您拥有了“键/值”对,是的,这是正确的。
Marius Talagiu 2014年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.