在媒体窗口中选择图片后添加/更新自定义字段 (Wordpress)

2024-01-18

我有一个关于 WordPress 的问题,我刚刚在添加/编辑帖子页面中添加了一个名为“添加滑块”的按钮。 这是我的 function.php 中的代码:

//Add button to create slider
add_action('media_buttons','add_my_media_button',15);

function add_my_media_button(){
    echo '<a href="#" id="insert-my-media" class="button">Add Slider</a>';
}

function include_media_button_js_file(){
    wp_enqueue_script('media_button',get_bloginfo('template_directory').'/js/media_button.js',array('jquery'),'1.0',true);
}

add_action('wp_enqueue_media','include_media_button_js_file');

这是我的 media_button.js 代码

jQuery(function($){
$(document).ready(function(){
    $('#insert-my-media').click(open_media_window);
})

function open_media_window(){
    if (this.window === undefined) {
        this.window = wp.media({
            title: 'Insert a media',
            library: {type:'image'},
            multiple: true,
            button: {text:'Insert'}
        });

        var self = this; //needed to retrieve the function below
        this.window.on('select',function(){
            var files = self.window.state().get('selection').toArray();
            var values;
            for (var i = 0; i < files.length; i++) {
                var file = files[i].toJSON();
                if(values===undefined){
                    var values = file.url;
                }
                else{
                    var values = values+','+file.url;
                }
            };
            wp.media.editor.insert(values);
        });
    }

    this.window.open();
    return false;   
}
});

用户在媒体窗口中选择图片并按“插入”按钮后,它将把图片的 url 值添加到内容编辑器邮箱中。

我的问题是如何在自定义字段框中自动添加此值并自动添加/更新该值,而无需单击添加自定义字段按钮。

因此,用户可以添加/更新该图片 url 的自定义字段,而无需查看/检查自定义字段以在 WordPress 的屏幕选项上的帖子编辑器中查看。

请帮我解答这个问题,谢谢。


我像这样修改我的 jquery / js ..

$(document).ready(function(){
    // $('#insert-my-media').click(open_media_window);
    if($('#images_id').val() != '' && $('#images_url').val() != ''){
        $('#open_media').text("Edit Slider");
    }
    $('#open_media').click(function(e){
        e.preventDefault();
        var target = $('#images_id');
        var target_url = $('#images_url');
        var btnSave = $('#publishing-action input.button');

        if(target.val() == '' && target_url.val() == ''){

            var wpmedia = wp.media({
                title: 'Insert a media',
                library: {type:'image'},
                multiple: true,
                button: {text:'Insert'}
            });

            wpmedia.on('select', function(){
                var ids = [];
                var urls = [];
                var models =  wpmedia.state().get('selection').toArray();
                for (var i = 0; i < models.length; i++) {
                    var file = models[i].toJSON();
                    ids.push(file.id);
                    urls.push(file.url);
                };
                target.val(ids.join(","));
                target_url.val(urls.join(","));
                $('#deleting_slider').val("");
                $('#open_media').text("Adding...");
                btnSave.click();
            });
            wpmedia.open();
        }else{
            wp.media.gallery
            .edit('[gallery ids="'+ target.val() +'" urls="'+ target_url.val() +'"]')
            .on('update', function(g){
                var ids = [];
                var urls = [];
                for (var i = 0; i < g.models.length; i++) {
                    var file = g.models[i].toJSON();
                    ids.push(file.id);
                    urls.push(file.url);
                };
                target.val(ids.join(","));
                target_url.val(urls.join(","));
                $('#deleting_slider').val("");
                $('#open_media').text("Editing...");
                btnSave.click();
            });
        }

    });

    $('#save_desc').click(function(e){
        e.preventDefault();
        var target = $('#desc_editor');
        var btnSave = $('#publishing-action input.button');         
                target.val(target.val());
                btnSave.click();
    });

    $('#delete_slider').click(function(e){
        e.preventDefault();
        /*var target = $('#images_id');
        var target_url = $('#images_url');*/
        var btnSave = $('#publishing-action input.button'); 
            /*target.val("");
            target_url.val("");*/
            $('#deleting_slider').val("Deleting...");
            $('#delete_slider').text("Deleting...");
            btnSave.click();
    });

    });

然后我制作一个名为metabox.php创建元框

<?php


function koplan_add_metabox(){
add_meta_box(
        'koplan_metabox_gallery',
        'Slider Gallery',
        'koplan_show_metabox',
        'post'
);
}
function koplan_add_maps_metabox(){
    add_meta_box(
            'koplan_metabox_maps',
        'Maps Descriptions',
        'koplan_show_maps_metabox',
        'post'
);
}
function koplan_show_metabox($post){
$ids = get_post_meta($post->ID, 'gallery_images', true);
$urls = get_post_meta($post->ID,'images',true); 
?>
<a href="#" id="open_media" class="button">Add Slider</a>
<hr>
<input type="hidden" name="gallery_images" id="images_id" value="<?php echo $ids; ?>">
<input type="hidden" name="gallery_urls" id="images_url" value="<?php echo $urls; ?>">
<input type="hidden" name="deleting_slider_post_meta" id="deleting_slider" value="<?php echo $urls; ?>">
<?php

    if($ids=="" and  $urls==""){
       return;
    }
    else{
        echo do_shortcode('[gallery ids="'.$ids.'" urls="'.$urls.'"]');
    }
?>
<hr>
<a href="#" id="delete_slider" name="delete_slider_post_meta" class="button">Delete Slider</a>
<?php
}

function koplan_save_gallery_metabox($post_id){
    if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
        return;
}

    if(! isset($_POST['gallery_images']) && !isset($_POST['gallery_urls'])){
        return;
    }

    $ids = sanitize_text_field( $_POST['gallery_images'] );
    $urls = sanitize_text_field( $_POST['gallery_urls'] );

    $terms = wp_get_object_terms( $post_id, 'category', array( 'fields' => 'names' ) );
        /*$termsname = $terms[0]->name;*/
        if(strlen($terms[1]) > strlen($terms[0])){
            $term = $terms[1];
        }
        else{
            $term = $terms[0];  
        }

    $sldata = '<slider images="'.$term.'" />';
    update_post_meta($post_id, 'slider', $sldata);
    update_post_meta($post_id, 'gallery_images', $ids);
    update_post_meta($post_id, 'images', $urls);

    if(isset($_POST['deleting_slider_post_meta']) && $_POST['deleting_slider_post_meta'] != ""){
        delete_post_meta($post_id, 'slider', $sldata);
        delete_post_meta($post_id, 'gallery_images', $ids);
        delete_post_meta($post_id, 'images', $urls);
    }
    }

function koplan_show_maps_metabox($post){
    $desc = get_post_meta($post->ID,'mapsdesc',true);
    if($desc!=""){
?>
    <textarea name="maps_descriptions" id="desc_editor" placeholder="Insert Descriptions Here" class="wp-editor-area" cols="40" autocomplete="off" style="height:320px; width:100%;"><?php echo $desc; ?></textarea>
<?php
}else{
?>
<textarea name="maps_descriptions" id="desc_editor" placeholder="Insert Descriptions Here" class="wp-editor-area" cols="40" autocomplete="off" style="height:320px; width:100%;"></textarea>
<?php
}
?>  
<hr>
<a href="#" class="button" id="save_desc">Save</a>
<?php
}

function koplan_save_maps_desc_metabox($post_id){
if (define('DOING_AUTOSAVE') && DOING_AUTOSAVE){
    return;
}
if(!isset($_POST['maps_descriptions'])){
    return;
}
$desc = $_POST['maps_descriptions'];
update_post_meta($post_id,'mapsdesc',$desc);
}

add_action( 'add_meta_boxes', 'koplan_add_metabox' );
add_action('add_meta_boxes','koplan_add_maps_metabox');
add_action( 'save_post', 'koplan_save_gallery_metabox' );
add_action( 'save_post', 'koplan_save_maps_desc_metabox' );

?>

我说问题解决了,结案了。谢谢大家,谢谢 stackoverflow

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在媒体窗口中选择图片后添加/更新自定义字段 (Wordpress) 的相关文章

  • 如何纠正流警告:解构(缺少注释)

    我正在编写一个小型 React Native 应用程序 并且正在尝试使用 Flow 但我无法在任何地方真正获得有关它的正确教程 我不断收到错误 destructuring Missing annotation 有关 station 这段代码
  • JQuery Mobile 与 MVC 的链接

    我正在使用 ASP NET MVC 3 和 Razor UI 设置 JQuery 移动网站 我正在生成我的链接 例如 a href See Group 2 a 假设我从 Home Index 访问它 我遇到的问题是 当我点击链接时 它会出现
  • jQuery:处理 getJSON() 中的错误?

    使用 jQuery 时如何处理 500 错误getJSON http api jquery com jQuery getJSON 有几个关于错误处理的问题getJSON and https stackoverflow com questio
  • 使用 Jquery 清除 5 个空 TD

    我有一个正在填充的动态表 我知道我不应该这样做 但是你会如何连续找到 5 个空 TD 并隐藏它们呢 因此 如果行包含 5 个空 TD 则不显示 TD 我想删除每个实例 td td td td td td td td td td 在 DOM
  • 如何解决 Typescript 构建中的错误“找不到模块 'jquery'”

    我目前在 ts 文件的顶部有这个import require jquery 我这样做是因为我试图在我的打字稿文件中使用 jquery 但我似乎无法编译它 因为它返回标题中所述的错误 我正在使用 ASP NET CORE 脚本文件夹 tsco
  • DataTables row.add 到特定索引

    我正在替换这样的行项目 var targetRow entity row dataTable targetRow closest table dataTable DataTable dataTable row targetRow remov
  • 页面上使用 HTML Editor Extender 进行回发会导致 IE11 中出现 JavaScript 错误

    我已将 HTML 编辑器扩展程序添加到我正在处理的页面中 现在每当我在页面上发回帖子时 都会收到以下 Javascript 错误 JavaScript 运行时错误 参数无效 之后什么也没有发生 这在 IE10 或更低版本以及我所知道的所有其
  • Vuejs 2:去抖动不适用于手表选项

    当我在 VueJs 中反跳此函数时 如果我提供毫秒数作为原语 它就可以正常工作 但是 如果我将其提供为对 prop 的引用 它会忽略它 这是道具的缩写版本 props debounce type Number default 500 这是不
  • 可以设置标题样式吗? (并且使用CSS或js?)[重复]

    这个问题在这里已经有答案了 我想知道是否可以设计一个title a href title This is a title Hello a 样式问题有两个方面 文本格式 编码 我猜这是可能的 所以在问题中这样做 工具提示样式 你能把它弄大一点
  • Javascript 假值(null、未定义、false、空字符串:“”或 '' 和 0)和比较(==)运算符 [重复]

    这个问题在这里已经有答案了 当我使用任何一个值时 null undefined false 0 in a if陈述 它总是被评估为谬误 false 另外 这些值的否定 null undefined false 0 in a if语句总是被评
  • Firebase 函数 onWrite 未被调用

    我正在尝试使用 Firebase 函数实现一个触发器 该触发器会复制数据库中的一些数据 我想观看所有添加的内容votes user vote 结构为 我尝试的代码是 const functions require firebase func
  • 在移动设备上滚动

    这个问题更多的是一个建议研究 我确实希望它对其他人有帮助 并且它不会关闭 因为我不太确定在哪里寻求有关此事的建议 在过去的 6 个月里 我一直在进行移动开发 我有机会处理各种设备上的各种情况和错误 最麻烦的是滚动问题 当涉及到在网站的多个区
  • 对于只触及我的工作表的 Google 表格脚本,收到“此应用程序未经验证”

    我正在编写一个 Google Sheets 脚本 我只想访问与 gs 文件关联的同一电子表格中的数据 似乎我应该有权在自己的电子表格中运行脚本 但是每当我运行一个函数时 我都会得到一个This app isn t verified信息 我该
  • Chrome//kendoUI/jQuery:超出最大调用堆栈大小

    我正在使用 hottowell 模板来创建 spa 应用程序 并且我从 jquery 中收到了一个很好的错误 基本上我的问题从此刻开始尝试绑定我的视图 viewModelBinder js 来自 durandal 库 viewModelBi
  • 如何隐藏/禁用 Highcharts.js 中的图例框?

    我想问是否可以使用 HighCharts js 库隐藏图表中的所有图例框 var chart object chart renderTo render to type graph type colors graph colors title
  • Javascript - 水波纹效果

    我需要 JS 上的脚本 它将以 水波纹 样式更改 images html 抱歉 6MB GIF 文件 http fcuunited ru temp listening2 gif http fcunited ru temp listening
  • 带参数的事件监听器

    我想将参数传递给 JavaScript 中的事件侦听器 我已经找到了解决方案 但我无法理解它们为什么或如何工作以及为什么其他解决方案不起作用 我有 C C 背景 但是 Javascript 函数的执行有很大不同 您能否帮助我理解以下示例如何
  • 使用 MongoDB 和 Nodejs 插入和查询日期

    我需要一些帮助在 mongodb 和 nodejs 中按日期查找记录 我将日期添加到抓取脚本中的 json 对象 如下所示 jsonObj last updated new Date 该对象被插入到 mongodb 中 我可以看到如下 la
  • 如何从日期中查找该月的最后一天?

    如何在 PHP 中获取该月的最后一天 Given a date 2009 11 23 我要2009 11 30 并给出 a date 2009 12 23 我要2009年12月31日 t返回给定日期所在月份的天数 请参阅的文档date ht
  • 如何使用asm.js进行测试和开发?

    最近我读到asm js规范 看起来很酷 但是是否有任何环境 工具来开发和测试这个工具 这还只是处于规范阶段吗 您可以尝试使用 emscripten 和 ASM JS 1 并从侧分支在 firefox 构建中运行它 有关 asm js 的链接

随机推荐