デザイナーと繋がる!WebJoyクリエイターブログ WebJoyコミュ

2016年06月19日 WordPressWEB技術

advanced custom fields特集その9!Table Fieldの使い方

皆さんこんにちは!長崎のホームページ制作会社、合同会社WebJoyです。

表が作れるフィールドタイプを追加できるアドオン

皆さん、AdvancedCustomFieldで表を作りたい時ってどうしてますか?

無理やりフィールドを構成して作ったりしちゃいますよね?それでもあまり融通が効かないフィールドになってしまうと思います。

今回紹介するadvanced custom fields無料アドオン「Table Field」では、表を簡単に追加することができるようになります。どんなホームページでも表は入る可能性があるので結構必須アイテムかもしれませんね!

設定方法

いつも通り、インストール・有効化を行いましょう。

すると、以下の画像の通りフィールドタイプに「table」が追加されます。

type

次に「位置」の項目で設定した編集画面へ行くと実際に以下の画像の通り追加されます。

table

「use table header」の項目でthタグを設置することも可能になります。

出力方法

出力方法はさすが表だけあって結構やっかいです。

ただ、基本的にはコピペで使うことができると思います。

$table = get_field( 'フィールド名' );

if ( $table ) {

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

        if ( $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!しかし残念ながら表なら何でもできるわけではありません。

colspanやrowspanのようにセルの結合設定までは再現が難しいようです。また、thタグについては一番上の行にしかつけることができず、左側へ設定はできないようです。

導入される際は、そこら辺を注意してください。しかし、逆に言えば簡単な表なら作れるのでいちいち簡単な表を作るのに力を注ぐ必要がなくなります。

より簡単なCMSを構築するために是非とも導入をご検討される事をおすすめします。

今回で、advanced custom fieldsアドオン特集は終了です。この他にもまだまだたくさんのアドオンが存在します。全てを把握しているわけではないので他にももっと便利なアドオンも隠れている可能性があります。

こちら近日中にその他アドオンをいくつか紹介するための記事を作りたいと思います!

ありがとうございました!


WebJoyで使用しているサーバー情報

合同会社WebJoyでは、エックスサーバーを主に使用しています。その理由はWordpressを運営する上で重要なサーバースペックが高く、かかる費用も安いため個人でのご契約でもおすすめしています。会社経営をする前から約8年間お世話になっているサーバーです。ブログを始めたい方は是非ご契約ください!上記の画像をクリックすることでエックスサーバーの公式サイトに移動します。

この記事を書いた人

長崎のホームページ制作会社 合同会社WebJoy
代表社員 朝永祐太

長崎県にてホームページ制作を行っております。今の時代、Webを活用するためにはブログは必須だと感じ、最近ではブログ集客に力を注ぎ始めました。
実際に当ブログのアクセスを増加させることでよりよい提案ができればと考えております。
そして、近い将来、有益な情報配信を主とした企業を目指しております!

関連記事

2017年12月10日コレで完結!Bootstrapの使い方3
2017年12月07日まだまだ出来ることたくさん!Bootstrapの使い方まとめ その2
2017年12月01日スマホサイト構築に便利!Bootstrapの使い方まとめ その1
2017年01月01日CSSで四則計算!CSS calcの使い方
2016年06月19日advanced custom fields特集その8!Repeater & Flexible Content Collapserの使い方
  • Facebookページ
  • 公式twitterアカウント