WordPress

WordPressで外部のCSSファイルを読み込めない場合の対処方法

子テーマディレクトリ/css/main.css を読み込みたい場合、以下のように書きます。

function load_import_css() {
    wp_enqueue_style( "import_style", get_stylesheet_directory_uri()."/css/main.css", false );
    // wp_enqueue_style( "import_style", "http://yuis.xsrv.jp/cdn/css/fuumin_net.css", false );
}
add_action('wp_enqueue_scripts', 'load_import_css');

wordpressは外部CSSを読み込むことができない

wordpressでは外部のCSSを読み込めないようです。
例えば、httpからはじまるCDNのCSSなど、です。サーバー上にないファイルは読み込めない、ということなのでしょう。

以下のように通常は読み込める書き方をしても、wordpressでは読み込んでくれないので注意です。

header.phpに直接書く方法

<?php wp_head(); ?>


<link rel="stylesheet" href="http://yuis.xsrv.jp/cdn/css/fuumin_net.css" type="text/css" />

</head>

wp_enqueue_styleでフルパスで記述する方法

function load_import_css() {
    // wp_enqueue_style( "import_style", get_stylesheet_directory_uri()."/css/main.css", false );
    wp_enqueue_style( "import_style", "http://yuis.xsrv.jp/cdn/css/fuumin_net.css", false );
}
add_action('wp_enqueue_scripts', 'load_import_css');

参考:
https://isabelcastillo.com/error-info-messages-css

追記:外部CSSを読み込めない場合

フルパスのCSSファイルを指定して読み込む場合、少し注意しなければいけないことがあります。

httpsのサイトの場合、http~のファイルを読み込むことができないようです。

wordpressでhttpから始まる外部CSSを読み込むには
[get_title https://feel-log.net/seo/ssl-notice-http-https/]

これでheader.phpに直接書く方法など、よりシンプルに書くこともできますね。

どうしてもhttps~のサイトでhttp~のファイルを読み込みたい場合は、それのコードをコピペするか、ファイルをサーバーにダウンロードして、ローカルで参照することで解決できるかと思います。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です