【HTMLからWordPress化 練習課題】入門編:プロフィールサイト

練習課題

前提
HTMLサイトの制作がまだの方は、こちらからHTMLサイトの制作を行ってください。
【HTML/CSS コーディング練習】入門編:プロフィールサイト/LP
課題内容
先日、プロフィールサイトを作ってあげた友人から、自転車の写真を変更したいとの連絡がありました。
自転車の写真やコメントは、自分で自由に編集したいとのことでしたので、先日作ったHTMLサイトをWordPress化して投稿画面から編集できるようにします。
設定単価
WordPress化対応:3万円
素材
既存サイトの素材をそのまま使用します。

WordPress化してみよう!

下記のコーディングポイントを参考に、既存のHTMLサイトをWordPress化してみましょう。

コーディングポイント

WordPress化するにあたってのコーディングポイントは下記の通りです。

トップページ(Bicycle)
・3つのコンテンツをそれぞれ記事化して、投稿日付が新しいものから順に表示します。
・画像、タイトル、テキストは、それぞれ投稿ページ内のアイキャッチ、タイトル、本文から表示します。
・本文は30文字でカットして残りは「…」で表示します。

ヒント(WordPress化の手順)

WordPress化で悩んだ場合は、下記のWordPress化の手順を参考にしてみてください。HTMLサイトをWordPress化する流れについて解説しています。

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

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

ソースコード

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

ソースコードはこちら

デモサイト

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

デモサイトはこちら

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

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

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

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

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

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