wordpressでsvgを使うための備忘録 #svg #wordpress

wordpressでsvgを使うための備忘録 #svg #wordpress

wordpressでは標準のままだとsvgを扱うことができません。メディアを追加しようとしても不正なファイルだと怒られるし、ビジュアルエディタを使ってもうまく表示できなかったり、<svg>タグを消されたりして踏んだり蹴ったりです。

今回はwordpressでsvgを使うための備忘録を書くことにしました。

1 インラインでSVGを使いたい

インラインでSVGを使う場合は、前回のsvgを使ってテキストにグラデーションをかけるという小技で使った方法がおすすめです。

まずはfunctions.phpで<svg>タグが消されないように調整してから

地道に投稿画面のテキスト表示のほうで、改行やスペースを取り除いていきます。特に改行を入れっぱなしにしておくと、いちいち<br>が入ってまったく表示されない上に、意味不明なソースができあがるので注意してください。

2 メディアを追加でsvgを画像として使いたい

wordpressのメディアを追加のボタンを使ってsvgを画像として認識させるためには、functions.phpに

を追加して、svgを画像として認識してもらう必要があります。それでもダメなら、.htaccessに

を追加しておくともしかしたらうまくいくかも。

3 svgを<embed>や<object>で使いたい

せっかくsvgにはインタラクティブな機能があるので、フル活用したいときもあります。テーマファイルに直接書き込むときは、<embed>でも問題なく使えるのですが、投稿からやろうとするとうまくいきません。

これは、どうしようもないのかなと悩んでいたのですが、5年位前のwordpress本家のフォーラムに同じようなことを質問している方がいました。

3-1 いっそあきらめて<iframe>を使う

<embed>だろうと<object>だろうと、svgの挙動はあまり変わらないのでいっそのこと<iframe>を使って読み込むのも一つの手です。これなら投稿画面からでも難なく使えるはず。

3-2 <object>~</object>の中に<img>を挟んで使う

これは先程のフォーラムの中に書いてあったことですが、

とテキストエディタのほうで書くことで、対応しているブラウザでは<object>の中身を非対応のブラウザでは<img>のほうを表示するという方法だそうです。ただ、これはビジュアルエディタでは非対応な方法らしく、ビジュアルエディタに切り替えると<object>タグ自体が消えてしまうことがあるだとか。

まとめてみると…

インラインで使うか、<img>として使うか、<iframe>や<object>として使うかがsvgをwordpressで使うための選択肢のようです。


コメント(Facebook・Twitter・WordPressアカウントでもコメントできます)

Back to Top