![](https://cxg-design.jp/wp-content/uploads/2024/04/acftablethumbnail02.png)
ACFのテーブルアドオンで、テンプレートで簡単に使えるシンプルなテーブルを作成
ACFでは、画像、テキストなどのフィールドを作成することができます。今回は、テーブルアドオンをインストールして、テンプレートで簡単に使えるシンプルなテーブルを作成します。
今回のDEMOは、テンプレート内に挿入する、シンプルな価格表のテーブルです。
CSSでスタイル設定しています。SPでは、横スクロールで見れます。
ACFテーブルアドオン有効化
まず、テーブルアドオンをダウンロード、インストールします。アドオンですが、無料版です。
ダウンロードして、有効化します。設定は必要ありません。
ACF設定
次にACFの設定をします。ACF>フィールドグループをクリックし、テーブルを追加したいフィールドの編集をクリックします。フィールドを追加ボタンをクリックし、Tableを選択します。編集画面に表示されるフィールドラベル、PHPに入力するフィールド名を設定します。その他はデフォルトのままにしています。
![](https://cxg-design.jp/wp-content/uploads/2024/04/ef0d15b5b36b53ba80b45a1dd2d9425d.png)
テーブルを追加したいフィールドの編集をクリック
![](https://cxg-design.jp/wp-content/uploads/2024/04/c1a059f8a5c4d4467e645603d1815397.png)
フィールドを追加ボタンをクリックし、Tableを選択
![](https://cxg-design.jp/wp-content/uploads/2024/04/12fe946c86d19c8719f59ef83d3f280b.png)
フィールドラベル、フィールド名を設定
項目 | 設定値 |
---|---|
フィールドタイプ | Table |
フィールドラベル | テーブル |
フィールド名 | table_test |
Table Header | Optional |
Table Caption | No |
PHP
次にPHPを設定します。テーブルを表示したい投稿のループ内に、下記のコードを入力します。尚、PHPの設定はWeb制作側の作業になります。
<?php
$table = get_field( 'table_test' );
if ( ! empty ( $table ) ) {
echo '<div class="tabletest"><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></div>';
}
?>
CSS
テーブルのスタイルを設定します。今回は、SPでは、横スクロール表示にしています。ここは、デザイン次第でスタイルが変更になります。CSSの設定もWeb制作側の作業になります。
.tabletest{
margin:auto;
padding: 6em 3em 1em;
overflow-x: scroll;
}
.tabletest th,td {
padding: 0.7em;
vertical-align: middle;
}
.tabletest table {
border-collapse: collapse; /* セルの線を重ねる */
width: 100%;
min-width: 740px;
}
.tabletest thead th {
width: 100px;
text-align: left;
font-weight: 500;
background: #000;
color: #fff;
border: none;
border-left: solid 1px #eee;
text-align: left ;
}
.tabletest tbody tr :first-child {
border-left: none;
text-align: center;
}
.tabletest tbody tr :nth-child(3) {
text-align: right;
}
.tabletest tbody tr :last-child {
border-right: none;
text-align: right;
}
.tabletest tbody td {
text-align: left;
border-right: solid 1px #ccc;
}
.tabletest tbody tr:nth-child(even){
background: #eee;
}
@media screen and (min-width: 1250px) {
.tabletest{
padding: 8em 10% 1em;
max-width: 1800px;
}
}
テーブル作成
ブロックエディターの編集画面で、テーブルを作成します。ACF設定をしたら、編集画面の下にテーブルフィールドが作成されます。
今回はヘッダー付きの4X7のテーブルを作成します。まず、ヘッダーを使用するのでuse table headerをYesに設定します。テーブルの上に表示されている+マークをクリックすると列が増えるので、4列に設定します。次に左下の+マークをクリックすると、段が増えるので、7段に設定します。
![](https://cxg-design.jp/wp-content/uploads/2024/04/67974396b03d4acedc9f9df1402ecbbb.png)
use table headerをYesに設定
![](https://cxg-design.jp/wp-content/uploads/2024/04/16dc666a9d18fc65356173e1c9dd7b79.png)
上の+マークをクリックして4列に設定
![](https://cxg-design.jp/wp-content/uploads/2024/04/8f0a72e4b1e7fcc98cb19eed539c14f7.png)
左下の+マークをクリックして、7段に設定
次に、内容を入力していきます。セル内をクリックするとテキストボックスが表示されるので、内容を入力していきます。全てのテキストを入力したらテーブル完成です。タイトルなどを入力し、データを保存します。
![](https://cxg-design.jp/wp-content/uploads/2024/04/8e39549bc58bd4a1f461a862f5a2b966.png)
セル内をクリックするとテキストボックスが表示されるので、内容を入力
![](https://cxg-design.jp/wp-content/uploads/2024/04/7d5f627b9898c5834481a7798530338f.png)
全てのテキストを入力したらテーブル完成
以上で、今回の説明は終了です。テーブルは、ブロックエディターやプラグインでも作成できますが、テンプレートの場合は、この作成方法が便利です。スタイルをあらかじめ設定しておけば、決まった場所に、決まったデザインで表示されるので、管理者によって仕上がりのブレがないのが魅力です。