Tabelas de lista de administração do WordPress: estenda a função de edição rápida

Até agora, em nossa série de artigos sobre as tabelas de administração no WordPress, analisamos várias maneiras de personalizar o layout das tabelas de administração do WordPress, incluindo como adicionar novas colunas. Neste artigo final da série, vamos dar uma olhada em mais uma personalização que você pode querer considerar... estender a função 'Quick Edit' encontrada nas tabelas de administração.

Vamos começar!

Estendendo o campo de edição rápida

Para o nosso exemplo neste tutorial, adicionaremos um campo personalizado que exibirá um URL que será descrito como 'Fonte', que preencheremos com um link de URL para algumas informações adicionais relacionadas ao nosso artigo. Veremos como ele pode ser adicionado na área de edição rápida da tela de administração de postagens e como salvar as atualizações feitas neste campo.

Etapa um: adicionar o campo personalizado

Examinamos como criar o campo 'Fonte' em nosso artigo Introdução aos campos personalizados do WordPress. Por uma questão de brevidade, não vamos repetir essas instruções aqui. É claro que você pode criar qualquer campo personalizado que desejar.

Se você não estiver familiarizado com a forma como adicionamos o campo personalizado 'Origem' ou qualquer outro campo personalizado, consulte nosso artigo sobre isso. Depois de adicionar um campo personalizado apropriado, é hora de passar para a próxima etapa.

Etapa dois: adicionar a coluna personalizada

Precisamos adicionar uma coluna personalizada à nossa tabela de administração. Explicamos como fazer isso em detalhes em nosso artigo Personalizando tabelas de administração do WordPress: Introdução. Dê uma olhada e siga os passos.

Em última análise, você deve acabar com algum código no functions.php do seu tema ativo que se parece com isso:

 add_filter('manage_posts_columns','add_custom_columns'); function add_custom_columns( $columns ) { $columns['source'] = 'Source'; return $columns; } add_action( 'manage_posts_custom_column','custom_columns_content', 10, 2 ); function custom_columns_content ( $column_id, $post_id ) { switch( $column_id ) { case 'source': echo get_post_field('source', $post_id); break; } }

Até agora você deve ver a nova coluna na tabela Posts Admin.

Adicione a caixa de edição rápida personalizada

Vamos para nossa tabela de lista de Posts e clique no link 'Quick Edit' em um de nossos posts.

O que veremos aqui são todas as opções padrão disponíveis que o WordPress fornece na tela Quick Edit. No momento não veremos nosso novo campo 'Fonte'.

Vamos adicionar isso usando o gancho quick_edit_custom_box que o WordPress fornece. Esta ação analisa todas as ações padrão no modo 'Quick Edit' executando uma vez para cada coluna, incluindo colunas personalizadas.

Está estruturado da seguinte forma: do_action( 'quick_edit_custom_box', $column_name, $post_type, $taxonomy ) . Os parâmetros são o $column_name que é o nome da coluna a ser editada, o $post_type que é o slug do tipo de postagem e o $taxonomy para o nome da taxonomia, se necessário.

Em seu arquivo functions.php , adicione as seguintes linhas:

 add_action( 'quick_edit_custom_box', 'source_custom_edit_box', 10, 2 ); function source_custom_edit_box( $column_name, $post_type ) { global $post; switch ( $post_type ) { case 'post': if( $column_name === 'source' ): ?> <fieldset class="inline-edit-col-right"> <div class="inline-edit-col"> <label> <span class="title">Source</span> <span class="input-text-wrap"><input type="text" name="source" value="<?php echo $post->source; ?>"></span> </label> </div> </fieldset> <?php endif; break; default: break; } }

Por favor, tenha em mente que obtemos o valor do campo 'source' no código PHP ecoando $post->source; .

Agora, se você atualizar a página e clicar em 'Quick Edit' novamente, você deverá ver o campo 'source' com um valor correto.

Etapa três: salvar a edição em linha

Para salvar a entrada de dados em nosso campo personalizado, usaremos a ação save_post que é acionada quando uma postagem é atualizada.

Em nosso exemplo onde trabalhamos em edições rápidas, os dados do post são armazenados em $_POST após a execução do save_post .

Que o código necessário para conseguir isso é o seguinte e deve ser inserido no arquivo functions.php :

 add_action( 'save_post', 'update_source_custom_edit_box' ); function update_source_custom_edit_box() { if( isset( $_POST ) && isset( $_POST['source'] ) ) { update_post_meta($_POST['post_ID'], 'source', $_POST['source']); } return; }

Não, isso foi feito, vamos tentar alterar o valor de entrada do campo para algo como “https://random.url” e clicar no botão de atualização no canto inferior direito.

Você observa que o valor em nosso campo de origem é atualizado conforme o esperado. No entanto, se você clicar no botão Edição Rápida novamente e der outra olhada no seu campo personalizado (no nosso caso 'Fonte') você verá que o valor não mudou na caixa de edição.

Sempre que você alterar o valor, sempre verá a alteração na célula da coluna da tabela Admin, mas essa entrada não será refletida no campo Edição rápida.

Então, por que isso está acontecendo?

Lembre-se de que obtemos o valor do campo 'source' ecoando $post->source; . O conteúdo do Quick Edit é preenchido quando o usuário pressiona o botão 'editar', o que significa que ele é criado dinamicamente e não pré-preenchido quando a tela de pós-administração é carregada. Não podemos mostrar nossos metadados corretamente recuperando-os por meio de nosso código PHP, pois sempre veremos o valor que foi preenchido quando entramos na tela Admin em vez do novo valor.

Em vez disso, temos que coletar nossos valores usando JavaScript. Portanto, antes de prosseguirmos, entraremos em nosso código PHP anterior e removeremos o valor ecoado substituindo esta linha…

 <span class="input-text-wrap"><input type="text" name="source" value="<?php echo $post->source; ?>"></span>

…com este:

 <span class="input-text-wrap"><input type="text" name="source" value=""></span>

Etapa quatro: recuperando valores de entrada usando JS

Primeiro, teremos que incluir nosso script JS adicionando estas linhas ao seu arquivo functions.php :

 // RETRIEVE FIELDS with JS add_action( 'admin_enqueue_scripts', 'enqueue_admin_scripts_and_styles' ); function enqueue_admin_scripts_and_styles(){ wp_enqueue_script('UNIQUE-SCRIPT-NAME', '/PATH-TO-YOUR-JS-FILE', array('jquery','inline-edit-post' )); }

Portanto, se, por exemplo, você criar um arquivo extend-quick-edit.js e colocá-lo em sua pasta de tema ativo, no código acima você deve substituir 'UNIQUE-SCRIPT-NAME' por algo como 'extend-quick-edit-script ' e '/PATH-TO-YOUR-JS-FILE' com get_template_directory_uri() . '/extend-quick-edit.js' get_template_directory_uri() . '/extend-quick-edit.js'

 // RETRIEVE FIELDS with JS add_action( 'admin_enqueue_scripts', 'enqueue_admin_scripts_and_styles' ); function enqueue_admin_scripts_and_styles(){ wp_enqueue_script('extend-quick-edit-script', get_template_directory_uri() . '/extend-quick-edit.js', array('jquery','inline-edit-post' )); }

No array('jquery','inline-edit-post' ) nós adicionamos jQuery já que nosso script usa jQuery, e definimos que a função inline-edit-post original será modificada.

No extend-quick-edit.js o conteúdo ficará assim:

 jQuery(document).ready(function($){ var $inline_editor = inlineEditPost.edit; inlineEditPost.edit = function(id){ $inline_editor.apply( this, arguments); var post_id = 0; if( typeof(id) == 'object'){ post_id = parseInt(this.getId(id)); } if(post_id != 0){ $post_modified_col_value = $('#post-' + post_id).find('.source').text(); $('#edit-' + post_id + ' input[name=source]').val($post_modified_col_value); } } });

Vamos detalhar um pouco o que fizemos aqui.

Primeiro, pegamos o objeto inlineEditPost.edit , que é introduzido no arquivo principal do WordPress /wp-admin/js/inline-edit-post.js se você quiser analisá-lo mais a fundo. Então agora temos uma cópia do objeto na variável $inline_editor .

Depois disso, modificamos a funcionalidade inlineEditPost.edit aplicando a existente no $inline_editor.apply( this, arguments); e adicionando a funcionalidade extra que queremos logo em seguida.

Assim, nas próximas linhas do nosso código JS, o que eventualmente faremos é substituir o valor do campo de entrada 'Fonte' da área de edição rápida pelo valor da célula da coluna 'Origem'.

Agora tudo deve funcionar como esperado. Se você salvar o valor e reabrir a área de edição rápida, a entrada Source também deverá ser alterada.

Desde que um campo personalizado já esteja registrado junto com sua coluna personalizada, nosso fluxo de trabalho ficaria assim:

Conclusão

Adicionar um campo personalizado ao módulo Quick Edit das tabelas Admin List não é fácil. No entanto, se você estiver adicionando um campo que é atualizado regularmente, obviamente poderá economizar muito tempo a longo prazo. Como sempre, o que pode ser alcançado no WordPress é bastante ilimitado. Diretamente pronto para uso, ele permite uma ampla personalização, mas com alguma codificação adicional, não há muito que você não possa fazer!