Gleichzeitiges Hinzufügen von benutzerdefinierten Bildfeldern und anderen Feldern

Lesezeit: 14 Minuten

Gleichzeitiges Hinzufugen von benutzerdefinierten Bildfeldern und anderen Feldern
AdamJones

Ich möchte im Grunde eine benutzerdefinierte CMS-Seite haben, die Bildpaare und Beschriftungen für diese darin definierten Bilder enthält. Ich beabsichtige, diese Elementpaare zum Füllen von Inhalten auf einer benutzerdefinierten Seite meines neuen WordPress-Themes zu verwenden.

Ich habe es geschafft, eine neue Einstellungsseite innerhalb des CMS zu erstellen und eine beliebige Anzahl von Textfeldern darin zu füllen, dank Umgang mit Plugin-Optionen in WordPress 2.8 mit register_setting().

Ich muss jetzt nur Felder für jedes Textfeld hinzufügen, mit denen ein Benutzer den Medienbrowser öffnen und dann ein vorhandenes Bild auswählen kann, das in WordPress hochgeladen wurde, oder ein neues zur Auswahl hochladen.

Ich konnte online keine einfachen sauberen Beispiele dafür finden. Selbst die diesbezüglichen Fragen zu Stack Overflow, die ich gefunden habe, scheinen kein klares, elegantes Beispiel für diese Funktionsweise zu haben.

Nur für das Protokoll; Ich hatte ursprünglich vor, dies mit einem Plugin zu tun (Benutzerdefinierte Felder für Entwickler), die ich bereits installiert habe, weil ich dachte, dass es mit diesem Plugin sehr einfach wäre, benutzerdefinierte Bildfelder hinzuzufügen, da es ziemlich einfach ist, Textfelder damit hinzuzufügen. Ich scheine mich jedoch zu irren, und es gibt keine klaren Beispiele für die Angabe dieser Art von Feld.

Wenn Sie Beispiele kennen, die das Hinzufügen benutzerdefinierter Bildfelder veranschaulichen (unabhängig davon, ob gleichzeitig andere Felder hinzugefügt werden), verwenden Sie entweder nativen WordPress-API-Code oder die Integration mit dem Developers Custom Fields-Plugin.

Gleichzeitiges Hinzufugen von benutzerdefinierten Bildfeldern und anderen Feldern
brasophilo

Sie erwähnen es nicht genau, aber es scheint, dass Sie damit zu tun haben Wiederholbare Felder.

Zwei interessante Plugins: Erweiterte benutzerdefinierte Felder und Manager für benutzerdefinierte Inhaltstypen.

Heute habe ich diesen Artikel in einem von WordPress gesehen Communities bei G+:
Verwenden des WordPress 3.5 Media Uploader innerhalb von Plugins.

Diese Lösung wurde ursprünglich hier in einer SO-Frage veröffentlicht, die seitdem gelöscht wurde. Es ist umgeschrieben, überarbeitet und getestet:

<?php
/**
 * Plugin Name: (SO) Repeatable fields demo
 * Plugin URI:  http://stackoverflow.com/a/14452453/1287812
 * Description: How to make repeatable fields in a meta box
 * Author:      brasofilo
 * License:     GPLv3
 */

add_action( 'admin_init', 'add_post_gallery_so_14445904' );
add_action( 'admin_head-post.php', 'print_scripts_so_14445904' );
add_action( 'admin_head-post-new.php', 'print_scripts_so_14445904' );
add_action( 'save_post', 'update_post_gallery_so_14445904', 10, 2 );

/**
 * Add custom Meta Box to Posts post type
 */
function add_post_gallery_so_14445904() 
{
    add_meta_box(
        'post_gallery',
        'Custom Uploader',
        'post_gallery_options_so_14445904',
        'post',
        'normal',
        'core'
    );
}

/**
 * Print the Meta Box content
 */
function post_gallery_options_so_14445904() 
{
    global $post;
    $gallery_data = get_post_meta( $post->ID, 'gallery_data', true );

    // Use nonce for verification
    wp_nonce_field( plugin_basename( __FILE__ ), 'noncename_so_14445904' );
?>

<div id="dynamic_form">

    <div id="field_wrap">
    <?php 
    if ( isset( $gallery_data['image_url'] ) ) 
    {
        for( $i = 0; $i < count( $gallery_data['image_url'] ); $i++ ) 
        {
        ?>

        <div class="field_row">

          <div class="field_left">
            <div class="form_field">
              <label>Image URL</label>
              <input type="text"
                     class="meta_image_url"
                     name="gallery[image_url][]"
                     value="https://stackoverflow.com/questions/14445904/<?php%20esc_html_e(%20$gallery_data["image_url'][$i] ); ?>"
              />
            </div>
            <div class="form_field">
              <label>Description</label>
              <input type="text"
                     class="meta_image_desc"
                     name="gallery[image_desc][]"
                     value="https://stackoverflow.com/questions/14445904/<?php%20esc_html_e(%20$gallery_data["image_desc'][$i] ); ?>"
              />
            </div>
          </div>

          <div class="field_right image_wrap">
            <img src="https://stackoverflow.com/questions/14445904/<?php%20esc_html_e(%20$gallery_data["image_url'][$i] ); ?>" height="48" width="48" />
          </div>

          <div class="field_right">
            <input class="button" type="button" value="Choose File" onclick="add_image(this)" /><br />
            <input class="button" type="button" value="Remove" onclick="remove_field(this)" />
          </div>

          <div class="clear" /></div> 
        </div>
        <?php
        } // endif
    } // endforeach
    ?>
    </div>

    <div style="display:none" id="master-row">
    <div class="field_row">
        <div class="field_left">
            <div class="form_field">
                <label>Image URL</label>
                <input class="meta_image_url" value="" type="text" name="gallery[image_url][]" />
            </div>
            <div class="form_field">
                <label>Image Link</label>
                <input class="meta_image_desc" value="" type="text" name="gallery[image_desc][]" />
            </div>
        </div>
        <div class="field_right image_wrap">
        </div> 
        <div class="field_right"> 
            <input type="button" class="button" value="Choose File" onclick="add_image(this)" />
            <br />
            <input class="button" type="button" value="Remove" onclick="remove_field(this)" /> 
        </div>
        <div class="clear"></div>
    </div>
    </div>

    <div id="add_field_row">
      <input class="button" type="button" value="Add Field" onclick="add_field_row();" />
    </div>

</div>

  <?php
}

/**
 * Print styles and scripts
 */
function print_scripts_so_14445904()
{
    // Check for correct post_type
    global $post;
    if( 'post' != $post->post_type )
        return;
    ?>  
    <style type="text/css">
      .field_left {
        float:left;
      }

      .field_right {
        float:left;
        margin-left:10px;
      }

      .clear {
        clear:both;
      }

      #dynamic_form {
        width:580px;
      }

      #dynamic_form input[type=text] {
        width:300px;
      }

      #dynamic_form .field_row {
        border:1px solid #999;
        margin-bottom:10px;
        padding:10px;
      }

      #dynamic_form label {
        padding:0 6px;
      }
    </style>

    <script type="text/javascript">
        function add_image(obj) {
            var parent=jQuery(obj).parent().parent('div.field_row');
            var inputField = jQuery(parent).find("input.meta_image_url");

            tb_show('', 'media-upload.php?TB_iframe=true');

            window.send_to_editor = function(html) {
                var url = jQuery(html).find('img').attr('src');
                inputField.val(url);
                jQuery(parent)
                .find("div.image_wrap")
                .html('<img src="'+url+'" height="48" width="48" />');

                // inputField.closest('p').prev('.awdMetaImage').html('<img height=120 width=120 src="'+url+'"/><p>URL: '+ url + '</p>'); 

                tb_remove();
            };

            return false;  
        }

        function remove_field(obj) {
            var parent=jQuery(obj).parent().parent();
            //console.log(parent)
            parent.remove();
        }

        function add_field_row() {
            var row = jQuery('#master-row').html();
            jQuery(row).appendTo('#field_wrap');
        }
    </script>
    <?php
}

/**
 * Save post action, process fields
 */
function update_post_gallery_so_14445904( $post_id, $post_object ) 
{
    // Doing revision, exit earlier **can be removed**
    if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )  
        return;

    // Doing revision, exit earlier
    if ( 'revision' == $post_object->post_type )
        return;

    // Verify authenticity
    if ( !wp_verify_nonce( $_POST['noncename_so_14445904'], plugin_basename( __FILE__ ) ) )
        return;

    // Correct post type
    if ( 'post' != $_POST['post_type'] ) 
        return;

    if ( $_POST['gallery'] ) 
    {
        // Build array for saving post meta
        $gallery_data = array();
        for ($i = 0; $i < count( $_POST['gallery']['image_url'] ); $i++ ) 
        {
            if ( '' != $_POST['gallery']['image_url'][ $i ] ) 
            {
                $gallery_data['image_url'][]  = $_POST['gallery']['image_url'][ $i ];
                $gallery_data['image_desc'][] = $_POST['gallery']['image_desc'][ $i ];
            }
        }

        if ( $gallery_data ) 
            update_post_meta( $post_id, 'gallery_data', $gallery_data );
        else 
            delete_post_meta( $post_id, 'gallery_data' );
    } 
    // Nothing received, all fields are empty, delete option
    else 
    {
        delete_post_meta( $post_id, 'gallery_data' );
    }
}

Ergebnis:
Wiederholbarer Uploader

  • Hallo brasofilo, vielen Dank dafür. Ich muss dies auf eine benutzerdefinierte Seite anwenden, nicht auf das Beitragssystem – da es sich um eine Einstellung handeln muss, im Grunde nicht um Eigenschaften, die einzelnen Beiträgen zugewiesen sind. Also werde ich sehen, was ich davon mitnehmen kann.

    – AdamJones

    7. März 2013 um 12:34 Uhr

  • Wenn auf die Schaltfläche „Entfernen“ geklickt wird, wird das Bild aus dem Bereich „Benutzerdefinierter Uploader“, aber nicht aus der Mediengalerie entfernt. Wie kann das Bild aus der Mediengalerie entfernt (oder aus dem Beitrag entfernt) werden, wenn auf die Schaltfläche „Entfernen“ geklickt wird?

    – gandjyar

    2. Juni 2014 um 17:00 Uhr

1646644153 981 Gleichzeitiges Hinzufugen von benutzerdefinierten Bildfeldern und anderen Feldern
Nitin Sharma

Für WordPress 3.5 wird der neue Medien-Uploader mit diesem Skript geöffnet, das das alte Skript ändert.

<script type="text/javascript">
    function add_image(obj) {

        var parent=jQuery(obj).parent().parent('div.field_row');
        var inputField = jQuery(parent).find("input.meta_image_url");
        var fileFrame = wp.media.frames.file_frame = wp.media({
            multiple: false
        });
        fileFrame.on('select', function() {
            var url = fileFrame.state().get('selection').first().toJSON();
            inputField.val(url.url);
            jQuery(parent)
            .find("div.image_wrap")
            .html('<img src="'+url.url+'" height="48" width="48" />');
        });
        fileFrame.open();
    //});
    };

    function reomove_field(obj) {
        var parent=jQuery(obj).parent().parent();
        //console.log(parent)
        parent.remove();
    }

    function add_field_row() {
        var row = jQuery('#master-row').html();
        jQuery(row).appendTo('#field_wrap');
    }
</script>

  • Beachten Sie, dass diese Lösung erfordert, dass Sie wp_enqueue_media(); Ein guter Platz wäre innerhalb von add_post_gallery_so_14445904() Auch reomove_field sollte remove_field() sein

    – Jonathan

    5. November 2014 um 15:13 Uhr

1646644155 832 Gleichzeitiges Hinzufugen von benutzerdefinierten Bildfeldern und anderen Feldern
Vali Munteanu

Ich habe die Antwort von @brasofilo oben verwendet, aber ich habe wirklich vermisst, dass auch die Bild-ID gespeichert wurde, damit ich sie verwenden konnte wp_get_attachment_imagezum Beispiel.

Hier ist also mein überarbeiteter Code, der auch die Bild-ID speichert. Außerdem verwende ich zwei Arrays, um zu definieren, auf welchen Seitenvorlagen bzw. auf welchen Beitragstypen die Meta-Box erscheint. Hier ist der Code: 

<?php
/**
 * Plugin Name: Repeatable image fields
 * Plugin URI:  https://stackoverflow.com/a/36456957/4800442
 * Description: Repeatable image fields in a meta box.
 * Author:      brasofilo
 * License:     GPLv3
 */

add_action( 'admin_init', 'add_post_gallery_so_14445904' );
add_action( 'add_meta_boxes_page', 'add_page_gallery_so_14445904' );
add_action( 'admin_head-post.php', 'print_scripts_so_14445904' );
add_action( 'admin_head-post-new.php', 'print_scripts_so_14445904' );
add_action( 'save_post', 'update_post_gallery_so_14445904', 10, 2 );

// Make it work only in selected templates
$rep_fields_templates = array('page-aboutus.php');
$rep_fields_posts     = array('service',
                              'style',
                              'brand');

/**
 * Add custom Meta Box
 */

// Add meta box to custom posts 
function add_post_gallery_so_14445904() 
{
    global $rep_fields_posts;       
    add_meta_box(
        'post_gallery',
        'Slideshow Gallery',
        'post_gallery_options_so_14445904',
        $rep_fields_posts,
        'normal',
        'core'
    );
}

// Add meta box to custom page templates
function add_page_gallery_so_14445904() 
{       
    global $post, $rep_fields_templates;
    if ( in_array( get_post_meta( $post->ID, '_wp_page_template', true ), $rep_fields_templates ) ) {
        add_meta_box(
            'post_gallery',
            'Slideshow Gallery',
            'post_gallery_options_so_14445904',
            'page',
            'normal',
            'core'
        );
    }
}

/**
 * Print the Meta Box content
 */
function post_gallery_options_so_14445904() 
{
    global $post;
    $gallery_data = get_post_meta( $post->ID, 'gallery_data', true );

    // Use nonce for verification
    wp_nonce_field( plugin_basename( __FILE__ ), 'noncename_so_14445904' );
    ?>

    <div id="dynamic_form">

        <div id="field_wrap">
        <?php 
        if ( isset( $gallery_data['image_url'] ) ) 
        {
            for( $i = 0; $i < count( $gallery_data['image_url'] ); $i++ ) 
            {
            ?>

            <div class="field_row">

              <div class="field_left">
                <div class="form_field">
                  <!--<label>Image URL</label>-->
                  <input type="hidden"
                         class="meta_image_url"
                         name="gallery[image_url][]"
                         value="https://stackoverflow.com/questions/14445904/<?php%20esc_html_e(%20$gallery_data["image_url'][$i] ); ?>"
                  />
                  <input type="hidden"
                         class="meta_image_id"
                         name="gallery[image_id][]"
                         value="https://stackoverflow.com/questions/14445904/<?php%20esc_html_e(%20$gallery_data["image_id'][$i] ); ?>"
                  />
                </div>
                <div class="form_field" style="margin-bottom: 20px">
                  <label>Description</label>
                  <textarea
                         class="meta_image_desc"
                         name="gallery[image_desc][]"
                         rows="3"
                         style="width: 100%"><?php esc_html_e( $gallery_data['image_desc'][$i] ); ?></textarea>
                </div>
                <input class="button" type="button" value="Choose File" onclick="add_image(this)" />&nbsp;&nbsp;&nbsp;
                <input class="button" type="button" value="Remove" onclick="remove_field(this)" />
              </div>

              <div class="field_right image_wrap">
                <img src="https://stackoverflow.com/questions/14445904/<?php%20esc_html_e(%20$gallery_data["image_url'][$i] ); ?>" />
              </div>
              <div class="clear" /></div> 
            </div>
            <?php
            } // endif
        } // endforeach
        ?>
        </div>

        <div style="display:none" id="master-row">
        <div class="field_row">
            <div class="field_left">
                <div class="form_field">
                    <!--<label>Image URL</label>-->
                    <input class="meta_image_url" value=""  name="gallery[image_url][]" />
                    <input class="meta_image_id" value=""  name="gallery[image_id][]" />
                </div>
                <div class="form_field" style="margin-bottom: 20px">
                    <label>Description</label>
                    <textarea class="meta_image_desc" name="gallery[image_desc][]" rows="3" style="width: 100%"></textarea>
                </div>
                <input type="button" class="button" value="Choose Image" onclick="add_image(this)" />&nbsp;&nbsp;&nbsp;
                <input class="button" type="button" value="Remove" onclick="remove_field(this)" />
            </div>
            <div class="field_right image_wrap">
            </div>
            <div class="clear"></div>
        </div>
        </div>

        <div id="add_field_row">
          <input class="button" type="button" value="Add Image" onclick="add_field_row();" />
        </div>
        <?php if ( 'trend' == get_post_type( $post->ID ) ) { ?>
        <p style="color: #a00;">Make sure the number if images you add is a <b>multiple of 5</b>.</p>
        <?php } ?>
    </div>
    <?php
}

/**
 * Print styles and scripts
 */
function print_scripts_so_14445904()
{
    // Check for correct post_type
    global $post, $rep_fields_templates, $rep_fields_posts;
    if ( !in_array( get_post_meta( $post->ID, '_wp_page_template', true ), $rep_fields_templates ) && 
         !in_array( get_post_type( $post->ID)                           , $rep_fields_posts ) )
        return;
    ?>  
    <style type="text/css">
      .field_left {
        float:left;
        width: 75%;
        padding-right: 20px;
        box-sizing:border-box;  
      }
      .field_right {
        float:left;
        width: 25%;
      }
      .image_wrap img {
          max-width: 100%;
      }
      #dynamic_form input[type=text] {
        width:100%;
      }
      #dynamic_form .field_row {
        border:1px solid #cecece;
        margin-bottom:10px;
        padding:10px;
      }
      #dynamic_form label {
        display: block;
        margin-bottom: 5px;
      }
    </style>

    <script type="text/javascript">
        function add_image(obj) {

            var parent=jQuery(obj).parent().parent('div.field_row');
            var inputField = jQuery(parent).find("input.meta_image_url");
            var inputFieldID = jQuery(parent).find("input.meta_image_id");
            var fileFrame = wp.media.frames.file_frame = wp.media({
                multiple: false
            });
            fileFrame.on('select', function() {
                var selection = fileFrame.state().get('selection').first().toJSON();
                inputField.val(selection.url);
                inputFieldID.val(selection.id);
                jQuery(parent)
                .find("div.image_wrap")
                .html('<img src="'+selection.url+'" />');
            });
            fileFrame.open();
        //});
        };

        function remove_field(obj) {
            var parent=jQuery(obj).parent().parent();
            parent.remove();
        }

        function add_field_row() {
            var row = jQuery('#master-row').html();
            jQuery(row).appendTo('#field_wrap');
        }
    </script>
    <?php
}

/**
 * Save post action, process fields
 */
function update_post_gallery_so_14445904( $post_id, $post_object ) 
{
    // Doing revision, exit earlier **can be removed**
    if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )  
        return;

    // Doing revision, exit earlier
    if ( 'revision' == $post_object->post_type )
        return;

    // Verify authenticity
    if ( !wp_verify_nonce( $_POST['noncename_so_14445904'], plugin_basename( __FILE__ ) ) )
        return;

    global $rep_fields_templates, $rep_fields_posts;
    if ( !in_array( get_post_meta( $post_id, '_wp_page_template', true ), $rep_fields_templates ) && 
         !in_array( get_post_type( $post_id)                            , $rep_fields_posts ) ) 
        return;

    if ( $_POST['gallery'] ) 
    {
        // Build array for saving post meta
        $gallery_data = array();
        for ($i = 0; $i < count( $_POST['gallery']['image_url'] ); $i++ ) 
        {
            if ( '' != $_POST['gallery']['image_url'][ $i ] ) 
            {
                $gallery_data['image_url'][]  = $_POST['gallery']['image_url'][ $i ];
                $gallery_data['image_id'][]  = $_POST['gallery']['image_id'][ $i ];
                $gallery_data['image_desc'][] = $_POST['gallery']['image_desc'][ $i ];
            }
        }

        if ( $gallery_data ) 
            update_post_meta( $post_id, 'gallery_data', $gallery_data );
        else 
            delete_post_meta( $post_id, 'gallery_data' );
    } 
    // Nothing received, all fields are empty, delete option
    else 
    {
        delete_post_meta( $post_id, 'gallery_data' );
    }
}

Hier ist ein Beispiel dafür, wie Sie die Daten an Ihr Design ausgeben können. 

<?php 
if ( '' != get_post_meta( get_the_ID(), 'gallery_data', true ) ) { $gallery = get_post_meta( get_the_ID(), 'gallery_data', true ); }

if ( isset( $gallery['image_id'] ) ) :

    for( $i = 0; $i < count( $gallery['image_id'] ); $i++ ) { 
        if ( '' != $gallery['image_id'][$i] ) {
            echo wp_get_attachment_image( $gallery['image_id'][$i], 'gallery_large' );
            if ( isset($gallery['image_desc'][$i]) ) echo $gallery['image_desc'][$i];
        }   
    }

endif; 
?>

964670cookie-checkGleichzeitiges Hinzufügen von benutzerdefinierten Bildfeldern und anderen Feldern

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy

Contact - Terms and Conditions - Privacy Policy