前回の続きです。
新たな問題というのは、WordPress のビジュアルエディターと ” iframe ” の問題です。
何が問題かというと、WordPress のビジュアルエディターが <iframe> タグを消してしまうこと。
私が制作に関わったサイトでは、基本的に <iframe> を使うことはほとんどありません。
ただ、例外もあって、Google map などでどうしても使う必要のある場合があります。
今回の案件も Google map が必要のなので、必然的に <iframe> を使わないといけません。
しかし、Google map のコードを貼り付け、ビジュアルエディターに切り替えた途端 <iframe> タグが消えてしまいます。
前回の記事同様、私がメンテナンスする場合にはビジュアルエディターを使わないので問題ないのですが、今回の案件はクライアントと Web のことをあまり知らないグラフィックのデザイン事務所が、更新作業を担当します。
とうことで、やはりビジュアルエディターははずせない。
色々なサイトを調べてみましたが、ほとんどのサイトが解決策としてユーザープロフィールの『 ” ビジュアルリッチエディターを使用しない ” にチェックをする。』と… 🙁
そんなことは、ちょっと考えれば気がつくし何の解決策にもなっていない。
WordPress のビジュアルエディターで iframe を使うのは無理だとほぼ断言しているようなサイトまである。
そんなことはないだろうと、今度は英語サイトを調べてみることに。
まず、基本は TinyMCE のサイトからということでアレコレ調べていると、フォーラムの中の Tips, Tricks & HowTo’s というカテゴリの中で Insert a IFrame というトピックスを見つけた。
その中の『ドキュメントを読むべきだ』という回答の中に『コードを追記をすればいい』というような記述がある。
でも、どのドキュメントを読めばいいのかよくわかりません。
引き続き調べていると、今度は WordPress.ORG のフォーラムで Google Maps (iframe) deleted with TinyMCE and Advanced TinyMCE (6 posts) というのがありましたけど、肝心の tiny_mce_config.php が見つかりません。
記事にあるように『Locate the file ‘tiny_mce_config.php’ ( it should live in %your_blog_root%/wp-includes/js/tinymce/ )』を見ましたがありません。
回答が2年前ということで、当然バージョンも違うだろうと他のディレクトリも探しましたが、tiny_mce_config.php 自体がありません。
同じトピックスの一番新しい回答（それでも1年前ですが…）には、『I was able to fix this (using TinyMCE Advanced too) by adding the following line to my functions.php file:』と書いてある。
my functions.php file にコードを書けといっているが、my functions.php file って何？
TinyMCE Advanced でも大丈夫みたいなので、これで解決できればいうことない。
また、[resolved] WordPress 2.8 – no more iframe? (7 posts) という別のトピックスにも先ほど同じく tiny_mce_config.php にコードを記述しろと…
で、そのまま読んでいくと中ほどに『That bit of code should do the trick, I think. Try it in your theme’s functions.php file, or create a plugin and put that in it.』というのを見つけた。
思わず「これだぁ！」と心の中で叫びました。 😀
先ほどの my functions.php file の ” my “ って、テーマの中の functions.php のことだったのね…
フォーラムからの引用ですが、記述するコードというのは、
[php]
function add_iframe($initArray) {
$initArray[ ‘extended_valid_elements’ ] = “iframe[ id | class | title | style | align | frameborder | height | longdesc | marginheight | marginwidth | name | scrolling | src | width ]”;
return $initArray;
}
add_filter(‘tiny_mce_before_init’, ‘add_iframe’);
[/php]
です。（↑ 改行するように & 読みやすいように半角スペースを入れてます。動作しない場合は半角スペースを削除してくださいね）
このコードをテーマの中の functions.php に記述すれば OK です。
自分でテーマファイルを作成した場合などには、新規で functions.php も作成する必要があるかも知れません。
wp-includes ディレクトリにある functions.php ではありませんので、ご注意を！
ビジュアルエディターで確認してみると iframe タグが削除されていません。
見事に問題解決です。
Mr.Otto に感謝感謝です。
これで、クライアント、グラフィック事務所が、更新作業でビジュアルエディターを使うことができます。
めでたしめでたし。 😀
今回の案件のように WordPress で制作したサイトで Google Maps を使用しているサイトや使用を検討しているサイト、または別の用途で iframe を使用したい方は一度お試しを。
ただし、上記のコードはフォーラムからの引用ということ、functions.php に記述および使用はオウンリスクでお願いしますね。
この記事に書いてあることが原因で生じたトラブルについては一切の責任を負いかねますので、ご利用は各自の責任でお願いします。
それにしても、日本語で調べた時にこのような解決策を見つけられなかったのは、調べ方が悪かったからなのかなぁ…
解決策として『ビジュアルエディターを使わない。』ばっかりでしたからね。
結果的には WordPress.ORG のフォーラムで解決策が見つかったわけですけど、皆さん知らないのかな？
それとも知らなかったのは私だけで周知の事実だった？
う〜ん、何とも言えない…
やっぱり、英語サイトを調べないといけませんねぇ。
