indexページ一枚から始めるWordPressテーマの自作

2021.2.1

自前のブログを用意しようと思うと、一番便利なのは2021年になってもWordPressっぽいです。他にもCMSは色々とあるようですが、プラグインの数、テーマの数、情報の数からかなり有利かと思われます。その中で面白いデザインをしたいと思うと、やはり市販のテーマでは限界があるというもの。このホームページも年一ペースで地道にオリジナルテーマを更新しています。できるだけ楽に始められるオリジナルテーマの制作をご紹介。

ポイントはできるだけシンプルに始めるということ。

最低限必要なスキル

HTMLの基本とCSSの基本+PHP構文の基本スキルが必要です。でも全てのタグを覚える必要はありません。基本的な記述とこれはHTMLなのかPHPなのかが判別できて、このタグなんだっけ?とかこんな機能あるかな?が調べられれば問題ありません。さらにWordPressはPHPで動いているので、そのIF分とかが書けるようになれば、ぐっと自由度が増します。

とりあえずindexページ1枚あれば良い

https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E9%9A%8E%E5%B1%A4

上の日本語Codexをみていただければわかるように、WordPressはトップページ、投稿ページ、固定ページ、カテゴリー一覧ページ等、いろいろなタイプのページをシステマチックに出力、それぞれのデザインを変えたり組み替えたりすることが可能ですが、最低限「index.php」があればページの表示ができます。それプラス、スタイルシート「style.css」を基本としてこのサイトも構築しました。

本当なら、ヘッダー・フッターは別ファイルに切り出して、アーカイブ一覧やカテゴリー表示で分けたりもできるのですが、1ファイルにまとまっておくと、複数ファイルを開く必要もなく一目できるので楽です。もちろんデザインはできるだけ同じような表示なるように考えておきますが、部分的な表示の切り替えは「index.php」内でPHPのIF文で対応します。あとは必要な機能に応じてfunction.phpとcomments.phpを追加する程度です。

うちのindex.phpはこんな感じです。<body>タグ内はページの構造によるので省略していますが、大枠はこれでOK。シンプルなHTML構文にところどころPHP構文が入っていますが、そこがWordPressで操作されるところです。WordPress独自の関数を使いながら必要な情報が表示されるように組み立てていきますが、どうしても必要な関数はそんなに多くないです。重要なポイントは下記2点。

<head>タグの最後に<?php wp_head(); ?>
<body>タグの最後に<?php wp_footer(); ?>
を記述することでWordPressが必要とするスタイルやスクリプトは自動で読み込まれるようになります。

また<body>タグ内に記述されている<?php body_class(); ?>は自動でページの種類をクラス名にしてくれます。これでCSSが指定しやすくなります。

メインループとなっているこの部分がWordPressの面白いところ。この中でトップページなのか、投稿リストの表示なのか、単一のページなのかを判別してうまいこと出力してくれます。

必要な条件分岐

phpのif文を使って条件分岐をすることができます。is_home()やis_archive()はページの種類を判別するWordPress関数です。以下リファレンス。

https://wpdocs.osdn.jp/%E6%9D%A1%E4%BB%B6%E5%88%86%E5%B2%90%E3%82%BF%E3%82%B0

やろうと思えばかなり複雑な条件分岐ができますが、実際使うのはそんなに多くありません。is_home()はトップかどうか、is_archive()はアーカイブ一覧ページかどうかで、日付・カテゴリー・タグ一覧も一緒に指定できます。他にis_singular() ってのが投稿ページでも固定ページでも単一ページの表示なら引っ掛けるってので便利でした。

ウィジェットを使う

WordPressの便利な機能が、「ウィジェット」と呼ばれるパーツを配置できる点。オリジナルテーマでもちゃんと設定しておけば使用することができます。indexページ内に以下の記述をして「ウィジェット」を配置できる「ウィジェットエリア」を設定します。

「widget-area1」は任意のエリアネームです。functin.php内に以下の記述をしてウィジェットエリアを定義します。

register_sidebarを複数個記述すれば、複数のウィジェットエリアを定義できます。これでウィジェットを使った自由度の高いホームページのデザインが可能になりました。

まとめ

WordPressは機能も情報もおおいですが、思った以上にシンプルにテーマを自作することができます。せっかく自身のサイトを作ろうってのに、人と同じデザインジャヤだよって方。ぜひチャレンジしてみてはいかがでしょうか?

Tag: WordPressテーマ自作
KITAMULABO / NOTE / indexページ一枚から始めるWordPressテーマの自作

このページにコメントする

サイト全体へのご意見・ご感想はBBSからお願いします

CAPTCHA