Advanced Custom Fields: Table Field

説明

The Table Field Plugin enhances the functionality of the “Advanced Custom Fields” plugin with easy-to-edit tables.

This plugin requires the “Advanced Custom Fields” plugin or the Pro version!

The table field works also with the repeater and flexible field types and supports the ACF Blocks for Gutenberg

Features

  • Table Header (Option)
  • Table Caption (Option)
  • Support for ACF Gutenberg blocks
  • Add and remove table columns and rows
  • Change order of columns and rows by dragging
  • To move to the next cells editor press key: tab
  • To move to the previous cells editor press key: shift + tab

翻訳

  • English – default, always included
  • German: Deutsch – immer dabei!
  • Danish: Dansk – altid der!
  • Polish: Polski – zawsze tam jest!

Note: Please contribute your language to the plugin to make it even more useful.

スクリーンショット

  • フィールド設定

  • フィールド内容の編集

  • 灰色の領域の行と列をつかんでドラッグします。

インストール

このソフトウェアは WordPress プラグインとテーマ同梱の両方で使用できます。
ただし、プラグインとして有効化した場合のみ更新が利用可能になります。

プラグイン

  1. “advanced-custom-fields-table-field” フォルダーをプラグインフォルダーにコピーしてください。
  2. プラグイン管理ページからプラグインを有効にします。

FAQ

How to output the table html?

To render the table fields data as an html table in one of your template files (page.php, single.php) you can start with the following basic code example:

$table = get_field( 'your_table_field_name' );

if ( ! empty ( $table ) ) {

    echo '<table border="0">';

        if ( ! empty( $table['caption'] ) ) {

            echo '<caption>' . $table['caption'] . '</caption>';
        }

        if ( ! empty( $table['header'] ) ) {

            echo '<thead>';

                echo '<tr>';

                    foreach ( $table['header'] as $th ) {

                        echo '<th>';
                            echo $th['c'];
                        echo '</th>';
                    }

                echo '</tr>';

            echo '</thead>';
        }

        echo '<tbody>';

            foreach ( $table['body'] as $tr ) {

                echo '<tr>';

                    foreach ( $tr as $td ) {

                        echo '<td>';
                            echo $td['c'];
                        echo '</td>';
                    }

                echo '</tr>';
            }

        echo '</tbody>';

    echo '</table>';
}

Table field returns no data on get_field()?

If the table has only one empty cell, then get_field() returns FALSE. get_field() returns NULL when a field is not stored in the database. That happens when a page is copied but not their fields content. You can check both with empty()

$table = get_field( 'your_table_field_name' );

if ( ! empty( $table ) ) {
    // $table is not FALSE and not NULL.
    // Field exists in database and has content.
}

How to handle line breaks?

管理画面のテーブルに改行を表示したり、テーブル HTML を出力する時に改行を <br> として取得することについてです。

Converting Line Breaks for HTML Output

テーブル内の改行を <br> に変換するには PHP 関数 nl2br() を使用してHTMLを出力します:

テーブルヘッダーセルの改行は置換します…

echo $th['c'];

このように…

echo nl2br( $th['c'] );

テーブルボディセルの改行は置換します…

echo $td['c'];

このように…

echo nl2br( $td['c'] );

Displaying Line Breaks in Editing Tables

管理画面のテーブル編集中に見た目の改行を反映するには、管理画面に次のスタイルを追加します。

.acf-table-header-cont,
.acf-table-body-cont {
    white-space: pre-line;
}

これらのスタイルを WordPress 管理画面に追加する一つの方法は、テーマの functions.php ファイルに次のコードを追加することです。

add_action('admin_head', 'acf_table_styles');

function acf_table_styles() {
  echo '<style>
    .acf-table-header-cont,
    .acf-table-body-cont {
        white-space: pre-line;
    }
  </style>';
}

How to use the table field in Elementor Page Builder?

In general, its up to Elementor to support ACF field types on the Elementor widgets. All supported ACF fields by Elementor you can find here. But because the table field is not a native ACF field, the support for this field may never happen.

For now the way to go is using the Elementors shortcode Widget. Before you can use a shortcode to display a table fields table, you have to setup a shortcode in functions.php. The following code does this. You can modify the table html output for your needs.

function shortcode_acf_tablefield( $atts ) {

    $a = shortcode_atts( array(
        'table-class' => '',
        'field-name' => false,
        'post-id' => false,
    ), $atts );

    $table = get_field( $a['field-name'], $a['post-id'] );

    $return = '';

    if ( $table ) {

        $return .= '<table class="' . $a['table-class'] . '" border="0">';

            if ( ! empty( $table['caption'] ) ) {

                echo '<caption>' . $table['caption'] . '</caption>';
            }

            if ( $table['header'] ) {

                $return .= '<thead>';

                    $return .= '<tr>';

                        foreach ( $table['header'] as $th ) {

                            $return .= '<th>';
                                $return .= $th['c'];
                            $return .= '</th>';
                        }

                    $return .= '</tr>';

                $return .= '</thead>';
            }

            $return .= '<tbody>';

                foreach ( $table['body'] as $tr ) {

                    $return .= '<tr>';

                        foreach ( $tr as $td ) {

                            $return .= '<td>';
                                $return .= $td['c'];
                            $return .= '</td>';
                        }

                    $return .= '</tr>';
                }

            $return .= '</tbody>';

        $return .= '</table>';
    }

    return $return;
}

add_shortcode( 'tablefield', 'shortcode_acf_tablefield' );

Then use the shortcode in a Elementors shortcode widget like this, to insert a table from the current page or post

[tablefield field-name="your table field name" table-class="my-table"]

You also can insert a table from another page or post

[tablefield field-name="your table field name" post-id="123" table-class="my-table"]

Or you can insert a table from a ACF option page

[tablefield field-name="your table field name" post-id="option" table-class="my-table"]

Updating a table using update_field()

You can use the ACF PHP function update_field() to change a tables data.

Example: adding a new row

// the post ID where to update the table field
$post_id = 123;

// gets the table data
$table_data = get_field( 'table', $post_id );

// defines the new row and its columns
$new_row = array(

    // must define the same amount of columns as exists in the table

    // column 1
    array(
        // the 'c' stands for content of the cell
        'c' => 'Cell Content of Column 1',
    ),

    // column 2
    array(
        'c' => 'Cell Content of Column 2',
    )
);

// adds the new row to the table body data
array_push( $table_data['body'], $new_row );

// saves the new table data
update_field( 'table', $table_data, $post_id );

Third party plugins issues

Since version 1.3.1 of the table plugin, the storing format of the table data changes from JSON string to serialized array for new or updated tables. The issue with JSON is because of third party plugins that do not properly applying wp_slash() to a post_meta value before updating with update_post_metadata(). This can break JSON strings because update_post_metadata() removes backslashes by default. Backslashes are part of the JSON string syntax escaping quotation marks in content.

The table field plugin prevents broken JSON strings to save as a table field data and throws an error message that explains the issue. But this may also breaks the functionality of the third party plugin trying to update the table data. You could disable the JSON string check in the table field plugin using the following code in the wp-config.php file. But then the table JSON data are no longer protected from destroing by update_post_metadata(). Use the following code in wp-config.php only, if you understand the risk…

define( "ACF_TABLEFIELD_FILTER_POSTMETA", false );

評価

2020年1月7日
We needed a custom table with dynamic content that had an easy-to-use interface for our client. What better way than with an actual table on the backend with user-editable rows. This also made pulling in data a breeze, even for the complexity we had with the tables. Works great with Twig and other ACF content within the table rows itself.
2019年10月8日
This plugin handles a classic, seemingly simple, but surprisingly (or possibly annoyingly) complex development task of entering a table of data, very smoothly (in my experience). Additionally, I encountered a bug in one of the most recent version, while implementing ACF Blocks using the ACF Table Field Plugin, and the Developer not only replied, but had a fix within 24hrs. While, I'm sure other bugs might take a longer time to resolve, I'm grateful for the quick response and turn around in my experience. Thank you!
2020年7月21日
This plugin is a fantastic solution for tables using ACF. I used this and I was shocked with how it works brilliantly. A huge thank you for the authors of this masterpiece.
50件のレビューをすべて表示

貢献者と開発者

Advanced Custom Fields: Table Field はオープンソースソフトウェアです。以下の人々がこのプラグインに貢献しています。

貢献者

“Advanced Custom Fields: Table Field” は5ロケールに翻訳されています。 翻訳者のみなさん、翻訳へのご協力ありがとうございます。

“Advanced Custom Fields: Table Field” をあなたの言語に翻訳しましょう。

開発に興味がありますか ?

コードを閲覧するか、SVN リポジトリをチェックするか、開発ログRSS で購読してみてください。

変更履歴

1.3.12

  • Updates styles of acf buttons plus and minus

1.3.11

  • Adds support for updating term type by update_field()

1.3.10

  • Fixes table cell content and caption update issue on ACF Gutenberg blocks
  • Replaces jQuery depricated size() methode by .length property

1.3.9

  • Fixes broken ACF select field styles in WordPress 5.3.
  • Fixes an issue when adding or removing columns using update_field().

1.3.8

  • Fixes an issue where the option “use header” was not applied on updating a field with update_field().
  • Fixes an issue where percent characters in a table field content causes an JavaScript error.

1.3.7

  • Fixes an issue where the table header was not displayed on a page preview.

1.3.6

  • Fixes an issue when changing the field type to table of a field that already has content in the database from another field type.

1.3.5

  • Fixes an issue that removes table header content using update_field() while option “use header” is set to “no”.
  • Fixes an issue with the update_post_metadata filter

1.3.4

  • Fixes an issue that prevents the removal of table contents

1.3.3

  • Fixes returning empty table after saving content containing a single quote.

1.3.2

  • Fixes returning empty table after saving content containing quotes
  • Fixes an issue using update_field() on a table field

1.3.1

  • Changes table data storing format from JSON string to serialized array. This is due to an issue caused by third party plugins using update_post_meta() without providing wp_slash() to the value before. Existing table data values in JSON string format in the database will still exists and be compatible. When a field is saved again, the storage format changes from JSON to serialized array.
  • Fixes an PHP error of table caption

1.3.0

  • Adds support for table caption
  • Fixes an JavaScript issue for ACF version 4

1.2.7

  • Adds PHP constant ACF_TABLEFIELD_FILTER_POSTMETA. Setting this constant to false prevents an update_post_metadata filter looking for tablefield JSON strings destroyed by update_post_meta().

1.2.6

  • Replaces jQuery.noConflict methode
  • Prevents PHP error if table fields value is from a previous fieldtype

1.2.5

  • Adds danish translation, thanks to Jeppe Skovsgaard

1.2.4

  • Fixes backslashes on using update_field();

1.2.3

  • ACF update_field() 関数のサポートを追加します。 get_field() でテーブルフィールドデータ配列を取得した場合、テーブルデータ配列を変更したり、update_field() を使用して変更をフィールドに保存できます。

1.2.2

  • Adds plugin version to table data for handling structural changes.
  • Fixes loosing table data containing quotes on third party update_post_meta() actions to table field values. Limited to new fields or fields value changed since plugin version 1.2.2.
  • 本文データが null の場合の PHP 7.2以降の警告を修正

1.2.1

  • Fixes not using user locale for translation
  • Adds description for handling line breaks to plugins page

1.2

  • タブナビゲーションのサポートを追加します。後方に移動するために shift + tab キーを使用してください。
  • Minor code improvements

1.1.16

  • Keeps the WordPress admin area working, if tablefields value is not a valid JSON string. Logs the invalid value in the console for debugging.

1.1.15

  • Adds polish translation by Pawel Golka

1.1.14

  • Fixes table does not appear under certain field groups location rules

1.1.13

  • Fixes an XSS issue within /wp-admin/ pages

1.1.12

  • Adds support for field groups post taxonomy rule

1.1.11

  • Fixes rerendering of tables while changing other content

1.1.10

  • Fixed table functionality with respect to the ACF rules

1.1.9

  • Fixes returning false on single empty table cell for ACF version 4

1.1.8

  • Fixes support for user edit pages

1.1.7

  • Fixes support for user profile pages

1.1.6

  • UI: Fixes table header switch off problem

1.1.5

  • Fixes issue occured after database migration with plugin “WP Migrate DB”

1.1.4

  • Takes over icon class changes in ACF-Pro since version 5.3.2

1.1.3

  • Fixes wrong function name ‘change_template’

1.1.2

  • Fixes missing table on page template change

1.1.1

  • Compatibility to icon changes of ACF Pro version 5.2.8
  • Fixes table top legend height in FireFox
  • Fixes delete column icon position in IE

1.1

  • Improved User Experience when deleting all columns and rows.
  • Compatibility to changes of ACF Pro version 5.2.7.

1.0.7

  • Use wp_json_encode() instead of json_encode(). This may fix issues in rare enviroments.

1.0.6

  • If the table has only a single empty cell (this is by default), no table data will return now.

1.0.5

  • Fixes javascript issue in IE 8.
  • Fixes missing table borders and table header´s height in FireFox.

1.0.4

  • Fixes an uri problem on some hosts.

1.0.3

  • Fixes an php error on HTTP_REFFERER.

1.0.2

  • Fixes error when including the plugin from inside a theme.

1.0.1

  • Fixes ACF validation error “required” when header option “use table header” was used and unchecked.

1.0

  • Official Release of the free version