サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2021-02-03 20:33
お世話になります。
タイトルの通り、外部ブログカードに先方のブログ記事のアイキャッチ画像を表示させたいと思っています。
cocoonのマニュアルですと、OGP画像があればそれを表示するということですが、デフォルトでは、アイキャッチ画像はどうも表示されないようでした。
いろいろ調べてみて、cocoon親テーマのblogcard-out.phpの90行あたりに下記を挿入した後、ブログカードのあるページをリロードすると、すぐにアイキャッチ画像が表示されるようになりました。現在この方法で表示させています。（でもなぜか一部記事では、先方にアイキャッチ画像が設定されているはずなのに表示されません？）
$image = wp_get_attachment_image_src(get_post_thumbnail_id($id),'medium');
表示されている一例： https://mus.p56.biz/2021/01/25/qsyu201311/
それで質問ですが、親テーマのblogcard-out.phpに挿入する方法はなにか不具合の原因になるでしょうか？また、アイキャッチを表示させるもっといい方法があるでしょうか？
どうぞよろしくお願いします。
----------------------------------------------
サイト名：ピーコロミュージアム
サイトURL： https://mus.p56.biz
ホームURL： https://mus.p56.biz
コンテンツURL：/wp-content
インクルードURL：/wp-includes/
テンプレートURL：/wp-content/themes/cocoon-master
スタイルシートURL：/wp-content/themes/cocoon-child-master
親テーマスタイル：/wp-content/themes/cocoon-master/style.css
子テーマスタイル：/wp-content/themes/cocoon-child-master/style.css
サーバー：240b:11:6182:500:f824:62e0:657a:4e4e
WordPressバージョン：5.6
PHPバージョン：7.4.14
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.96 Safari/537.36 Edg/88.0.705.56
サーバーソフト：LiteSpeed
サーバープロトコル：HTTP/1.1
エンコーディング：gzip, deflate, br
言語：ja,en;q=0.9,en-GB;q=0.8,en-US;q=0.7
----------------------------------------------
テーマ名：Cocoon
バージョン：2.2.6.6
カテゴリ数：49
タグ数：32
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.2
style.cssサイズ：4631バイト
functions.phpサイズ：752バイト
----------------------------------------------
Gutenberg：1
AMP：1
PWA：1
Font Awesome：5
Auto Post Thumbnail：0
Retina：1
ホームイメージ：/wp-content/uploads/p56msum-58.jpg
----------------------------------------------
ブラウザキャッシュ有効化：0
HTML縮小化：1
CSS縮小化：1
JavaScript縮小化：1
Lazy Load：0
WEBフォントLazy Load：0
----------------------------------------------
利用中のプラグイン：
Advanced Random Posts Widget 2.2.0
Category Order and Taxonomy Terms Order 1.5.7.4
Contact Form 7 5.3.2
External Links 6.8.1
Google XML Sitemaps 4.1.1
Kaya QR Code Generator 1.4.2
Media Library Assistant 2.94
Organize Media Folder 1.24
Really Simple CSV Importer 1.3
Really Simple SSL 4.0.7
Regenerate Thumbnails 3.1.4
Robo Gallery 3.0.2
SiteGuard WP Plugin 1.5.2
WP CSV Exporter 1.3.4
WP Extended Search 2.0.1
WP Multibyte Patch 2.9
WP Super Cache 1.7.1
XO Featured Image Tools 1.5.1
----------------------------------------------
2021-02-03 21:16
先方のサイトのことは、先方がアイキャッチ画像(ここでは記事冒頭に表示される画像、という意味でアイキャッチ画像と呼ぶことにします)をOGP画像に設定していないと外部からは取得しようがないです。
cocoon親テーマのblogcard-out.phpの90行あたりに下記を挿入
この方法では取得できないのではないかな…？と思います。
というのも、
$image = wp_get_attachment_image_src(get_post_thumbnail_id($id),'medium');
のうち、「wp_get_attachment_image_src」というのは指定された画像ファイルのURLを返す関数です。
「get_post_thumbnail_id」というのは指定されたIDのアイキャッチ画像を返す関数です。
そして$idというのはこの関数(fetch_card_image)内では指定されていません。
なので$imageには空文字が入ってしまうのではないでしょうか…？
また、上記関数で取得できるのはあくまで自サイトの話であって、外部のサイトの画像をWordpressの関数でどうのというのはできません。
なので上記の方法で上手くいっているのが謎です。
なにか不具合の原因になるでしょうか？
変数$imageを置き換えてしまっているので、本来取得できていたOGP画像が取得できなくなってしまうのではないかと思います。
ただ、上手くいっているようなので謎です。
また、親テーマをアップデートした際はカスタマイズした内容は消えてしまうので、再度挿入する必要があります。
アイキャッチを表示させるもっといい方法があるでしょうか？
先方のサイトがOGP画像を設定していないのなら表示する術はないと思います。
わいひら reacted
Topic starter
2021-02-03 21:36
早速のご返信ありがとうございます。とてもよくわかりました。
さらにいろいろ自分なりに調べると
「WordPressのアイキャッチ画像をOGPに設定する方法」
https://rilaks.jp/wordpress/eyecatch-ogp/
という記事がありました。ブログのヘッダー部分にphpで記入することにより、アイキャッチ画像をOGPにできるという話です。先方のブログでこの設定をしていないと、取得できないということなのかなと思いました。
アイキャッチ取得の記述は
「プラグインなしでブログカードを作る方法」
https://maipyon.net/blogcard/
というサイトの「function.php」に記す「//アイキャッチ画像を取得」という部分を参考にして記入してみました。
OGP画像も入手できるようにするためには、アイキャッチ画像の取得を最初に試みて、なければOGP画像を取得するという感じにphp記入するのがよいのかなと思いました。
もしかして、すでにcocoonではそのようになっていて、自分の環境がよくないために、OGPもアイキャッチも取得できていない、というようなことはないでしょうか？
2021-02-03 21:48
ブログのヘッダー部分にphpで記入することにより、アイキャッチ画像をOGPにできるという話です。先方のブログでこの設定をしていないと、取得できないということなのかなと思いました。
概ねその理解で合っていると思います。
「プラグインなしでブログカードを作る方法」
https://maipyon.net/blogcard/
ざっと見てみましたが、Cocoonで言う「内部ブログカード」に該当するものだと思います。
わいひら reacted
2021-02-04 20:09
先方のサイトのどれがアイキャッチ画像かどうか、こちらから伺い知ることはできません。
サイトが全てWordPressで作ってあるならまだしも、世の中には様々なサイトがあり、仕様も定まっていません。
なので、そういった千差万別のサイトの中からアイキャッチの確率が高いのは、やっぱりOGP画像だと思います。
Cocoonでは、まずOGP画像を取得しに行くようになっています。
OGP画像が無かったら、最初の画像といった具合に。
アイキャッチ画像を、アイキャッチだぞと判別する手段がないので、こういう仕様になっています。
OGP画像も入手できるようにするためには、アイキャッチ画像の取得を最初に試みて、なければOGP画像を取得するという感じにphp記入するのがよいのかなと思いました。
何をもってアイキャッチ画像と判別するかが難しいかと思います。
AIとかでディープラーニングまでするのであれば判別は可能かもしれませんが、そこまで開発コストをかける意味があるのかということにもなります。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。