SVGサポート

SVGサポート | Benbodhi

説明

SVGファイルをメディアライブラリに安全にアップロードし、他の画像と同じように使用します。
しかし、SVGサポートにはもっと多くの機能があります!!!詳細については、以下をお読みください。
WordPressサイトでSVG画像を使用する場合、CSSを使用してSVG内の要素のスタイルを設定するのは難しい場合があります。今、あなたは簡単にできます!
スケーラブルベクターグラフィックス(SVG)は、最新のWebデザインで一般的になりつつあり、品質を損なうことなく任意の視覚サイズにスケーラブルな小さなファイルサイズの画像を埋め込むことができます。
このプラグインは、名前が示すようにSVGサポートを提供するだけでなく、単純なIMGタグを使用して完全なSVGファイルのコードを簡単に埋め込むこともできます。
このプラグインは、クラス「style-svg」をIMG要素に追加することにより、「style-svg」クラスを含むすべてのIMG要素を完全なSVGコードに動的に置き換え、インラインでレンダリングします。
これの主な目的は、SVG要素のスタイリングとアニメーションを可能にすることです。通常、embed、object、またはimgタグのみを使用する場合、スタイリングオプションは制限されます。
特徴

メディアライブラリのSVGサポート
SVGコードをインライン化する
新しい画像ウィジェット(WordPress 4.8以降)で動作します
CSSを使用してSVG要素を直接スタイル設定する
CSSとJSを使用してSVG要素をアニメーション化する
手順が記載された超簡単な設定ページ
SVGアップロード機能を管理者のみに制限する
カスタムcssターゲットクラスを設定する
非常に使いやすい–SVGファイルの複雑な使用を簡素化します

使用法
まず、SVGサポート(このプラグイン)をインストールしてアクティブ化します。
有効にすると、他のファイルと同じように、SVG画像をメディアライブラリにアップロードできます。
管理者は、管理者設定ページの[設定]> [SVGサポート]に移動して、SVGファイルのアップロードを管理者のみに制限し、必要に応じてターゲットとするカスタムCSSクラスを定義することもできます。
画像として使用するためにSVGファイルをアップロードするだけでよい場合は、「詳細モード」を有効にする必要はありません。無効のままにしておくと、フロントエンドスクリプトがキューに入れられず、不要な設定が非表示のままになります。
高度な使用の場合:[設定]> [SVGサポート]で[詳細モード]を有効にします。
詳細モードを有効にすると、標準画像と同じようにSVG画像を埋め込むことができ、必要なIMGタグにクラス「style-svg」(または定義したカスタムクラス)を(テキストビューで)追加できます。このプラグインは、実際のSVGコードと交換します。
例えば:
alt-text

または
alt-text

IMGタグ要素全体が、SVGの実際のコードに動的に置き換えられ、内部コンテンツをターゲットにできるようになります。
これにより、CSSとJSを使用してSVG内の要素をターゲットにすることができます。
とにかく消えるので、IMGタグから他のすべての属性を削除できます。
投稿またはページにSVGを挿入するときに、クラスをIMGタグに自動的に追加する設定があります。これにより、不要なタグも削除されます。
2.3.11以降、1つのチェックボックスですべてのSVGファイルを強制的にインラインでレンダリングできます。さらに、JSファイルの縮小バージョンと拡張バージョンのどちらを使用するかを選択できるようになりました。
注目の画像:投稿/ページがSVGとともに注目の画像として保存されている場合、チェックボックスが注目の画像のメタボックスに表示され、インラインでレンダリングできます(詳細モードがアクティブな場合のみ)。
注:SVGが表示されていない場合は、高さと幅が0で表示されている可能性があります。この場合、SVGファイルを正しく表示するには、CSSで独自の高さと幅を設定する必要があります。
問題が発生した場合は、[サポート]タブを使用してください。できる限り迅速にご連絡いたします。
セキュリティ
ファイルのアップロードを許可する場合と同様に、潜在的なリスクが伴います。信頼できる場合にのみ、ユーザーにSVGファイルのアップロードを許可します。設定ページからのみ、SVGの使用を管理者に制限するオプションがあります。デフォルトでは、メディアライブラリへのアクセスまたはupload_files機能を持っている人は誰でも、SVGファイル(つまり、管理者、作成者、編集者)をアップロードできます。 SVGファイルは実際にはXMLであるため、アップロード権限を誰が持っているかを気にしないと、誰かが悪意のあるコードを挿入できることに注意してください。
フィードバック

私はあなたの提案とフィードバックを歓迎します– SVGサポートをご利用いただきありがとうございます!
Twitterで@benbodhiにタグを付けてください#svgsupport

注:このプラグインが気に入っていただければ幸いです。少し時間を取って評価してください。
翻訳
ここで翻訳を投稿できます。
WordPressの翻訳は初めてですか?開始するには、翻訳者ハンドブックをお読みください。

インストールプロセスが比較的単純なためか、公式Webサイトでは当面詳細なインストールプロセスを記述していません。 このプラグインのインストールで問題が発生した場合は、検索エンジンまたは以下のコメントで解決できます。解決を支援します

プラグインの作者

Benbodhi

プラグインの公式ウェブサイトアドレス

https://wordpress.org/plugins/svg-support/
SVGサポートプラグインの使用で問題が発生した場合は、以下にコメントしてください。問題の解決に最善を尽くします

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です