我正在使用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 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>
javascript只是基本的默认可排序说明
jQuery(document).ready(function() {
jQuery("#sortable").sortable();
});
有使用cookie来保存状态的可用方法,但我还需要禁用非管理员用户的可排序拖放功能,因此我确实需要保存到数据库。
我正在寻找最有创意和最实用的方法,并将为最佳答案奖励100点的赏金。
更新:
我做了一个小的改动就得到了躯体的答案。
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' ) ) );
}
}
我将做更多测试,并将这个问题标记为已解决,并颁发赏金。