Cocoonフォーラム

2018.02.102023.01.25

書き込みの前に以下の3点をご確認ください。

1つのトピックにつき1つの質問を書き込んでください
不具合・カスタマイズ対象ページのURLを提示し高速化を無効にしてください
該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL：

相談内容：

不具合の発生手順：

解決のために試したこと：

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

共有:

通知

すべてクリア

[解決済] 外部ブログカードで先方の記事のアイキャッチ画像を表示させたい。

Cocoonテーマに関する質問

最新の投稿 : 匿名 4年前

6 投稿

3 ユーザー

2 Reactions

1,706 表示

未解決

RSS

ピーコロ

(@ピーコロ)

New Member

結合: 4年前

投稿: 3

Topic starter 2021年2月3日 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
----------------------------------------------

はる

(@haruinoue)

Noble Member Moderator

結合: 4年前

投稿: 1089

2021年2月3日 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

ピーコロ

(@ピーコロ)

New Member

結合: 4年前

投稿: 3

Topic starter 2021年2月3日 21:36

@haruinoue

早速のご返信ありがとうございます。とてもよくわかりました。

さらにいろいろ自分なりに調べると

「WordPressのアイキャッチ画像をOGPに設定する方法」
https://rilaks.jp/wordpress/eyecatch-ogp/

という記事がありました。ブログのヘッダー部分にphpで記入することにより、アイキャッチ画像をOGPにできるという話です。先方のブログでこの設定をしていないと、取得できないということなのかなと思いました。

アイキャッチ取得の記述は

「プラグインなしでブログカードを作る方法」
https://maipyon.net/blogcard/

というサイトの「function.php」に記す「//アイキャッチ画像を取得」という部分を参考にして記入してみました。

OGP画像も入手できるようにするためには、アイキャッチ画像の取得を最初に試みて、なければOGP画像を取得するという感じにphp記入するのがよいのかなと思いました。

もしかして、すでにcocoonではそのようになっていて、自分の環境がよくないために、OGPもアイキャッチも取得できていない、というようなことはないでしょうか？

はる

(@haruinoue)

Noble Member Moderator

結合: 4年前

投稿: 1089

2021年2月3日 21:48

ブログのヘッダー部分にphpで記入することにより、アイキャッチ画像をOGPにできるという話です。先方のブログでこの設定をしていないと、取得できないということなのかなと思いました。

概ねその理解で合っていると思います。

「プラグインなしでブログカードを作る方法」
https://maipyon.net/blogcard/

ざっと見てみましたが、Cocoonで言う「内部ブログカード」に該当するものだと思います。

わいひら reacted

わいひら

(@yhira)

Illustrious Memberサイト Admin

結合: 7年前

投稿: 17179

2021年2月4日 20:09

先方のサイトのどれがアイキャッチ画像かどうか、こちらから伺い知ることはできません。
サイトが全てWordPressで作ってあるならまだしも、世の中には様々なサイトがあり、仕様も定まっていません。
なので、そういった千差万別のサイトの中からアイキャッチの確率が高いのは、やっぱりOGP画像だと思います。
Cocoonでは、まずOGP画像を取得しに行くようになっています。
OGP画像が無かったら、最初の画像といった具合に。
アイキャッチ画像を、アイキャッチだぞと判別する手段がないので、こういう仕様になっています。