SVGをWordPressにアップロードする方法：2つの方法

パー パッシーガイ | WordPressのチュートリアル

SVGをWordPressにアップロードする方法を学びたいですか？ このチュートリアルでは、これを実現する方法を紹介します。.

Web管理者とWebデザイナーは、仕事でさまざまなメディアファイル形式を使用する必要があります。 今日最も人気のある形式のXNUMXつは、XMLベースのベクトル形式であるSVGです。 残念ながら、すべてのブラウザとプラットフォームがSVGをサポートしているわけではないため、最初にSVGサポートを手動で有効にする必要があります。

この記事では、SVGサポートプラグインを使用してSVGファイルをWordPressWebサイトにアップロードする手順について説明します。 また、この特定のメディアファイル形式を取り巻くセキュリティの問題とSVGを使用する価値がある理由に関するいくつかの質問にも答えます。

はじめに、SVGとその仕組みについて理解しましょう。

ただし、開始する前に、WordPressをインストールしたことがない場合は、 WordPressのブログ7の手順をインストールする方法 et あなたのブログにワードプレスのテーマを、見つけインストールしてアクティブにする方法 

それから私たちがここにいる理由に戻りましょう。

SVGとは何ですか？

スケーラブルベクターグラフィックス（SVG）は、XMLテキストベースのベクターグラフィックス画像形式です。 JPGやPNGなどの一般的な画像形式は、ピクセルと呼ばれる多数の小さな正方形で構成されていますが、この形式は、画像属性を記述するためにXMLマークアップ言語に依存しています。

1月の2022では、 世界中のすべてのウェブサイトの42％ SVGを使用します。 この割合は、2021年XNUMX月以降に増加しています。 ウェブサイトの29,4％ それを使用しました。 PNGやJPG形式と同様に、SVGはGoogle、Wikipedia、YouTubeなどのトラフィックの多いWebサイトで人気があります。

SVGのもうXNUMXつの優れた点は、すべての主要なブラウザーで広くサポートされていることです。

ここにあります ブラウザのリスト SVGファイル形式をサポートするもの：

ナビゲーター部分的なサポートフルサポート
ボード–バージョン12-18、79-96、97
FirefoxVersion 2バージョン3-94、95、96-97
Android版Firefox–Version 95
クロム–バージョン4-96、97、98-100
Chrome for Android–Version 96
SafariVersion 3.1バージョン3.2-15.1、15.2、TP
オペラ–バージョン10-81、82
ミニオペラ–すべてのバージョン
オペラモバイル–リリース12-12.1、64
iOS上のSafari–リリース3.2-15.1、15.2
Androidブラウザバージョン3-4.3リリース4.4-4.4.4、96
Android用UCブラウザ–Version 12.12
サムスンインターネット–リリース4-14.0、15.0
QQブラウザ–Version 10.4
バイドゥブラウザ–Version 7.12
KaiOSブラウザ–Version 2.5

SVGはどのように機能しますか？

SVGはXMLを使用してXNUMX次元のベクター画像を生成します。 JPGやPNGとは異なり、ベクターグラフィックにはピクセルがありません。 代わりに、それらの動作はXMLテキストファイルで記述されます。

このため、SVGは、コードのように検索、インデックス作成、スクリプト化、変更、および圧縮できます。 その結果、誰でもテキストエディタまたはベクターグラフィックソフトウェアを使用してそれらを作成できます。

WordPressはSVGをサポートしていますか？

WordPressにはセキュリティリスクがあるため、デフォルトではSVGのサポートはありません。SVGを取り巻くセキュリティの問題については後で詳しく説明します。

SVGグラフィックをWordPressWebサイトにアップロードするときに表示されるエラーメッセージは次のとおりです。

あります 現在の議論 SVGをWordPressのコア機能の一部にすることについて。 それまでは、クリエイティブになり、他のソリューションを使用してSVG画像をWordPressにアップロードする必要があります。

なぜWordPressSVGを使用するのですか？

セキュリティ上の問題はありますが、さまざまな利点があるため、多くのユーザーがこの画像形式を使用しています。 SVGファイルを使用する利点のいくつかを次に示します。

  • Évolutivité： SVGはベクター画像形式であるため、SVGファイルはすべての画面解像度で同じ品質を維持します。 この利点は、それらを拡大した後にも存在します。そのため、多くの人がこのスケーラブルな画像形式をアイコンやロゴに使用しています。
  • ファイルサイズが小さい ：SVGファイルは、他の画像よりも占有するWebストレージ容量が少なく、読み込みがはるかに速いため、Webサイトのパフォーマンスを簡単に向上させることができます。
  • SEOフレンドリー : Google は SVG ファイルのインデックスを作成し、Google 画像検索に表示できるようにし、検索作業を改善します。 SEO。 他のタイプの画像では、alt 属性の最適化に限定されます。
  • コードベースのSVG テキストエディタまたはベクターグラフィック編集ソフトウェアを使用して編集できます。 Webサイト用にSVGファイルを最適化したり、アニメーションを追加してグラフィックをインタラクティブにすることもできます。

WordPressとセキュリティのSVG

SVGは本質的にXMLテキストファイルであるため、他の画像形式に影響を与えない悪用可能な脆弱性があります。 したがって、悪意のあるコードで簡単に乗っ取って、システムに対してクロスサイトスクリプティング（XSS）およびXML外部エンティティ（XXE）攻撃を仕掛けることができます。

このため、SVGファイルを処理してWordPressに追加する場合は注意が必要です。

セキュリティリスクを最小限に抑えるために、WordPressメディアライブラリにアップロードする前に、必ずSVGファイルをサニタイズしてください。 このプロセスにより、疑わしいコードとエラーが削除され、画像がWebサイトにとって安全になります。

アップロードされたSVGファイルはSVGプラグインを使用してクリーンアップできます。その手順については後で説明します。 ただし、XNUMX回消毒することをお勧めします SVGサニタイザーテスト –

WordPress Webサイトを保護する別の方法は、SVGのアップロードを信頼できるユーザーのみに制限することです。 選択したユーザーは、SVG形式を取り巻くセキュリティの問題に注意する必要があります。これにより、疑わしいソースからSVGファイルを取得することを思いとどまらせることになります。

2つの安全な方法でSVGファイルをWordPressにアップロードする方法

技術的には、WordPress に SVG サポートを追加するには XNUMX つの方法があります。 WordPressのプラグイン または手動でアクティブ化します。 どちらを選択する場合でも、悪意のあるダウンロードを最小限に抑えるために、ダウンロード権限を管理者と信頼できるユーザーのみに限定することを強くお勧めします。

WordPressプラグインを使用する

このチュートリアルでは、 SVG Support。 この WordPressのプラグイン は、SVG ファイルをメディア ライブラリにアップロードするときに自動的にアクティブになる SVG サニタイザー ライブラリを使用します。 また、セットアップも簡単で、無料で使用できます。

SVGサポートを構成する手順は次のとおりです。

  1. Iプラグインをインストールします そしてそれをアクティブにします。
SVGをWordPressにアップロードする
  1. アクセス先 設定 -> サポート SVG WordPressダッシュボードから。
  1. オプションの横にあるチェックボックスをオンにします 管理者に制限する アップロード権限を制限します。 オプションについても同じようにします 詳細モードをアクティブにする インラインSVGレンダリングやCSSスタイリングなどの高度な機能にアクセスしたい場合。
SVGをWordPressにアップロードする
  1. 変更を保存した後、SVGファイルのメディアライブラリへのアップロードを安全に開始できます。

WordPressSVGサポートを手動で追加する

この方法では、ファイルを編集します のfunctions.php あなたのワードプレスのウェブサイトの。 したがって、PHPに精通していて、SVGのセキュリティ問題を完全に理解している場合は、これらの手順に従うことを強くお勧めします。

あなたを確認してください WordPressのウェブサイトをバックアップする 設定ミスの場合のデータ損失を回避するために変更を加える前。

次の手順では、次のようなFTPクライアントを使用してWordPressでSVGを手動で有効にする方法を説明します。 FileZillaを.

  1. ホストでWebサイトのファイルディレクトリに移動します
  2. アクセス先 public_htmlの -> WP-含む。 あなたがするまで下にスクロールします 関数を検索します。php.
SVGをWordPressにアップロードする
  1. このファイルを右クリックし、[表示/編集]を選択してファイルを開き、次のコードスニペットを貼り付けます。
function add_file_types_to_uploads($file_types){
$new_filetypes = array();
$new_filetypes['svg'] = 'image/svg+xml';
$file_types = array_merge($file_types, $new_filetypes );
return $file_types;
}
add_filter('upload_mimes', 'add_file_types_to_uploads');
  1. 変更を保存して、新しいSVGファイルをアップロードしてみてください。 プロセスが成功した場合、メディアライブラリはファイルのアップロードを受け入れる必要があります。

SVGファイルの多くの利点は、このファイルタイプの人気の高まりに貢献しています。 残念ながら、XMLテキストファイルはコードインジェクションを起こしやすいため、WordPressにデフォルトでSVGサポートが含まれていない主な理由です。

つまり、WordPress Web サイトで SVG ファイルを受け入れるには XNUMX つの方法があります。 WordPressのプラグイン またはファイルを編集する のfunctions.php。 アップロード権限を制限することに加えて、SVGファイルをWebサイトのメディアライブラリに安全にアップロードすることができます。

その他の推奨リソース

ご相談もお待ちしております ressources あなたのウェブサイトとブログのより多くの所有権と制御を取得するには、以下をご覧ください。

まとめ

SVGをWordPressにアップロードする方法を示すこのガイドは以上です。 この記事が、SVGファイルをWordPressWebサイトにアップロードすることの利点とリスクについての洞察を与えてくれることを願っています。 ご不明な点やご提案がございましたら、内でお知らせください commentaires.

しかし、あなたも私たちに相談することができます ressources、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合は、 WordPressブログ作成 または Divi：史上最高のWordPressテーマ.

一方で、 さまざまなソーシャルネットワークでこの記事を共有する.   

...  

コメントを投稿

あなたのメールアドレスは公開されません。 必須フィールドは、マークされています *

このサイトでは、望ましくないものを減らすためにAkismetを使用しています。 コメントデータの使用方法の詳細.