WordPress エディターでインライン SVG コードをサポートする方法、wordpresssvg_PHP チュートリアル
- WBOYオリジナル
- 2016-07-12 08:55:391208ブラウズ
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 に追加します。
リーリー
注意深い友人は、上記の 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
関連書籍:
WordPress で SVG 画像のアップロードをサポートしましょう
WordPressのwp_title()関数の使い方を詳しく解説
SVG でのいくつかのアニメーション要素の使用法を紹介します 。