WordPressでSVG画像ファイルをアップロードする方法

WordPressサイトのグラフィックを大幅にアップグレードする準備はできていますか？どんなデバイスでも鮮明に表示され、ピクセル化や歪みのない、無限に拡大可能なロゴやアイコンをイメージしてください。本ガイドでは、 WP Media Folderを使用してWordPressでSVGファイルをアップロードおよび管理する方法を、開発者でなくても理解できるように説明しています。.

このステップバイステップのチュートリアルでは、SVGファイルの利点、デザイナーがそれらを愛用する理由、そしてSEOとページのパフォーマンスに優れている理由を説明します。信頼できるプラグインの使用からシンプルなコードの調整まで、SVGアップロードを有効にする複数の簡単な方法を学び、サイトを安全に保つための賢い戦略をプラスします。.

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

なぜSVGはスケーラブルグラフィックスに最適なのか

スケーラビリティ

軽量でSEOに適しています - SVGファイルはラスター画像よりも小さく、テキストベースのXMLであるため、検索エンジンが直接主要な要素（代替テキスト、タイトルなど）を読み取ることができます。

スタイルとアニメーション - CSSまたはJavaScript経由でSVGを操作できます。ホバー効果やアニメーションが欲しいですか？簡単です。

アクセシビリティ - 適切に設定されたSVGは、スクリーンリーダーが解釈できるアクセシブルなテキストタグとロールを含み、利用するもう一つの確かな理由です。

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

WordPressはデフォルトでSVGをブロックします（SVGはXMLであり、悪意のあるコードを含む可能性があるため）。ただし、SVGサポートを有効にする信頼できる方法が3つあります:

1. プラグインを使用する

a) WPCode + SVGスニペット

• 無料のWPCodeプラグインをインストールする。.
• ライブラリから 'Allow SVG Files Upload' スニペットを追加し、有効化する。.
• デフォルトでは、管理者のみがSVGをアップロードできます。.

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

• 「SVGサポート」をプラグイン > 新規追加からインストールして有効化してください。.
• 設定で、「管理者に制限する」および/または「高度なモードを有効にする」（インライン表示、CSSスタイリング）をチェックします。.
• Media > Add New またはドラッグ＆ドロップでSVGをアップロードする。.

c) その他のオプション:

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

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

次のコードを使用できる: 

function enable_svg_upload($mimes) { $mimes['svg'] = 'image/svg+xml'; return $mimes; } add_filter('upload_mimes', 'enable_svg_upload'); 

場所:

欠点: デフォルトではサニタイズされないため、サニタイザと併用しないと危険である。管理者へのアップロードが制限される（カスタマイズ可能）。

3. セキュリティに関する考慮事項

 SVG = XML であり、次のものを包含する可能性がある:

• XSS攻撃 (JavaScript)。
• XXE攻撃

ベストプラクティス:

• プラグインを使用 SVGサポート、SVGセーフ、HappyFilesなどのサニタイズ機能が組み込まれています。
• オンラインツールでサニタイズする
• SVGアップロードを制限する

WP Media Folder と WordPress 上の SVG について

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

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

-高度なフィルタリング、ソート、ドラッグアンドドロップ

 - 名前の変更、透かし、一括置換、プレビュー、ダウンロード

- Page Builders、WooCommerce、WPMLなどの多くのツールと互換性がある。.

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

まとめ：SVGと WP Media Folderでサイトを向上させる

乱雑なメディアフォルダや最適化されていない画像ファイルに悩まされることはありません。代わりに、軽量で検索可能、かつ適応性のあるSVGの完全なポテンシャルを、 WP Media Folderの直感的な組織ツールで引き出してください。. 

コンテンツクリエイター、デザイナー、中小企業のオーナーなど、誰でもコードなしで強力なテクノロジーを利用できます。サイトの読み込みが速くなり、検索順位が向上し、見栄えがよくなります！何を待っていますか？こちら