オリジナルテーマでブログサイトをつくる
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化を勉強してみたい方にはおすすめです!