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カスタマイズ依頼

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

ブログカード・ブログカードブロックが表...
 
共有:
通知
すべてクリア

[解決済] ブログカード・ブログカードブロックが表示されない

17 投稿
3 ユーザー
5 Reactions
48 表示
(@fumi2)
Active Member Registered
結合: 11時間前
投稿: 6
トピックスターター  

不具合・カスタマイズ対象ページのURL:
https://blmania.net/novel/you-will-be-heard-my-voice-review

相談内容:
ブログカード・ブログカードブロックが表示されない

不具合の発生手順:
クラッシックエディターを使っていたところ、ブログカードとブログカードブロックが表示されないことに気づきました。
ブログカードブロックは、ビジュアルで見ると「あわせて読みたい」が表示されるのですが、更新した記事を見ると表示されていない状態です。

解決のために試したこと:
・ブログカードの表示を有効にした
・URLには日本語は入っていない
・URLの前後にスペースはない
・上か下の文章とURLは重なっていない
・<a href="URL">URL</a>のように記入しても、ブログカードは表示されない

以下、環境情報です。
----------------------------------------------
サイト名:Shippers
サイトURL: https://blmania.net
ホームURL: https://blmania.net
コンテンツ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
スキン:/wp-content/themes/cocoon-master/skins/skin-momoon-aqua/style.css
WordPressバージョン:6.7.1
PHPバージョン:7.4.33
ブラウザ:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.6 Safari/605.1.15
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
言語:ja
----------------------------------------------
テーマ名:Cocoon
バージョン:2.8.2
カテゴリー数:10
タグ数:2966
ユーザー数:3
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.0.7
style.cssサイズ:13867 バイト
functions.phpサイズ:4510 バイト
----------------------------------------------
Gutenberg:1
Font Awesome:4
Auto Post Thumbnail:0
Retina:0
ホームイメージ:/wp-content/uploads/038c2a287cd7d09562fa0a3f4e41f6ff.png
----------------------------------------------
ブラウザキャッシュ有効化:1
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:0
----------------------------------------------
利用中のプラグイン:
----------------------------------------------


   
引用
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3039
 

Cocoonの不具合ではありません。

●現象

クラシックエディターで再現しました。

以下のとき、言われるようにブログカードとなりません。

<div class="blogcard-type bct-detail"> https://blmania.net/novel/you-will-be-heard-my-voice-review</div> 

以下のときは、ブログカードになり。

<div class="blogcard-type bct-together">

 https://blmania.net/novel/you-will-be-heard-my-voice-review 

</div>

●原因

囲みブログカードを使う際の手順を間違えています。

  1. URLを入力。
  2. URLを選択し、スタイル「囲みブログカード」を選択。

https://wp-cocoon.com/blogcard-types/

手順が逆で、URLの前後に<p>タグがなく、以下でパターン判定されず、ブログカードとなりません。

https://github.com/xserver-inc/cocoon/blob/2a6e06f825b0948f075859ebf0dc814c6897d94a/lib/blogcard-in.php#L197C1-L199


●対策

マニュアル記載の手順で作成してください。


   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8021
 

手順が逆で、URLの前後に<p>タグがなく、以下でパターン判定されず、ブログカードとなりません。

私は、いつも以下のように、先に「囲みブログカード」を選択してから、URLを入力しています。
それでも、表示されないということはないです。

 
 
以下のように、先頭に空白があれば、ブログカード化されず、URLがそのまま出力されますけれど。
(「!」が機能化される以前の裏技的な感じで)
 
今回はそうではなさそうに見えますけれど。

   
返信引用
(@fumi2)
Active Member Registered
結合: 11時間前
投稿: 6
トピックスターター  

早速のご回答、ありがとうございます。
マニュアル記載の手順(スタイル「囲みブログカード」を選択の後、URLを入力)で作成しなおしましたが、ブログカードもブログカードブロックも表示されませんでした。


   
返信引用
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3039
 

@fumi2 さん

投稿者:: @fumi2

スタイル「囲みブログカード」を選択の後、URLを入力

先述でも書きましたが手順が逆です。

https://wp-cocoon.com/blogcard-types/

マニュアルは以下となっており。

「囲みブログカード」を利用するには、まずビジュアルエディター上で「ブログカード作成用のURL」を入力し、URLを選択します。
あとは「スタイル」ドロップダウンリストから「囲みブログカード」をマウスホバーし、利用したいラベルを選択します。


   
fumi2 reacted
返信引用
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3039
 

@mk2_mk2 さん

再度、囲みブログカード→URL入力でも、URLの前後に改行(<p>)が入り、ブログカードになりますね。

@fumi2 さん
以下ですが、問題の個所、テキストエディターに貼り付けたら、カードになり。

<div class="blogcard-type bct-popular">
<p> https://blmania.net/novel/you-will-be-heard-my-voice-review</p> 
</div>

   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8021
 

@chu-ya さん

投稿者:: @chu-ya

再度、囲みブログカード→URL入力でも、URLの前後に改行(<p>)が入り、ブログカードになりますね。

はい、クラシックエディタは、クセがあります。

自動整形と言えば良いのか、勝手に足りないタグを補完したりして、やっかいです。
(余計な補完をする場合もあります)

その結果、順番が逆でも、ブログカード化はされるはずです。


   
fumi2 reacted
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8021
 

ちなみにですけれど。

外部から見える、fumi2さんの該当ページのHTMLソースを、私のテスト環境にコピーさせていただいたのですけれど。

私のテスト環境では、ブログカード化されます。


   
返信引用
(@fumi2)
Active Member Registered
結合: 11時間前
投稿: 6
トピックスターター  

@chu-ya 申し訳ありません。正しい手順でやってみたところ、無事にブログカードもブログカードブロックも表示されました。ありがとうございます。お手数をおかけいたしました。


   
返信引用
(@fumi2)
Active Member Registered
結合: 11時間前
投稿: 6
トピックスターター  

@mk2_mk2 ただいまやってみたところ、無事にブログカードもブログカードブロックも表示されました。ありがとうございます。逆の手順でも表示することができました。


   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8021
 

fumi2さん

教えてください。

やり直しただけですか。
何か変えましたか?

(再現ができず、できることならば、後学のため原因をしりたいです)


   
返信引用
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3039
 

@fumi2 さん

該当ページのHTML<p>タグの漏れがあります。
直接原因か不明ですが。

以下の部分の文に<p>タグがありません。(余分に</p>タグが付いている)

   
fumi2 reacted
返信引用
(@fumi2)
Active Member Registered
結合: 11時間前
投稿: 6
トピックスターター  

@mk2_mk2 やり直しただけでした。特に他にやったことはなくて…自分でもなぜブログカード、ブログカードブロックが表示されるようになったのか理由が分かりません。ご参考にならず申し訳ありません。


   
mk2 reacted
返信引用
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3039
 

●余談

ビジュアルエディターで作成し、それをテキストエディターで消し。
そのあと、ビジュアルエディターで再度作成すると、HTMLタグが異なり、URLの前後に改行がなくなり???


   
返信引用
(@fumi2)
Active Member Registered
結合: 11時間前
投稿: 6
トピックスターター  

@chu-ya ありがとうございます。<p>タグを追加します。


   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8021
 

fumi2さん

お返事ありがとうございます。

投稿者:: @fumi2

やり直しただけでした。特に他にやったことはなくて…自分でもなぜブログカード、ブログカードブロックが表示されるようになったのか理由が分かりません。

そうですか、謎ですね。

今回、何とか表示されましたから、大丈夫かと思いますけれど。

もし、次に同じようなことがあった場合、URLを[](ショートコードで使う括弧)で囲ってみてください。
以下のように、半角で、前後スペースなしです。

 
ブログカードのショートコードで、URLを強制的にブログカードにするものです。
覚えておいていただければと。
 
これでも、表示されない場合、またご連絡いただければと思います。
(今回の原因が、良く分かりませんので、何ともモヤモヤですけれど)
 
 
※このトピックは「解決済」とさせていただきました。
 ただ、もう少し開けておこうかと思います。
 (新たに何もなければ、翌日にはクローズすると思います)
この投稿は8時間前ずつmk2に変更されました
この投稿は7時間前 3回ずつmk2に変更されました

   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8021
 

投稿者:: @chu-ya

ビジュアルエディターで作成し、それをテキストエディターで消し。
そのあと、ビジュアルエディターで再度作成すると、HTMLタグが異なり、URLの前後に改行がなくなり???

私の環境でやってみようとしたら・・・。

新規作成時に、既に改行がない状態に・・・。

 
 
同じ環境なのに、先程と違う・・・。
投稿者:: @mk2_mk2

 

この投稿は7時間前 3回ずつmk2に変更されました

   
返信引用
共有:

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

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

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

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

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

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

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

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