Estou criando um editor de layout de postagem de front-end usando o jQuery UI Sortable .
As postagens são dispostas em caixas de 300 x 250 pixels sobre uma imagem de plano de fundo. As postagens são criadas e editadas usando o administrador do WordPress, mas quero permitir que o administrador dos sites ajuste a ordem das caixas usando uma interface de arrastar e soltar no front-end.
Eu tenho a parte classificável de arrastar e soltar funcionando, mas preciso criar uma maneira de salvar o estado (ordem) das caixas. Idealmente, eu gostaria de poder salvar o estado como uma opção e construí-lo na consulta.
A consulta para as postagens é um WP_Query simples que também obtém dados de meta boxes personalizadas para determinar o layout da caixa individual .:
$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>
O javascript é apenas as instruções classificáveis padrão básicas
jQuery(document).ready(function() {
jQuery("#sortable").sortable();
});
Existem métodos disponíveis usando cookies para salvar o estado, mas também preciso desativar o recurso de arrastar e soltar classificável para usuários que não são administradores, por isso realmente preciso salvar no banco de dados.
Estou procurando o método mais criativo e utilizável e concedo uma recompensa de 100 pontos à melhor resposta.
Atualizar:
Eu recebi a resposta da sommatic trabalhando com uma pequena alteração.
o ajaxurl não retorna o valor nas páginas que não são de administração, então eu costumava wp_localize_script( 'functions', 'MyAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
definir o valor e alterei a linha javascript em opções para:
url: MyAjax.ajaxurl,
Para limitar o acesso à organização do pedido apenas para administradores, adicionei um condicional à minha função 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' ) ) );
}
}
Vou fazer um pouco mais de teste e marcar esta questão como resolvida e premiar a recompensa.
Respostas:
A Brady está certa de que a melhor maneira de lidar com o salvamento e a exibição de pedidos de tipo de postagem personalizados é usando a
menu_order
propriedadeAqui está o jquery para tornar a lista classificável e passar os dados via ajax para o wordpress:
Aqui está a função wordpress que escuta o retorno de chamada do ajax e executa as alterações no banco de dados:
A chave para exibir as postagens na ordem que você salvou é adicionar a
menu_order
propriedade aos argumentos da consulta:Em seguida, execute seu loop e produza cada item ... (a primeira linha é a animação principal de carregamento do wp - você deseja ocultá-la inicialmente via css e a função jquery será exibida durante o processamento)
Código inspirado no excelente tutorial de soulsizzle .
fonte
http://jsfiddle.net/TbR69/1/
Longe de terminar, mas a idéia é enviar uma solicitação de ajax ao arrastar e soltar. Você também pode acionar a solicitação ajax somente depois de clicar em um botão "salvar" ou algo assim. Uma matriz contendo IDs de postagem e novo pedido seria enviada.
Então você teria que atualizar as postagens no banco de dados no final do servidor. Por fim, adicione um
order
parâmetro ao seuWP_Query
loop.Espero que isso ajude você. Qualquer um fica à vontade para continuar brincando.
fonte
Arquivo Javascript order.js
fonte