福島県で実践 コンテンツマーケティング

赤べこでもわかるマーケティング志向ブログ 1記事5分でサイト運営の基礎を抑えよう。

wordpress ホームページ

wordpress子テーマを作ってテーマテンプレートをカスタマイズしよう

2016/09/07

wordpressでは、wordpress公式テーマや無料テーマ、有料のプレミアムテーマなど様々なものがあります。

テーマの中には、粗悪なものも紛れているようですので、wordpress公式テーマ以外の無料テーマの選定は、そのテーマの評判をネット検索するなど、注意して選定してください。

選定したテーマは、作成した企業や人物により作り方や機能が異なるほか、使っていると、違ったレイアウトデザインや、新しい機能が欲しいなど、欲が出てくるものです。

そうした際には、wordpress内のPHPを編集することで、新たなレイアウトの作成、機能の追加等が行えますが、wordpressテーマは、機能追加やセキュリティアップデート等が行われることがあるため、直接編集では、アップデートが適用できない適用すると変更箇所が消えてしまう)という事象が起こってしまいます。

gounder / Pixabay

そのため、テンプレートのPHPやCSSを継承できるように、元のテーマを親テーマとし、継承した子テーマにて変更を加えていく必要があります。(テンプレートのままで良いという場合には、そのまま使用しても構いません。)

有料テーマの場合、カスタマイズ用に子テーマをサポートしている場合がありますが、多くの場合は自ら設定しなくてはならないため、子テーマの作り方は覚えておいても良いと思います。

子テーマの作り方

子テーマのフォルダを作る

まずは、子テーマのファイルを入れるフォルダを作成します。

日本語のフォルダ名やWindowsでの禁止文字「¥ / : * ? ” < > |」、大文字は使用せず、

また、親テーマが想像できるように「親テーマ名」+「_child」などの名前をつけましょう。

子テーマのファイルを作る

wordpressの子テーマには最低2つのファイルが必要です。

ファイル作成には、Windows標準のメモ帳でも構いませんが、保存時にUTF-8の文字コードで保存できるテキストエディタを使用するのが良いでしょう。

  • style.css
    親テーマからデザイン等を変更する際に使用します

記入例)
/*
Theme Name: Twenty Sixteen Child
Template: twentysixteen
*/
Theme Nameは自由ですが、分かりやすい名前をお勧めします。
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' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array('parent-style')
);
}
?>

詳細は、子テーマ - WordPress Codex 日本語版をご参照ください。

フォルダをアップロードする

FTPソフトを使用してもフォルダをアップロードできますが、

フォルダをzip圧縮して、wordpressのダッシュボード「外観 > テーマ > 新規追加 > テーマのアップロード」で追加するのが簡単でしょう。

アップロードしたテーマが「外観 > テーマ」で選択できるようになっていれば子テーマの作成は成功です。

プレビューで確認してみましょう。

エラーの場合は、親テーマのインストール状況や、作成したファイルの内容を確認してください。


 

これで、テーマをカスタマイズする環境ができました。

テーマのカスタマイズは自己責任です。PHPファイルは記述を1字でも間違えるとホームページが表示されなくなる可能性があります。

ローカルのパソコンにバックアップを取る習慣もつけるようにしましょう。

-wordpress, ホームページ
-, ,

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitterで赤べこマーケをフォローしよう!