ウェブコーディング

子テーマを使ってWordPressを自由にカスタマイズしちゃいましょう

WordPressをカスタマイズするときに使うと便利なのが「子テーマ」です。

子テーマとはベースとなるテーマのCSSやPHPファイルを引き継いで、部分的にカスタマイズを反映させるためのテーマのコピーのことだと思うとわかりやすいかと思います。

子テーマを作っておくと

  • オリジナルのテーマを壊してしまう心配がない
  • 必要な箇所の記述だけを加えればOK

とすごく便利です。

また親テーマのアップデートがあっても、カスタマイズした箇所が子テーマ内に保存されていれば、上書きされることがなく、1から設定し直す必要もありません。

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

この記事は2015年6月10日の記事を再編集したものです。

子テーマに必要なもの

はじめにデスクトップなど、どこでもいいので子テーマ用のフォルダを準備しておきます。

2016-11-11_00h42_10_wordpress%e5%ad%90%e3%83%86%e3%83%bc%e3%83%9e%e3%82%92%e7%90%86%e8%a7%a3%e3%81%97%e3%81%a6%e8%87%aa%e7%94%b1%e3%81%ab%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%9e%e3%82%a4%e3%82%ba%e3%81%97

用意が整ったら、あとはWordPressのテーマフォルダへフォルダごと、ごっそりアップロードするので、一旦自分のPCに作成します。

フォルダ名は自由ですが、「MAG_child」などのフォルダ名にしておくと、子テーマであることがわかりやすくなります。

大体は「(親テーマ名)_child」のような名前にするのが定番ですね。

子テーマを作るときに含めるファイルとして、基本的には3種類あります。

  • style.css
  • functions.php
  • テンプレートファイル(header.phpやsingle.phpなど)

今回はこの内よく使われる「style.css」と「functions.php」の2つを作っておきます。

2016-11-11_00h47_39_wordpress%e5%ad%90%e3%83%86%e3%83%bc%e3%83%9e%e3%82%92%e7%90%86%e8%a7%a3%e3%81%97%e3%81%a6%e8%87%aa%e7%94%b1%e3%81%ab%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%9e%e3%82%a4%e3%82%ba%e3%81%97

子テーマとして機能するためにほんとうに必要なファイルは「style.css」だけですが、子テーマのメリットを最大限活かすなら「functions.php」も作っておいたほうがいいですね。

では、1つずつ作っていきます。

「style.css」の作り方

親テーマのデザインを決めているCSS以外に、ボタンやリンクのデザインを追加で設定するときに役立つのが「style.css」です。

「style.css」は内容が決まっているので、テキストエディタを開いて、以下をコピペしてください。

それぞれ、使用するテーマによって書き換えます。

  • Theme name : 子テーマの名前
  • Template : 親テーマフォルダ名
  • @import~ : 親テーマフォルダ名

TCDテーマのMAGを使用する場合はこうなります。

2016-11-11_10h27_43_wordpress%e5%ad%90%e3%83%86%e3%83%bc%e3%83%9e%e3%82%92%e7%90%86%e8%a7%a3%e3%81%97%e3%81%a6%e8%87%aa%e7%94%b1%e3%81%ab%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%9e%e3%82%a4%e3%82%ba%e3%81%97

最後に「style.css」という名前のファイルとして、最初に作った子テーマ用のフォルダへ保存します。

このとき、テキストのエンコードが「UTF-8」になっていることを確認した方がいいですね。

2016-11-11_11h14_52_wordpress%e5%ad%90%e3%83%86%e3%83%bc%e3%83%9e%e3%82%92%e7%90%86%e8%a7%a3%e3%81%97%e3%81%a6%e8%87%aa%e7%94%b1%e3%81%ab%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%9e%e3%82%a4%e3%82%ba%e3%81%97

Windowsは標準では「shift-jis」になっているので、テキストエディタの機能で「UTF-8」へ変換しましょう。

【補足】親テーマのフォルダ名を確認する方法

親テーマのフォルダ名はサーバーのFTPなどを開くと確認できます。

2016-11-11_10h41_07_wordpress%e5%ad%90%e3%83%86%e3%83%bc%e3%83%9e%e3%82%92%e7%90%86%e8%a7%a3%e3%81%97%e3%81%a6%e8%87%aa%e7%94%b1%e3%81%ab%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%9e%e3%82%a4%e3%82%ba%e3%81%97

【補足】子テーマの設定について

はWordPressが作動するように「UTF-8エンコードとして読み込んでね」という指定です。

おまじないみたいなものです。あまり深く考えないでください。

ここは子テーマの名前を自由に決められる部分です。

フォルダ名などは気にせず、好きな名前を付けられます。

は親テーマのフォルダへリンクするための設定なので、親テーマのフォルダ名をそのまま記載します。

は親テーマのスタイルシートを反映する設定です。

親テーマのフォルダ名をそのまま記載します。

 

ここまでが、子テーマに必要な部分です。

コメント欄には他にも記載できる設定があるのでフルバージョンを紹介しておきます。

上記をコピペして使用してもらっても構いません。

【補足】テキストエディタでのエンコード

人の目から見てテキストは普通の文字ですが、テキストを機械(PCやWordPress)に読み込ませるときは、文字コードという暗号のようなもので置き換える必要があります。

このときの文字コードが「Shift-JIS」だったり「UTF-8」だったりといろいろあります。

WordPressでは「UTF-8」という文字コードを使用しないと、文字化けが起こったり、うまく機能しなかったりしてしまうので、エンコードを変更しておく必要があります。

この作業はWindows標準の「メモ帳」ではうまくできないので、私の場合は「Notepad++」というテキストエディタを使用しています。

窓の杜ライブラリ

「functions.php」の作り方

functions.phpはページが表示されたときに自動で実行したい処理を加えたい場合に使います。

フィルターフックとかアクションとか呼ばれているものです。

例えば、WordPressではパスワード保護されているページのタイトルに強制的に「保護中:」と入力されてしまいす。

この機能を停止させるには「functions.php」へ以下をコピペします。

PHPに詳しくない人は無理に利用するのはやめておいたほうがいいので、一応注意だけしておきます。

必要な書式は1行目に

と書いて置くことだけです。

1行目に書いておけば、その後には必要ありません。

この記載がないと、WordPressがPHPファイルとして読み込めないので必ず書いておきます。

なのでテキストエディタを開いてこうなっていれば機能します。

2016-11-11_11h28_31_wordpress%e5%ad%90%e3%83%86%e3%83%bc%e3%83%9e%e3%82%92%e7%90%86%e8%a7%a3%e3%81%97%e3%81%a6%e8%87%aa%e7%94%b1%e3%81%ab%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%9e%e3%82%a4%e3%82%ba%e3%81%97

これを「functions.php」として子テーマ用のフォルダへ保存します。

このときも「UTF-8」エンコードになっているかを確認しておきましょう。

子テーマのアップロード・有効化

ここまでで完成した子テーマには「style.css」と「functions.php」ができています。

これをFTPソフト(FileZilla)を使ってアップロードします。

2016-11-11_12h04_24_wordpress%e5%ad%90%e3%83%86%e3%83%bc%e3%83%9e%e3%82%92%e7%90%86%e8%a7%a3%e3%81%97%e3%81%a6%e8%87%aa%e7%94%b1%e3%81%ab%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%9e%e3%82%a4%e3%82%ba%e3%81%97

サーバーの用意しているブラウザのFTPを使っても問題ありませんし、WordPressの管理画面からアップロードしてもOKです。

ここまで終われば、あとは有効化して、ウィジェットやメニューを設定します。

WordPressの管理画面から[外観]→[テーマ]でテーマを有効化します。

2016-11-11_12h38_35_wordpress%e5%ad%90%e3%83%86%e3%83%bc%e3%83%9e%e3%82%92%e7%90%86%e8%a7%a3%e3%81%97%e3%81%a6%e8%87%aa%e7%94%b1%e3%81%ab%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%9e%e3%82%a4%e3%82%ba%e3%81%97

ウィジェットやメニューを確認して、親テーマで使用していた設定を復元します。

2016-11-11_12h44_14_wordpress%e5%ad%90%e3%83%86%e3%83%bc%e3%83%9e%e3%82%92%e7%90%86%e8%a7%a3%e3%81%97%e3%81%a6%e8%87%aa%e7%94%b1%e3%81%ab%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%9e%e3%82%a4%e3%82%ba%e3%81%97

もともと使用していたウィジェットは下の方に保管されていると思います。

2016-11-11_12h46_02_wordpress%e5%ad%90%e3%83%86%e3%83%bc%e3%83%9e%e3%82%92%e7%90%86%e8%a7%a3%e3%81%97%e3%81%a6%e8%87%aa%e7%94%b1%e3%81%ab%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%9e%e3%82%a4%e3%82%ba%e3%81%97

ここでは何もないですが、子テーマを有効化するとここに一旦移動することが多いので、ここから元のウィジェットまでドラッグすると復元できます。

メニューはそのまま残っているものを再度選び直せば、元通りになるはずです。

2016-11-11_13h04_46_wordpress%e5%ad%90%e3%83%86%e3%83%bc%e3%83%9e%e3%82%92%e7%90%86%e8%a7%a3%e3%81%97%e3%81%a6%e8%87%aa%e7%94%b1%e3%81%ab%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%9e%e3%82%a4%e3%82%ba%e3%81%97

子テーマの導入は以上になります。

【補足】FTPソフト

自分はFTPソフトの「FileZilla」を使っています。

サーバーの方で用意されているFTPを使ってもいいのですが、いちいちログインしたり、フォルダごとの転送ができないので、FTPソフトのほうが便利だと思います。

FileZilla プロジェクト日本語トップページ – OSDN

使い方はそれほど難しくないので、使いならがら慣れていけると思います。

まとめ

補足情報を色々書いてありますが、作業内容は

  • 子テーマ用のフォルダを作る
  • 「style.css」を作る
  • 「functions.php」を作る
  • 子テーマをアップロード・有効化する
  • ウィジェット・メニューを復元する

という感じです。

基本的にコピペで作れるようにしてありますので、是非試してみてください。

 

追伸:

子テーマを作って、もともとのテーマをカスタマイズするというのも、ブログの楽しみ方としてはありだと思います。

でも、ブログ収入とかを考えているなら、コンテンツ作成に力を入れたいところです。

なので、私の場合は「カスタマイズの簡単さ」と「ブログの書きやすさ」が理由でこのテーマを使っています。

WordPressテーマ「MAG(TCD036)」

記事が気に入ったら
tipLog を "いいね!"
Facebookで更新情報をお届け。

tipLog

WordPressテーマ

WordPressテーマ「MAG(TCD036)」

スポンサードリンク

関連記事

  1. ウェブコーディング

    PHPでデータベースから取得した配列を加工する方法

    データベースからデータをfetch関数などで取得すると、大体は2次元配…

  2. ウェブコーディング

    WEB言語を手を動かして1から学べるサイト

    HTML・CSS・PHPなどのウェブ系の言語をどれくらい理解しているで…

  3. ウェブコーディング

    WordPressでgoogle-code-prettifyの導入と最低限のCSS設定をする方法

    google-code-prettifyとはウェブページ上のソースコー…

  4. WordPress

    関連記事を表示するWordPressプラグイン「Yet Another Related Posts …

    WordPressの関連記事というと、タグやカテゴリーから関連性を決め…

  5. ウェブコーディング

    CSSのfloatを使ってリキッドレイアウトを組んでみた

    先日ふと思い立って、一からWEBサイトをデザインし始めることにしたので…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


スポンサードリンク

ピックアップ記事

スポンサードリンク

カテゴリー

  ロゴマルシェ - LogoMarche   ボタンマルシェ - ButtonMarche
  1. グラフィックデザイン

    自作?外注?その前にコレ!ブログのロゴデザインをするなら「Logaster」を使…
  2. グラフィックデザイン

    フォトレタッチ・グラフィックデザインの無料ソフト「GIMP」(≒Photosho…
  3. ブログ収益化

    無料レポートスタンドの「メルぞう・Xam」を120%使い倒す方法
  4. ブログ収益化

    脱初心者しませんか?Amazon・楽天のアフィリエイトを上手に活用するための予備…
  5. グラフィックデザイン

    レイアウトデザインに最適な無料ソフト「inkscape」(≒Illustrato…
PAGE TOP