2020年、Web制作を独学していた時期に、見た講座やセミナーの記録を1本ずつ記事にしていた。当時は自分の理解を確かめるために書いていたが、5年経って読み返すと、個別に置いておく意味が薄れている。動画が非公開になっていたり、ツールのバージョンが変わっていたりして、断片だけ残っていても役に立たない。
そこで19本を1本にまとめた。内容はすべて2020年時点のもので、今の環境ではそのまま通用しない部分がある。当時どういう順序で何を学んだか、という記録として残す。
WordPressのテーマを自作する（ともすたチャンネル）
谷口まことさんのYouTube「WordPress開発講座」を#01から#08まで順に見た。テーマをゼロから作る講座で、ここで初めてWordPressの仕組みが腑に落ちた。
学んだ順序はこうだった。
#01〜#02 テーマの最小構成
wp-content/themes/ の中にフォルダを作り、index.php と style.css の2つを置くだけでテーマとして認識される。index.php は空でもいい。style.css の先頭にコメント形式でテーマ情報を書くと、管理画面のテーマ選択に出てくる。
/*
Theme Name: ともすた
Author: ともすた
Version: 1.0
Description: テーマの練習です。
*/#03 テンプレートタグ
the_post() the_content() the_author() を index.php に書くと、記事の中身が表示される。作者名がメールアドレスで出てしまうのは、管理画面の「ユーザー → プロフィール」でニックネームと表示名を変えれば直る。
#04 ループ
while (have_posts()): the_post(); で記事を順番に取り出す。これが一覧ページの基本になる。
#05 テンプレート階層とパーマリンク
個別記事へのリンクは the_permalink() で出力する。テンプレート階層という考え方があって、WordPressがどのファイルを使うかを自動で判断している。
#06 functions.php
add_theme_support('title-tag') を書くと、WordPressが <title> タグを自動生成してくれる。自分で書くと制御しにくくなるので、この機能に任せる。サムネイル画像の表示もここで有効化する。
#07 カスタムフィールド
タイトルと本文だけではレイアウトが作りにくい。たとえば商品の値段を本文に書くと、更新のたびにレイアウトが崩れる。値段専用の入力欄を作れば解決する。それがカスタムフィールド。
#08 カスタム投稿タイプ
WordPressには「投稿」と「固定ページ」の2種類があるが、register_post_type で3つ目を追加できる。これがカスタム投稿タイプ。
講座では「カスタム三兄弟」という言い方をしていた。カスタムフィールド、カスタム投稿タイプ、カスタムタクソノミーの3つ。
WordPress標準デザイン講座（書籍）
最初はWordPressの教科書を買ってVagrantで環境を作ろうとしたが、どうしてもできなかった。「WordPress標準デザイン講座」に変えて、開発環境を Local by Flywheel にしたらあっさり動いた。
環境構築でつまずいたら、ツールを変える判断も要る、と学んだ。
書籍で整理できたのはテーマのファイル構成だった。
- 最低限必要なのは
index.phpとstyle.cssの2つ - ファイルの種類は「メインテンプレート」「インクルードファイル」「テーマ関数ファイル」に分かれる
screenshot.pngを置くと、テーマ選択画面にサムネイルが出る
WordPressの仕組みを先に理解する
アキユキさん（Webデザイナー戦略室）の動画で言われていたことが印象に残っている。仕組みを理解しないままコードをコピペしても、うまくいかない。
実際そのとおりだった。ともすたチャンネルの講座を最後まで見たあとに、初めて他人のコードの意味が読めるようになった。
ブログ運営の初期設定
マナブさんの「WordPressを使ったブログの始め方」も見た。#1〜#4は他の解説動画と大きく変わらなかったが、#5のSEO対策の回だけは丁寧に見た。更新情報サービスの設定、パーマリンクの設定、プラグインの選定。
このとき「コードをきれいに色分けして表示したい」と思って調べたが、当時は実装方法が分からなかった。
Shopify
2020年後半はShopifyも並行して触っていた。
たかぼーさんのYouTube「ShopifyでECサイトを作ってみよう！」を見ながらデモサイトを作った。Shopify Japan公式のセミナー動画も、初期設定・ストア開設#1（商品追加とデザイン）・#2（決済と送料設定、注文処理）を順に見た。
りーぬさんのブログには、Shopifyの勉強法と実際に獲得した案件の内容が書かれていて、学習の道筋を決めるのに役立った。
オンラインセミナーに参加した記録
Twitterで見つけたセミナーに、いくつか参加した。
- connpass — IT勉強会のプラットフォーム。無料のものも多い。当時は「クリックして大丈夫かな」と不安だったが、参加してみると普通のZoomだった
- フリーランスの信頼を築くお仕事の取り方 — 地域で仕事を取る方法とネットで取る方法、進め方の違い
- Shopify × フリーランスの仕事術（デイトラ主催、500円） — 初案件までのロードマップ、営業方法、EC制作現場の実際
- 初めての案件の取り方（デイトラ主催） — 副業から独立した方々の話
- Shopifyネットショップ入門ワークショップ（宮崎県都農町） — 地域の農家さん向けにネットショップを立ち上げる企画
セミナーそのものより、参加している人たちが何を課題にしているかが分かったことが大きかった。独学していると、自分の位置が分からなくなる。
5年後から見て
当時の記録を読み返して思うのは、順序は間違っていなかった、ということ。
- テーマを自作する講座で仕組みを理解する
- 書籍でファイル構成を整理する
- 実際のサイトを触る
コピペで動かすところから入っていたら、たぶん今も分からないままだった。
一方で、当時の情報の多くはもう使えない。Bootstrapはv4からv5に変わり、当時勧められていたツールのいくつかは開発が終わっている。技術情報の記事は、書いた時点の日付とセットでしか意味を持たない。だから今回、個別記事を残さずまとめる判断をした。
