问题描述
我正在使用 jQuery UI Sortable 构建前端后台布局编辑器。
帖子在背景图像中以 300px x 250px 的方式布置。使用 WordPress 管理员创建和编辑帖子，但我想允许站点管理员使用前端的拖放界面调整框的顺序。
我已经拖放可排序的部分工作，但需要提出一种方法来保存框的状态 (顺序) 。理想情况下，我希望能够将状态保存为一个选项，并将其构建到查询中。
对帖子的查询是一个简单的 WP_Query，它也可以从自定义元框获取数据，以确定单独的框布局。
$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%20echo%20$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>
javascript 只是基本的默认可排序说明
jQuery(document).ready(function() {
jQuery("#sortable").sortable();
});
有可用的方法可以使用 cookies 保存状态，但我还需要禁用非管理员用户的可排序的拖放，所以我真的需要保存到数据库。
我正在寻找最具创意和最有用的方法，并将获得 100 分的赏金，以获得最佳答案。
更新：
我得到了 somatic’s 的回答工作与一个小的变化。
ajaxurl 不返回非管理页面上的值，因此我使用 wp_localize_script( 'functions', 'MyAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) ); 来定义值，并将选项下的 JavaScript 行更改为：url: MyAjax.ajaxurl,
为了限制访问权限，只能将订单安排到管理员，我添加了一个条件到我的 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' ) ) );
}
}
我要做一些更多的测试，并将这个问题标记为已解决，并奖励赏金。
最佳解决方案
Brady 是正确的，处理自定义帖子类型订单的保存和显示的最佳方式是使用 menu_order 属性
这里是使列表排序的 jQuery，并将数据通过 ajax 传递给 wordpress：
jQuery(document).ready(function($) {
var itemList = $('#sortable');
itemList.sortable({
update: function(event, ui) {
$('#loading-animation').show(); // Show the animate loading gif while waiting
opts = {
url: ajaxurl, // ajaxurl is defined by WordPress and points to /wp-admin/admin-ajax.php
type: 'POST',
async: true,
cache: false,
dataType: 'json',
data:{
action: 'item_sort', // Tell WordPress how to handle this ajax request
order: itemList.sortable('toArray').toString() // Passes ID's of list items in 1,3,2 format
},
success: function(response) {
$('#loading-animation').hide(); // Hide the loading animation
return;
},
error: function(xhr,textStatus,e) { // This can be expanded to provide more information
alert(e);
// alert('There was an error saving the updates');
$('#loading-animation').hide(); // Hide the loading animation
return;
}
};
$.ajax(opts);
}
});
});
这是一个 wordpress 函数，它监听 ajax 回调并在 DB 上执行更改：
function my_save_item_order() {
global $wpdb;
$order = explode(',', $_POST['order']);
$counter = 0;
foreach ($order as $item_id) {
$wpdb->update($wpdb->posts, array( 'menu_order' => $counter ), array( 'ID' => $item_id) );
$counter++;
}
die(1);
}
add_action('wp_ajax_item_sort', 'my_save_item_order');
add_action('wp_ajax_nopriv_item_sort', 'my_save_item_order');
以您保存的顺序显示帖子的关键是将 menu_order 属性添加到查询 args 中：
$args= array(
'meta_key' => 'c3m_shown_on',
'meta_value'=> 'home'
'orderby' => 'menu_order',
'order' => 'ASC'
);
$box_query = new WP_Query($args);
然后运行你的循环并输出每个项目…(第一行是核心的 wp 加载动画 – 你最初要通过 css 隐藏它，然后 jquery 函数将在处理时显示)
<img src="<?php%20bloginfo('url');%20?>/wp-admin/images/loading.gif" id="loading-animation" />
<ul id="sortable">
<li id="{echo post ID here}">{echo title or other name here}</li>
</ul>
代码灵感来自于 soulsizzle 的 excellent tutorial 。
次佳解决方案
远远没有完成，但是想法是发送一个拖放的 ajax 请求。您也可以仅在单击”save” 按钮或某些事件后触发 ajax 请求。将发送包含帖子 ID 和新订单的数组。
那么你必须更新服务器端的数据库中的帖子。最后，将 order 参数添加到 WP_Query 循环中。
我希望这能让你开始。任何人都可以随意继续玩弄。
参考文献
注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。