技術ブログ移設しました click here!

【記事ページの作成】自作ワードプレステーマの最低限を作る④

wp自作テーマの最低限

前回まで

wp自作テーマの最低限 【404, searchなどのファイルを作成】自作ワードプレステーマの最低限を作る③

記事一覧ページを作る

今回変更するファイル,フォルダ

  • loop-main.php
  • index.php
  • style.css
  • img

記事読了後のデモデザイン

デモサイト

loop-main.php

このloop-main.phpに記事をループ処理で吐き出していくテンプレートを作ります。

記事のデザインは以下の記事を参考にします。

記事カードを作る

loop-main.phpは現在空なので、以下のコードを書いていきます

style.css

記事カードのスタイリングと軽いフォント設定をします。

style.cssに以下のコードを追記します。

index.php

loop-main.phpをindex.phpに読み込んでいきます。

<?php get_template_part(‘loop’, ‘main’);?>をmain-contentの中に追記するだけでOKです。

追記した後のindex.php全文は以下のようになります。

assets/img

loop-main.phpの11行目で、記事カードのデフォルト画像を指定しています。

/assets/img/default.jpg を指定しているので、そこにdefault.jpgを追加します。

現在のファイル構造

bone/
├ index.php/
├ style.css/
├ functions.php/
├ header.php/
├ sidebar.php/
├ footer.php/
├ single.php/
├ page.php/
├ 404.php/
├ search.php/
├ loop-main.php/
└ assets/
・・├ js/
・・├ css/
・・└ img/
・・・・└ default.jpg/

自作ワードプレステーマの最低限を作るシリーズ一覧

wp自作テーマの最低限 【HTMLをPHPに】自作ワードプレステーマの最低限を作る① wp自作テーマの最低限 【index.phpを分割する】自作ワードプレステーマの最低限を作る② wp自作テーマの最低限 【404, searchなどのファイルを作成】自作ワードプレステーマの最低限を作る③ wp自作テーマの最低限 【記事ページの作成】自作ワードプレステーマの最低限を作る④ wp自作テーマの最低限 【投稿ページの作成】自作ワードプレステーマの最低限を作る⑤ wp自作テーマの最低限 【検索ページ, カテゴリページの作成】自作ワードプレステーマの最低限を作る⑥ wp自作テーマの最低限 【まとめ】自作ワードプレステーマの最低限を作る⑦

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です