/ Wordpress / Быстрое редактирование записи (Quick edit)

Быстрое редактирование записи (Quick edit)

HIT

03.10.2016

4497

4

В wordpress есть замечательная возможность быстрого редактирования записи (Quick edit post), не заходя в нее.

Произвольное поле в панели быстрого редактирования

Добавим в панель быстрого редактирования произвольное поле (acf)

1. Добавляем колонку с пользовательским полем. price — slug поля.

function add_acf_columns ( $columns ) {
$columns['price'] = 'Price';
return $columns;
}
add_filter ( 'manage_post_posts_columns', 'add_acf_columns' );

add_action( 'manage_posts_custom_column', 'rachel_carden_populating_my_posts_columns', 10, 2 );
function rachel_carden_populating_my_posts_columns( $column_name, $post_id ) {
switch( $column_name ) {
case 'price':
echo '<div id="price-' . $post_id . '">' . get_post_meta( $post_id, 'price', true ) . '</div>';
break;
}
}

2. Добавляем произвольное поле в панель быстрого редатирования

bulk_edit_custom_box — хук массового редактирования
quick_edit_custom_box — хук быстрого редактирования

//add_action( 'bulk_edit_custom_box', 'rachel_carden_add_to_bulk_quick_edit_custom_box', 10, 2 );
add_action( 'quick_edit_custom_box', 'rachel_carden_add_to_bulk_quick_edit_custom_box', 10, 2 );
function rachel_carden_add_to_bulk_quick_edit_custom_box( $column_name, $post_type ) {

 switch( $column_name ) {
 case 'price':
 ?><fieldset class="inline-edit-col-right">
 <div class="inline-edit-group">
 <label>
 <span class="title">Price</span>
 <input type="text" name="price" value="" />
 </label>
 </div>
 </fieldset><?php

 break;
 }

}

3. Заполняем поле. Если зайти в быстрое редактирование, то поле не будут заполнено. Для этого подключаем скрипт.

add_action( 'admin_print_scripts-edit.php', 'rachel_carden_enqueue_edit_scripts' );
function rachel_carden_enqueue_edit_scripts() {
   wp_enqueue_script( 'rachel-carden-admin-edit', get_bloginfo( 'stylesheet_directory' ) . '/quick_edit.js', array( 'jquery', 'inline-edit-post' ), '', true );
}

Содержимое скрипта quick_edit.js

(function($) {

   // we create a copy of the WP inline edit post function
   var $wp_inline_edit = inlineEditPost.edit;
   // and then we overwrite the function with our own code
   inlineEditPost.edit = function( id ) {

      // "call" the original WP edit function
      // we don't want to leave WordPress hanging
      $wp_inline_edit.apply( this, arguments );

      // now we take care of our business

      // get the post ID
      var $post_id = 0;
      if ( typeof( id ) == 'object' )
         $post_id = parseInt( this.getId( id ) );

      if ( $post_id > 0 ) {

         // define the edit row
         var $edit_row = $( '#edit-' + $post_id );

         // get the release date
	 var $price = $( '#price-' + $post_id ).text();

	 // populate the release date
	 $edit_row.find( 'input[name="price"]' ).val( $price );

      }

   };

})(jQuery);

Теперь поле должно заполнятся.

Механизм примерно следующий: с помощью jquery мы отлавливаем id записи из id diva который мы сами туда поместили в первом шаге.

4. Сохраняем изменения быстрого редактирования

add_action( 'save_post','rachel_carden_save_post', 10, 2 );
function rachel_carden_save_post( $post_id, $post ) {

// don't save for autosave
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )
      return $post_id;

// dont save for revisions
if ( isset( $post->post_type ) && $post->post_type == 'revision' )
      return $post_id;


if ( array_key_exists( 'price', $_POST ) )
	    update_post_meta( $post_id, 'price', $_POST[ 'price' ] );

}

5. Сохраняем изменения массового редактирования

Добавляем функцию

add_action( 'wp_ajax_rachel_carden_save_bulk_edit', 'rachel_carden_save_bulk_edit' );
function rachel_carden_save_bulk_edit() {
   // get our variables
   $post_ids = ( isset( $_POST[ 'post_ids' ] ) && !empty( $_POST[ 'post_ids' ] ) ) ? $_POST[ 'post_ids' ] : array();
   $price = ( isset( $_POST[ 'price' ] ) && !empty( $_POST[ 'price' ] ) ) ? $_POST[ 'price' ] : NULL;
   // if everything is in order
   if ( !empty( $post_ids ) && is_array( $post_ids ) && !empty( $price ) ) {
      foreach( $post_ids as $post_id ) {
         update_post_meta( $post_id, 'price', $price );
      }
   }
}

А в созданный файл скрипта quick_edit.js, добавляем еще один скрипт (после существующего)

jQuery(document).ready(function($){
	
	
$( '#bulk_edit' ).live( 'click', function() {

   // define the bulk edit row
   var $bulk_row = $( '#bulk-edit' );

   // get the selected post ids that are being edited
   var $post_ids = new Array();
   $bulk_row.find( '#bulk-titles' ).children().each( function() {
      $post_ids.push( $( this ).attr( 'id' ).replace( /^(ttle)/i, '' ) );
   });

   // get the release date
   var $price = $bulk_row.find( 'input[name="price"]' ).val();

   // save the data
   $.ajax({
      url: ajaxurl, // this is a variable that WordPress has already defined for us
      type: 'POST',
      async: false,
      cache: false,
      data: {
        action: 'rachel_carden_save_bulk_edit', // this is the name of our WP AJAX function that we'll set up next
        post_ids: $post_ids, // and these are the 2 parameters we're passing to our function
	price: $price
      }
   });

});


});

Альтернативное решение по добавлению поля

add_action( 'woocommerce_product_quick_edit_start', 'bbloomer_show_custom_field_quick_edit' );
 
function bbloomer_show_custom_field_quick_edit() {
   global $post;
   ?>
   <label>
      <span class="title">Custom field</span>
      <span class="input-text-wrap">
         <input type="text" name="_custom_field" class="text" value="">
      </span>
   </label>
   <br class="clear" />
   <?php
}
 
add_action( 'manage_product_posts_custom_column', 'bbloomer_show_custom_field_quick_edit_data', 9999, 2 );
 
function bbloomer_show_custom_field_quick_edit_data( $column, $post_id ){
    if ( 'name' !== $column ) return;
    echo '<div>Custom field: <span id="cf_' . $post_id . '">' . esc_html( get_post_meta( $post_id, '_custom_field', true ) ) . '</span></div>';
   wc_enqueue_js( "
      $('#the-list').on('click', '.editinline', function() {
         var post_id = $(this).closest('tr').attr('id');
         post_id = post_id.replace('post-', '');
         var custom_field = $('#cf_' + post_id).text();
         $('input[name=\'_custom_field\']', '.inline-edit-row').val(custom_field);
        });
   " );
}
 
add_action( 'woocommerce_product_quick_edit_save', 'bbloomer_save_custom_field_quick_edit' );
 
function bbloomer_save_custom_field_quick_edit( $product ) {
    $post_id = $product->get_id();
    if ( isset( $_REQUEST['_custom_field'] ) ) {
        $custom_field = $_REQUEST['_custom_field'];
        update_post_meta( $post_id, '_custom_field', wc_clean( $custom_field ) );
    }
}
[site-socialshare]
  • Комментарии
  • Вложения

Добавить комментарий

4 комментария

  1. Сергей

    Спасибо за код и пояснения — то, что я и искал!
    А, что надо изменить, чтобы можно было делать тоже самое со страницами, а не с записями?

  2. Сергей

    Спасибо, основная задача выполнена. Поля обновляются без захода в запись. Не получилось только чтобы в быстром редактирование, поле было заполнено. Оно пустое! Скажите, в шаге 3, мы подключаем скрипт в hedere между тегами ?? Или этот код вставляем в function просто без всяких тегов? Файл quick_edit.js заливать в корень сайта? Я так понял в коде №3 ‘/quick_edit.js’ — это путь к файлу? И последнее, файл quick_edit.js состоит из двух скриптов просто один ниже другого без всяких там разделителей и т.п? Прошу прощения, если где-то глупость сморозил. Но хотел бы до конца разобраться с этим.
    Честно скажу, убил целый день на решение задачи с быстрым редактированием полей и уже не надеялся, но гугл всё-таки Вас мне выдал. Спасибо за ответы.

    1. Alexandr

      Функцию (add_action) вставляем в function.php. Скрипт (в последствии содержащий два скрипта) помещаем в корень папки темы. Если например скрипты лежат в отдельной папке (с названием js) в теме, то путь к скрипту будет следующий:
      get_bloginfo( ‘stylesheet_directory’ ) . ‘/js/quick_edit.js

  3. Сергей

    Спасибо за ответы. Скажите, функция сохранения изменения массового редактирования (шаг№5) — это не для того чтобы массово редактировать значения произвольных полей? У меня, допустим, задача сразу заполнить поля в нескольких записях, потом обновить одной кнопкой. Это возможно? Сейчас я не могу этого сделать. Если выбираю несколько записей, нажимаю изменить (МАССОВОЕ РЕДАКТИРОВАНИЕ), то могу редактировать только рубрики, автора, коммент и т.д, но не произвольные поля (их там нет). Если Вашими функциями не предусмотрено массовое редактирование произвольных полей через панель быстрого редактирования, то может Вы знаете как это реализовать? Был бы очень благодарен.

Быстрое редактирование записи (Quick edit)
Всплывающее окно при посещении сайта
Рекомендации для васВсплывающее окно при посещении сайтаOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.