Aopika技術日記

WEB制作の情報を自分のためにまとめたい

WordPressでテーブルレイアウトの投稿を簡単に実装

WordPressの標準エディタではテーブルレイアウトを作成するためにはコードエディタでテーブル組をしなければいけませんが、これがブログ(記事)の運用となると面倒くさかったり、htmlの知識のない人が更新できなくなったりとします。

今回はプラグインを入れることでビジュアルエディタでもEXCELのようにテーブルレイアウトが簡単に制作ができる「TinyMCE Advanced」の設定を紹介します。

プラグインのインストール

プラグイン」>「新規追加」より「TinyMCE Advanced」を検索してインストールしてください。そのまま「有効化」を行います。

f:id:hika09:20161016185935j:plain

たったこれだけの操作で標準のエディターが下記のようにカスタマイズされ便利な機能が使用できます。

f:id:hika09:20161016185957j:plain

 

記事投稿画面での使い方

テーブルレイアウトを導入する

テーブルレイアウトを導入するには「テーブルアイコン」をクリックします。すると行と列を何マスで生成するか選択することができますので、作りたいテーブルの項目数に合わせて制作しましょう。また行・列ともに後から追加も削除もできるので安心です。

f:id:hika09:20161016190017j:plain

 

セルを結合

TinyMCE Advancedでは隣接する行や列の結合も簡単に行えます。

結合したい行(もしくは列)を選択します
「テーブルアイコン」>「セル」より「セルの結合」を選択
セルが結合される

f:id:hika09:20161016190117j:plain


※すでに値が入っているセル同士を連結した場合はセルの値も結合されるのでご注意ください

 

セルの分離 

セルの結合を分離する場合は下記の手順の通りです。

分離したい行(もしくは列)を選択します
「テーブルアイコン」>「セル」より「セルの分離」を選択
セルが分離される

 


TinyMCE Advancedについて

TinyMCE Advancedは表の導入だけでなく動画や画像、引用文などその他様々な機能を備えていてとても便利です。

 

初期の設定ではエディターに表示されていない可能性もありますが、「設定」>「 TinyMCE Advanced」より機能を追加したり、削除したりできます。

また、自分好みのレイアウトにも変更可能なので、使いながら自分好みにカスタマイズしていくといいと思います。

f:id:hika09:20161016190132j:plain