Tabele z listą administratorów WordPress: Rozszerz funkcję szybkiej edycji

Do tej pory w naszej serii artykułów na temat tabel administracyjnych w WordPressie przyjrzeliśmy się różnym sposobom dostosowywania układu tabel administracyjnych WordPressa, w tym dodawaniu nowych kolumn. W ostatnim artykule z tej serii przyjrzymy się jeszcze jednemu dostosowaniu, które warto rozważyć… rozszerzeniu funkcji „Szybka edycja” znajdującej się w tabelach administracyjnych.

Zacznijmy!

Rozszerzanie pola szybkiej edycji

W naszym przykładzie w tym samouczku dodamy niestandardowe pole, które będzie wyświetlać adres URL, który zostanie opisany jako „Źródło”, który wypełnimy adresem URL zawierającym dodatkowe informacje dotyczące naszego artykułu. Zobaczymy, jak można go dodać w obszarze szybkiej edycji ekranu administratora postów i jak zapisywać aktualizacje wprowadzone w tym polu.

Krok pierwszy: dodaj pole niestandardowe

Omówiliśmy, jak utworzyć pole „Źródło” w naszym artykule Pierwsze kroki z niestandardowymi polami WordPress. Ze względu na zwięzłość nie będziemy tutaj powtarzać tych instrukcji. Możesz oczywiście stworzyć dowolne pole niestandardowe.

Jeśli nie wiesz, w jaki sposób dodajemy pole niestandardowe „Źródło” lub jakiekolwiek inne pole niestandardowe w tym zakresie, zapoznaj się z naszym artykułem na ten temat. Po dodaniu odpowiedniego pola niestandardowego czas przejść do następnego kroku.

Krok drugi: dodaj niestandardową kolumnę

Musimy dodać niestandardową kolumnę do naszej tabeli administracyjnej. Szczegółowo wyjaśniliśmy, jak to zrobić, w naszym artykule Dostosowywanie tabel administracyjnych WordPress: Pierwsze kroki. Spójrz i postępuj zgodnie z instrukcjami.

Ostatecznie powinieneś otrzymać jakiś kod w functions.php aktywnego motywu, który wygląda tak:

 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; } }

Do tej pory powinieneś zobaczyć nową kolumnę w tabeli Admin postów.

Dodaj niestandardowe pole szybkiej edycji

Przejdźmy do naszej tabeli z listą postów i kliknij łącze „Szybka edycja” pod jednym z naszych postów.

Zobaczymy tutaj wszystkie domyślne dostępne opcje, które WordPress udostępnia na ekranie Szybka edycja. W tej chwili nie zobaczymy naszego nowego pola „Źródło”.

Dodamy to za pomocą haka quick_edit_custom_box , który zapewnia WordPress. Ta akcja analizuje wszystkie domyślne działania w trybie „Szybka edycja”, wykonując raz dla każdej kolumny, w tym kolumn niestandardowych.

Ma następującą strukturę: do_action( 'quick_edit_custom_box', $column_name, $post_type, $taxonomy ) . Parametry to $column_name , która jest nazwą kolumny do edycji, $post_type , która jest slug typu post i $taxonomy dla nazwy taksonomii, jeśli to konieczne.

W pliku functions.php dodaj następujące wiersze:

 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; } }

Proszę pamiętać, że wartość pola 'source' otrzymujemy w kodzie PHP przez echo $post->source; .

Teraz, jeśli odświeżysz stronę i ponownie klikniesz „Szybka edycja”, powinieneś teraz zobaczyć pole „źródło” z poprawną wartością.

Krok trzeci: zapisz edycję inline

Aby zapisać wprowadzone dane w naszym niestandardowym polu, użyjemy akcji save_post , która jest wyzwalana po zaktualizowaniu wpisu.

W naszym przykładzie, w którym pracujemy nad szybką edycją, dane posta są przechowywane w $_POST po wykonaniu save_post .

Kod wymagany do osiągnięcia tego wygląda następująco i należy go wstawić do pliku 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; }

Nie zostało to zrobione, spróbujmy zmienić wartość wejściową pola na coś innego, jak „https://random.url” i naciśnij przycisk aktualizacji w prawym dolnym rogu.

Zauważasz, że wartość w naszym polu źródłowym jest aktualizowana zgodnie z oczekiwaniami. Jeśli jednak ponownie klikniesz przycisk Szybka edycja i ponownie przyjrzysz się swojemu polu niestandardowemu (w naszym przypadku „Źródło”), zobaczysz, że wartość nie zmieniła się w polu edycji.

Tyle razy, ile razy zmienisz wartość, zawsze zobaczysz zmianę w komórce kolumny tabeli administracyjnej, ale te dane wejściowe nie zostaną odzwierciedlone w polu Szybka edycja.

Dlaczego tak się dzieje?

Pamiętaj, że wartość pola 'source' otrzymujemy, powtarzając $post->source; . Treść szybkiej edycji jest wypełniana, gdy użytkownik naciśnie przycisk „edytuj”, co oznacza, że ​​jest tworzona dynamicznie i nie jest wstępnie wypełniana po załadowaniu ekranu administratora posta. Nie możemy poprawnie wyświetlić naszych metadanych, pobierając je za pomocą naszego kodu PHP, ponieważ zawsze zobaczymy wartość, która została wypełniona, gdy weszliśmy na ekran administratora zamiast nowej wartości.

Zamiast tego musimy zbierać nasze wartości za pomocą JavaScript. Więc zanim przejdziemy dalej, przejdziemy do naszego poprzedniego kodu PHP i usuniemy wartość echo, zastępując tę ​​linię…

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

…z tym:

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

Krok czwarty: Pobieranie wartości wejściowych za pomocą JS

Najpierw będziemy musieli dołączyć nasz skrypt JS, dodając te wiersze do pliku 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' )); }

Więc jeśli na przykład utworzysz plik extend-quick-edit.js i umieścisz go w folderze aktywnego motywu, to w powyższym kodzie powinieneś zastąpić 'UNIQUE-SCRIPT-NAME' czymś w rodzaju 'extend-quick-edit-script ' i '/ŚCIEŻKA-DO-TWOJEGO-PLIKU-JS' z 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' )); }

W array('jquery','inline-edit-post' ) dodaliśmy jQuery, ponieważ nasz skrypt używa jQuery i zdefiniowaliśmy, że oryginalna funkcja inline-edit-post zostanie zmodyfikowana.

W extend-quick-edit.js treść będzie wyglądać tak:

 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); } } });

Przeanalizujmy trochę to, co tutaj zrobiliśmy.

Na początku pobieramy obiekt inlineEditPost.edit , który jest wprowadzony do głównego pliku WordPressa /wp-admin/js/inline-edit-post.js , jeśli chcesz zajrzeć do niego głębiej. Więc mamy teraz kopię obiektu w zmiennej $inline_editor .

Następnie modyfikujemy funkcjonalność inlineEditPost.edit , stosując istniejącą w $inline_editor.apply( this, arguments); i dodanie dodatkowej funkcjonalności, której chcemy zaraz po.

Tak więc w następnych wierszach naszego kodu JS ostatecznie zastąpimy wartość pola wejściowego „Źródło” obszaru szybkiej edycji wartością komórki kolumny „Źródło”.

Teraz wszystko powinno działać zgodnie z oczekiwaniami. Jeśli zapiszesz wartość i ponownie otworzysz obszar szybkiej edycji, wejście Źródło również powinno zostać zmienione.

Zakładając, że niestandardowe pole jest już zarejestrowane wraz z niestandardową kolumną, nasz przepływ pracy będzie wyglądał tak:

Wniosek

Dodanie pola niestandardowego do modułu szybkiej edycji tabel z listą administratorów nie jest łatwe. Jeśli jednak dodajesz pole, które jest regularnie aktualizowane, może to oczywiście zaoszczędzić dużo czasu na dłuższą metę. Jak zawsze, to, co można osiągnąć w WordPressie, jest dość nieograniczone. Prosto po wyjęciu z pudełka pozwala na szeroką personalizację, ale z dodatkowym kodowaniem nie ma wiele rzeczy, których nie można zrobić!