How to make custom metabox fields duplicatable?

2020-02-09 18:29发布

问题:

I am now currently coding a plugin for the WordPress admin. It's about custom meta boxes. I would like to create a slideshow plugin, just for learning a lot of coding.

I have created one metabox, that contains an image upload and a text input field. (see picture bellow)

So on, I can save the fields, so I can upload an image and set an capton to it inside the text field. When I save the post/page inside WordPress it will save the values for me in my database. That's fine!

Now I would like to expand the code, through the user possibility to add and remove fields, like, repeatable field.
As you can see in the image above, I have created the add new slide button, I have also code some javascript for get it work, but this doesn't work correctly.

So my question to you is, what's the best way to create dynamically fields?
I am now using the clone function in javascript, to clone the fields, but only the default row will work.

I've been a few weeks with it and couldn't find a solution so far.

Some code:
This is the code of my metabox created with PHP
This is the jQuery / Javascript that I'm using now

回答1:

I've answered many Questions regarding this topic in WordPress StackExchange.
It is called Repeatable Fields.

But basically these are the needed resources:

  • Create more Meta Boxes as needed - WPSE Q&A

  • Repeatable Custom Fields in a Metabox - Gist

    /**
     * Repeatable Custom Fields in a Metabox
     * Author: Helen Hou-Sandi
     *
     * From a bespoke system, so currently not modular - will fix soon
     * Note that this particular metadata is saved as one multidimensional array (serialized)
     */
    
  • Repeatable Custom Fields in a Metabox - Another Gist example, no description given