機能 ショートカットキー
リファレンス(参考URL)一覧へ移動 R
記事URLをMarkDownとしてコピー Ctrl+M
前のコードタグへ移動 Ctrl+←
次のコードタグへ移動 Ctrl+→
ヘルプを表示・非表示 H
Tips
- ショートカットキーは記事上で有効です。ヘッダー/フッター付近では機能しないことがあります。
- コードタグ移動機能がうまく動かないときは、Shift+F5でページを更新してみてください。
- このウィンドウを閉じるには、Hキーをもう一度押してください

wordpressでローカルパスでCSSファイルを読み込む/外部CSSを読み込めない場合の対処

AD

プログラミング

子テーマディレクトリ/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~のファイルを読み込みたい場合は、それのコードをコピペするか、ファイルをサーバーにダウンロードして、ローカルで参照することで解決できるかと思います。

SPONSOR

オンラインブートキャンプ全12コースの「ウケ放題」 AD

コメントを残す

Close Menu