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

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

実際に試してみる

View Slide

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

View Slide

Snow Monkey Blocks の RSSブロック

View Slide

レイアウトがいくつか選べるようになってい
る。
それぞれ試してみると画像が表示されない
ことに気付く。

View Slide


View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

これをnote のフィードに合わせて

View Slide

これをnote のフィードに合わせて
に変更すればOK！

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

すると、

View Slide

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

View Slide

View Slide

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

View Slide

View Slide

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

View Slide

プラグイン化

View Slide

View Slide

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

View Slide

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

View Slide

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

View Slide

まとめ

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

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

Rocket Martue

More Decks by Rocket Martue

Featured

Transcript