Sponsored Link
WordPressの子テーマ
WordPressのテーマでは、子テーマというものを作ることが出来る。
WordPressでブログやWebサイトを作るならば、多くの場合テーマは無料のものか購入するか作られたものをインストールした方が良い。自分で作るにはプログラミングとデザインの両方のスキルが必要だし、良い外観のテンプレートを作れてもバグがあったりSEOに弱ければ問題だから。
しかし、ある程度使っていくと他者の作ったテーマを弄りたくなる。デザインのこだわりが出てくる。すると、デフォルトの「外観」→「カスタマイズ」で編集出来る範囲のデザイン変更では物足りなくなる。有名なテンプレートだと他ブログとの違いも少なく個性もないし、積極的にアレンジしたい。
そんな時、子テーマを作成して弄る方がリスクがなくメリットが多い。
著者にしくんについて
ブログ移籍しました
「にしくん」は"KOHEY NISHI"にメイン活動名を変更し、ブログを移籍しました。・「にしくん」から”KOHEY NISHI”にメイン活動名を変更する
・KOHEY NISHI’S CBD ONLINE SHOPとは?|CBDエバンジェリスト
Sponsored Link
作成方法と編集上のメリット
子テーマというのは上書き機能。最初に親テーマから情報を読み取るのだけれど、子テーマが存在していれば子テーマの内容が反映させる。親テーマではタイトルを赤字に指定していても、子テーマでタイトルを青字とすればタイトルは青くなる。
子テーマを作成する主なメリットは2つ。
・テーマをアップデートしても影響がない
・ミスしても簡単に元どおりに出来る
WordPressは常に新しい仕様になるからそれに合わせてテーマも更新される。そんな時、インストールしたテーマそのもののコードを弄っていても更新されると、弄った部分が更新にしたがって消えてしまう。
また、もし子テーマを作って弄ったなら、ミスした場合にも子テーマの一部を削除すれば簡単に元通りになる。
だから、子テーマを作って弄った方が良い。
親切なテーマだと、子テーマも用意されている。しかし、よくわからなければ子テーマまでインストールしていないかもしれないので、ここでは自分で作ってみる。
最低限用意するのはスタイルシート(style.css)と、テーマのための関数(functions.php)だけ。
とても簡単!
“style.css”と”functions.php”
まずは子テーマの名前を決めてZIPファイルを作る。
フォルダの名前の付け方に決まりはないけれど、親テーマが”theme”という名前なら“theme-child”とかにするとわかりやすくて良い。そして、フォルダの中に”style.css”と”functions.php”を作る。
それぞれ以下のように記述する。
※あくまでも例で、テーマ名はそれぞれのテーマの名前、また必要に応じて他にも複数情報を記述
CSSやFunctionsを追加する場合は子テーマの方に記述する。
そして、ZIPファイルにして「外観」 → 「テーマ」 → 「新規追加」 → 「テーマのアップロード」 → 「ファイルの選択」 → 「今すぐインストール」で、子テーマの方を有効化する。
すると、テーマをアップデートしても子テーマの追加部分の変化はないし、バグや不都合があれば記述を削除するだけで良い。
例えば「読みやすいブログ記事の書き方|PREP法、”strong”と”b”の違い」に記述したものを追加してみる。
蛍光色マーカー
moreタグ
を子テーマの方に記述すると、classの”pink_line”やmoreタグ位置の広告を使えるようになる。
部分的にオリジナルにする
全体的には今のテーマで気に入っている。ある程度のデザインはカスタマイズとウィジェットで出来る。しかし、それを超えたテーマとは違うオリジナルの編集をしたいことがある。
例えば、今現在のテンプレートで大方は満足しているのだけれど、ある時、他に一部だけ羨ましいデザインがあったとする。LION MEDIAというテーマはスマホで開くと上にニュースみたいな横流れの文字スペースと、スライド式メニューがある。(下の画像タップで動き確認可)
これがデフォルトで存在しないテーマでも、子テーマを使うことで実装出来る。ヘッダー部分を記述するファイル”header.php”をコピーして子テーマに置き、それを編集する。すると、本来のテーマで出来ないレベルの変更追加も出来るようになる。
ただ与えられたテーマのデザインで満足ならばそれで良い。しかし、皆とデザインの差別化をしたい!徘徊率や広告効果を上げたい!もっと自分らしいブログにしたい!となった時は子テーマが必須になるので、子テーマを作成しよう!
子テーマ作成方法と編集上のメリット
フリーランスITエンジニア向け案件紹介
ショートコードを作成使用
転職を本気で考えている方向けのプログラミングスクール!【WebCampPRO】