ベストセラー人気 WordPress テーマTop 30 詳細

WordPress メディアライブラリでSVGをサポートしているSVG Supportプラグイン

Last Updated:2020年11月14日| 5のコメント
  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

WordPress メディアライブラリでSVGをサポートしているSVG Supportプラグイン2

WordPress メディアライブラリでSVGをサポートするようにしてSVG Supportプラグイン

SVG画像を WordPressで使用する場合は、CSSを使用してSVG内にある要素のスタイルを調整するのが容易ではないことがあります。 無料のプラグインであるSVG Supportを使用すると、簡単にできます。

このプラグインは、SVGのサポートを提供するだけでなく、単純なIMGタグを使用して全体SVGファイルのコードを簡単に挿入できるようにします。 IMG要素に「style-svg "を追加して、「style-svg"が含まれているIMG要素を完全SVGへ動的に変えてくれます。

このプラグインは、 WordPress 4.8以上で導入された新しいImage Widgetでも使用可能であるとします。 (現在の WordPress 4.9-alpha-41335バージョンまでテストされた表示されていますね。)

もっと詳しく SVG Supportプラグイン ページを参照してみてください。

コードを使用して WordPress メディアアップローダを使用してSVGをアップロードできるようにする

WordPress 4.7.1以前のバージョンでは、次のコードを使用することができます。

function cc_mime_types($mimes) {
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter('upload_mimes', 'cc_mime_types');
// 출처: css-tricks

WordPress 4.7.1以降のバージョンでは、次のようなコードが動作することです。

// Allow SVG
// 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' );
// 출처: https://codepen.io/chriscoyier/post/wordpress-4-7-1-svg-upload

メモ:



5のコメント

コメント

  1. 画像をsvgにアップロードすることを解決しました。 チャイルドテーマを有効にしてからこそsvgアップロードが可能になりました。 しかし、jpgはまだかすんで出ますね.. ^^それでsvgは鮮明に出てきます。

    してみると、また問題が発生しまし〜(Word様または仕方ところしていることかもしれません〜)svgは容量も少なくて、鮮明でいいのに、問題は、モバイルでのフォントが化けがありますね...これはどのようにするべきでしょう?

    回答する
      • jpg画像がぼやける次の記事を参照してみていただけますか?

        https://www.thewordcracker.com/intermediate/%EA%B8%B0%EB%B3%B8-jpg-%EC%95%95%EC%B6%95-%EB%B3%80%EA%B2%BD-%EB%B0%A9%EB%B2%95/

  2. WordPress画像をアップロードすると、ぼやけが発生になって教えてくれたfunctions.phpファイルも修正したのにだめなのでSVGへと鮮明になります。 しかし、露出がないね...エレメントでは、露出になったが、他の場所をクリックすると、なくなって...上のコードをfunctions.phpにも上げてブワトヌンデドいけないですね...理由は何でしょう?

    回答する
    • こんにちは、ブカシ石ころ様。

      svgファイルサイズの問題はないでしょう?

      次のコードを一度入れてみましょ?

      function custom_admin_head() {
      $css = '';
      $css = 'td.media-icon img[src$=".svg"] { width: 100% !important; height: auto !important; }';
      echo '<style type="text/css">'.$css.'</style>';
      }
      add_action('admin_head', 'custom_admin_head');

      よくないと、次のようなCSSコードでも一度テストしてみてください?

      img.wp-post-image {
      min-width: 100% !important;
      }

      CSSコードを追加する方法は、次の記事を参照してください。

      https://www.thewordcracker.com/basic/how-to-add-css-in-wordpress/

      回答する