WordPress自作テーマのCSSを変更しよう

作った自作テーマのCSSを変更しよう！

前回は管理画面からのアップロードで用意したCSSが反映されていなかったのですが、 Wordpressのテーマ情報はCSSから読み取っているので読み込まれてはいるようです。

単純にテーマの出力部でCSSが読み込まれていないだけっぽいので修正して、 自由にCSSを書けるようにしていきます。

それではWordpress自作テーマ講座第３回目を始めましょう。

  1. 用意したCSSを読み込ませる方法
  2. ライブプレビューの追加CSSは使わない方が良い
  3. ローカルでテーマを更新していくには
  4. Wordpress自作テーマ講座第２回まとめ

用意したCSSを読み込ませる方法

本来はwp_headタグで出力されるのですが、ソースコードの順番とか結構テキトーに出力されるので 自力で強制的に出力してやりましょう。

Wordpressを使えば使うほど「wp_head」って余計な出力するなぁと不満が募ってくるので、 出来る限り自動で出力するコードは制御してしまうのが正解です。

All in one SEO PackなどのSEOプラグインを使う場合、 「wp_head」で出力されるので正直な所プラグインの自動出力場所としてみておいた方が良いでしょう。

それではindex.phpに直接CSSを読み込ませるようにしてみましょう。

headタグ内のタイトルタグの上に「link」タグを書き込んでください。

コピペでもOKです。

index.phpを編集する方法は、正直な所ローカルでファイルを更新してFTPからファイルをアップロードしたほうがいいでしょう。

一応管理画面の「外観」→「テーマ編集」→「画面右端にある編集するテーマを選択で指定のテーマを選ぶ」→「index.php」

  <head>
    <meta charset="utf-8">
    <?php wp_head(); ?>
    <link rel="stylesheet" href="<?php bloginfo('template_url') ?>/style.css" type="text/css">
    <title>テスト用自作テーマ</title>
  </head>

以下のコードに注目してください。

<?php bloginfo('template_url') ?>

これはbloginfoというWordpress独自の関数で、引数に特定の文字列を渡すと情報を返してくれます。

例えばこの「template_url」と書いた場合、テンプレートのURLが出力されます。

それにプラスしてCSSのファイル名を指定してるので、CSSを読み込めるようになっているという寸法です。

私の場合だと

「https://naokeyzmt.com/blog/wp-content/themes/testtheme」と出力されます。

出力されるURLの最後にスラッシュが無いのにも気を付けてください。

Wordpress 自作テーマ CSS反映

直接CSSの場所を指定したのでいい感じに反映されてますね。

ライブプレビューの追加CSSは使わない方が良い

結論から言っておくと、直接HTML(index.php)にCSSを 直で書き込んでいく方式なのでソースコードがとても汚くなります。

基本的にCSSは1つにまとめておいた方が読み込みの回数も減らせます。

読み込みが早いということはSEOにも直結してくるので、CSSファイルは複数にせず1つにまとめましょう。

追加CSSの良い所は読み込みが無くCSSを実行できるところにありますが、 先ほども言ったようにソースコードが汚くなるのでオススメしません。

そして今のところ追加CSSを書き込んでも反映されるようなテーマの作りじゃないので、 結局のところ今は弄れないんですけども(笑)

CSSを弄るときは基本的にstyle.cssで弄るべきです。

でも毎回CSSファイルを更新してアップロードして……って言うのはすさまじく面倒なので ぶっちゃけてしまうと見た目の調整はローカルのHTML+CSSでやった方が良いです。

ローカルでテーマを更新していくには

ローカルでテーマを更新するにはWordpressの環境を整えなくてはいけないのですが、 それもぶっちゃけ面倒ではあります。

なので私はHTML+CSSのみで一旦見た目をデザインしてから、 Wordpressのテーマに載せ替えていくといった手法を取っています。

もっと詳しく言うとhtmlを効率よく書ける「pug」

CSSを効率よく書ける「PostCSS」

というツールを利用しています。

こうすることで飛躍的にデザイン速度が上がるのですが、設定するのが上級者向けです。

使い方自体はすごくシンプルでいちいちhtmlタグを打たなくてもよくなるのが最高です。

需要があればそのうち使い方や導入方法など解説しようと思いますが、 最初のうちはHTMLファイルとCSSファイルを弄って更新していくのが良いでしょう。

どちらにしろHTMLとCSSの知識がないとPugとPostCSSは使っても意味不明になってくると思います。

物事には順序があるので、慣れていない人はシンプルなHTMLとCSSを覚えましょう。

今の時代、完全に覚える必要は無く基本的にコピペでOKです。

Wordpress自作テーマ講座第３回まとめ

CSSの反映をしただけですが、Wordpressテーマ作りには結構重要な個所なので ココだけで完結した記事を作りました。

基本的に土台(HTMLとPHP)を組み上げたら後はCSSを弄っていくことがメインになるので、 ローカルで調整できるようにしておけばいつでもどこでもテーマの自作が可能になります。

次回はWordpressの機能からはちょっと離れますが、ローカル開発環境（HTML+CSS）を構築しましょう。

それでは。