it-swarm.com.de

Benutzerdefinierte Funktion zum Neuanordnen von Anhängen beim Erstellen von Posts - Fast da

Ich habe einige Probleme mit einer benutzerdefinierten Sache, die ich tue.

Ich habe einen benutzerdefinierten Bild-Uploader in eine Metabox in einem benutzerdefinierten Beitragstyp implementiert. Jetzt versuche ich, einen Weg zu finden, mit dem ich die hochgeladenen Bilder neu anordnen kann. Ich fand, dass jQuery Sortable eine bequeme Möglichkeit für den Benutzer ist, die Bilder einfach per Drag & Drop in der Reihenfolge zu verschieben, in der sie angezeigt werden sollen (im Frontend verwende ich einen jQuery-Bild-Schieberegler, um die Bilder und die Reihenfolge der Bilder anzuzeigen werden durch die Anhangsdaten "menu_order" bestimmt, daher benötige ich eine Art von Funktionalität, die die mit jQuery Sortable erstellte menu_order speichert.

Dies ist ein vereinfachtes Beispiel für das, was ich habe: http://jsfiddle.net/LN4sA/

Zusammen mit jedem Anhang habe ich ausgeblendete Eingabefelder mit der Anhangs-ID und einem Feld hinzugefügt, das die aktuelle Position des Anhangs in der Menüreihenfolge enthält.

Die ID des Anhangs kann einfach mit der Basis-ID WP PHP ($ attachment-> ID) abgerufen werden. Ich habe jedoch noch keine einfache Möglichkeit gefunden, die #att_order mit der richtigen menu_order zu füllen. Also hier möchte ich etwas Hilfe/Input, wenn jemand so nett wäre.

Um die aktuellen Informationen zu speichern, benutze ich Ajax, um die Werte aus den Eingabefeldern zu ziehen:

add_action('save_post', 'save_attachment_position');
function save_attachment_position(){
    global $post;
    if ($post->post_type == 'work') { ?>
        <script type="text/javascript">
        //<![CDATA[
            jQuery.ajax({
                type: 'post',
                url: ajaxurl,
                data: {
                    action: 'order_attachment',
                    att_ID: jQuery(this).parents('.attachment').find('#att_id').val(),
                    att_order: jQuery(this).parents('.attachment').find('#att_order').val(),
                    _ajax_nonce: jQuery('#ordernonce').val(),
                    post_type: 'attachment'
                }
            });
        //]]>
    </script><?php 
    }
}

Verwenden Sie dann wp_update_post, um die Anhangsdaten zu aktualisieren:

add_action('wp_ajax_order_attachment', 'order_attachment');
function order_attachment($post) {
    $attachmentdata = array();
    $attachmentdata['ID'] = $_POST['att_ID'];
    $attachmentdata['menu_order'] = $_POST['att_order'];
    wp_update_post($attachmentdata);    
}

Mir ist bewusst, dass ich hier eine Art Schleife brauche, aber ich werde das klären.

Irgendwelche Ideen?

Vielen Dank

4
INT

Ich bin mir nicht ganz sicher, was Ihre Absichten für den Code sind, und leider fand ich nicht, dass das, was Sie bereitgestellt haben, sehr gut funktioniert. Deshalb habe ich Teile des bereitgestellten Codes neu geschrieben, um daraus eine praktikablere Lösung zu machen.

Dieser Code funktioniert zum Speichern der Anhangsreihenfolge in der Metabox für save, nicht über Ajax, aber realistisch gesehen gibt es keinen Grund, diese Änderungen bei jeder Sortierung zu speichern (gibt es das?).

Ich habe den Code überarbeitet, damit Sie den Post-Typ oben im Code anpassen können. Ich bin mir nicht sicher, was Sie mit dem Enqueue-Aufruf anstreben, und ich bin mir ziemlich sicher, dass er nicht so aufgerufen werden kann, wie Sie es getan haben, und er wurde auch nicht auf der Post-Editor-Seite benötigt (sortierbar und die erforderlichen Skripte sind bereits verfügbar/im Editor geladen).

Probieren Sie es aus und sehen Sie, wie Sie zurechtkommen. (Beachten Sie, dass dies ein funktionierendes Beispiel ist.).

// Not applicable to my testing, but left it in because i'm sure it's appropriate to your usage
add_theme_support( 'post-thumbnails' );
add_image_size( 'editor-thumb', 130, 72, true );

// Quicker to update one line than several, only reason it's defined here
$my_post_type = 'book';

// Add metabox on the proper metabox hook
add_action( 'add_meta_boxes_' . $my_post_type, 'add_image_sortable_box',   2000 );

// Fire jQuery only on the appliable pages
add_action( 'admin_footer-post.php',           'add_sortable_to_elements', 2000 );
add_action( 'admin_footer-post-new.php',       'add_sortable_to_elements', 2000 );

function add_image_sortable_box() {
    global $my_post_type;
    add_meta_box( 'test-image-thing', 'Sortable Attachments Test', 'do_image_metabox_thingy', $my_post_type, 'side', 'default' );
}

function add_sortable_to_elements() { 
    ?>
    <script type="text/javascript">
    //<![CDATA[
        jQuery(document).ready(function($) {
            $('#attachmentcontainer').sortable();   
        });
    //]]>
    </script>
    <?php
}

function do_image_metabox_thingy( $p ) { 

    // No global statement needed here, the hook this function is attached to gives you the post object

    $args = array(
        'order'          => 'asc',
        'orderby'        => 'menu_order',
        'post_type'      => 'attachment',
        'post_parent'    => $p->ID,
        'post_mime_type' => 'image',
        'post_status'    => null,
        'numberposts'    => -1,
    );

    $attachments = get_posts( $args );

    if( $attachments ) :

        // Only need 1 nonce to cover the lot
        wp_nonce_field( 'my_attachment_sort', 'attachment_sort_nonce' );
    ?>

    <div class="imageuploader">
        <div id="attachmentcontainer">

        <?php
        foreach( $attachments as $attachment ) :
            $attachmentid = $attachment->ID;
            $editorimage = wp_get_attachment_image_src( $attachment->ID, 'editor-thumb', false, false);
        ?>

            <div class="attachment" id="test-<?php echo $attachment->ID; ?>">
                <div class="image">
                    <img width="100" height="auto" src="<?php echo $editorimage[0]; ?>" />
                    <input type="hidden" name="att_id[]" id="att_id" value="<?php echo $attachment->ID; ?>" />
                </div>
            </div>

        <?php 
        endforeach;
        ?>

        <div style="clear: both;"></div>
        </div>      
    </div>

    <?php
    endif;
}

// Updates the attachments when saving
add_filter( 'wp_insert_post_data', 'test_meta_save', 1000, 2 );

function test_meta_save( $data, $_post_vars ) {
    global $my_post_type;
    if( $my_post_type != $data['post_type'] || !isset( $_post_vars['attachment_sort_nonce'] ) )
        return $data;

    if( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE )
        return $data;

    if( !wp_verify_nonce( $_post_vars['attachment_sort_nonce'], 'my_attachment_sort' ) )
        return $data;

    global $post_ID;

    if( !current_user_can( 'edit_post', $post_ID ) ) 
        return $data;

    if( isset( $_post_vars['att_id'] ) ) {
        foreach( $_post_vars['att_id'] as $img_index => $img_id ) {
            $a = array(
                'ID' => $img_id,
                'menu_order' => $img_index
            );
            wp_update_post( $a );
        }
    }
    return $data;
}

Stellen Sie natürlich sicher, dass Sie den Post-Typ-Wert ändern. Das Buch ist mein Test-Post-Typ. :)

Wenn Sie Fragen haben, fügen Sie diese Ihrer ursprünglichen Frage hinzu und schreiben Sie einen Kommentar auf diese Antwort, um mich zu informieren.

5
t31os