Я создаю редактор внешнего вида постов с помощью jQuery UI Sortable .
Посты выкладываются в 300 на 250 пикселей на фоне. Посты создаются и редактируются с помощью администратора 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();
});
Есть методы, доступные с использованием куки для сохранения состояния, но мне также нужно отключить сортируемое перетаскивание для пользователей, не являющихся администраторами, поэтому мне действительно необходимо сохранить данные в базе данных.
Я ищу самый креативный и удобный метод и присуждаю награду в 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' ) ) );
}
}
Я собираюсь сделать немного больше тестирования и пометить этот вопрос как решенный и наградить награду.
Ответы:
Брейди прав, что лучший способ справиться с сохранением и отображением пользовательских заказов типа пост - это использовать
menu_order
свойствоВот jquery, чтобы сделать список сортируемым и передать данные через ajax в wordpress:
Вот функция wordpress, которая прослушивает обратный вызов ajax и выполняет изменения в БД:
Ключ к отображению сообщений в сохраненном вами порядке - добавить
menu_order
свойство в аргументы запроса:Затем запустите ваш цикл и выведите каждый элемент ... (первая строка - это анимация загрузки основного wp - вы сначала захотите скрыть ее с помощью css, а затем при обработке отобразится функция jquery)
Код, вдохновленный превосходным учебником soulsizzle .
источник
http://jsfiddle.net/TbR69/1/
Далеко не закончено, но идея в том, чтобы отправить ajax-запрос на перетаскивание. Вы также можете инициировать запрос ajax только после нажатия кнопки «Сохранить» или чего-то еще. Будет отправлен массив, содержащий идентификаторы постов и новый заказ.
Тогда вам придется обновить сообщения в базе данных на стороне сервера. Наконец, добавьте
order
параметр в вашWP_Query
цикл.Я надеюсь, это поможет вам начать. Кто-нибудь может продолжать играть.
источник
Javascript файл order.js
источник