ベストセラー人気 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で作業をしてjpgからぼやけている現象をつかむべきです…。

      応答
      • 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/

      応答