子テーマ作成レッスン

2020年10月度 八王子WordPressミートアップ Child Theme 子テーマ 八王子WordPressミートアップ 1

自己紹介 かい いくこ • 甲斐 郁子（IK’s Tech） • 八王子在住在勤のフリーランスなWeb開発エンジニア • フロントからサーバまでなんでもこなします • 愛犬家（というよりうちのワンコロ最高！） • 八王子WordPressミートアップオーガナイザー 八王子WordPressミートアップ 2

導入：最初に • 必須スキル • HTML/CSSの基礎知識 • WordPressのテーマのインストールと有効化ができること • フォルダとファイルがどう構成されているか理解していること • テキストエディタでファイルを編集できること • localを使って自分のマシンにWordPressサイトを作成できること 八王子WordPressミートアップ 3

導入：目標 • 本レッスンは以下について学び、理解することを目標にしています。 • 子テーマとはどんなものか？ • どんな時に子テーマを使えば良いのか？ • 子テーマの作成方法は？ 八王子WordPressミートアップ 4

導入：対象環境 • WordPress5.5最新版 • テーマ「Twenty Twenty」最新版 • localで構成した、ローカル環境下のWordPress 八王子WordPressミートアップ 5

子テーマとは何か？ • 別のテーマ（親テーマ）のコードに触れる事なく、そのテーマを上書きし たり、別の要素を追加したりする事の出来るテーマのことです。 • 親テーマが更新されても子テーマは保護されます。 八王子WordPressミートアップ 6

こんなことないですか？ 既存のWordPressテーマのデザインを変更したい いろいろ調べてテーマのファイルの場所を特定！ テーマファイルを編集して、デザインを変更した！ テーマの更新が来たら、変更が全部消えた！！ 八王子WordPressミートアップ 7

第一のルール • WordPress開発における第一のルール WordPressのファイルを直接変更してはいけない！ 八王子WordPressミートアップ 8

直接編集不可のファイル • WordPressコアファイル • プラグインファイル • テーマファイル （例外：編集可能なように作成されたスターターテーマ） 八王子WordPressミートアップ 9

なぜ直接編集不可なのか？ • テーマの更新がカスタマイズした変更を消去する • テーマを壊す可能性がある • WordPress及びプラグインはハックされたテーマとは動作しない場合があ る 八王子WordPressミートアップ 10

安全にテーマをカスタマイズする方法 • 別のテーマ（親テーマ）の派生である子テーマを作成する • 子テーマはデザイン要素を上書きしますが、その他の部分は親テーマに依存します • 子テーマは親テーマの機能を上書きしたり、追加したりできる 八王子WordPressミートアップ 11

なぜ子テーマを使うのか 親テーマを壊したり 更新によってカスタマイズが削除されたり 危険をおかすことなく 安全にテーマをカスタマイズする方法 ＝子テーマを使う 八王子WordPressミートアップ 12

子テーマはどのように動くか • 子テーマは親テーマより先に最初にロードされ、親テーマの機能・要素へ の上書きと追加のみ含む。 八王子WordPressミートアップ 13

子テーマはどのように動くか • 全てのCSS、テンプレート、画像、その他のファイルは子テーマのフォル ダに存在し、オリジナルの親テーマは完全な状態で保たれる。 • どこか壊れても、問題を引き起こしている子テーマ内のファイルを削除ま たは修復すれば、回復する。 八王子WordPressミートアップ 14

実習：子テーマを作ろう・ステップ１ • テーマフォルダ • WordPressテーマはどれでも自身のフォルダを持っています。 • 以下のように /wp-content/themes を見るとインストールされているテーマそれぞれ のフォルダがあります。 八王子WordPressミートアップ 15

実習：子テーマを作ろう・ステップ１ • ここに、自分のテーマフォルダを作ります 八王子WordPressミートアップ 16

実習：子テーマを作ろう・ステップ2 • 子テーマの最小構成として、style.css ファイルが必要 • style.css ファイルは、子テーマの後に親テーマを読み込むようにWordPress に伝えます • style.css ファイルは、子テーマフォルダのルートレベルに存在する必要が あります 八王子WordPressミートアップ 17

実習：子テーマを作ろう・ステップ2 • style.css ファイルは、以下のコードが先頭に存在する必要があります 八王子WordPressミートアップ 18

実習：子テーマを作ろう・ステップ2 • エディタを使って、先ほどの内容を新しいファイルに書き込みます 八王子WordPressミートアップ 19

実習：子テーマを作ろう・ステップ2 • 子テーマフォルダの中に style.css という名前でファイルを保存します 八王子WordPressミートアップ 20

実習：子テーマを作ろう・ステップ3 • 親テーマと子テーマのスタイルシートを格納 • style.css ファイルを「enqueueing scripts」と呼ばれる関数を使って呼び出します • この関数は functions.php ファイルに書きます • この例は親テーマが style.css という一つのCSSファイルしか使っていない場合のみ有効です。 八王子WordPressミートアップ 21

実習：子テーマを作ろう・ステップ3 • より望ましい書き方は以下の通りです。 八王子WordPressミートアップ 22

実習：子テーマを作ろう・ステップ3 • 子テーマの中の functions.php は、親テーマの functions.php に置き換わるも のではありません。 • 子テーマの中には functions.php は、親テーマに機能を置き換えるのではな く、追加・変更したりするためのフック、アクション、フィルタを置きま す。 八王子WordPressミートアップ 23

実習：子テーマを作ろう・ステップ3 • 子テーマフォルダの中に functions.php というファイルを作ります • functions.php は子テーマフォルダのルートレベルに存在する必要があります 八王子WordPressミートアップ 24

実習：子テーマを作ろう・ステップ3 • 以下のコードを書いて、保存しましょう 八王子WordPressミートアップ 25

実習：子テーマを作ろう・ステップ4 • スクリーンショットファイル • テーマのスクリーンショットは、ダッシュボードの外観＞テーマに表示される画像 です。 • テーマのスクリーンショット画像は必須ではありませんが、ないと寂しいものです • 推奨画像サイズは880×660です。 八王子WordPressミートアップ 26

実習：子テーマを作ろう・ステップ3 • 画像を横880px、縦660pxのサイズに切り抜く等して、用意します。 • 画像のファイル名を、screenshot.png として保存します。 八王子WordPressミートアップ 27

実習：子テーマを有効化 八王子WordPressミートアップ 28

実習：子テーマを有効化 八王子WordPressミートアップ 29

実習：子テーマを有効化 八王子WordPressミートアップ 30

実習：子テーマの動作 • 子テーマの中のファイルによって、子テーマのファイルがどうやって親テ ーマのファイルに働きかけるか説明出来たと思います。 • 子テーマのファイルは、同じ名前の親テーマのファイルの中の要素を上書きしたり、 機能を追加したりするか、親テーマのファイルを置換します。 八王子WordPressミートアップ 31

演習1：親テーマのCSSファイルを上書き • Hello, world!の文字の大きさを変えてみましょう 八王子WordPressミートアップ 32

演習2：親テーマのテンプレートを上書き • 「Powered by WordPress」を「Proudly Powered by WordPress」に書き換え てみましょう。 八王子WordPressミートアップ 33

終わりに • 子テーマは、親テーマにノータッチで、親テーマのスタイルを変更したり、 機能を追加したりすることが出来るものです。 • 親テーマのいいとこ取りができて、そこに+αできる仕組みです。 八王子WordPressミートアップ 34

おまけ 35

前段・ローカル環境を作ろう • Why？ • 制作にあたりローカル(自分のPC内部）環境で、インターネットには公開せず、開発 を進めたいことがある • 開発・テスト前の段階のサイトを公開することはセキュリティ的に危険 • 開発用のID/PASSになっていることが多い • プラグインなどを完全にセットアップしていない • バグがあることがある 八王子WordPressミートアップ 36

前段・ローカル環境を作ろう • How？ • MAMPやXAMPPなどを使う • Dockerを使う • Localを使う←NEW!! 八王子WordPressミートアップ 37

前段・ローカル環境を作ろう • LocalはWordPress専用のローカル環境構築ツール • 余計な設定がいらない！ 八王子WordPressミートアップ 38

前段・ローカル環境を作ろう https://localwp.com/ にアクセス 八王子WordPressミートアップ 39

前段・ローカル環境を作ろう ダイアログで自分の環境を選択 八王子WordPressミートアップ 40

前段・ローカル環境を作ろう • Work Emailのみ必須 • First Name、Last Name、Phone Numberは任意 • 入力したら、GOT IT NOW! をク リック 八王子WordPressミートアップ 41

前段・ローカル環境を作ろう 八王子WordPressミートアップ 42

前段・ローカル環境を作ろう • ダウンロードしたファイルを解凍して、インストール • インストール後、解凍したインストーラは削除またはアンマウントしてOK • インストールが終了したら、起動 • 起動時に、セキュリティ警告が出たら、「開く」をクリックして、起動を継続して ください 八王子WordPressミートアップ 43

前段・ローカル環境を作ろう • 起動する 八王子WordPressミートアップ 44

前段・ローカル環境を作ろう • 新しいサイトを作ります 八王子WordPressミートアップ 45

前段・ローカル環境を作ろう • サイト名を英数半角文字で入力 • CONTINUEをクリック 八王子WordPressミートアップ 46

前段・ローカル環境を作ろう • Preferredを選択して、CONTINUEをクリック 八王子WordPressミートアップ 47

前段・ローカル環境を作ろう • ユーザ名、パスワードを入力して、ADD SITEをクリック • メールアドレスは変更しない！ 八王子WordPressミートアップ 48

前段・ローカル環境を作ろう • できた！ 八王子WordPressミートアップ 49

前段・ローカル環境を作ろう • 管理画面に入る 八王子WordPressミートアップ 50

前段・ローカル環境を作ろう • 先に設定したユーザ名とパスワードで入ります 八王子WordPressミートアップ 51

前段・ローカル環境を作ろう • 作ったサイトを見る 八王子WordPressミートアップ 52

前段・ローカル環境を作ろう 八王子WordPressミートアップ 53

前段・ローカル環境を作ろう • 停止するには、STOP SITEをクリック 八王子WordPressミートアップ 54

前段・ローカル環境を作ろう • 起動するには、START SITEをクリック 八王子WordPressミートアップ 55

前段・ローカル環境を作ろう • WordPressファイルはどこ？ • ~/Local Sites/サイト名/app/public に存在 八王子WordPressミートアップ 56