【HTMLからWordPress化の手順】入門編:プロフィールサイト

WordPress化の手順

課題のHTMLサイトをWordPress化する簡単な手順です。

①:テーマディレクトリを作る

テーマ用のディレクトリを任意の名前で作成します。

デモサイトの場合は、「profile」という名前で作成しています。

②:HTMLファイルをWordPressファイルに置き換える

まずは、既存のHTMLファイルをコピーしてWordPressファイルに置き換えます。

HTM WordPress 備考
index.html header.php
index.php
footer.php
3ファイルに分割する
css/style.css style.css そのままコピー
img/ img/ 画像はディレクトリごとそのままコピー
但し、bicycle1~bicycle3.jpgは、投稿ページのアイキャッチとして設定するので削除

③:ファイルの中身をWordPressの記述に書き換える

次に、ファイルの中身をWordPressの記述に書き換えます。

書き換えるポイントは下記の通りです。

  • style.css に「Theme Name」を記載
  • titleの取得方法を修正
  • descriptionの取得方法を修正
  • 画像等ディレクトリの取得方法を修正
  • URLの取得方法を修正
  • wp_head()とwp_footer()を追加

④:functions.phpの作成

functions.phpを新規に作成し、下記の処理を記述します。

  • style.cssの読み込み
  • 投稿ページのアイキャッチを有効化

⑤:記事を投稿する

WordPressの管理画面から、Bicycleに表示する3記事を投稿します。

投稿画面では下記の3つを設定します。

  • タイトル
  • 本文
  • アイキャッチ画像

⑥:Bicycleセクションの表示修正

Bicycleセクションの情報を投稿記事から取得して、新しいものから順に表示するように修正します。

コーディング練習メニューに戻る

他のコーディング練習にチャレンジする

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

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

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

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

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