コードウェット

WordPress でベクター画像を安全に使用する方法

Rifat Divi Tutorials Nov 29, 2023

Divi Web サイトのデザインにカスタムのグラフィックやイラストを追加すると、視覚的な魅力を高めることができます。しかし、適切な画像アセットを見つけたり、デザイナーを雇ったりすることが常に実現できるとは限りません。幸いなことに、Divi を使用すると、ビルダー内で独自のベクター画像やイラストを簡単に作成できます。

WordPress でベクター画像を安全に使用する方法

このガイドでは、Web サイトを損なうことなく SVG を実際に実装する方法を検討します。

デザインの経験がなくても、プロ仕様の高品質ベクター画像を作成して、Divi Web サイトを視覚的に次のレベルに引き上げることができます。

SVG の概要とその用途

SVG はスケーラブル ベクター グラフィックスの略です。これは、2 次元のベクター グラフィックスを記述するために設計された、広く使用されている XML ベースのベクター イメージ形式です。ピクセルを使用して画像を表現するラスター イメージ形式 (JPEG や PNG など) とは異なり、SVG は数式を使用して形状、線、色を定義するため、解像度に依存せず、拡張性の高い形式になります。

素晴らしいウェブサイトを作成します

最高の無料ページビルダーElementor を使用

今すぐ始める

Web サイトのデザインにおける SVG の主な用途をいくつか示します。

  1. レスポンシブ グラフィックス: SVG 画像は解像度に依存しないため、品質を損なうことなく拡大または縮小できます。そのため、さまざまな画面サイズや解像度に合わせてコンテンツが調整されるレスポンシブ Web デザインに最適です。
  2. アイコンとロゴ: SVG は、Web サイト上のアイコン、ロゴ、その他のグラフィック要素によく使用されます。 SVG ファイルはサイズが小さく、CSS や JavaScript を使用して簡単にカスタマイズしたりアニメーション化したりできるため、インタラクティブで視覚的に魅力的なユーザー インターフェイスを作成する場合によく使用されます。
  3. Retina および高 DPI ディスプレイ: SVG は、従来のラスター画像を拡大するとピクセル化して見える可能性がある Retina ディスプレイなどの高 DPI (1 インチあたりのドット数) 画面で鮮明で鮮明なグラフィックスを表示するのに最適です。
  4. アニメーション: SVG では、CSS アニメーションなどのツールや、Snap.svg や GreenSock アニメーション プラットフォーム (GSAP) などの JavaScript ライブラリを使用して、XML コード内で複雑なアニメーションを直接作成できます。これにより、Web サイトに動的でインタラクティブな要素を追加できるようになります。
  5. アクセシビリティ: SVG 画像は、基になる XML 構造に説明テキストの注釈を付けることができるため、スクリーン リーダーや支援技術から簡単にアクセスでき、Web サイトをより包括的で障害のある人にとって使いやすいものにします。
  6. SEO の利点:検索エンジンは SVG ファイル内のコンテンツを解析してインデックスを作成できるため、検索エンジン クローラーにより多くのコンテキストを提供することで、検索エンジンの最適化 (SEO) を向上できます。
  7. インタラクティブなデータ視覚化: SVG を使用すると、チャートやグラフなどのインタラクティブなデータ視覚化を作成でき、Web サイト上で情報を効果的に伝えることができます。

要約すると、SVG は、Web サイト上でベクター グラフィックを作成および表示するための多用途かつ強力な形式です。シームレスに拡張でき、さまざまな画面サイズと解像度で適切に動作し、アニメーションと対話性をサポートするため、最新の Web デザインと開発において貴重なツールとなっています。

WordPress でベクター画像を安全に使用する方法

このパートでは、WordPress で安全な SVG を使用するための 2 つの方法 (手動とプラグイン経由) を見ていきます。あなたのニーズに最適な選択肢が提示され、選択していただけます。今すぐ始めましょう！

SVG サポートを手動で追加し、コードをサニタイズする

小さなコードを使用するだけで、SVG サポートを数分で WordPress に追加できます。これにより、すでに強調した安全上の懸念が生じる可能性があります。 SVG をより安全な方法で実装するには、次のアクションが必要です。

  1. Functions.php ファイルを変更して、SVG サポートを有効にします。
  2. 必要なユーザー ロールが SVG ファイルを WordPress にアップロードすることを禁止します。
  3. SVG ファイルをアップロードする前に、すべてのファイルをサニタイズしてください。

全体として、ステップ 1 と 2 を完了するのは難しくありません。最初のステップは、ファイル転送プロトコル (FTP) を使用して Web サイトに接続し、WordPress のルート フォルダーを見つけることです。そこで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 ファイルを WordPress にアップロードし、メディア ライブラリで表示できるようになり、2 つの目的を果たします。コードを追加した後、functions.php ファイルを閉じて変更を保存します。

信頼できないユーザーのアップロードが破損するのを阻止する必要があるため、状況は少し難しくなります。たとえば、編集者や著者は正確なファイルをアップロードしてくれると信じているが、寄稿者は信じていないかもしれません。ここで実行できるアプローチは 2 つあります。

  1. メディア ライブラリへのアクセスが制限されている、またはアクセス権がないユーザーに対して、固有のユーザー ロールを確立します。
  2. 各ユーザー役割がアップロードできるファイルの種類を制限するには、 WP Upload Restrictionなどのプラグインをインストールします。

確かにどちらの戦略にも欠点があり、これが手動の SVG 実装が困難な理由の 1 つです。ただし、悪意のある SVG アップロードを阻止する戦略を選択する場合は、それを誤って使用しないようにする必要もあります。

理想的には、SVG を Web サイトにアップロードする前にサニタイザー ツールを使用する必要があります。これにより、ファイルが取得され、疑わしいものが含まれているかどうかが確認され、含まれている場合は削除されます。最終的には、WordPress に送信できる整った SVG ファイルが完成します。

安全な SVG プラグインの使用

私たちは、前述の方法を使用して、SVG の安全な実装がいかに難しいかを実証することを目的としていました。これは、 Safe SVG プラグインの実行内容を完全に理解するために必要です。

Safe SVG 用のプラグイン。一言で言えば、以前に述べた次のような問題はすべてこのプラグインによって解決されます。

  1. SVG をアップロードできるようにします。
  2. SVG がメディア ライブラリに表示されていることを確認します。
  3. セキュリティ上の欠陥を避けるために、アップロードする各 SVG のソース コードをクレンジングします。このプラグインは本質的にプラグアンドプレイであり、WordPress で SVG を安全に実装するための最も簡単な方法を採用しています。 SVG を使用することに決めている場合は、試してみることをお勧めします。

CSS とプラグインを使用した SVG のアニメーション化

SVG を WordPress に統合する作業に取り組む場合は、間違いなく投資収益率を最大化したいと思うでしょう。これは、必要に応じて、CSS を使用して SVG をアニメーション化する必要があることを意味します。実行できるアプローチは 2 つあり、これについては以前に説明しました。

  • SVG は、他の要素と同様に、CSS を使用して手動でアニメーション化できます。
  • SVGatorなどのプログラムを使用して、SVG を作成およびアニメーション化します。

いくつか新しいことを試してみたい場合は、あちこちにいくつかのアニメーションを追加すると、Web サイトのユーザー エクスペリエンスが大幅に向上します。ただし、ビデオや GIF を追加することは、SVG や CSS を利用してこれを実現するよりもモバイル デバイスにとってかなり悪影響を及ぼします。

結論

Divi ビルダー内でカスタム ベクター グラフィックを直接構築できるため、デザインの専門知識を必要とせずにサイトのイラストやアイコンを作成する強力な方法が得られます。これらのオリジナルのグラフィックを実装すると、ページや投稿に、よりユニークでパーソナライズされた美しさを加えることができます。 DIY ベクター グラフィックスがどれほどプロフェッショナルに見えるかに驚かれるでしょう。

Divi WordPress Theme