Estoy construyendo un editor de diseño de publicaciones front-end usando jQuery UI Sortable .
Las publicaciones se presentan en cuadros de 300 px por 250 px sobre una imagen de fondo. Las publicaciones se crean y editan utilizando el administrador de WordPress, pero quiero permitir que el administrador del sitio ajuste el orden de los cuadros mediante una interfaz de arrastrar y soltar en la parte frontal.
Tengo la parte ordenable de arrastrar y soltar funcionando, pero necesito encontrar una manera de guardar el estado (orden) de las cajas. Idealmente, me gustaría poder guardar el estado como una opción e incorporarlo a la consulta.
La consulta de las publicaciones es una simple WP_Query que también obtiene datos de meta cuadros personalizados para determinar el diseño individual de los cuadros:
$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>
El javascript es solo las instrucciones ordenables predeterminadas básicas
jQuery(document).ready(function() {
jQuery("#sortable").sortable();
});
Hay métodos disponibles que usan cookies para guardar el estado, pero también necesito deshabilitar la función de arrastrar y soltar ordenable para usuarios que no son administradores, por lo que realmente necesito guardar en la base de datos.
Estoy buscando el método más creativo y útil y otorgaré una recompensa de 100 puntos a la mejor respuesta.
Actualizar:
Tengo de somáticas responden a trabajar con un cambio menor.
ajaxurl no devuelve el valor en páginas que no son de administrador, así que solía wp_localize_script( 'functions', 'MyAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
definir el valor y cambié la línea de JavaScript en las opciones a:
url: MyAjax.ajaxurl,
Para limitar el acceso a la organización del pedido solo a los administradores, agregué un condicional a mi función wp_enqueue_script:
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' ) ) );
}
}
Voy a hacer un poco más de pruebas y marcaré esta pregunta como resuelta y otorgaré la recompensa.