WordPress をカスタマイズする時、ネットの情報をそのままコピペしていませんか？

WordPress をカスタマイズする場合に、ネットで検索をして出てきた情報を検証して、問題解決するまでの流れについて、RSSフィードに画像を含めて出力する場合を例にしたお話です。

このスライドは、2021年6月26日の WordCamp Japan 2021 LT大会での登壇スライドです。
https://japan.wordcamp.org/2021/session/autumn04/

YouTube動画でもご覧いただけます：
https://www.youtube.com/watch?v=SF7kA0VM9Fc

今回作ったプラグイン：
https://github.com/rocket-martue/add-thumbnail-to-rss-feed

Transcript

1. WordPress をカスタマイズする時、 ネットの情報を そのままコピペしていませんか？ @RocketMartue
2. 自己紹介 本田季之 (Honda Toshiyuki) 高松のうぇぶ屋さん．マークアップエンジニア。主に WordPress を使ったサイト構築、テーマのカスタマイズ など。業務委託も受付中。 趣味は、音楽を聴くことと料理をすること。たまに猫と遊 びます。コーヒー ハチミツ チョコ カレー が好き。 Kagawa WordPress Meetup オーガナイザー。 WordCamp Ogijima 実行委員。 https://instagram.com/wcogijima/ の中の人。 @RocketMartue
3. 今日は、 WordPress をカスタマイズするときに ネットで検索をして出てきた情報を検証して 問題解決するまでの流れについて、 RSSフィードに画像を含めて出力する場合 を例にお話します。
4. 質問・感想などは twitter へ #wcjpn21
5. 今回の依頼内容 1. WordPress で作成した会社サイトのトップページに、グループ会社のサ イトのお知らせ・イベント情報を表示したい。 2. 各サイトのお知らせ・イベント情報は投稿のカテゴリーで分かれている。 3. アイキャッチ画像も表示する。 4. グループ会社のサイトは、WordPress で制作してあるが、管理している のは別会社なのでログインや編集はできない。
6. 考えたこと • WordPressのサイトなので、 RSSフィードでお知らせ・イベント情報は取ってこれる • RSSブロック使えば簡単かな？
7. 実際に試してみる
8. 今回のサイトで使用しているテーマは Snow Monkey なので、 Snow Monkey Blocks の RSSブロックを試してみる
9. Snow Monkey Blocks の RSSブロック
10. Snow Monkey Blocks の RSSブロック レイアウトがいくつか選べるようになってい る。 それぞれ試してみると画像が表示されない ことに気付く。
11. Snow Monkey Blocks の RSSブロック
12. Snow Monkey Blocks の RSSブロック
13. WordPress の RSS フィードには画像デー タは含まれていないので、それが原因かな？
14. でも前に読んだ、キタジマさんのブログでは 画像が表示されていた記憶が…
15. ということで、ブログを確認
16. https://snow-monkey.2inc.org/2020/05/26/snow-monkey-blocks-v8-5-0/ より、抜粋 RSS ブロック 「最近の投稿ブロック」と同じデザインで RSS を表示することができま す。アイキャッチ画像やアバター画像の表示については、（多分）サービ スによって RSS 上でのデータの持ち方が違うため、使いたいサービス で画像が表示されなかったときはフォーラムや Slack で報告いただけ ればと思います。現状は note には対応しています！
17. note のフィードを確認すると
18. こんな形式で、画像データが出力されてました。
19. WordPress の RSS フィードには、 アイキャッチ画像は含まれていないので、 note と同じ形で画像データを持たせてやれ ば、画像が表示されるはず。
20. WordPress の RSS フィードにnoteと同じ形式で アイキャッチ画像のURLを出力させる！
21. どうやって画像データを追加するのか ネットで検索してみる
22. 「 WordPress RSSフィード 画像 」 で検索してみると、たくさ ん情報が出てきました。 いくつかのサイトに出て いる情報を見てみると、 大体同じようなことが書 いてあります。
23. 1. コアの RSSフィードのテンプレートファイル /wp-includes/feed-rss2.php をコピーして、テーマディ レクトリに置く。 2. テーマ内に置いたファイル feed-rss2.php にアイキャッチ 画像を含めるコードを追加する。 （追加する場所は、<item> と </item> の間。） 3. コアのファイル feed-rss2.php の代わりに、 テーマ内のファイル feed-rss2.php を使用するためのコー ドを functions.php に追加する。
24. feed-rss2.php に追加するコードの例
25. アイキャッチが設定されていれば、画像URLを取得して の形で出力するというコードが書いてあるので、
26. アイキャッチが設定されていれば、画像URLを取得して の形で出力するというコードが書いてあるので、 これをnote のフィードに合わせて
27. アイキャッチが設定されていれば、画像URLを取得して の形で出力するというコードが書いてあるので、 これをnote のフィードに合わせて に変更すればOK！
28. functions.php に追加するコードの例
29. なるほどなるほどと思ったけれど、 ここで問題が
30. 今回の依頼内容 1. WordPress で作成した会社サイトのトップページに、グループ会社のサ イトのお知らせ・イベント情報を表示したい。 2. 各サイトのお知らせ・イベント情報は投稿のカテゴリーで分かれている。 3. アイキャッチ画像も表示する。 4. グループ会社のサイトは、WordPress で制作してあるが、管理している のは別会社なのでログインや編集はできない。
31. 今回の依頼内容 1. WordPress で作成した会社サイトのトップページに、グループ会社のサ イトのお知らせ・イベント情報を表示したい。 2. 各サイトのお知らせ・イベント情報は投稿のカテゴリーで分かれている。 3. アイキャッチ画像も表示する。 4. グループ会社のサイトは、WordPress で制作してあるが、管理している のは別会社なのでログインや編集はできない。
32. そうです。 グループサイトのWordPressは、別会社が管理して いるので、テーマにテンプレートファイルを追加したり、 functions.php にコードを追加できません。
33. ただ プラグインを追加することはできるということなので、 おれおれプラグインを作ればなんとかなりそう
34. functions.php に追加するコードは、 そのままプラグインの方でも使える
35. コアからコピーして テーマに追加するファイル feed-rss2.php はどうする？
36. feed-rss2.php にどんなコードが書いてある のか、とりあえず見てみる。
37. すると、
38. コードの中に アクションフックを発見
40. アクションフック do_action( 'rss2_item' ); があるので、プラグインで add_action( 'rss2_item' ) を使えば、テンプレートファイルをコピーしなくても アイキャッチ画像が出力できる
42. これをプラグイン化して グループサイトにインストールすれば、 RSSブロックに画像が表示される ！
43. プラグイン化
45. ここで、 先ほどネット上で見つけた手順を もう一度確認
46. 1. コアの RSSフィードのテンプレートファイル /wp-includes/feed-rss2.php をコピーして、テーマディ レクトリに置く。 2. テーマ内に置いたファイル feed-rss2.php にアイキャッチ 画像を含めるコードを追加する。 （追加する場所は、<item> と </item> の間。） 3. コアのファイル feed-rss2.php の代わりに、 テーマ内のファイル feed-rss2.php を使用するためのコー ドを functions.php に追加する。
47. アクションフック１つで出来ることが ずいぶんと回りくどい手順で書いてあり ましたね。
48. まとめ
49. WordPressに関する情報はネット上に沢山あふれてい るけれど それを鵜吞みにせずに、どんなコードが書いてあ るのか検証するの大事 ！
50. Codex や Code Reference で確認しよう ！ コードをよく読むと、他にいい方法が見つかるこ ともあるよ
51. テンプレートをコピーして書き換える方法もいいんだけれど コアのファイルでもテーマのファイルでも アクションフックやフィルターフックが仕込んであることはよくある ので、 フックで書き換える方法も覚えておこう！
52. ご清聴ありがとうございました。 @RocketMartue