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

Hello World!!
杉山です。

前回、記事のループを作成し、ブログっぽくなりました。

今回することは以下の通りです。

  • フッターをさくっと作る
  • 記事ページと固定ページを作る

では、さっそく始めていきましょう。

フッターをさくっと作る

今回、作成する自作テーマではフッターメニューを用意せずにすごくシンプルなものにしようと思っております。

私のブログと同じような、フッターにしていきましょう。

では、サクッと作るためにfooter.phpに記述していきましょう。

それでは、以下のような記述をfooter.phpに書いていきましょう。

これは、著作者の表示で、このブログの文章や画像は著者に権利がありますよっていうのを示している一文になります。

なので、今回「杉山 翔平」としている部分はあなたの名前に変えてください。

また、「2019年」という記述はブログを開始して著作が発生した日になりますで、ブログを作った年のよって、任意の数字を入れてください。

できましたら、次にスタイルを整えていきましょう。

style.cssにこんな感じに書きました。

これで実際にどう表示されるか確認してみましょう。

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

簡単にフッターを作ることができました。

それでは、いよいよブログの要の部分。

記事ページを作っていきましょう。

記事ページとは、トップページから記事カードをクリックされた際に表示されるページのことで、コンテンツの要の部分になります。

現在、読んでいただいているこの部分も記事ページになり、フォルダの中の「single.php」というファイルにより構成されています。

今回、記事のページの構成はこうです。

それでは、これを基にsingle.phpに書いていきましょう

single.phpに記述

記事ページも前回やこれまで作ってきた、ページ同様でワードプレス側で用意されている関数をつなぎ合わせて作りこんでおります。

投稿日表示は、前回の記事ループ同様で、「get_the_date」という関数を使いました。

ブログのタイトルも前回同様の「the_title」という関数で表示させております。

カテゴリーも前回同様に表示のさせかたもしています。

サムネイル画像の表示のさせ方だけ、今回は違います。

前回では、imgタグを使用せず、背景画像として表示させておりました。

その理由は、投稿する記事によってサムネイルのサイズは変わりますので、すべての画像は目一杯、レイアウト崩れをおこさず表示させるのが非常に難しいので背景画像にしましたが、今回は記事ごとのページなので、サムネイル画像も記事ごとで、その記事のサイズにあわせればレイアウト崩れは起こさないので。

縦横比を合わせて、全体を表示させるように今回は、imgタグを用いて記述しております。

そして、記事の本文は「the_content」によって表示させることができております。

この、記事の本文部分を「kiji-content」というクラス名で囲うことで、本文のカスタマイズが可能になります。

例えば、行間の間を指定したり。

見出しのスタイルを変えたり。ちなみに見出しのスタイルは以下のサイトが非常に参考になり、かっこいい見出しがそろっています。

あとは、リストのカスタマイズをしたり。

私のブログでいうと…

  • こうゆう
  • やつです
  • ね。

これは、あなた好みにcssを触ってみてください。

そして、後はレイアウトをcssで整えればそれっぽく見えるはずです。

style.cssに記述

記述が終わりましたら、確認してみましょう。

こうですね、成功です。

これで記事ページも完成です。

それでは、ついでに固定ページの作成もおこなっていきましょう。

といってもすごく簡単です。

先ほどに記事ページを丸々コピペして、よけいなものを省くだけです。

例えば、固定ページには投稿日やカテゴリーは必要ありませんよね?

それらを省きます。

こんな感じですね。

記事ページのcssを使うので、新たに記述する必要はないでしょう。

個別に設定したい場合は、クラス名を変更したりして、ご自身で変えていただければと思います。

これで、ブログが完成です。

次回で、このシリーズはラストになります。

次回仕上げをして、是非自分のブログを世に出していきましょう!

お疲れさまでした。