Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

自己紹介 本田季之 (Honda Toshiyuki) 高松のうぇぶ屋さん．マークアップエンジニア。主に WordPress を使ったサイト構築、テーマのカスタマイズ など。業務委託も受付中。 趣味は、音楽を聴くことと料理をすること。たまに猫と遊 びます。コーヒー ハチミツ チョコ カレー が好き。 Kagawa WordPress Meetup オーガナイザー。 WordCamp Ogijima 実行委員。 https://instagram.com/wcogijima/ の中の人。 @RocketMartue

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

質問・感想などは twitter へ #wcjpn21

Slide 5

Slide 5 text

今回の依頼内容 1. WordPress で作成した会社サイトのトップページに、グループ会社のサ イトのお知らせ・イベント情報を表示したい。 2. 各サイトのお知らせ・イベント情報は投稿のカテゴリーで分かれている。 3. アイキャッチ画像も表示する。 4. グループ会社のサイトは、WordPress で制作してあるが、管理している のは別会社なのでログインや編集はできない。

Slide 6

Slide 6 text

考えたこと ● WordPressのサイトなので、 RSSフィードでお知らせ・イベント情報は取ってこれる ● RSSブロック使えば簡単かな？

Slide 7

Slide 7 text

実際に試してみる

Slide 8

Slide 8 text

今回のサイトで使用しているテーマは Snow Monkey なので、 Snow Monkey Blocks の RSSブロックを試してみる

Slide 9

Slide 9 text

Snow Monkey Blocks の RSSブロック

Slide 10

Slide 10 text

Snow Monkey Blocks の RSSブロック レイアウトがいくつか選べるようになってい る。 それぞれ試してみると画像が表示されない ことに気付く。

Slide 11

Slide 11 text

Snow Monkey Blocks の RSSブロック

Slide 12

Slide 12 text

Snow Monkey Blocks の RSSブロック

Slide 13

Slide 13 text

WordPress の RSS フィードには画像デー タは含まれていないので、それが原因かな？

Slide 14

Slide 14 text

でも前に読んだ、キタジマさんのブログでは 画像が表示されていた記憶が…

Slide 15

Slide 15 text

ということで、ブログを確認

Slide 16

Slide 16 text

https://snow-monkey.2inc.org/2020/05/26/snow-monkey-blocks-v8-5-0/ より、抜粋 RSS ブロック 「最近の投稿ブロック」と同じデザインで RSS を表示することができま す。アイキャッチ画像やアバター画像の表示については、（多分）サービ スによって RSS 上でのデータの持ち方が違うため、使いたいサービス で画像が表示されなかったときはフォーラムや Slack で報告いただけ ればと思います。現状は note には対応しています！

Slide 17

Slide 17 text

note のフィードを確認すると

Slide 18

Slide 18 text

こんな形式で、画像データが出力されてました。

Slide 19

Slide 19 text

WordPress の RSS フィードには、 アイキャッチ画像は含まれていないので、 note と同じ形で画像データを持たせてやれ ば、画像が表示されるはず。

Slide 20

Slide 20 text

WordPress の RSS フィードにnoteと同じ形式で アイキャッチ画像のURLを出力させる！

Slide 21

Slide 21 text

どうやって画像データを追加するのか ネットで検索してみる

Slide 22

Slide 22 text

「 WordPress RSSフィード 画像 」 で検索してみると、たくさ ん情報が出てきました。 いくつかのサイトに出て いる情報を見てみると、 大体同じようなことが書 いてあります。

Slide 23

Slide 23 text

1. コアの RSSフィードのテンプレートファイル /wp-includes/feed-rss2.php をコピーして、テーマディ レクトリに置く。 2. テーマ内に置いたファイル feed-rss2.php にアイキャッチ 画像を含めるコードを追加する。 （追加する場所は、 と の間。） 3. コアのファイル feed-rss2.php の代わりに、 テーマ内のファイル feed-rss2.php を使用するためのコー ドを functions.php に追加する。

Slide 24

Slide 24 text

feed-rss2.php に追加するコードの例

Slide 25

Slide 25 text

アイキャッチが設定されていれば、画像URLを取得して の形で出力するというコードが書いてあるので、

Slide 26

Slide 26 text

アイキャッチが設定されていれば、画像URLを取得して の形で出力するというコードが書いてあるので、 これをnote のフィードに合わせて

Slide 27

Slide 27 text

アイキャッチが設定されていれば、画像URLを取得して の形で出力するというコードが書いてあるので、 これをnote のフィードに合わせて に変更すればOK！

Slide 28

Slide 28 text

functions.php に追加するコードの例

Slide 29

Slide 29 text

なるほどなるほどと思ったけれど、 ここで問題が

Slide 30

Slide 30 text

今回の依頼内容 1. WordPress で作成した会社サイトのトップページに、グループ会社のサ イトのお知らせ・イベント情報を表示したい。 2. 各サイトのお知らせ・イベント情報は投稿のカテゴリーで分かれている。 3. アイキャッチ画像も表示する。 4. グループ会社のサイトは、WordPress で制作してあるが、管理している のは別会社なのでログインや編集はできない。

Slide 31

Slide 31 text

今回の依頼内容 1. WordPress で作成した会社サイトのトップページに、グループ会社のサ イトのお知らせ・イベント情報を表示したい。 2. 各サイトのお知らせ・イベント情報は投稿のカテゴリーで分かれている。 3. アイキャッチ画像も表示する。 4. グループ会社のサイトは、WordPress で制作してあるが、管理している のは別会社なのでログインや編集はできない。

Slide 32

Slide 32 text

そうです。 グループサイトのWordPressは、別会社が管理して いるので、テーマにテンプレートファイルを追加したり、 functions.php にコードを追加できません。

Slide 33

Slide 33 text

ただ プラグインを追加することはできるということなので、 おれおれプラグインを作ればなんとかなりそう

Slide 34

Slide 34 text

functions.php に追加するコードは、 そのままプラグインの方でも使える

Slide 35

Slide 35 text

コアからコピーして テーマに追加するファイル feed-rss2.php はどうする？

Slide 36

Slide 36 text

feed-rss2.php にどんなコードが書いてある のか、とりあえず見てみる。

Slide 37

Slide 37 text

すると、

Slide 38

Slide 38 text

コードの中に アクションフックを発見

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

アクションフック do_action( 'rss2_item' ); があるので、プラグインで add_action( 'rss2_item' ) を使えば、テンプレートファイルをコピーしなくても アイキャッチ画像が出力できる

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

これをプラグイン化して グループサイトにインストールすれば、 RSSブロックに画像が表示される ！

Slide 43

Slide 43 text

プラグイン化

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

ここで、 先ほどネット上で見つけた手順を もう一度確認

Slide 46

Slide 46 text

1. コアの RSSフィードのテンプレートファイル /wp-includes/feed-rss2.php をコピーして、テーマディ レクトリに置く。 2. テーマ内に置いたファイル feed-rss2.php にアイキャッチ 画像を含めるコードを追加する。 （追加する場所は、 と の間。） 3. コアのファイル feed-rss2.php の代わりに、 テーマ内のファイル feed-rss2.php を使用するためのコー ドを functions.php に追加する。

Slide 47

Slide 47 text

アクションフック１つで出来ることが ずいぶんと回りくどい手順で書いてあり ましたね。

Slide 48

Slide 48 text

まとめ

Slide 49

Slide 49 text

WordPressに関する情報はネット上に沢山あふれてい るけれど それを鵜吞みにせずに、どんなコードが書いてあ るのか検証するの大事 ！

Slide 50

Slide 50 text

Codex や Code Reference で確認しよう ！ コードをよく読むと、他にいい方法が見つかるこ ともあるよ

Slide 51

Slide 51 text

テンプレートをコピーして書き換える方法もいいんだけれど コアのファイルでもテーマのファイルでも アクションフックやフィルターフックが仕込んであることはよくある ので、 フックで書き換える方法も覚えておこう！

Slide 52

Slide 52 text

ご清聴ありがとうございました。 @RocketMartue