「メイド・イン・ヘブン」スキン適用中

Cocoonフォーラム

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

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

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

相談内容:

不具合の発生手順:

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

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

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

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

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

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法
  7. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

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

個別にアイキャッチを設定していないペー...
 
共有:
通知
すべてクリア

[解決済] 個別にアイキャッチを設定していないページのブログカードが、自動的に「そのページの一番上の画像」になってしまう

23 投稿
5 ユーザー
5 Likes
1,878 表示
(@tekytoh)
Active Member
結合: 4年前
投稿: 12
Topic starter  

はじめまして。お世話になっております。

表題の通り、個別にアイキャッチを設定していないページのブログカードが、自動的に「そのページの一番上の画像」になってしまいます。

twitterのCard Validatorというところでカードの表示を確認しています。

個別にアイキャッチを設定していないページ(トップページや固定ページなど)のカードとして、現状の「そのページの一番上の画像」ではなく、「cocoon設定→OGPタグの最下部で設定したホームイメージ画像」が表示されるようにしたいのですが、どの設定を弄ればよいか、ご教授いただけませんでしょうか?

色々と調べまして、OGPタブ最下部にアップロードした画像を消去して元に戻してみたり、アップロードしなおしてみたり、ブラウザ・cocoonのキャッシュの消去や、プラグインの全停止などを試してみましたが、変化がありませんでした。

よろしくお願い致します。

 

----------------------------------------------
サイト名:RINASCITA
サイトURL: https://sotto.blue
ホームURL: https://sotto.blue
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-child-master
子テーマスタイル:/wp-content/themes/cocoon-child-master/style.css
WordPressバージョン:5.4
PHPバージョン:7.3.10
ブラウザ:Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.163 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
エンコーディング:gzip, deflate, br
言語:ja-JP,ja;q=0.9,en-US;q=0.8,en;q=0.7
----------------------------------------------
テーマ名:Cocoon
バージョン:2.1.3.9
カテゴリ数:5
タグ数:0
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.1.0
style.cssサイズ:975バイト
functions.phpサイズ:203バイト
----------------------------------------------
Gutenberg:1
AMP:0
PWA:0
Font Awesome:4
Auto Post Thumbnail:0
Retina:0
ホームイメージ:/wp-content/uploads/2020/04/200408.jpg
----------------------------------------------
ブラウザキャッシュ有効化:0
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:0
WEBフォントLazy Load:0
----------------------------------------------
利用中のプラグイン:
FooBox Image Lightbox 2.7.8
FooGallery 1.9.11
SiteGuard WP Plugin 1.5.0
----------------------------------------------


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 5年前
投稿: 6845
 

Cocoon設定の「画像」タブの設定で「アイキャッチ自動設定を有効にする」にチェックが入っていませんでしょうか?

 


   
(@tekytoh)
Active Member
結合: 4年前
投稿: 12
Topic starter  

@leafytree

夜分遅くにありがとうございます。

項目を確認しましたが、チェックは入っておりませんでした。


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 5年前
投稿: 6845
 

インストールされているプラグインは少ないようですが、これらの影響は考えられにくいですか?


   
(@tekytoh)
Active Member
結合: 4年前
投稿: 12
Topic starter  

@leafytree

ありがとうございます。

一番最初から入っているセキュリティプラグイン以外のものを試しにすべて削除してから、キャッシュをクリアしてみましたが、変化がありませんでした。


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 5年前
投稿: 6845
 

@tekytoh さん

私はtwitterには疎いので、twitterのCard Validatorでのブログカードの確認方法というのがよくわかりません。

明日、と言っても、もう日付は今日ですが、詳しい方が回答くださるかと思います。

お役にたてず、すみません。


   
(@tekytoh)
Active Member
結合: 4年前
投稿: 12
Topic starter  

@leafytree

いえ、夜分遅くまでお助けくださりありがとうございましたm(_ _)m

 


   
(@tekytoh)
Active Member
結合: 4年前
投稿: 12
Topic starter  

ごめんなさい、念の為に追記なのですが、「画像」タブ最下部の「NO IMAGE設定」という部分も、しっかり自作の画像を設定しています。

こちらも一度削除→キャッシュクリアと試しましたが、挙動に変わりがありませんでした。

色々試したところ、どうもブログ内部でのブログカード(記事一覧の画像や、内部リンクを貼った場合など)は正常に機能している(本文中の一番上の画像ではなく、cocoon設定画像タブ・OGPタブで設定した画像を表示出来ている)ようなのですが、twitterのCard Validator( https://cards-dev.twitter.com/validator )(実際のツイートも試しましたが結果は同じでした)への出がうまく行っていないようです。

 

また、この際初めからやり直そうと思い、FTPから親・子テーマ共にフォルダを丸ごと削除し、zipから再インストールを試みたのですが、綺麗に元通りに復元されてしまい、表題の挙動にも変化がありませんでした。

初心者の為、もしかすると初歩的なミスかもしれず恐縮ですが、何卒よろしくお願い致します。


   
たなかま
(@tanakama)
Prominent Member Registered
結合: 6年前
投稿: 600
 

こんにちは。

固定ページをトップページに設定しているのでしょうか?

トップページのソースを見ると、アイキャッチが設定されているように見えます。

 

アイキャッチ部分の設定や、Cocoon設定のOGPのキャプチャなどをいただけないでしょうか?(添付画像の箇所など)

 

色々試したところ、どうもブログ内部でのブログカード(記事一覧の画像や、内部リンクを貼った場合など)は正常に機能している(本文中の一番上の画像ではなく、cocoon設定画像タブ・OGPタブで設定した画像を表示出来ている)ようなのですが、twitterのCard Validator( https://cards-dev.twitter.com/validator )(実際のツイートも試しましたが結果は同じでした)への出がうまく行っていないようです。

上記の意味がちょっと分からなかったのですが、Card ValidatorでPreview cardボタンは、押されましたか?(キャッシュを更新するには、ボタンを押す必要があります)

https://nelog.jp/how-to-use-twitter-card-validator

 


   
わいひら reacted
(@tekytoh)
Active Member
結合: 4年前
投稿: 12
Topic starter  

@tanakama

こんにちは。お世話になっております。

 

固定ページをトップページに設定しているのでしょうか?

はい。

 

トップページのソースを見ると、アイキャッチが設定されているように見えます。

そのようですが、たとえばトップページをCard Validatorでチェックすると、設定したアイキャッチではなく、このページの一番上に表示している画像が表示されます。

他、現在テスト用に「アイキャッチテスト」というメニューを作ってテスト記事を公開しておりますので、必要があればお手数ですがご覧いただければと思います。

 

OGPタブのSSを添付いたします。


   
(@tekytoh)
Active Member
結合: 4年前
投稿: 12
Topic starter  

@tanakama

途中で送信してしまいました、申し訳ありません。

 

Card ValidatorでPreview cardボタンは、押されましたか?

そのページは拝読しました。何度も押しています。

OGPタブの「タグの挿入」チェックを入れたり外したりして何度かPreviewし直し、状況がリアルタイムに反映されることは確認しています。

 

>意味がわからないのですが、

わかりにくい文章で申し訳ございません。

cocoonでは、記事内にURLを貼った場合、それを自動的にブログカードの形で表示してくれる機能が備わっていると思います。たとえば記事内に、現在トップページに指定している固定ページ(アイキャッチ指定なし)のリンクを貼ると、OGPタブ・画像タブで設定した通りの画像がブログカードとして表示されます。しかし、twitterのほうでは表題の通り、設定した画像ではなく、ページ内の一番上にある画像が表示されるということです。


   
たなかま
(@tanakama)
Prominent Member Registered
結合: 6年前
投稿: 600
 

すみません。添付が漏れていました。

投稿の編集画面にある添付画像の箇所には、設定されていませんよね。

 

leafytreeさんのおっしゃる通り、アイキャッチの自動設定が入ってなければ、原因が何でしょうね・・・。

Cocoon設定の「画像」タブの設定で「アイキャッチ自動設定を有効にする」にチェックが入っていませんでしょうか?


   
わいひら reacted
たなかま
(@tanakama)
Prominent Member Registered
結合: 6年前
投稿: 600
 

僕のテスト環境からブログカードでリンクしました。

ブログカードもヘッダーロゴになっています。(ソースコードのOGPの通り)

 

アイキャッチを設定していなければ、ホームイメージの画像が出てくるはずなのですが、何でしょうね・・・。


   
(@tekytoh)
Active Member
結合: 4年前
投稿: 12
Topic starter  

@tanakama

お忙しい中、テストしてくださりありがとうございます。

添付画像をいただいた部分のSSを添付します。特に設定していないと思います。

画像タブのアイキャッチ自動設定チェックの部分を再度確認しましたが、やはりチェックは外れていました。


   
かうたっく
(@kautakku)
Famed Member Moderator
結合: 6年前
投稿: 4764
 
投稿者:: @tekytoh

現状の「そのページの一番上の画像」ではなく、「cocoon設定→OGPタグの最下部で設定したホームイメージ画像」が表示されるようにしたいのですが、どの設定を弄ればよいか、ご教授いただけませんでしょうか?

Cocoon設定・画像・NO IMAGE設定 でおきたい画像のurlを入れると良いと思います。

 

その際、記事内の画像がアイキャッチになるような設定を停止しておくと良いですよ

 

結果うまくいったかおしえてくださいね❦


   
わいひら reacted
(@tekytoh)
Active Member
結合: 4年前
投稿: 12
Topic starter  

@kautakku

ありがとうございます。仰る通りの設定は実は既にしてあると思うのですが、反映されないので困っている次第です…。


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16312
 

SNSの画像については、元々そういう仕様のようです。
その部分の画像をプログラマバブルに変更できるフックを追加しておきました。
まずは以下でアップデートしてください。
------------------------------------------------
https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

FTPでのアップデート方法はこちら。
https://wp-cocoon.com/ftp-update/
------------------------------------------------


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16312
 

あとは、以下のコードを子テーマのfunctions.phpにコピペしてみてください。

//SNSシェア画像を動的に変更する
add_filter('get_singular_sns_share_image_url', function ($image){
  if (is_single(array(123))) {
    $image = get_no_image_url();
  }
  return $image;
}); 

条件分岐のところには、固定ページの投稿IDを入力してください。
※動作確認はしていません


   
(@tekytoh)
Active Member
結合: 4年前
投稿: 12
Topic starter  

@yhira

ありがとうございます。お手数をお掛けします。

では、手動でアイキャッチ画像を設定していない記事・ページについては、SNSでは自動的にその記事内一番上の画像が表示されるのが仕様ということですね。わかりました。ありがとうございます。

申し訳ありません、条件分岐のところ、というのがどこのことかわからないのですが、どこに固定ページのIDを書けばいいのかご教授願えますでしょうか?

(専門的な知識がないため、コードが読めません。申し訳ないです)


   
(@tekytoh)
Active Member
結合: 4年前
投稿: 12
Topic starter  

手動でページごとにアイキャッチを指定したところ、今度は別のエラーが出て来て対応出来なくなったため、一度ワードプレスごと削除して1からやり直すことにしました。

ありがとうございました。


   
たなかま
(@tanakama)
Prominent Member Registered
結合: 6年前
投稿: 600
 

固定ページ一覧にIDというのがあるのでメモします。(添付画像)

 

わいひらさんに書いていただいたコード内の

123をIDの番号に打ち替えればOKです。


if (is_single(array(123))) {

 

手動でページごとにアイキャッチを指定したところ、今度は別のエラーが出て来て対応出来なくなったため、一度ワードプレスごと削除して1からやり直すことにしました。

▼ローカル環境でテストした方が良いかもしれませんね。

https://nelog.jp/local-by-flywheel-install

This post was modified 4年前 2回 by たなかま

   
わいひら reacted
(@tekytoh)
Active Member
結合: 4年前
投稿: 12
Topic starter  

@tanakama

123の部分でしたか!ありがとうございます。

子テーマのphpへの追記ですが、ファイルを直接弄るのは私のレベルではまだ早いように思いますので、控えておくだけにして、今回は追記を見送らせていただくことにしました。申し訳ありません。

ローカル環境…というものもあるのですね。やはり私にはまだ少し早いようで理解が追いつかず、ブックマークしておいて、もう少し賢くなってから試みようと思います。勉強になります、ありがとうございます。

 

最終的に、ワードプレスの本体から入れ直してサイトを1から作り直し、すべてのページに手動でアイキャッチをつけることで自己解決しました。

ありがとうございました。

 


   
わいひら reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16312
 

今回のケースの場合、個別に投稿IDを指定するより「アイキャッチが存在しないとき」の方がスマートかも。

//SNSシェア画像を動的に変更する
add_filter('get_singular_sns_share_image_url', function ($image){
  if (!has_post_thumbnail()) {//アイキャッチがないとき
    $image = get_no_image_url();
  }
  return $image;
}); 

   
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。

また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

タイトルとURLをコピーしました