WordPress エディターでインライン SVG コードをサポートする方法、wordpresssvg

WordPress エディターでインライン SVG コードをサポートする方法、wordpresssvg_PHP チュートリアル

WBOY

リリース： 2016-07-12 08:55:39

オリジナル

1257 人が閲覧しました

WordPress エディターでインライン SVG コード、wordpresssvg をサポートする方法

WordPress エディターの SVG サポートは常に非常に不親切です。まず第一に、SVG ファイルをアップロードすることも、SVG ファイルをコンテンツに自動的に埋め込むこともできません。正常に表示できます。同時に、インライン SVG コードはまったく認識されず、SVG コードは容赦なく自動的に削除されます。

前回の記事では、WordPress で SVG 画像のアップロードをサポートする方法を紹介しましたが、これによりこの問題は部分的に解決されるようです。最近、開発プロセス中に、WordPress ビジュアルエディターでインライン SVG (インライン SVG) コードを使用する必要がある状況に多数遭遇しました。

WordPress は TinyMCE エディターを使用していることもご存知かと思いますが、TinyMCE エディターは標準の HTML5 タグのみをサポートしており、WordPress エディターで「ビジュアル」と「テキスト」を選択すると、タグを切り替えるとすべて SVG コードが認識されません。コードはきれいに削除されています。

WordPress の TinyMCE で SVG をサポートする方法については、インターネット上で多くの議論が行われています。TinyMCE 拡張タグの設定に関するドキュメントも TinyMCE 公式 Web サイトにあります。主に、extended_valid_elements、custom_elements、および valid_children の 3 つの構成ポイントがあります。以下は、WordPress エディターを設定するためにインターネットからコピーされ、ネチズンによって提供されたコードです:

リーリー

一部のネチズンは以下で十分だと考えています:

リーリー

一部のネチズンは次のような提案をしました:

上記の提案はどれも、個別に使用した場合には成功しないようですが、それぞれの提案は問題の一部を解決するようです。実験を繰り返した結果、WordPress の TinyMCE エディターで SVG が削除されるのをうまく防ぎ、適切な形式で保存できる次の方法を見つけました。

まず、次の PHP コードを function.php に追加します。リーリー

上記のWordPressフィルターに、SVGタグ要素をすべて追加しました（ワイルドカード「*[*]」を使用する方法については、私は試していません。興味のある友人は試してみてください。フィードバックは歓迎です。）

注意深い友人は、上記の SVG タグ名がすべて小文字に変更されていることに気づいたかもしれません。明らかに、公式の SVG 仕様では、SVG タグ名の大文字と小文字に意味があると規定されています。しかし、実験してみたところ、キャメルケースの SVG タグ名を使用しても機能しませんでした。おそらく HTML コードでは大文字と小文字が区別されません。

次に、WordPress の TinyMCE エディターで、すべての SVG コードを

で囲み、TinyMCE エディターが SVG コードの元のインデント形式を維持できるようにします。

3 番目に、コードにまたは「申し訳ありませんが、お使いのブラウザは SVG をサポートしていません」という文を追加します。

リーリー

上記の方法を実装した後、SVGコードを埋め込んだ後は、通常のHTMLコードを記述するのと同じように、削除されたり削除されたりすることはありません。 TinyMCE エディターの SVG コードの処理メカニズムについては、詳細な調査は行っていません。上記の方法は症状を治療するだけで、根本的な原因は治療しません。おそらくWordPressのバージョンアップやTinyMCEのバージョンアップに伴い、これらのメソッドは無効になってしまうと思います。

もっと賢い方法がある場合は、コメントで共有してください。ありがとうございます!

元のアドレス: http://www.manongjc.com/article/657.html