【ワードプレス】子テーマでスタイル更新

【ワードプレス】子テーマでスタイル更新

どうも、ぽっぽです。

ワードプレスでブログを始めてみたものの他のブログとなんだかぜんぜん違う事に気が付きました。

やっぱり無料テーマと有料テーマの違いなのだろうか。

僕は、ワードプレス管理画面から、”外観->テーマ”で表示される画面から検索して取得した公式の無料テーマを使っています。

有料テーマはしばらく運用してから使ったほうが有り難みがあるかなと思ったし、ブログ収入がないのでまずは無料テーマとしたのでした。

そこでスタイル指定で見た目を変更してみたいと思います。

子テーマ

よく訪れる他の方のブログのスタイルを参考にして、自分のブログのスタイルを変更しようと考えて調べてみると、ワードプレスには子テーマという仕組みがありました。

仕組み

子テーマとは、親となるテーマの特性をそのまま引き継ぎ、独自のスタイルを個別のファイルで扱う仕組みでした。

親となるテーマの更新

公開されているテーマは、テーマの作成者が機能追加やバグフィックスなどのメンテナンスでしばしば更新されます。

更新されるということは、ファイルが上書きされることなので、そのテーマのスタイル情報に独自で追記した情報が消えてしまいます。

更新作業が発生するたび、自分が追加したスタイルを再編集する作業が発生しています。

子テーマを使い独自スタイルを別ファイルにする

そこで子テーマがあります。自ら編集した情報は別のファイルで管理して、親となるテーマの特性は引き継ぐようにすると、テーマの更新のたびに余計な作業をする必要がなくなります。

また、他のテーマに変更する場合も独自のスタイル情報を活かせるかもしれません。

子テーマの作り方

では早速、子テーマを作成しましょう。

  • テーマがあるフォルダに子テーマ用フォルダを作成(名前は、「親テーマのフォルダ名」-child)
  • 子テーマ用フォルダに2つの空ファイルを作成(名前は、style.css, functions.php)
  • style.css, functions.phpに最低限の編集をする

主な作業は上記です。

具体的な作業内容を記載します。
テーマがあるフォルダは、「public_html/ドメイン名/wp-content/themes/」です。ドメイン名はワードプレスをインストール時に決めたと思います。

themesフォルダの下に、インストールしたテーマが並びます。

親テーマとしたいフォルダ名をコピーして、新規フォルダを作成し名前に「親テーマフォルダ名」-childとします。

新規作成したフォルダの中に、style.css, functions.phpという名前のファイルを新規作成します。

style.cssには下記を記載します。

/*
Theme Name:「親テーマのフォルダ名」-child
Template:「親テーマのフォルダ名」
*/

「親テーマのフォルダ名」は親テーマ名です。大文字小文字のタイプミスでも動作しないのでよく確認してください。

functions.phpには下記を記載します。

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
?>

こちらも、大文字小文字のタイプミスでも動作しないのでよく確認してください。

子テーマの設定

ワードプレスの管理画面で、外観ー>テーマで表示される画面でstyle.cssに記載したTheme Nameに指定したテーマ名が存在します。このテーマを有効化してください。

スタイルの変更

これでスタイルを記載するstyle.cssが出来ました。まずフォントの大きさを変えてみましょう。フォントが小さすぎると読みづらく読者が離れる原因になるそうです。

下記を追記してみます。

/* 文字の大きさ */
.entry-content { font-size: 1.2em; }

/**/はスタイルシートのコメントの記載です。
コメントは可読性が上がるので大事です。
フォントの大きさは好みの大きさとしてください。

.entry-contentはクラス名です。僕が使うテーマの記事部分はHTMLのdiv要素の中で記載されていて、クラス名が「entry-content」となっていました。

このdiv要素内の文字サイズを指定しました。

反映されない場合

style.cssを編集してもそれはサーバーのファイルを変更したに過ぎません。

ブラウザで表示を反映するには、ブラウザ自体の表示の更新が必要です。

ブラウザで最新の情報に更新するには、ブラウザ画面の左上にある更新ボタンをクリックしますが、ブラウザにはキャッシュという仕組みが働きなかなか反映されません。

そこでchromeには、キャッシュを無視して強制的にリロードするショートカットキーがあります。

Ctrl + Shift + R

CtrlキーとShiftキーを押しながらRキーを押します。

これで、ブラウザにサーバーで編集したstyle.cssがダウンロードされ、新しい情報で記事が更新されます。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

先頭に戻る