【WordPress カスタマイズ課題】入門編:プロフィールサイト/詳細ページを追加しよう

練習課題

課題内容
先日、WordPressサイトを制作してあげた友人から連絡があり、自転車の詳細情報を表示できるようにしてほしいとの相談がありました。
トップページの自転車の画像をクリックすると、詳細ページが表示されるように修正を行います。
素材
学習用の素材をダウンロードする
※素材の中で使用している画像は当サイトのものではない為、グレー画像に置き換えています

WordPressサイトをカスタマイズしよう!

下記の「デザインカンプ」と「コーディング仕様」をもとに、WordPressサイトのカスタマイズにチャレンジしてみましょう!

デザインカンプ

▼XDデータ
XDデータをダウンロードする

▼PC表示(詳細ページ)

▼スマホ表示(詳細ページ)

コーディング仕様

トップページ
自転車の画像をクリックすると各自転車の詳細ページへ遷移します。
詳細ページ
アイキャッチ、タイトル、本文を表示します。
レスポンシブのブレークポイントはトップページと同じです。
詳細ページのパーマリンクにはスラッグを使用します。スラッグ名は、「bicycle1」~「bicycle3」です。

ヒント

コーディングのヒントです。コーディングに悩んだ際は、参考にしてください。
  • 詳細ページは、テンプレートファイル「single.php」を使用します。
  • アイキャッチ画像は、「the_post_thumbnail()」または「the_post_thumbnail_url()」で表示します。
  • タイトルと本文は、「the_title()」と「the_content()」で表示します。
  • パーマリンクの設定は、管理画面の「設定」→「パーマリンク設定」から行います。

解答例(ソースコード、デモサイト)

コーディングが完了したら、下記の「ソースコード」と「デモサイト」を参考に、自分の作ったコードとサイトをチェックしてみてください。

ソースコード

解答の1例です。コーディングの仕方は1パターンだけではないので、あくまでも参考として自分のソースコードと比較しながらチェックしてみてください。

ソースコードはこちら

デモサイト

デモサイトと自分で作成したサイトを比較して、デザインや動きなどをチェックしてみてください。

デモサイトはこちら

コーディング練習 課題一覧

【入門編】基礎学習を終えた後のウォーミングアップ用の練習サイト

【初級編】簡単なHTML、CSSでできるシンプルな練習サイト

【中級編】少し複雑なHTML、CSS、JavaScriptを使用した練習サイト

【上級編】難易度の高いHTML、CSS、JavaScriptを駆使した練習サイト

【番外編】Webサイト制作でよく使う技術を練習