WordPressで自作テーマを作ってブログ運営をしよう Vol.3

Hello World!!
杉山です。

今回は第三弾となります。

いよいよ、ブログの見た目の部分を作りこんでいきましょう。

今回することは、以下の一点集中となります。

  • ヘッダー部分を作りこむ

ヘッダー部分を作りこむ

では、さっそくヘッダー部分を作りこんでいきましょう。

まず、ヘッダーとはサイトの一番上の部分のことをいいます。

例えば、私のブログでしたら、この部分。

こちらをヘッダー部分といいます。

私のブログの場合は、サイトの名のロゴが真ん中にどーんときて、その下にすぐ画像をつけております。

しかし、今回作るテーマはもっとシンプルなものを作っていきますので私とかぶることはありませんのでご安心ください笑

今回、作るヘッダーのイメージはこんな感じです。

画像などは考えておりません。

シンプルな、作りを目指していきましょう。

前回で、自作テーマのアップロードが終わっていると思いますので、まずはそちらを有効化して、実際のどんな風に表示されるか見てみましょう。

ワードプレスのダッシュボード画面で、アップロードした自作テーマを下記のように有効化してください。

有効化が終われば、一度、自分のテーマがどのように表示されるのかを見てみましょう。

こちらをクリックしてみましょう。

このボタンを押せば、サイトがどのように表示されるかを確認することができるようになりますので覚えておきましょう。

たぶん、まだ真っ白だったと思います。

それでOKです!

では、ヘッダー部分を実際にコーディングしていきましょう

「htdocs」→「wordpress」→「wp-content」→「themes」→「自作テーマのフォルダ」を開きましょう。

そのフォルダ内の、header.phpをテキストエディタで開きます。

では、まずはHTMLから書いていきましょう。このイメージの通りに書く必要があります。

HTMLやCSSに書き方の決まりはありませんので、とりあえずサンプルとして、私も書きますが、それが絶対に正しいわけではないので、ご自身でも一度書いてみてください。

これで、どんな風に表示されるか、ワードプレスのダッシュボード画面で、見てみましょう。

こうなっていたら成功です。

お世辞にも、見やすいものとは言えませんので、CSSで装飾していきましょう。

次に、書いていくファイルは「style.css」というファイルになります。

そちらを開いてみましょう。

そこに、こんな風に書いてみました。

書き終わったら、保存してもう一度、ダッシュボード画面に戻り確認してみましょう。

どうでしょう?

次は、わりとそれっぽくなってきたかと思います。

上記のようになっていれば、成功です!

しかし、これでは直接ファイルに書きこまないと左上のブログタイトルも変わりませんし、その下のカテゴリーメニューも変わりません。

自分で、直接ファイルを書き込まないといけないものを「静的」といったりします。

そして、今回自作テーマを作る上で行っていきたいのが「動的」です。

「動的」とはつまり使う人によって、ブログのタイトルを変えたり、カテゴリメニューを変えたりできるコンテンツのことです。

ワードプレスでは、ダッシュボードを使ってブログを更新したり、コンテンツを作ったりしていくので基本的には、一回テーマを作成すると、直接テーマのファイルを触ることはありません。

あとは、すべてダッシュボード画面で行うようにしますので、ファイルとダッシュボード画面をphpというプログラミング言語を用いてコネクションさせなければいけません。

それでは、先ほどの「header.php」をphpを用いて書き直していきましょう。

まず、一番左上に位置するブログのタイトルを動的に書き換えましょう。

header.phpのこの部分ですね。

これを、phpに書き換えるとこうなります。

たったのこれだけです。とても簡単でしょ?

これも、もともとワードプレス側で作ってくれている関数を使っただけです。
コード内の、<?php bloginfo( ‘name’ ); ?>というのが関数にあたります。

これは、ダッシュボード画面より設定したブログ名をここに表示させなさいという命令になります。

具体的に説明しますと、ダッシュボード画面の以下のページに進んでください。

サイトのタイトル名の変更が終われば、一番下の「変更を保存する」で保存してください。

そして、いちどサイトがどのように表示されているか確認してみましょう。

左上を見てください、ブログのタイトルが先ほど設定したものに変わっていれば成功です。

では、次に下のカテゴリーメニューを作っていきましょう。

こちらも、これからブログを更新していき記事を作成するにあたりカテゴリもふえてくるでしょうし、記事の内容によっては、テーマ作成時点ではどんなカテゴリーが必要かはわかりません。

なので、こちらも記事を作成していく過程で、必要になるカテゴリーをその都度このメニューの中に増やせるように、こちらも「動的」にする必要があります。

それでは、こちらの部分をphpに書き換えていきましょう。

いきますよ?簡単すぎて驚かないでくださいね?笑

はい!

これで完成です。

驚くほど簡単です。これもワードプレス側で作られている関数を使っているので、たった一行で書けてしまいます。

そして、これらの関数は以下のサイトより探したり確認したりすることができますのでご参考まで。

関数リファレンス

しかし、このサイト読んでいてもよけいに難しく書かれたりしているので、理解するのが難しいと思います。

だから、一番はGoogle先生に聞くのが一番いいと思います。

「こんな機能追加したいな?」と思ったら、それをとりあえずGoogle先生に聞いてみてばたいてい、その問題は解決します。

これで、カテゴリーメニューも完成しましたが、いちおうちゃんと動作するか確認しておきましょう。

今回、使用した関数はカテゴリーを追加しても、そのカテゴリーの記事がないとメニューとして表示されませんのでご注意ください。

なので、ためしに一つ、新しいカテゴリーで適当な記事を作成してみましょう。

上記のように、記事を作成していってください。

作成して、完成すれば「公開する」をクリック。

この作業が終われば、表示が変わっているか確認してみましょう。

先ほど、入力したものが追加されていれば成功です。

こちらで、ヘッダー部分は完成になります。

本日はここまで、お疲れさまでした。