子テーマ作成レッスン

241 Views

September 27, 23

スライド概要

Learn WordPress のレッスンを和訳し、スライドにした内容になります。
https://learn.wordpress.org/lesson-plan/create-a-basic-child-theme-for-block-themes/
おまけでローカル環境を簡単に作れるLocalのハンズオンレッスンを追加しています。

profile-image

都下在住在勤の個人事業主なシステムエンジニア兼プログラマ兼わんこの枕です。 主な使用言語はPHP ( WordPress, Laravel 等々)、JavaScript & TypeScript ( React, Next, Vue, Nuxt, Node 等々) 好きな言語はPHP ( 得意な言語もPHP ) 、でも最近は TypeScript に浮気中 習得したい言語はPythonとGo 八王子WordPress Meetupオーガナイザー

シェア

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

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

2.

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

3.

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

4.

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

5.

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

6.

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

7.

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

8.

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

9.

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

10.

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

11.

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

12.

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

13.

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

14.

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

15.

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

16.

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

17.

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

18.

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

19.

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

20.

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

21.

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

22.

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

23.

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

24.

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

25.

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

26.

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

27.

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

28.

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

29.

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

30.

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

31.

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

32.

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

33.

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

34.

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

35.

おまけ 35

36.

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

37.

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

38.

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

39.

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

40.

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

41.

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

42.

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

43.

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

44.

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

45.

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

46.

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

47.

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

48.

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

49.

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

50.

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

51.

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

52.

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

53.

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

54.

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

55.

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

56.

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