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

时间：2014-07-12 作者：apaul

我正在尝试向“插入媒体”模式添加文本输入，希望能够添加html5data- 属性设置为图像的父锚点。

<a class="fancybox" href="..." data-fancybox-group=" "> <；--此部分
<img class="wp-image-871" src="..." alt="..." width="245" height="333" />
</a>

到目前为止，我已经能够将输入添加到模式：

enter image description here

在我的函数中使用下面的代码。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组属性的输入中获取数据。

3 个回复

最合适的回答,由SO网友:Nicolai Grossherr 整理而成

我已经查看了源代码，不幸的是，我没有找到一种不保存信息就传递信息的好方法。这太糟糕了，时间太长了，因为这真的不是什么需要挽救的事情。

解决方法是启用PHP Sessions 将以下内容放在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
    );

就是这样。应该很自我解释，否则就问吧。

SO网友:nothingtosee

你应该能够使用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 );

SO网友:Marius Talagiu

我不确定这对你来说是否是最好的，但我想你可以试试。

从输入字段中获取数据，将其放置在隐藏输入或其他内容的表单中，并在媒体选择窗口关闭时执行数据属性

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

我知道这听起来很疯狂，但对你来说可能很简单，这可能会奏效。

结束

小码农CODE

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

相关推荐

在WordPress之外使用PHP检索帖子的特色图片