Ich erstelle einen Front-End-Post-Layout-Editor mit jQuery UI Sortable .
Die Beiträge sind in 300 x 250 Pixel großen Feldern über einem Hintergrundbild angeordnet. Die Posts werden mit dem WordPress-Administrator erstellt und bearbeitet, aber ich möchte dem Site-Administrator erlauben, die Reihenfolge der Boxen über eine Drag & Drop-Oberfläche am Frontend anzupassen.
Ich habe das sortierbare Drag & Drop-Teil zum Laufen gebracht, muss aber einen Weg finden, um den Zustand (die Reihenfolge) der Boxen zu speichern. Idealerweise möchte ich den Zustand als Option speichern und in die Abfrage einbauen können.
Die Abfrage für die Posts ist eine einfache WP_Query, die auch Daten aus benutzerdefinierten Meta-Boxen abruft, um das Layout der einzelnen Boxen zu bestimmen:
$args= array(
'meta_key' => 'c3m_shown_on',
'meta_value'=> 'home' );
$box_query = new WP_Query($args); ?>
<ul id="sortable">
<?php
while ($box_query->have_posts()) : $box_query->the_post(); global $post; global $prefix;
$box_size = c3m_get_field($prefix.'box_size', FALSE);
$box_image = c3m_get_field($prefix.'post_box_image', FALSE);
$overlay_class = c3m_get_field($prefix.'overlay_class', FALSE);
if ( c3m_get_field($prefix.'external_link', FALSE) ) {
$post_link = c3m_get_field($prefix.'external_link', FALSE);
} else
{ $post_link = post_permalink();
} ?>
<li class="<?php echo $box_size;?> ui-state-default">
<article <?php post_class() ?> id="post-<?php the_ID(); ?>">
<?php echo '<a href="'.$post_link.'" ><img src="'.esc_url($box_image).'" alt="Image via xxxxx.com" /></a>'; ?>
<div class="post-box <?php echo $overlay_class;?>">
<?php if ( c3m_get_field( $prefix.'text_display', FALSE) ) { ?>
<h2><a href="<?php echo $post_link?>"><?php the_title();?></a></h2>
<p><?php echo substr($post->post_excerpt, 0, 90) . '...'; ?></p>
<?php } ?>
</div>
</article>
</li>
<?php endwhile; ?>
</ul>
</section>
Das Javascript ist nur die standardmäßige sortierbare Anleitung
jQuery(document).ready(function() {
jQuery("#sortable").sortable();
});
Es gibt Methoden, die Cookies verwenden , um den Status zu speichern, aber ich muss auch das sortierbare Ziehen und Ablegen für Benutzer ohne Administratorrechte deaktivieren, damit ich wirklich in der Datenbank speichern muss.
Ich bin auf der Suche nach der kreativsten und nützlichsten Methode und werde die beste Antwort mit 100 Punkten belohnen.
Aktualisieren:
Ich habe Somatics Antwort mit einer kleinen Änderung erhalten.
ajaxurl gibt den Wert nicht auf Nicht-Admin-Seiten zurück, daher habe ich wp_localize_script( 'functions', 'MyAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
den Wert definiert und die Javascript-Zeile unter den Optionen folgendermaßen geändert:
url: MyAjax.ajaxurl,
Um den Zugriff auf die Anordnung der Bestellung nur auf Administratoren zu beschränken, habe ich meiner Funktion wp_enqueue_script eine Bedingung hinzugefügt:
function c3m_load_scripts() {
if ( current_user_can( 'edit_posts' ) ) {
wp_enqueue_script( 'jquery-ui' );
wp_enqueue_script( 'functions', get_bloginfo( 'stylesheet_directory' ) . '/_/js/functions.js', array( 'jquery', 'jquery-ui' ), false);
wp_localize_script( 'functions', 'MyAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
}
}
Ich werde ein wenig mehr testen und diese Frage als gelöst markieren und das Kopfgeld vergeben.
Antworten:
Brady hat Recht, dass das Speichern und Anzeigen von benutzerdefinierten Post-Type-Aufträgen am besten über die
menu_order
Eigenschaft erfolgtHier ist die Abfrage, um die Liste sortierbar zu machen und die Daten über Ajax an WordPress zu übergeben:
Hier ist die WordPress-Funktion, die auf den Ajax-Rückruf wartet und die Änderungen an der Datenbank vornimmt:
Der Schlüssel zum Anzeigen der Beiträge in der von Ihnen gespeicherten Reihenfolge ist das Hinzufügen der
menu_order
Eigenschaft zu den Abfrageargs:Führen Sie dann Ihre Schleife aus und geben Sie jedes Element aus ... (Die erste Zeile ist die Kernanimation zum Laden von WP - Sie möchten sie zunächst über CSS ausblenden, und dann wird die Funktion jquery während der Verarbeitung angezeigt.)
Code inspiriert durch das hervorragende Tutorial von soulsizzle .
quelle
http://jsfiddle.net/TbR69/1/
Noch lange nicht fertig, aber die Idee ist, eine Ajax-Anfrage per Drag & Drop zu senden. Möglicherweise möchten Sie die Ajax-Anforderung auch erst auslösen, nachdem Sie auf die Schaltfläche "Speichern" oder eine andere Option geklickt haben. Ein Array mit Post-IDs und neuer Bestellung wird gesendet.
Dann müssten Sie die Posts in der Datenbank auf der Serverseite aktualisieren. Fügen Sie schließlich einen
order
Parameter zu IhrerWP_Query
Schleife hinzu.Ich hoffe, Sie haben damit angefangen. Jeder fühlt sich frei, weiter zu fummeln.
quelle
Javascript-Datei order.js
quelle