【WordPress】カスタマイズの準備・子テーマ作成

初心者でもブログっぽくない小説サイト作れるか!?

この記事では、WordPressテーマのカスタマイズに欠かせない子テーマの、役割と重要性、作り方について解説します。

子テーマとは

親テーマのすべての機能、デザインを継承しながら、PHPやCSSのカスタマイズをするためのテーマです。

子テーマのファイルは親テーマのアップデートに影響されないので、親テーマにアップデートがあった場合でも、変更したPHPやCSSの内容が失われずに使用することができます。

逆に、親テーマのファイルを直接変更すると、テーマのアップデートがあった際に変更内容がすべて失われてしまいます。

テーマにはデザインなどの表面上の情報だけでなく、ショートコードやその他の機能なども含まれます。
これから追加するショートコードがアップデートで消えてしまわないよう、子テーマを作っておきましょう。

子テーマを作る

この記事ではWordPressに最初から入っている「Twenty Seventeen」というテーマを使っていきますが、どのテーマを使用しても大丈夫です。

Twenty Seventeen
Twenty Seventeen は、没入感のあるアイキャッチ画像と繊細なアニメーションを用いて、サイトに命を吹き込みます。ビジネスサイトにフォーカスをあて、ウィジェット、ナビゲーション、ソーシャルメニュー、ロゴ等はもちろんフロントページの複数のセクションを目立たせます。カスタム配色で非対称のグリッドの個性を出し、投稿...
手順
  1. PC上の適当なところに子テーマ用のフォルダを作成する
    ※ディレクトリ名は半角英数であればなんでもOK。今回は「beginner-twentyseventeen」としました
  2. 以下のファイルを作成する
    ※screenshot.pngは必須ではないが、あるとテーマ一覧でわかりやすい(サイズ: W880px × H660px)
    • functions.php
    • style.css
    • screenshot.png
  3. functions.phpに以下のコードを記述する
<?php
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
  1. style.cssに以下のコードを記述する
    • Theme Name: 子テーマ名 なんでもOK
    • Template: 親テーマのディレクトリ名 他のテーマを使用する場合は親テーマを確認してここに記述
/*
Theme Name:Twenty Seventeen child
Template:twentyseventeen
Version: 1.1.0
*/

子テーマをインストールする

手順
  1. 作成した子テーマディレクトリを圧縮してzipファイルを作成する
    1. 子テーマディレクトリを右クリック
    2. [送る]>[圧縮(zip形式)フォルダー]クリック
  1. WordPressの管理画面にログインする
  2. メニューから[外観]>[テーマ]を開く
  3. [新規追加]ボタンをクリック
  1. テーマのアップロードボタンをクリック

テーマのインストールが完了したら、子テーマを有効化してください。

インストール

この段階では何も修正を加えていないので、有効化すると「Twenty Seventeen」のレイアウトが表示されます。

インストール

 

タイトルとURLをコピーしました