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

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

投稿記事に表示されるアイキャッチ画像の...
 
共有:
通知
すべてクリア

[解決済] 投稿記事に表示されるアイキャッチ画像のカテゴリラベル表示について

11 投稿
4 ユーザー
11 Reactions
1,202 表示
 why
(@why)
Active Member Registered
結合: 2年前
投稿: 6
Topic starter  

お忙しいところ恐れ入ります。

こちらに投稿してよいのか判断しかねますが、トピックとしてご教示頂けましたら幸いです。

 

早速ですが、WordPressには各記事ごとにアイキャッチの設定が可能ですが、FC2やBloggerなどのブログの場合にはアイキャッチ画像の設定ができません。

 

そういったブログサービスからWordPressへ移行した(リダイレクト処理)場合に、他のブログサービスにての記事のインポートが完了したとしても、該当記事にアイキャッチ画像の設定ができません。

そこで、通常のアイキャッチ画像のアクションフックにて既存の記事にアイキャッチ画像を設定するようにfunction.phpにコードを追加すれば、アイキャッチ画像はCocoonテーマの設定通りに記事上部に表示はされます。

そうしますと、Cocoonに機能として備わっています人気記事などのアイキャッチ画像にまで反映されてしまいます。

なので、独自関数にてアイキャッチ画像の移行してきた既存の記事に表示することはできるようになりました。

ただ、

記事上部に表示されるアイキャッチ画像にカテゴリラベル表示が通常であれば可能ですが、Cocoonテーマのアイキャッチ画像該当テンプレート内のコードを見ながら考えながら色々試してみました。

独自関数とデフォルトのカテゴリラベル名のアクションフックにて、記事上部のアイキャッチ画像にカテゴリラベル表示はなんとか出来るようにはなりました。

ですが、

どうしても、記事の属しているカテゴリ名のカテゴリラベル表示になりません。

 

eye-catch.phpのコードなどをこちらに記載してよいのかわかりませんので、記載いたしませんが、

eye-catch.php内の45行目から48行目のnullをどのようにしたら、FC2ブログやBloggerから移行した既存の記事のアイキャッチ画像にアイキャッチラベル名を表示させ方がわかりません。

一応、カテゴリラベル表示はできるようになりましたが、echoにてカテゴリラベル内にカテゴリ名を表示することができません。

以下の部分がカテゴリラベル表示についてのコードかと思います。

 

<?php //アイキャッチラベルの表示
if (is_eyecatch_label_visible() && is_single()) {
the_nolink_category(null, apply_filters('is_eyecatch_category_label_visible', true)); //カテゴリーラベルの取得
}

 

eye-catch.phpの上部には、

$display_none = (is_eyecatch_visible() && has_post_thumbnail()) ? null : ' display-none'; ?>
<div class="eye-catch-wrap<?php echo $display_none; ?>">

が記載されているので、こちらと関連があるのかと思うのですが、

どのようにしたら他のアイキャッチ画像が設定不可だったブログサービスからWordPressにてCocoonテーマに乗り換えた場合に、どのようにしたら記事中のアイキャッチ画像にカテゴリラベル表示内にCocoonテーマのデフォルトのようにカテゴリ名を表示できるのかご教授願いましたら幸いです。

 

なお、

以下に現在私が設定しているアイキャッチ画像取得と表示の独自関数です。

 

//過去の投稿にアイキャッチ画像がない場合に追加して表示させるコード追加
if ( ! function_exists( 'nxw_get_post_thumbnail' ) ) {
function nxw_get_post_thumbnail( $post_id = null, $size = 'post-thumbnail' ) {
if ( has_post_thumbnail( $post_id ) ) {
$thumbnail_id = get_post_thumbnail_id( $post_id );
$thumbnail_url = wp_get_attachment_image_url( $thumbnail_id, $size );
$thumbnail_alt = get_post_meta( $thumbnail_id, '_wp_attachment_image_alt', true );
$thumbnail_title = get_the_title( $thumbnail_id );
$cat = get_the_category();
$cat = $cat[0];

if ( empty( $thumbnail_alt ) ) {
$thumbnail_alt = $thumbnail_title ? $thumbnail_title : get_the_title( $post_id );
}
} else {
preg_match( '/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', get_the_content( $post_id ), $matches );
$thumbnail_url = ! empty( $matches[1] ) ? $matches[1] : get_theme_file_uri( 'images/no-thumbnail.png' );
$thumbnail_alt = get_the_title( $post_id );
}

return sprintf(
'<div class="eye-catch-wrap"><figure class="eye-catch" itemprop="image" itemscope="" itemtype="https://schema.org/ImageObject" style="
text-align: center;
"><img src="%s" alt="%s"><span class="cat-label"><?php echo get_the_category()[0]->name; ?></span></figure></div>',
esc_url( $thumbnail_url ),
esc_attr( $thumbnail_alt )
);
}
}

if ( ! function_exists( 'nxw_the_post_thumbnail' ) ) {
function nxw_the_post_thumbnail( $post_id = null, $size = 'post-thumbnail' ) {
echo nxw_get_post_thumbnail( $post_id, $size );
}
}

 

上記ですと、カテゴリ名が「name; ?>」となってしまいます。

 

このカテゴリラベル内に、記事の該当カテゴリ名を表示するには、コードをどのようにしたらよろしいでしょうか?

 

お忙しい中恐れ入りますが、ご教授頂けましたら幸いです。

 

※もしコードなど記載してはいけない場合には、削除していただいて構いません。その場合は大変申し訳けありませんでした。

 

 

 

 

 


   
chu-ya
(@chu-ya)
Famed Member Registered
結合: 3年前
投稿: 2895
 

要点が箇条書きでないので、何を言いたい分かり難いです。
他ブログサービスからのWordPressインポートの場合の以下の2点を聞いているのでしょうか?

  1. アイキャッチ画像を表示したい
  2. カテゴリーラベルについて

投稿者:: @why

そういったブログサービスからWordPressへ移行した(リダイレクト処理)場合に、他のブログサービスにての記事のインポートが完了したとしても、該当記事にアイキャッチ画像の設定ができません。

●方法1
プラグイン「Auto Post Thumbnail」を用い、記事の最初の画像をアイキャッチ画像として登録するのが術かと思います。

 

●方法2
[Cocoon設定]→[画像]→アイキャッチの自動設定「アイキャッチ自動設定を有効にする」
各投稿を保存し直すと、自動でアイキャッチ画像が設定されます。


   
わいひら and why reacted
 why
(@why)
Active Member Registered
結合: 2年前
投稿: 6
Topic starter  

@chu-ya 様。

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

 

要点はおっしゃる通りです。m(._.*)m

(要点がまとまっていなくて大変申し訳ありませんでした。)

 

 

方法1の

1)Auto Featured Image (Auto Post Thumbnail)

2)XO Featured Image Tools

 

XO Featured Image Toolsにては一度試みてみましたが、

プラグインは考えましたが、できるだけプラグインを使わずにと思いまして、プラグインを使わずにできる方法を考えました。

 

方法2も

アイキャッチ画像の設定は、そうしてあります。

 

WordPress以外でアイキャッチ画像が設定不可のブログサービスでの投稿数が750記事くらいあり、

700記事以上を、1個1個各記事毎に保存し直すのはちょっと大変なので、

一気にできる方法をと考え、上記独自関数にて対応を考えている次第です。

 

 

Cocoonのeye-catch.phpの、

9行目から11行目と、

45行目から48行目が依存関係(その他のサムネイル画像とも)にあると思うので、

独自関数内の出力部分にnullをどのようにしたらデフォルトのCocoonテーマの用にアイキャッチ画像にアイキャッチラベル内にカテゴリ名が表示できるようにしたいと思っています。

 

(cssのdisplay: none;をコメントアウトしますと、

(表示されない記事もありますが)アイキャッチ画像が表示されるます。)

 

なので、

プラグインを使わずに、何かしらの方法はあるのではないかと思いまして思慮している次第です。

 

何かしら方法はありませんでしょうか?

 

 

度重なる、質問誠に恐れ入ります。

不躾な質問で誠に恐れ入ります。

 

すみません。

 

 

 

(最終的にはプラグインにての対応をするのか、

そのままアイキャッチ画像(アイキャッチラベルにカテゴリ名表示)しないままにして、今後の投稿にアイキャッチ画像をしっかり設定するか迷っています。)

 


   
chu-ya
(@chu-ya)
Famed Member Registered
結合: 3年前
投稿: 2895
 

@why さん

そもそも、インポートした際、投稿記事にカテゴリー紐付いていますか


   
わいひら reacted
 why
(@why)
Active Member Registered
結合: 2年前
投稿: 6
Topic starter  

@chu-ya 様。

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

 

カテゴリと投稿記事は紐づいていると思います。

 

管理画面にて、インポートした記事を見てもインポートした記事自体をサイトとして見ても、記事下にカテゴリ名も表示されています。

また、管理画面にてカテゴリ欄を見ても公開記事数分のカウントが右側に表示されています。

 

うーん、

できるだけプラグインを使わずに行いたいのですが・・・。

カテゴリネームの出力さえうまくfunctionにて出来れば良いのですが・・・。

 

テスト環境にて、

上記のXO Featured Image Toolsプラグインにて試してみた時は、管理画面にて左側にアイキャッチ画像が表示されました。

 

function内での処理でなんとかならないでしょうかね・・・。

 

アイキャッチ画像は、出力できているのでアイキャッチラベルにカテゴリ名を表示させたいだけなんですが、なぜか<?php echo get_the_category()[0]->name; ?>ですとカテゴリ名が表示されません。

 

独自関数がいけないのでしょうかね・・・。

 

Cocoonテーマにしてからの投稿では、もちろんアイキャッチ画像は設定していますので、問題ないです。

アイキャッチ画像の設定ができないブログサービスからインポートしたものも、上記の独自関数にてアイキャッチ画像の出力まではできているのですが、カテゴリ名が独自関数の中に、組み合わせた<?php echo get_the_category()[0]->name; ?>では出力されません・・・。

 

私だけではなく、他のブログサービスでアイキャッチ画像が設定できなブログサービスからWordPressに移行した場合(人)は、みんなそうなってしまうのでしょうかね・・・。

 

chu-ya様が、おっしゃるように、方法1か方法2で改めてやり直すしかないのでしょうかね・・・。

 

カテゴリ名をアイキャッチ画像上のカテゴリラベル内に表示したいだけなのに・・・。

 

 

長文ですみません。

 

 

 

 

 


   
(@akira)
Famed Member Registered
結合: 7年前
投稿: 1657
 

@why さん

以下の部分がおかしいです。

return sprintf(
'<div class="eye-catch-wrap"><figure class="eye-catch" itemprop="image" itemscope="" itemtype="https://schema.org/ImageObject" style="
text-align: center;
"><img src="%s" alt="%s"><span class="cat-label"><?php echo get_the_category()[0]->name; ?></span></figure></div>',
esc_url( $thumbnail_url ),
esc_attr( $thumbnail_alt )
);

これで上手くいくでしょうか?

return sprintf(
  '<div class="eye-catch-wrap">
    <figure class="eye-catch" itemprop="image" itemscope itemtype="https://schema.org/ImageObject" style="text-align: center;">
      <img src="%s" alt="%s">
      <span class="cat-label">%s</span>
    </figure>
  </div>',
  esc_url( $thumbnail_url ),
  esc_attr( $thumbnail_alt ),
  get_the_category()[0]->name
);

WordPress:アイキャッチ設定や記事内の画像有無によって、記事内ひとつ目の画像や代替画像を表示させるスニペット をご参考になったように思えます。


   
わいひら and why reacted
はる
(@haruinoue)
Noble Member Moderator
結合: 4年前
投稿: 1089
 

投稿者:: @why

return sprintf(
'<div class="eye-catch-wrap"><figure class="eye-catch" itemprop="image" itemscope="" itemtype="https://schema.org/ImageObject" style="
text-align: center;
"><img src="%s" alt="%s"><span class="cat-label"><?php echo get_the_category()[0]->name; ?></span></figure></div>',
esc_url( $thumbnail_url ),
esc_attr( $thumbnail_alt )
);

投稿者:: @why

上記ですと、カテゴリ名が「name; ?>」となってしまいます。

質問内容全体は理解しきれていませんが、上記のコードには問題があると思います。

return sprintf~~が書かれている行は既に<?php ?>の中なので、改めて<?phpを書く必要はありません。
正しくは以下のような感じではないでしょうか。

return sprintf(
'<div class="eye-catch-wrap"><figure class="eye-catch" itemprop="image" itemscope="" itemtype="https://schema.org/ImageObject" style="
text-align: center;
"><img src="%s" alt="%s"><span class="cat-label">'.get_the_category()[0]->name.'</span></figure></div>',
esc_url( $thumbnail_url ),
esc_attr( $thumbnail_alt )
);

他サービスからの移行した時のカテゴリーラベルとアイキャッチ画像については、

投稿者:: @why

カテゴリと投稿記事は紐づいていると思います。

であればカテゴリーラベルの表示については特にカスタマイズはする必要なく、

アイキャッチ画像をCocoonの機能で表示するためには

投稿者:: @chu-ya

●方法2
[Cocoon設定]→[画像]→アイキャッチの自動設定「アイキャッチ自動設定を有効にする」
各投稿を保存し直すと、自動でアイキャッチ画像が設定されます。

の対応が必要で、

投稿者:: @why

WordPress以外でアイキャッチ画像が設定不可のブログサービスでの投稿数が750記事くらいあり、

700記事以上を、1個1個各記事毎に保存し直すのはちょっと大変なので、

一気にできる方法をと考え、上記独自関数にて対応を考えている次第です。

このように数が多くて上記方法は取れないということであれば何らかのカスタマイズが必要になるのだと思います。

追記:Akiraさんと被りました…


   
わいひら and why reacted
 why
(@why)
Active Member Registered
結合: 2年前
投稿: 6
Topic starter  

@akira 様。

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

参照サイト、おっしゃる通りです。

コードの修正誠にありがとうございます。

見事にうまくいきました。

 

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

 


   
わいひら reacted
 why
(@why)
Active Member Registered
結合: 2年前
投稿: 6
Topic starter  

@haruinoue はる様。

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

気づくの遅くなりましてすみません。

 

Akira様のでもはる様のでもどちらでも問題なく表示されますね。

 

この度は、誠にありがとうございました。

 

 


   
わいひら reacted
chu-ya
(@chu-ya)
Famed Member Registered
結合: 3年前
投稿: 2895
 

アイキャッチ画像と言っているのは、投稿本文上に表示される画像ですよね?

[Cocoon設定]→[画像]を添付のようにオンにすれば、投稿記事中の1番目の画像でimgタグは作られています。
ただ、class=display-noneの為、非表示としており。
この為、追加CSSに以下を追加すればラベル含め表示されます。

.eye-catch-wrap.display-none {
  display:flex;
}

   
わいひら and why reacted
 why
(@why)
Active Member Registered
結合: 2年前
投稿: 6
Topic starter  

@chu-ya 様。

ありがとうございます。

そういった方法もありますね。

うまくいきました。

ありがとうございます。


   
共有:

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

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

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

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

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

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

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

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