WordPressにSVG画像ファイルを追加する方法

WordPressサイトのグラフィックを本格的にアップグレードする準備はできていますか？どんなデバイスでもピクセル化や歪みがなく、鮮明に表示される、無限にスケーラブルなロゴやアイコンを想像してみてください。このガイドでは、 WP Media Folderを使ってWordPressにSVGファイルをアップロードして管理する方法を詳しく説明します。開発者でなくても、どなたでもご利用いただけます。

このステップバイステップのチュートリアルでは、SVGファイルのメリット、デザイナーがそれらを愛している理由、そしてなぜSEOとページのパフォーマンスに最適なのかを解き放ちます。 SVGアップロードを有効にするための複数の簡単なメソッドを学習します。信頼できるプラグインを使用することから、単純なコードの調整に加えて、サイトを安全に保つためのスマートな戦略。

Joomunitedの強力なメディア管理プラグインである WP Media Folderを使用します。 

SVGがスケーラブルなグラフィックに最適な理由

スケーラビリティ- SVGはベクトルファイルです。つまり、ロゴ、アイコン、またはレスポンシブデザインの品質を失うことなく、ズームイン、拡大、または縮小することができます。

Lightweight＆Seo -Friendly - SVGファイルはラスター画像よりも小さく、テキストベースのXMLであるため、検索エンジンは重要な要素（ALTテキスト、タイトルなど）を直接読み取ることができます。

スタイリングとアニメーション- CSSまたはJavaScriptを介してSVGを操作できます。ホバーエフェクトやアニメーションが必要ですか？簡単。

アクセシビリティ- 適切にセットアップされているSVGには、スクリーンリーダーが解釈できるアクセス可能なテキストタグと役割が含まれています。

WordPressにSVGを追加するソリューション

WordPressは、セキュリティリスクのためにデフォルトでSVGをブロックします（SVGは悪意のあるコードを含むことができるXMLです）が、SVGサポートを有効にするための3つの信頼できる方法があります。

1.プラグインを使用します

a） WPCode + SVGスニペット

• 無料のWPCodeプラグインをインストールします。
• ライブラリから「SVGファイルをアップロードする」スニペットを追加してアクティブ化します。
• デフォルトでは、管理者のみがSVGをアップロードできます。

b） SVGサポートプラグイン

• プラグインを介して「SVGサポート」をインストールし、新しい追加、アクティブ化します。
• 設定で、「管理者に制限」および/または「Advanced Modeを有効にする」（インラインレンダリング、CSSスタイリング）を確認します。
• メディアを介してSVGをアップロード>新規またはドラッグ＆ドロップを追加します。

c）その他のオプション：

• SVG Safe 、古いですが、まだ使用されています。
• SVGサポートは、 XSS/XXEリスクを防ぐためにアップロードをサニタイズします。
• HappyFiles/CatFoldersは、 SVGアップロードを消毒とプレビューで追加します。

2. functions.phpにコードスニペットを追加します

次のコードを使用できます。 

関数enable_svg_upload（$ mimes）{$ mimes ['svg'] = 'image/svg+xml'; $ mimesを返します。 } add_filter（ 'upload_mimes'、 'enable_svg_upload'）; 

WHERE： Themのfunctions.php（常に子供のテーマを抑制してください！）。

欠点：デフォルトでは消毒なし - 消毒剤と組み合わない限り、リスク。 adminに制限されているアップロード（それをカスタマイズできます）。

3。セキュリティ上の考慮事項

 svg = xml、それを含むことができます：

• XSS攻撃（JavaScript）。
• XXE攻撃（外部エンティティコール）。

ベストプラクティス：

• SVGサポート、SVG Safe、Sanitization Built -InのHappyFilesなどのプラグインを使用します
• オンラインツール（例えば、Darryll DoyleのSVG消毒剤テスト）を介して消毒します。
• SVGアップロードを管理者または信頼できるユーザーのみに制限します。

WP Media Folder とWordPressのSVGにとって重要な理由

WP Media Folder は、強力なメディアライブラリマネージャーです

- フォルダー/サブフォルダー構造

- 拡張フィルター、ソート、ドラッグ＆ドロップ

 - 名前を変更、透かし、バルクの交換、プレビュー、ダウンロード

- ページビルダー、WooCommerce、WPMLなどの多くのツールと互換性があります。

WP Media Folder 自体はSVGファイルを使用することはできませんが、SVGファイルを含むあらゆるファイルを整理、維持、管理することができます。

ラッピング：SVGと WP Media Folderでサイトを高めます

乱雑なメディアフォルダーと最適化されていない画像ファイルでレスリングを停止します。代わりに、 WP Media Folderの直感的な組織ツールで、軽量で検索可能で、適応性のあるSVGの可能性を最大限に発揮します。 

コンテンツクリエーター、デザイナー、中小企業のオーナーであろうと、コードなしで強力なテクノロジーを手に入れています。あなたのサイトはより速くロードされ、ランクが高く、見事に見えます！何を待っていますか？ここに行き、あなた自身のコピーを入手してください。