アフィーロード

アフィリエイトがあるじゃないか!

*

WordPressのテーマをカスタマイズするなら、まず子テーマを作ろう!

    2016/05/21

oyako-thum

そろそろブログのデザインをどうにかしたいなと思うわけですが、どうやらいきなりテーマを弄るのはまずそうです。

というのも、テーマをバージョンアップすると弄ったCSSも上書きされてしまい全部やり直しになってしまうからです。

子テーマを作る重要性

カスタマイズしたCSSのバックアップを取っておき、バージョンアップ後に上書きすればいいやと言う気もします。

しかし、バックアップを忘れていたり、バージョンアップの内容によっては上書きしたくないなどあります。何よりスマートではないです。

そこで、WordPressには子テーマを用意し、そちらでカスタマイズするスマートな方法が推奨されています。オリジナルのテーマを弄る事がないので、ミスを気にせず思い切ったカスタマイズが出来そうです。

今回はSTINGER5の子テーマを作ります。作ったファイルをサーバーにアップロードする手順も紹介します。また、PHPを使いますが、手順通りに行えば知識がなくても問題ないです。

WordPressのテーマ構成について

子テーマを作る前にWordPressのテーマがどのような構成になっているのか、ざっと説明します。理解してなくても手順通りにやれば、子テーマは作れるので面倒な人は飛ばしてもいいです。

WordPressを使ったテーマは、ヘッダー部コンテンツ部フッター部サイドバー部など複数のパーツに分割されていて、それぞれをPHPファイルで定義しています。

これらの情報はMySQLを使ってデータベースに記録されていて、webサイトを表示する時にそれらを動的に呼び出し組み合わせる事でページを構成している訳です。

動的に表示するので、当然ながらユーザーサイド的には表示速度が遅くなる欠点がありますが、管理者サイド的には、記事などの変更を行う度に全体の再構築を行わないので作業の時間を無駄にしなくて済むといった利点があるのです。必要なパーツのみの変更で済むと認識しておけば分かりやすいと思います。

動的表示の欠点を補うアイデアとして、作成したページのHTMLファイルをキャッシュに保存しておくといった方法があり、プラグインなどを導入すると簡単に利用できたりします。

ただプラグインによっては問題もあるようなので、アクセス数が増大した時などに検討した方が良いと思います。

テーマの構成要素

管理画面メニューの外観から「テーマの編集」にテーマを構成するPHPファイルやCSSファイルがあります。下記はSTINGER5のテーマ構成です。

  • テンプレート
    404.php:リンク切れの404ページ
    ad.php:広告
    archive.php:記事のアーカイブ
    comments.php:コメントページ
    footer.php:フッター
    functions.php:テーマのための関数
    header.php:ヘッダー
    home.php:トップページ
    index.php:メインインデックス
    itiran.php:記事一覧
    kanren.php:関連記事
    newpost.php:新着記事
    page.php:固定ページテンプレート
    scroll-ad.php:追っかけ広告
    search.php:検索結果
    searchform.php:検索フォーム
    sidebar.php:サイドバー
    single.php:単一記事の投稿
    sns-top.php:SNS
    sns.php:SNS
  • スタイル
    style.css:スタイルシート
    editor-style.css:ビジュアルエディターのスタイルシート

何か変更を加えたい場合は、これらのファイルを編集すれば良いのですが、前述した様に色々と不都合もあるので、それぞれの子テーマを作ってカスタマイズしていく訳です。

子テーマについて

子テーマとは、親テーマへの直接編集を避けるための差分ファイルの様なものです。実際には、サイトがブラウザ上で表示される時に動的に反映されるので、編集したい部分だけを子テーマに記述すれば良い訳です。

読み込まれる順番や、反映のされ方については注意すべき点もあります。

style.cssファイル

親テーマが先に読み込まれて、子テーマの内容が上書きされます。注意点は、子テーマの属性値に何も記述していない箇所は親テーマの値が有効になるので、スタイルを使いたくない時は、0やnoneを記述する必要があります。

functions.phpファイル

子テーマが先に読み込まれるため、親テーマと同じ関数は上書きされないので、追加の関数のみの記述となる。(関数を置換する方法はあります)

注意点は、子テーマに親テーマと同じ内容を記述したり、「 ; 」を抜かしてしまうなどすると、エラーを起こし管理画面やブログにアクセス出来なくなります。その際は、サーバーのファイルマネージャで修正してください。

その他のファイル(header.phpやfooter.phpなど)

style.cssと同様に子テーマの内容が上書きされる。

子テーマの作成手順

子テーマを作るまでの全体的な流れは、

  1. themesディレクトリに子テーマ用のフォルダを作る。
  2. 子テーマ用のフォルダにとstyle.cssファイルを作る。
  3. functions.phpstyle.cssに必要なコードと情報を書き込む。

子テーマのフォルダとファイルを作成する

エックスサーバーを例に、フォルダとファイルの作成をしてみます。と言っても、管理画面から作成できるので、FTPソフトなどを使う必要もなく簡単に出来ます。

  1. ファイルマネージャにログインする。
  2. themesフォルダにアクセスする。/サイト名/public_html/wp-content/themes/
  3. [作成]でフォルダ名を入力して作成。例)sample-child
  4. 作成した子テーマのフォルダにアクセス後、[作成]でファイル名を入力して作成。例)style.css functions.php

子テーマのfunctions.phpを編集する

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を編集する

style.cssにチェックを入れて、編集をクリックし、ファイルに下記の情報をコメントとして書き込みます。テーマの編集でファイルに入力してもいいです。

/*
Theme Name: 子テーマの名前 
Theme URI: 子テーマのディレクトリ
Description: ファイルの説明
Author: 子テーマの作者名
Author URI: サイトURL
Template: 親テーマのディレクトリ(wp-content/themes/この部分
Version: 子テーマのバージョン
License: ソフトウェアライセンスに関する事ですが例の通りで良いです。
License URI: 同上
Tags: スタイルシートの内容
Text Domain: テーマ識別用のID。翻訳用とかに利用されるとか
*/

記入例です。

/*
Theme Name: sample-child
Theme URI: http://サイト名/sample-child/
Description: sample Child Theme
Author: 作者名
Author URI: http://サイト名
Template: sample
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: flexible-width, custom-header, custom-menu, editor-style
Text Domain: sample-child
*/

必須項目は、Theme NameTemplateなのでこの2つだけ正しく記入すればOKです。注意点は、「:」の後に全角スペースがあると正しく読み込めないので、半角スペースにする。Templateは大文字と小文字を区別する。

最後に外観のテーマに移動して、子テーマを有効化します。これで子テーマが親テーマを引き継ぐ事になるの正しく表示されているはずです。

管理画面の外観からテーマの編集に移動すると、編集するテーマの選択で子テーマ(stinger5-child)を選択できるようになっています。

今回作ったfunctions.php以外にもheader.phpやfooter.phpなども同様にして子テーマを作る事が出来るので必要に応じて作ってみましょう。

STINGER5には別の方法を適用する

前述の方法で子テーマを作成すると、STINGER5の場合は親テーマの内容を上書きしてくれないので別の方法を取ります。詳しくは、STINGER5の子テーマでCSSが上手く反映されない原因を解決!より

@import url()を使用する

@import url(‘../stinger5ver20141227/style.css’);を子テーマのstyle.cssに記述します。

/*
Theme Name: stinger5-child
Template: stinger5ver20141227
*/
@import url(‘../stinger5ver20141227/style.css’);

子テーマのfunctions.phpは必要ないです。

まとめ

子テーマを作る事で、安心安全にテーマテンプレートを弄れるようになります。

ただし、ファイルを弄りすぎるとエラーを起こす事があります。特にfunctions.phpは、管理画面に入れなくなり、編集も出来なくなります。サーバーのファイルマネージャで編集すれば元に戻るので焦らずに修正しましょう。

これで積極的にカスタマイズ出きるので、恐れずに色々と試してみてください。

 - WordPress, テーマ

Message

メールアドレスが公開されることはありません。

  関連記事

Akismetでスパムコメントをフィルタリングする

我がブログ最初の訪問者はスパムサイト様でした(笑)どこから嗅ぎ付けるの分かりませ …

WordPressのログインIDがバレるのをEdit Author Slugで防ぐ

ヤバイよヤバイよ、何て仕様なんだあ。何がヤバイかと言うと、ログインIDがダダ漏れ …

ヘッダー画像を広げたブログ幅に調整する【STINGER5】

ブログの一番上に付けるヘッダー画像を変更しました。 だた、そのまま変更したのでは …

サイドバー広告を表示させ続ける追尾広告の実装方法【STINGER5】

アフィリエイトについて扱ってるブログなのに、今まで広告を全く掲載していませんでし …

Google Analytics Dashboard for WPを導入してWordPressで解析確認!エラーが出た時の対処方法あり

Google Analyticsでアクセスを確認したいけど、その度にログインする …

Google ChromeでWPの管理画面が崩れた時の対処方法

みなさん普段、WordPressの作業をどのブラウザでしていますか? 私は、Fi …

STINGER5の子テーマでCSSが上手く反映されない原因を解決!

子テーマを作ったので、取り合えず文字サイズでも変更してみようと思ったのですが、な …

ビジュアルエディタのレイアウトをブログと同じにする

記事を書いてはプレビュー、また書いてはプレビュー・・・・・ 少々几帳面なのか、文 …

目次
「Table of Contents Plus」プラグインで目次を簡単に作成!

雑誌を読む時は、まず目次から見るという人は多いと思います。 目次を見ると、記事の …

WordPressをインストールした後やっておきたい事のまとめ

新しいサイトを作って、WordPressをインストールした後に毎回しておくべき事 …