WordPress のビジュアルエディターで table 編集…

この記事をフルスクリーンで見るフルスクリーンモードを終了するには Esc キーを押してください。または、ココをクリックしてください。

最近、30ページほどのサイトを制作しました。
といってもコーディングの作業がほとんどです。
デザインは、知り合いのグラフィックのデザイン事務所が担当、更新情報やニュースなどはクライアントが更新。
また、その他の更新作業はデザイン事務所でおこなう。
という、条件のサイトです。
といっても、グラフィックが専門で Web のことをあまり知らないデザイン事務所なので、手に負えない作業は私がすることになると思いますが…

ということもあり、今回 WordPress にてすべて制作することにしました。
既存のサイトにブログ(WordPress)を追加したことはありますが、仕事としてサイトすべてを WordPress で制作するのは初めてです。
Movable Type を使ったサイト制作・実績は過去に何度もあるのですが、WordPress はありません。
まぁ、このサイト自体が WordPress で構築していますので、まったく経験がないというわけではありませんけどね。
なので、テンプレートの制作やコーディングなど、制作するにあたっての実際の作業は問題なく、必要であろうと思われるプラグインの選定も完了しました。

しかし、更新のことを考えるとちょっと問題が…

会社概要や沿革などを『テーブル(html タグの table)』を使って表組することは多いと思います。
今回の案件でも使っています。
制作時や私が更新する場合には問題ないのですが、今回の更新作業はクライアントとグラフィックのデザイン事務所でおこなう予定です。
当然、ビジュアルエディターを使うことになると思います。
WordPress の標準ビジュアルエディターには、テーブルの編集機能はありません。
私が更新作業や記事の投稿をする場合は、ビジュアルエディターを使いませんので全然気にしていませんでした。
でも、今回はそういうわけにはいきません。

table タグの構造自体それほど難しくないので、デザイン事務所の更新担当者に教えて、ビジュアルエディターではなく『HTML』で更新作業をしてもらう方法も考えられます。
これといった方法がない場合には上記の方法で作業をしてもらうしかないのですが、念のためちょっと調べてみることに。

色々と方法はあるようですが、今回はWordPress の標準ビジュアルエディターである ” TinyMCE ” の機能拡張版(?)である、TinyMCE Advanced を使うことにしました。
使い方もそれほど難しくなさそうです。
TinyMCE Advanced の設定画面で追加したい機能をドラッグすればビジュアルエディターに反映される。
今回は、テーブルの編集機能だけを追加しましたが、他にも『引用(Quote)』や『レイヤー(Layer)』なども追加できるみたいです。
ブログで記事を書くことが多い場合には『引用(Quote)』はありがたいかも知れませんね。

TinyMCE Advanced

TinyMCE Advanced の設定で、” Import the current theme CSS classes ” にチェックを入れると、実際のスタイルシートで表示してくれるので便利かも知れません。
もうひとつ、” Stop removing the <p> and <br /> tags when saving and show them in the HTML editor ” というのがあるのですが、こちらは整形済みの HTML ファイルを記述、もしくは貼り付けた場合に意図しないところに改行コードを入れてしまうことがあるようです。
<span> タグが続くような場合に見やすいように改行しているとその位置に <br /> を入れるようです。
整形済みのすべての改行位置に <br /> タグを入れるわけではないようですが、注意した方がいいかも知れませんね。

というわけで、テーブルの編集に関してはとりあえず解決。 🙂

ただ、もうひとつ新たな問題が…
それは次回に。

スポンサーリンク

  • このエントリーをはてなブックマークに追加

フルスクリーンモードを終了するには Esc キーを押してください。または、ココをクリックしてください。