WordPressでCSSをカスタマイズしよう

eh657883

はじめに

今までの記事では、サイトの構成を管理画面上で操作しました。

今回はcssを修正してサイトの見た目を変えたいと思います。

ゴール

投稿記事の見出し（H2）を以下のように変更します。

CSSの修正

CSSの配置場所

cssファイルは、テーマ毎にテーマフォルダ内に格納されています。

さっそく「style.css」を編集していきましょう。といきたいところですが、とある理由によりできません。

修正ではなく上書きのスタイルをとる必要があります。

　　

子テーマとは

style.cssに修正ができないため、子テーマを作成します。

子テーマは、今回のようにベースは元のテーマのままにして、＋αの変更を加えたいときに作成します。

ちなみに、ベースとなるディレクトリは親テーマと呼ばれます。

子テーマ作成手順

子テーマ作成に必要最低限の1ディレクトリと2ファイルを用意します。

　　

ディレクトリ

親テーマと同階層にディレクトリ「親テーマ名＋-child」を作成します。(childは必須ではないが区別しやすくするため)

子テーマのstyle.css

  • Theme Name : 子テーマの名前を付与します。ここでつけた名前はWordPress管理画面上で表示されます。
  • Template : 親テーマのディレクトリ名を指定します。
/*
Theme Name: Coldbox Child
Template: coldbox
*/
.entry-inner > h2 {
  padding: 1rem 2rem;
  color: #FFFFFF;
  letter-spacing: 2px;
  background-color: #1da1f4;
}

子テーマのfunctions.php

次のPHPでは「子のstyle.css」ファイルを「親のstyle.css」ファイルの次に読み込む（厳密には違う）という処理をしています。

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
  // 親テーマのcss{バンドル(cd-style)}の後に子テーマを読み込む。
  $url = get_stylesheet_directory_uri();
  wp_enqueue_style( 'child-css-root',  $url.'/style.css' , array('cd-style'));
}

子テーマの有効化

子テーマを作成しただけでは、使用されないため、WordPress管理画面から子テーマ「Coldbox Child」を有効にします。

 

結果の確認

投稿記事のH2を付与した部分が、ゴールに張り付けたキャプチャの通りになっていればOKです。

まとめ

今回の記事では、相当端折って手順のみを記載しました。というのも、本記事はWordpressの触りを短時間で理解するというのが目的だからです。

phpのソースコードの意味などの詳しい説明が必要な方は以下の記事をご覧ください。

 

コメントを残す