如何向WooCommerce产品添加自定义Meta PDF上传框(并在前端发布链接)

时间:2016-09-27 作者:seanannnigans

我尝试了以下几种不同的方法。目前我使用的功能工作正常,但没有使用WP Media Uploader(这使得在网站上查找1600多个PDF文件以上载变得很麻烦)。我最近找到了下面的代码片段,并对其进行了调整,使其适用于WooCommerce产品。

唯一的问题是,我似乎不知道该调用什么来获取上传的PDF的URL,该URL将元框作为链接显示在前端(即单击此处下载产品Tearsheet)。

任何帮助都将不胜感激。

/* PDF Tear Sheet on Product Pages */

//Add Metabox
add_action(\'add_meta_boxes\', \'add_upload_file_metaboxes\');

function add_upload_file_metaboxes() {
add_meta_box(\'swp_file_upload\', \'File Upload\', \'swp_file_upload\', \'product\', \'normal\', \'default\');
}


function swp_file_upload() {
global $post;
// Noncename needed to verify where the data originated
echo \'<input type="hidden" name="tearsheetmeta_noncename" id="tearsheetmeta_noncename" value="\'.
wp_create_nonce(plugin_basename(__FILE__)).
\'" />\';
global $wpdb;
$strFile = get_post_meta($post -> ID, $key = \'tearsheet_file\', true);
$media_file = get_post_meta($post -> ID, $key = \'_wp_attached_file\', true);
if (!empty($media_file)) {
    $strFile = $media_file;
} ?>


<script type = "text/javascript">

    // Uploading files
    var file_frame;
jQuery(\'#upload_image_button\').live(\'click\', function(product) {

    podcast.preventDefault();

    // If the media frame already exists, reopen it.
    if (file_frame) {
        file_frame.open();
        return;
    }

    // Create the media frame.
    file_frame = wp.media.frames.file_frame = wp.media({
        title: jQuery(this).data(\'uploader_title\'),
        button: {
            text: jQuery(this).data(\'uploader_button_text\'),
        },
        multiple: false // Set to true to allow multiple files to be selected
    });

    // When a file is selected, run a callback.
    file_frame.on(\'select\', function(){
        // We set multiple to false so only get one image from the uploader
        attachment = file_frame.state().get(\'selection\').first().toJSON();

        // here are some of the variables you could use for the attachment;
        //var all = JSON.stringify( attachment );
        //var id = attachment.id;
        //var title = attachment.title;
        //var filename = attachment.filename;
        var url = attachment.url;
        //var link = attachment.link;
        //var alt = attachment.alt;
        //var author = attachment.author;
        //var description = attachment.description;
        //var caption = attachment.caption;
        //var name = attachment.name;
        //var status = attachment.status;
        //var uploadedTo = attachment.uploadedTo;
        //var date = attachment.date;
        //var modified = attachment.modified;
        //var type = attachment.type;
        //var subtype = attachment.subtype;
        //var icon = attachment.icon;
        //var dateFormatted = attachment.dateFormatted;
        //var editLink = attachment.editLink;
        //var fileLength = attachment.fileLength;

        var field = document.getElementById("tearsheet_file");

        field.value = url; //set which variable you want the field to have
    });

    // Finally, open the modal
    file_frame.open();
});

</script>



<div>

    <table>
    <tr valign = "top">
    <td>
    <input type = "text"
name = "tearsheet_file"
id = "tearsheet_file"
size = "70"
value = "<?php echo $strFile; ?>" />
    <input id = "upload_image_button"
type = "button"
value = "Upload">
    </td> </tr> </table> <input type = "hidden"
name = "img_txt_id"
id = "img_txt_id"
value = "" />
    </div>     <?php
function admin_scripts() {
    wp_enqueue_script(\'media-upload\');
    wp_enqueue_script(\'thickbox\');
}

function admin_styles() {
    wp_enqueue_style(\'thickbox\');
}
add_action(\'admin_print_scripts\', \'admin_scripts\');
add_action(\'admin_print_styles\', \'admin_styles\');
}


//Saving the file
function save_tearsheet_meta($post_id, $post) {
// verify this came from the our screen and with proper authorization,
// because save_post can be triggered at other times
if (!wp_verify_nonce($_POST[\'tearsheetmeta_noncename\'], plugin_basename(__FILE__))) {
    return $post -> ID;
}
// Is the user allowed to edit the post?
if (!current_user_can(\'edit_post\', $post -> ID))
    return $post -> ID;
// We need to find and save the data
// We\'ll put it into an array to make it easier to loop though.
$tearsheet_meta[\'tearsheet_file\'] = $_POST[\'tearsheet_file\'];
// Add values of $tearsheet_meta as custom fields

foreach($tearsheet_meta as $key => $value) {
    if ($post -> post_type == \'revision\') return;
    $value = implode(\',\', (array) $value);
    if (get_post_meta($post -> ID, $key, FALSE)) { // If the custom field already has a value it will update
        update_post_meta($post -> ID, $key, $value);
    } else { // If the custom field doesn\'t have a value it will add
        add_post_meta($post -> ID, $key, $value);
    }
    if (!$value) delete_post_meta($post -> ID, $key); // Delete if blank value
    }
 }
add_action(\'save_post\', \'save_tearsheet_meta\', 1, 2); // save the custom fields

2 个回复
最合适的回答,由SO网友:seanannnigans 整理而成

嘿,所有人(尤其是天生的),我早就能够把它整理出来了,但显然忘了回来分享我是怎么做的。我最终否定了使用媒体上传器的想法(因为它在更大的PDF上传中会被点击或错过),而只是使用了文本字段。我给客户端一个特定子文件夹(在本例中为“tearsheets”)下的FTP访问权限,并指示他们如何将URL复制并粘贴到上传的PDF中。然后,我将代码片段(见下文)添加到WooCommerce的正确单产品模板中,以便在前端显示。

再次感谢您的帮助!

<a href="<?php echo get_post_meta( get_the_ID(), \'_nlttearsheet\', true ); ?>">Download Tear Sheet</a>

SO网友:Innate

最简单的方法是使用插件。我使用ACF(Advanced Custom Fields) 创建一个元框,它负责所有的繁重工作,并在编辑产品屏幕上显示一个漂亮的元框。然后,我在我的单个产品模板上添加了一个函数,以显示PDF链接,这可以使用函数来完成,也可以在需要时在模板本身中完成。使用一些条件逻辑,PDF链接仅在有条件逻辑时显示:-)

以下是自定义字段的代码段:

$pdf_media_file = get_post_meta( $post_id, \'pdf_media_file\', true);

if(isset($pdf_media_file) && !empty($pdf_media_file)){
    $pdf_file = wp_get_attachment_url($pdf_media_file);     
}
然后,可以如下所示显示指向该文件的链接:

<a href="<?php echo $pdf_file; ?>">View the PDF</a>
WordPress现在有一个PDF图像生成器,因此您也可以在媒体库中使用PDF缩略图。

相关推荐

如何在WordPress开发中添加带有ACF自定义字段ID的自定义metabox字段

我是wordpress开发的新手,我在我的项目中安装了高级自定义字段插件,并创建了两个文本字段名称&;我还创建了一个插件,可以在帖子中创建一个带有文本框的元框。现在在帖子中,我将获得自定义字段名称(&A);电子邮件和我的自定义元框旁边将出现,但我必须将我的元框附加到名称字段旁边,即在名称字段和电子邮件字段之间。我的metabox代码如下。请任何人帮帮我//Creating the custom meta box function my_notice_meta_box() {