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

时间: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);
我知道这听起来很疯狂,但对你来说可能很简单,这可能会奏效。

结束

相关推荐

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

我有一个小小的Windows应用程序,我希望能够使用我网站上帖子的特色图片。我的网站列出并审查电脑游戏的修改,应用程序会安装这些修改。对于那些知道蒸汽是什么的人来说,可以把它看作是一种非常基本的蒸汽。当用户在我的网站上安装文件修改后,我希望应用程序访问该网站,搜索该文件,然后在应用程序中使用特色图像。我知道大部分内容都超出了这个线程的范围,但是有没有一种方法可以使用PHP在WordPress之外找到图像的URL?也许是从post ID。