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

wordpressでローカルパスでCSSファイルを読み込む/外部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~のファイルを読み込みたい場合は、それのコードをコピペするか、ファイルをサーバーにダウンロードして、ローカルで参照することで解決できるかと思います。

この記事で欲しい情報が見つからなかった方へ

この記事の更新情報がある場合があります。
この記事は以下の記事とも関連性があると思われます。

WordPressブログを雛形だけコピーしてポートフォリオに加える方法
WordPressにSNSシェアボタンを実装しました [メタ]
WP-CLIでサイトアドレスとWordPress アドレスのURLをSSH経由で変更
SQLでWordPressの記事ごとのメタタグ(メタキーワード)を簡単に確認/編集する
SQLでWordPressの記事を正規表現検索してMarkDown形式にする – 簡単にWordPressブログの記事リンクを取得する方法
WordPress URLによって404ページの内容を変更する
SQLでWordPressで非公開の記事を特定して対処する


管理人の方針で、既存の記事の編集はせず、新しい情報や大きな既存情報の更新があった場合には、新しい記事として公開することになっています。
当記事で欲しい情報が見つからなかった・解決に至らなかった場合、これらのリンクがお役に立てるかも知れません。

どうやってこの関連記事を生成しているの?
この機能のPHPソースコード(2500行)

コメントを残す

Close Menu