WordPress に、別CSSファイルを取り込む方法

2021.11.09

自分用のカスタムcssファイルをWordPressのサーバーに置いて読み込むだけです。　cssファイルにはVScodeからSSH通信で直接編集できるので、色もついて見やすく、編集画面の横幅や縦の長さも十分あり、リンティングでエラーヶ所も見えるので凄く快適です。　

その別CSSファイルを取り込むには２つの方法があります。

  1. 自作プラグインphpでwp_enqueue_style()で読み込む（最終はこちらが推奨）
  2. カスタムCSSで@importで読み込む（こっちは簡単だけど低速）

一番いいのは自分のプラグインphpを作って読み込む

WordPressの場合、function.phpに記載するのが推奨されていますが、バージョンアップした際、function.phpも上書きされてしまうかもしれないのと、function.phpへの記述をミスった時、全ページ表示されなくなり復旧できなくなるのが怖いので、私は自分のプラグインmy-plugin-1.phpファイルを用意して、以下の様にichiri.cssを読込ました。　バージョン番号を更新したら、ブラウザが更新されたcssファイルをダウンロードします。

/*スタイルシートを読み込む方法 */
function add_css() {
	wp_enqueue_style(
		'ichiri_css',  // 適当な名前を設定
		 plugins_url().'/my-plugin-1/ichiri.css', // cssのパス
		array(),       // style.cssより先に読み込むCSSは無いので配列は空
		'0.0.01',      // 適当なバージョン番号
		false 
	);
  }
add_action('wp_enqueue_scripts', 'add_css');

プラグインの作り方は簡単

  1. フォルダを作る。
  2. フォルダと同じ名前の.phpファイルを作る。
    中身は<?phpで始まり ?>で終わるテキストファイル。
  3. フォルダごとzip形式で圧縮する。
  4. WordPressのプラグイン～新規作成～アップロードで、zipファイルをアップロードする。
  5. 『有効にしますか』と聞いてくるので有効にする。
  6. これで出来上がりです。　プラグイン一覧に表示されています。　
    後はプラグインエディタで自作のプラグインをプルダウンメニューから選択して編集。

詳細は、『WordPress　自作プラグインの作り方と php実行のショートコードの使い方』をご覧ください。

ここを参考にさせて戴きました。https://affi-sapo.com/67/

簡単にするなら @importで別のcssファイルを読み込む

WordPressの/ichiri.biz/public_htmlフォルダにあるichiri.cssにclass=”number_circle_blue”を書いた番号リスト(<ol>タグ)表示を飾り付けるスタイル記述がされています。このichiri.cssファイルを@import urlで読み込みます。

注意！　@import分はカスタムcssの一番上に書く事。　先頭に書かなければ読み込まれません。

*『WordPressのカスタムCSSの場所はここを参照』

WordPressの/ichiri.biz/public_htmlフォルダの下にichiri.cssファイルを置いて、/public_htmlを省いて@import url()内に書けば読み込めました。（私の場合だけかもしれませんが）

@import url("https://ichiri.biz/ichiri.css");

WordPressの番号リスト表示は下の様に味気ない。

  1. ああして
  2. こうして
  3. こうなった

@import urlでichiri.cssを読み込んでおけば、<ol>タグにclass=”number_circle_blue”を追加で記述すると、下の絵の様におしゃれになります。

<ol class="number_circle_blue"><li>ああして</li><li>こうして</li><li>こうなった</li></ol>
  1. ああして
  2. こうして
  3. こうなった

注意！

２回目以降、cssファイルを変更しても内容が反映されません。　それはブラウザが前回のcssファイルをキャッシュ内に保存していて、cssファイルを更新しても、ファイル名が同じの新しいcssファイルを読み込んでくれないからです。なのでブラウザのキャッシュを消して再表示（スーパーリロード）が必要です。（私もこの罠に見事にはまりました。）

キャッシュを消して再表示方法

  • Chrome、IE、Edge、Firefox
    • Windows/Linuxでは『Ctrl＋F5』
    • Macでは『Command＋R』
  • Saferi
    • Shiftを押しながら更新ボタンをクリック
これが更新ボタン
画像に alt 属性が指定されていません。ファイル名: image-26.png

自分のデバッグの場合はスーパーリロード『Ctrl+F5』でいいですが、公開した時ユーザー側で更新したファイルが読み込まれず、新しいスタイルが反映されません。　WordPressの場合は、wp_enqueue_style()という関数を使ってcssファイルを取り込めます。　これであれば、関数内でバージョン記載を変えれば、ユーザー側にも取り込まれます。

おまけ１　（エックスサーバーでのフォルダ場所）

私の場合、Notepad++でichiri.cssファイルを作って、エックスサーバーの『ファイル管理』でichiri.cssファイルを/ichiri.biz/public_htmlフォルダにアップロードしています。

😭 Notepad++はSSHやFTPが設定できるので、エックスサーバー内のファイルを直接編集もできたのですが、何故か今はエックスサーバーに接続できなくなってしまいました。 （なんでかな？）

おまけ２　CSSが消える以外に困ってた事

管理や編集がややこしい

WordPressのカスタムCSSにCSSを書いていけばバージョンアップ等で消えないのですが、いろんなスタイル記述をCSSに書いていくと、カスタムCSSは１つの場所である事とカスタムCSSの表示も幅が狭く、CSS記述の表示が縦長になり、どこに何を書いたか分からなくなり管理がしづらいのです。　なので、自分のファイルにcssを記述出来れば、Notepad++やVScodeで幅広で大きく表示して見やすく、管理しやすいのでめちゃくちゃ便利です。

htmlの<link>での取込みは面倒くさい

下記のコードをhtml内に記述すると、cssファイルを取り込めるのですが、２点問題があります。

  • 各ページに追記せねばならず面倒臭い。　ファイル数が増えたら、cssファイル取込みの記述の行も複数になり、後に新しいcssファイルを作ったら、過去のhtmlページにも全て追記しなくてはならない。
  • WordPressではどこに書いて良いか分からない。　しかもWordPressは色々phpで制御されているので、あるバージョンの時に消されたり、phpない記述はバージョンアップで消えるし、何処に書いて良いか分かったとしても、勝手に消されるリスクがあると思います。
<link href=""https://ichiri.biz/ichiri.css" rel="stylesheet">

おまけ３　複数ファイル取込み動作した

まだ２つだけですが、自分のcssファイルを２つ作り、@import urlを2つ並べて記述したら、両方のファイルの記述も反映されました。　複数ファイルで出来ると、機能ごとに分けて管理できるので更に便利になると思っています。

カスケードは動作しませんでした。(´;ω;｀)

コメント