WordPress で SVG サポートを有効にする

WordPress では、ユーザーはさまざまな種類の画像ファイルをアップロードできます。 PNG や JPG など、通常の容疑者に気付くでしょう。 ベクター グラフィックスなど、他のファイル タイプを表示すると、さらに問題が発生する可能性があります。

幸いなことに、ベクター ファイルを Web サイトに組み込む方法はいくつかあります。 ネイティブ機能ではありませんが、スケーラブル ベクター グラフィックス (SVG) ファイルを使用して、WordPress サイトで 2 次元の画像を表示できます。 少し再設定するだけで、このファイル タイプを使用して、ロゴやその他のグラフィックスの一部を最適化できます。

注: WP Engine でホスティングしている場合、SVG ファイルの GZIP 圧縮をネイティブでサポートしています。

この記事では、SVG ファイルとは何か、およびそれらを使用する理由について詳しく説明します。 次に、Web サイトでそれらを使用できるようにする 2 つの方法について説明します。 また、重要なセキュリティ対策についても説明します。 始めましょう！

SVG とは

SVG ファイルは、ベクター画像の一種です。 ベクター ファイルは、より一般的な画像ファイル タイプとは構成が異なります。 たとえば、JPG は数千のピクセルで構成されています。 一方、SVG ファイルの場合はそうではありません。

ベクター画像は、書かれた一連の指示に似ています。 大きな画像を形成するピクセルは含まれていません。 代わりに、2 次元画像を作成するスキーマのようなデータ セットが含まれています。 つまり、SVG ファイルを使用することにはいくつかの固有の利点があります。

SVG を使用する理由

SVG には多くの特典があります。 これらは非常にスケーラブルであるため、イメージの品質に影響を与えることなく、必要に応じてサイズを操作できます。 ご存知かもしれませんが、JPG のサイズを拡大しようとすると、すぐに使用できないレベルまで品質が低下します。

ここで SVG が役に立ちます。 従来の写真を表示するためのものではありませんが、ビジネスのロゴ、アイコン、および Web サイトのその他の単純なグラフィックに最適です。

さらに、SVG ファイルは他の画像タイプよりも大幅に小さくなる傾向があります。 これは、サイトがグラフィックで行き詰まらないことを意味します。 さらに、SVG ファイルは Google によってインデックス化されており、かなり長い間使用されています。 これは、サイトの検索エンジン最適化 (SEO) にとって大きなメリットとなります。

SVG を WordPress にアップロードする方法

WordPress には標準で SVG のサポートが含まれていないため、Web サイトに SVG を含めるにはもう少し手間がかかるでしょう。 次のいくつかのセクションでは、プラグインと手動プロセスを使用して Web サイトに SVG ファイルを追加する方法について説明します。

方法 1: プラグインを使用する

多くの WordPress タスクと同様に、プラグインを使用すると SVG サポートを簡単に有効にすることができます。 適切なツールを選択し、いくつかの設定を構成するだけです。

ステップ 1: プラグインをダウンロードする

まず、SVG プラグインをダウンロードしてインストールする必要があります。 SVG サポートをお勧めします:

プラグインをインストールして有効化すると、WordPress ダッシュボードの[設定] > [SVG サポート]の下に新しいメニュー オプションが表示されます。 そこでは、Web サイト用に SVG ファイルのスタイルを設定する方法についての指示が表示されます。

さらに、いくつかの重要な管理設定を構成できます。 これには、SVG アップロード権限を管理者のみに制限することが含まれます。

その後、SVG ファイルをメディア ライブラリに直接アップロードできるようになります。 ただし、最初に注意すべき重要な項目が他にもいくつかあります。

ステップ 2: サーバーで SVG ファイルの GZip サポートを有効にする

このステップへのアプローチ方法は、Web ホストとサーバーの設定によって異なります。 たとえば、WP Engine では、特定のファイル タイプのリストに対して GZip が既に有効になっています。 そうは言っても、「image/svg+xml」はその 1 つではありません。

このタイプを Web サイトのリストに追加すると、SVG ファイルが適切かつ迅速に最適化されます。 すべてをスムーズに実行するには、このファイル タイプを.htaccessファイルに含める必要があります。

ステップ 3: プラグインがファイルを正しく保護していることを確認する

SVG ファイルを使用することのマイナス面の 1 つであり、このファイル タイプがまだ WordPress コアに組み込まれていない主な理由は、セキュリティの問題によるものです。 SVG ファイルは XML ベースであるため、特に外部エンティティ攻撃に対して脆弱です。

SVG プラグインを構成するときは、SVG アップロード アクセスを管理者のみに制限することをお勧めします。 ただし、さらに安全な方法は、SVG ファイルをアップロードする前に「サニタイズ」することです。 これにより、サイトを攻撃にさらす可能性のある不要な XML コードが排除されます。

SVG サポート プラグインには自動サニタイズが含まれていませんが、サニタイズを行うプラグインは他にもあります。 安全な SVG はその 1 つです。

または、独自のサニタイザーをインストールして、単独で使用することもできます。 Safe SVG の作成者は、プラグインのサニタイザー コードを GitHub で提供しており、誰でも使用できます。

WordPress Web サイトで SVG を有効にする次の方法を使用する予定がある場合は、独自のサニタイザーを配置することも良いオプションです。

方法 2: SVG ファイルのアップロードを手動で有効にする

プラグインを使いたくない場合は、WordPress サイトで SVG ファイルを受け入れるように手動で有効にすることができます。 次に、そのプロセスがどのように機能するかを見ていきます。

ステップ 1: サイトの Functions.php ファイルを編集する

開始するには、Web サイトのfunctions.phpファイルを編集する必要があります。 これを行うには、ダッシュボードで[外観] > [テーマの編集]に移動し、 functions.phpファイルを選択します。

または、FileZilla などのファイル転送プロトコル (FTP) アプリケーションを使用してサイトのファイルにアクセスすることもできます。

いずれにしても、Web サイトで主要な作業を行う前に、子テーマを作成するか、開発環境に切り替えることをお勧めします。 これにより、変更を行っている間、ライブ サイトを害から守ることができます。

ステップ 2: コード スニペットを追加する

次に、次のコード スニペットをfunctions.phpファイルに追加する必要があります。

// Allow SVG
add_filter( 'wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) {

global $wp_version;
if ( $wp_version !== '4.7.1' ) {
return $data;
}

$filetype = wp_check_filetype( $filename, $mimes );

return [
'ext' => $filetype['ext'],
'type' => $filetype['type'],
'proper_filename' => $data['proper_filename']
];

}, 10, 4 );

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

function fix_svg() {
echo '<style type="text/css">
.attachment-266x266, .thumbnail img {
width: 100% !important;
height: auto !important;
}
</style>';
}
add_action( 'admin_head', 'fix_svg' );

その後、SVG 画像をメディア ライブラリにアップロードできるようになります。 そこでは、他の画像ファイルの種類と同じように、それらを表示して操作できます。

ステップ 3: アクセスを保護し、SVG アップロード許可を制限する

前述したように、SVG ファイルを有効にすることには一定のリスクが伴います。 サイトを安全に保つために、カスタム ユーザー ロールを作成して SVG のアップロード許可を設定できます。 これを行うには、User Role Editor や WPFront User Role Editor などのプラグインを使用できます。

これらのプラグインを使用すると、既存のユーザー ロールのアクセス レベルと許可レベルをカスタマイズできます。 つまり、SVG をアップロードする権限を持つユーザーを指定できます。 これは、これらのファイルのセキュリティを監視するのに役立ちます。

WPエンジンで安全を確保

本来、WordPress は SVG ファイルの使用を有効にしません。 これらのファイルは、ロゴやその他のグラフィックを表示するための最良のオプションである傾向があるため、残念です. 幸いなことに、お気に入りの開発者リソースの助けを借りて、サイトでの SVG ファイルの使用を有効にし、保護することができます。

さらに、当社の WordPress ホスティング プランでは、専門的なサポートと十分に開発された Web サイト セキュリティ ソリューションにアクセスできることを覚えておいてください。 今日私たちとあなたのサイトを保護してください!