いまさらだが、ポストタイプを3つ定義済み。

• Web開発（web）
• 雑記（note）
• シリーズ（series）

✅ トップページで使うコンポーネント定義

• atoms/thumbnail
• atoms/author
• atoms/title
• atoms/data
• atoms/button
• molecules/entries

あたり。

author

記事の執筆者情報を扱うコンポーネント。

  $author = [];
  $author['slug'] = get_the_author_meta('user_nicename', $entry->post_author);
  $author['profile'] = get_posts([
    'name' => $author['slug'],
    'post_type' => 'profile',
  ]);

テンプレ呼んで値渡す。

get_template_part('components/atoms/author', null, $author);

受け取る。

var_dump($args);

それぞれこれを繰り返す感じかな。

✅ 寄り道してSass/SCSSのコンパイルテスト

コミットはこのへん → add index.scss · hippohack/hippoblog-theme@9ede1c3

• ソースはパブリックフォルダ外に置く
• gulpfile.js調整
• package.json調整
• yarn
• gulp sass してCSSが吐き出されればOK

yarn とかは入ってる前提ですね。

🎉 Bootstrap Icons使ってみる

• Bootstrap Icons · Official open source SVG icon library for Bootstrap

インストール。

yarn add -D bootstrap-icons    

Sassでインポート。

.scssがないのでちょっと横着して.cssを.scssにリネームした

@import "../../node_modules/bootstrap-icons/font/bootstrap-icons.scss";

fontsフォルダをコピーしてテーマ内へ。

/themes/hippoblog_v2/_assets/fonts/bootstrap-icons.woff2

font-faceを追加

@font-face {
  font-family: bootstrap-icons;
  src: url(../fonts/bootstrap-icons.woff2);
}

で、<i class="bi-alarm"></i> な感じで呼ぶ。

コミット → add Bootstrap Icons · hippohack/hippoblog-theme@f33b117

と全然コンポーネント定義なんてしてないがここまで。つづく！

📣 宣伝です

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

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