ハートちゃん

オリジナルテーマでブログサイトをつくる

WordPressのオリジナルテーマでブログサイトをつくることに挑戦しました。
箇条書きで簡単にまとめておこうと思います。

1.静的サイトをつくる(デザイン→コーディング) 

  ここまででもふつーに大変…

2.環境構築

  • Local by flywheel
  • WP初期設定

3.プラグインのインストール

  • WP multibyte Patch
  • Show current Template

4.カテゴリー作成、投稿の設定

  初期カテゴリーは消せないので注意

5.固定ページ作成(埋め込み部分と、ブロックを利用する部分を考える)

6.テーマフォルダーを作成(themesにコピー)

  • index.htmlをindex.phpに変える
  • style.css(テーマ用コメントを記述)
  • imagesフォルダ
  • スクリーンショット画像(screenshot.png)

7.ひきつづきいろいろ

  • header、footer切り分け
  • 画像を絶対パスに
  • サイト内リンク(home_uri)
  • get_stylesheet_uri記述(あとでfunctions.phpで読み込む)

8.functions.php作成

  • サイトコンテンツ 最大幅を指定
  • フィードリンクを追加
  • タイトルタグを動的に出力
  • 埋め込みコンテンツをレスポンシブに(youtubeなど)
  • index.phpからcss読み込み部分を削除し、関数を追加

9.ループ処理

  投稿データ出力(ページネーション、アーカイブページのタイトル)

10.サイトの共通部分をまとめる

  • header.php
  • footer.php
  • sidebar.php

11.サイトの共通部分をまとめる

  • header.php
  • footer.php
  • sidebar.php

12.個別投稿ページ(single.php)

 共通部分を置き換える、ループとテンプレートタグで投稿内容を出力

13.固定ページ(page.php)

  ヘッダー、フッター置き換え(サイドバー不要)、ループとテンプレートタグでページ内容を出力

14.ホームページ

  〃

15.エラーページ(404.php)

  ループ不要、リンク先をhome_urlにする

16.アイキャッチ設定

  functions.phpに、index.phpに記述を追加

17.ウィジェット設置

18.カスタムメニュー機能

19.お問い合わせフォーム設置

  プラグイン(MW WP Form)

20.公開!

  サーバー契約、データベース作成などいろいろ経てアップロード




長い道のりです…お疲れ様でした。

参考:WordPress標準デザイン講座 20LESSONS【第2版】


↑とてもわかりやすく学べました、ありがとうございます。
HTML/CSSを学んだあと、WordPress化を勉強してみたい方にはおすすめです!