ブログを書くモチベーションを取り戻すためひとまずテーマをリニューアルしてみようと思う。で元々ポストタイプとして定義していた「シリーズ」を使ってみようという算段。

このシリーズではブログのリニューアルを兼ねて作業のログとして記事にしていこうと思う。

あと今更感しかないけど自作テーマ作成の手順として誰かの役に立てば幸いです。

• コード管理はこちら → hippohack/hippoblog-theme

要所要所でコミットのリンクを貼っておくので記事にできてないところが多々出てくるはずなので詳細見たい人はコミットを追いかけてもらったほうがいいかもしれません。わかりにくいかもしれませんが。。

テーマを定義する

WordPressは、テーマを定義する際に最低限

• index.php
• style.css

が必要。

雑なことして中身空っぽでもテーマとして認識された。たぶん、標準ではテーマ名とか書かないといけないはず。

設計する

よくあるテーマ直下に page-hoge.php とか single-fuga.php みたいなテーマフォルダ直下にずらーっとファイルを並べる構成にはしたくない。あと管理画面でテンプレートを選択する設計にもしたくない。

サイトの構成がデータベースのデータに依存するっていうのがどうも気に入らない。

これがWPの嫌いなところではある。余談。

で、WordPressでとなるとなんとなく気持ち悪い気もするけど練習のためアトミックデザインでやってみることにする。

• 参考
  • Atomic Design を分かったつもりになる – DeNA Design

今のところこんな構成で行こうかと。のちのち変わるかもしれんけど。

これだいぶニッチな設計なのであまり他の方の役には立たないかも。。

とりま home.php つくる（結果いらなくなるが）

ページコンポーネントを読み込むためのロジックをとりあえず定義。

このへん → Added logic to load page components · hippohack/hippoblog-theme@6bdb54e

結果、home.phpはいらなくなった。

v5.5で get_template_part() に追加された $argsパラメータを活用する設計にする。

• get_template_part() | Function | WordPress Developer Resources

ループ処理

/components/pages/home.php にまずポストの取得処理。

<?php
$args = array(
  'posts_per_page'   => 10,
  'orderby'          => 'date',
  'order'            => 'DESC',
  'post_type'        => ['web', 'note', 'series'],
  'post_status'      => 'publish',
  'suppress_filters' => true
);
$entries = get_posts($args);

で、次のコンポーネントにわたす。

<?php get_template_part('components/molecules/entries', null, $entries); ?>

で、つぎ。仮で。イメージ。

foreach ($args as $entry) {
  get_template_part('components/atoms/thumbnail', null, []);
  get_template_part('components/atoms/title', null, ['post_title' => $entry->post_title]);
  get_template_part('components/atoms/data', null, []);
  get_template_part('components/atoms/button', null, []);
}

うーん、アトミックデザインはこの程度のブログでかつWPで使うのは蛇足だなと感じ始めた。

しかしつっきる！

コミットはこのへん → ループ処理。仮で。 · hippohack/hippoblog-theme@59a3d82

その２へ続く。

📣 宣伝です

MENTAでWordPress関連のメンターもやってます。良ければご相談お待ちしていますm(_ _)m

🔗 https://menta.work/user/22673