WordPressのテーマは子テーマを作成してカスタマイズしよう

WordPressテーマのカスタマイズ

WordPressには、豊富なテーマがあります。このテーマ(テンプレート)を変更することでお好みのレイアウトにしたり、カッコ良いデザインのサイトに仕上げることが可能です。お好きなテーマを選んでインストールするだけで簡単に実装できますが、気を付けるポイントもあります。ここでは、テーマ選びとテーマのカスタマイズについて解説していきます。



テーマを選ぶ際のポイント

1. 安全なテーマを選ぶ
・初心者の方は、WordPress公式のテーマから探すか、信頼のおける配布元から選びましょう。無料テーマを配布しているサイトは多数ありますが、テーマ内に悪意のあるコードが混入されている危険性もあります。

2. 自分のスキルに合ったテーマを選ぶ
・テーマは思い通りにカスタマイズできます。PHPとHTMLの知識があれば問題ないですが、カスタマイズしたことによりページが表示されなくなることもあります。公式の定番テンプレートには、カスタマイズ方法の記事もたくさんあるので、まずは定番のテーマを使うことをオススメします。

3. 運営目的にあった機能を備えているテーマを選ぶ
・SEO最適化やレスポンシブ対応などサイト運営の目的に合ったテーマを選ぶと、より簡単にサイトを作成できますし、プラグイン導入の必要もなくなります。

自分でデザインしなくてもテーマを変更するだけでおしゃれなデザインのサイトが作れます。無料とは思えないほどのクオリティの高いデザインテーマもありますので、ぜひ活用してみてください。

WordPressの子テーマをカスタマイズしよう

親テーマと子テーマ

親テーマとは、既存のWordpressテーマで、公式や一般的に配布されているテーマのほとんどがこの親テーマとなります。

子テーマとは、親テーマの機能とスタイルを継承したカスタマイズ用のテーマです。親テーマ(既存のテーマ)を変更する方法として、子テーマが推奨されています。

子テーマを使うメリット

親テーマをカスタマイズしていると、テーマをアップデートした時に、そのカスタマイズした変更は全て失われます。テーマのアップデートごとに変更を加えなければならず、とても面倒です。子テーマを使用することで、その手間を省けて常に最新のテーマを使えるのでセキュリティ面からも安全です。

子テーマにカスタマイズを施すことによって、テーマが更新された後も、変更内容は保持されます。テーマのカスタマイズには、子テーマを編集するようにしましょう。

ただし、子テーマを使うには子テーマの作成が必要になります。一部の無料テーマ配布サイトでは、子テーマ付きで配布されているサイトもあります。子テーマ作成が面倒な方は、そういったテーマを使うのも良いかもです。

子テーマ作成方法

子テーマは、子テーマディレクトリと、2つのファイル「style.css」と「functions.php」から構成されます。

1. 子テーマディレクトリの作成

「Twenty Seventeen」テーマの子テーマを作成する場合

子テーマ「twentyseventeen-child」フォルダを作成します。

・子テーマディレクトリの名前には最後に「-child」を付けることが推奨されます。
・子テーマディレクトリの名前には空白を含めない

2. style.cssの作成

style.cssには、子テーマ情報を以下のように記述します。

/*
Theme Name: Twenty Seventeen Child Theme
Theme URI: http://example.com/twentyseventeen-child/
Author: Your Name
Author URI: http://example.com/
Template: twentyseventeen
Description: Child theme for Twenty Seventeen.
Version: 0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags:
Text Domain: twentyseventeen-child
*/

「style.css」として保存します。

他テーマを利用する場合は、以下の情報を置き換えます。

・Theme Name: 子テーマを識別するための名前を記入
・Template: 親テーマのディレクトリ名を記入

3. functions.phpの作成

functions.phpにコードを記述します。

add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
function theme_enqueue_styles() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
}

「functions.php」として保存します。

「style.css」と「functions.php」を「twentyseventeen-child」フォルダの中に移動します。

子テーマ「twentyseventeen-child」フォルダをZIP形式で圧縮します。

サイトログインして、「管理画面」→「外観」→「テーマ」に移動してください。子テーマをアップロードし、有効化します。

これで、子テーマの設定は完了です。

子テーマのファイル構造やコードは実際にダウンロードして確認してみるのも良いです。

子テーマのある無料WordPressテーマ

Simplicity
STINGER
WpTHK 3
マテリアル

上記の配布サイト様は、すべて日本製の無料テーマです。子テーマのインストール方法も記載されていますので、初心者の方にも分かりやすいと思います。

WordPressのカスタマイズには、子テーマを編集しサイトに合ったデザインやお好みのレイアウトにしてみましょう。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする