在WordPress中为自定义分类类型集成相册上传功能

记录一下最近项目里折腾的功能:不用WooCommerce,而是通过自定义分类来管理产品,并想给它加上多图相册功能。

下面的代码可以实现:在后台编辑产品分类时,页面底部会出现一个相册上传框。图片上传后,可以用Elementor的模块在前端展示。

但实际用下来发现,前端图片偶尔会不显示,不太稳定。所以最后还是用了ACF,一步到位,省心很多。

这段代码就当是留个底,供有兴趣的朋友研究玩玩,正式项目可别用。

function add_gallery_meta_box() {
    add_meta_box(
        'article_gallery',
        '图片相册',
        'render_gallery_meta_box',
        'post',
        'normal',
        'high'
    );
}
add_action('add_meta_boxes', 'add_gallery_meta_box');

function render_gallery_meta_box($post) {
    $images = get_post_meta($post->ID, '_article_gallery', true);
    echo '<input type="hidden" name="article_gallery_nonce" value="' . wp_create_nonce('article_gallery_nonce') . '">';
    echo '<button type="button" id="upload_images_button">上传图片</button>';
    echo '<div id="gallery_preview">';
    if ($images) {
        foreach ($images as $img_id) {
            $img_url = wp_get_attachment_url($img_id);
            echo '<img src="' . esc_url($img_url) . '" style="max-width:100px; margin:5px;">';
        }
    }
    echo '</div>';
    // 后续需要添加JavaScript实现图片上传和保存
}

// 保存meta
function save_gallery_meta($post_id) {
    if (!isset($_POST['article_gallery_nonce']) || !wp_verify_nonce($_POST['article_gallery_nonce'], 'article_gallery_nonce')) {
        return;
    }
    if (isset($_POST['article_gallery'])) {
        update_post_meta($post_id, '_article_gallery', $_POST['article_gallery']);
    }
}
add_action('save_post', 'save_gallery_meta');

 

WordPress Support Team
WordPress Support Team

💻 A sincere and meticulous young developer 🎓 specializing in the field of custom foreign trade website development.
🌟 specializes in WordPress website design customization and full-service development. Our unique advantage is not only proficient in website development technology, but also the international mainstream art design elements 🎨 skillful integration, while developing accurate and effective brand marketing strategy 📈.
💡 Services covered:
🔍 WordPress Theme Development for a unique website visual style and user experience.
💻 WordPress website customization, tailor-made exclusive website according to your foreign trade business needs.
Whether it's website architecture construction, interface aesthetic design, or brand promotion strategy, we can provide you with one-stop quality solutions to help your foreign trade business stand out on the Internet and step into the global market 🚀.

Articles: 49

Leave a Reply

Your email address will not be published. Required fields are marked *

Submit your request

Quote Collection Form

💥Website Builder | Strengths speak for themselves, not false!

Treasure, we say, a lot of parties are not happy with their own sites are peers copying homework, which is like you open a store, certainly do not want others to know your sources of supply is a reason, right? So, in order to give customers a full sense of security, we did not put any customer case work on the site of the link ha, this is our protection of customer privacy.

📌 But if there is a sincere desire to do the site of the boss, or treasure you just want to look at our case, then hurry up to add the contact information of our website, we snappy send you a few look at, the main one sincere!

If you have not decided to do what style of website, but also simple, you find a few peers of the site sent to us, according to do on the end of the matter. We choose to imitate the site does not mean that no skill, we just can not stand that kind of invalid communication and cumbersome to make people crazy process. Some parties to do a corporate display site, have to find dozens of suppliers to roll, to be honest, no real technology companies will be there to lick the party. We are not the same, we want to be down-to-earth to the customer to make cost-effective, so that customers are satisfied with the site straight pat. Those kneeling work, let those who only play lip service, no technology companies to do it, we do not serve! # Website Development

# Party A Party B # Rejected Inside Coil

Contact the WordPress Technical Team

We look forward to hearing from you.

Submit your request

Quote Collection Form