プラグインを使わずにWordPressテーマをカスタマイズしたい！
2016/04/08
WordPressのブログをカスタマイズしたいときには、
１．プラグインを使う
２．コードを書き換える
という2種類の方法がありました。
大別すると、プラグインを使ったカスタマイズか、使わないカスタマイズかということになります。
プラグインを使った方法は
でご確認ください。
ここではたのちんで実装しているプラグインを使わないカスタマイズについて記録しています。
スポンサーリンク
Contents
プラグインを使わないでWordPressをカスタマイズする
WordPressでブログを作成する場合、まずはベースになる「テーマ」を導入することはわかりました。
たのちんは「STINGER5」を導入しました。
そしてそのベースの部分に足りない機能やデザインなどを付加するために、プラグインを使います。
しかし、プラグインだけではもの足りない場合や不具合が生じる場合は、テーマそのものにカスタマイズを加えていくことになります。
しつこいようですがおさらいすると、
|
１．独自ドメインをとる |
です。
たのちんの場合は、
|
５．機能拡張のためプラグインを入れる ６．必要に応じてコードを書き換える ←今ココ |
になります。
プラグインの導入はとても簡単でした。
基本的には、インストールして有効化するだけです。
それだけで、必要な機能が追加されました。
本当にシロウトさんにやさしいです…。
こんなに便利なプラグイン、タダで利用できるなんて…。
世界中のプログラマーさんに感謝です。
おかげさまでなむみたいなIT音痴でもブログが開設できるんです。
しかしプラグインだけでは実装できない、あと一歩踏み込んだカスタマイズをしたくなってしまった場合、ちょっとばかしハードルが高くなります。
そのテーマに設定されているルール（コード）そのものを修正する必要があります。
テーマのカスタマイズをするとはどういうことなのでしょう？
テーマにはたくさんのルールが詰め込まれている
テーマを入れる前のWordPressのサイトはこんな感じです。
テーマ（STINGER5）を入れた後のWordPressのサイトはこんな風になります。
テーマには、WordPressの見た目や機能を強化するたくさんのルールが設定されています。
例えば、
|
などなどなどなど…
これらのたくさんのルールに従って、ブログの見た目や機能の設定がされています。
ですから、テーマを変えるとブログのイメージがガラッと変わるんですね。
今のたのちんはこんな感じですね。
テーマのカスタマイズはコードを修正して行う
そのテーマのコードがどのように書かれているかは、ダッシュボードから見ることができます。
外観→テーマの編集へ進み「編集するテーマを選択」から、テーマを選択してみます。
真ん中の窓の中に、意味不明な文字列がぶわーーーーっと記述してありますよね。スクロールしてみてみるとわかりますが、かなりの量のテキストが記述してあります。
これはHTMLという、ウェブ上の文書を記述するためのマークアップ言語です。
この文字列には全部意味があって、そのルールに則ってWEBサイトが表示される仕組みになっています。
例えば、上の図の赤枠の部分は文字の表示ルールですが、
font-size: 14px というのは文字のサイズが14pxですよ、という意味です。
line-height: 27px というのは行の高さが27pxです。
文字のサイズが14pxで行の高さが27pxというのは、文字の上下に6.5pxずつの余白が入るよ、という意味になります。
margin-bottom: 20px というのは改行幅です。
段落が終わって改行すると、20pxの余白が入る設定になっています。
実際にブログを表示するとこうなっています。
試しに、
font-size: 20px
line-height: 35px
margin-bottom: 25px
に書き換えるとこのようになります。
テーマのカスタマイズとは、このようにそのテーマに定められているコードを書き換えたり、書き加えたりして行うカスタマイズのことを言います。
コードはそれぞれのパーツごとのテンプレートファイルの中にある
コードを書き換えたらカスタマイズができるよ。と言われましても。
どのコードが、どこのどんなルールに該当しているのかさっぱりわからん！！と思います。
なむもおおよそしかわかりません(;^ω^)汗
WordPressのテーマは、パーツごとに決められたルールを繋ぎ合わせて構成されていて、そのパーツごとに「テンプレートファイル」があります。
WordPressテーマのパーツ構成は以下のような感じです。
WordPressの管理画面を見てましょう。
「外観」→「テーマの編集」から編集するテーマを選択したら、右側に「テンプレート」と書いてある欄がありますよね？
ここにあるのがそのテーマの「テンプレートファイル」です。
例えば、
ヘッダー（header.php）と書いているテンプレートファイルには、ヘッダー部分に関するルールが書いてあります。
スタールシート（style.css）というテンプレートファイルは、サイトの見栄えやデザインに関するコードが記述されています。
ですから、カスタマイズしたい部分のテンプレートファイルの中のどこかのコードを修正したらいいんだろうな…。ということはおおよそわかるようになっています。
しかし、所詮シロウト。
ひとつひとつのコードの意味がわかりません…。
やりながら覚える形式でチャレンジをしてみることにした
これは勉強が必要だ！と思いました。
ググりました。
HTMLってなに？？ 30分間HTML入門
CSSってなに？？ CSSの基本
PHPってなに？？ 初心者用PHP入門
…入門や基本と銘打ってあります。
…よね？？
…ほんとう？？？
ということですみません、なむにはとんと理解ができませんでした…。涙
理解できないのならこれ以上のカスタマイズはムリか…。
どうしよう…。
ここで打ち止めか…。
とも思いました。
あきらめかけました。
が、
これを仕事にしているプロじゃあるまいし何も１０の内10全部を理解することはないよね。
最低限必要な2くらい聞きかじって、あとはトライアンドエラーでやるだけやってみるべ？
カスタマイズ情報はみなさんがたくさんネット上にあげてくれてるし、基本コピペコピペ。
ということで、ノリでチャレンジすることにしました（適当ｗ）。
いろいろやってみました。
どうやってもうまくいかないこともありました。
ダメなときはあきらめました（切り替え上手）。
でも見た感じうまくできたところもありました。
プロがみたら邪道なこともしているのかもしれませんが、致命的に不具合が出ないのならまあそれで良しとすることにしました。
へっぽこカスタマイズ恥ずかしげもなく公開しますｗ
＊テーマをカスタマイズしてしまう前に子テーマを準備しよう
＊【子テーマ】STINGERの子テーマ「SIMPLESTER」のインストール方法
＊【子テーマ】エックスサーバーで子テーマのテーマフォルダを作成する
＊たのちんが行ったプラグインなしのブログカスタマイズ
このとおりにやれば、たのちんくらいのブログはできます。
やってやれないことはないです。
ぜひチャレンジしてみてください。
そして詳しい方、なむに教えてください（切実）
＊参考：
テーマを自作したい人必見！WordPressの基本的な仕組み
テンプレート階層の基本とテーマのカスタマイズ
WordPressテーマカスタマイズ事始め・基本構造を理解してカスタマイズしてみる