サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2024-06-10 16:23
お世話になります。
Cocoonの内部スニペットに関して質問させてください。
カード型で表示されているもので
左に画像
右側上に「タイトル」
右側下に「抜粋」
という構造になっているかと思いますが、
記事の中身を改行なしで文字数で抜粋していると思います。
こちらの抜粋に関して記事の１行目と２行目のみを表示させるなどはできるのでしょうか。
【具体的にやりたいこと】
https://menu.kunsei-kunkun.com/
デジタルメニューの作成をしたいので、各記事に「料理の写真」「キャッチコピー」「値段」のみを表示したいのです。
これを実現するためにアイディアあったら教えていただけたら幸いです。
2024-06-10 17:35
●回答
キャッチコピーと、値段の入力について、方法を述べます。
①キャッチコピー
スニペットは、単に文章からの抜粋が反映だけでなく、
SEOパネル「メタディスクリプション」に表示したい文章を設定できます。
ここにキャッチコピーを入力します。
[Cocoon設定]→[インデックス]→自動生成抜粋文字数の範囲ない入力。
ここにキャッチコピーを入力します。
[Cocoon設定]→[インデックス]→自動生成抜粋文字数の範囲ない入力。
②値段
functions.phpにコードを追加します。
抜粋は、HTMLタグが除外され、キャッチコピーと値段を別の行にする事ができません。
抜粋とは別に、エントリーカードに情報を出力する必要があります。
この為、Cocoonが持つフック「entry_card_snippet_after」を用い、エントリーカードのスニペット後ろに、情報追加を追加します。
今回、「値段」の取得は、メモを用います。
メモに「値段」(数字だけ)入力します。
メモに値が無い場合、0円とし、値がある場合、例えば1000→1,000とします。
add_action('entry_card_snippet_after', function($post_ID) {
$price = get_post_meta($post_ID, 'the_page_memo', true);
$price = $price ? number_format($price) : 0;
echo $price . '円';
});
Topic starter
2024-06-10 17:50
ご返答ありがとうございます！
無事に修正ができました。
もう２つ質問させてください。
【１】
スマホで見たときに480px以下だと上記のディスクリプションに設定したキャッチフレーズは消えてしまいますよね？
それを表示させるにはどうしたらいいでしょうか？
【２】
出力させて金額を右寄せでフォントサイズを少し大きくしたいのですがこちらはCSSで設定できたりしますでしょうか？
2024-06-10 18:04
A1
[Cocoon設定]→[インデックス]→投稿関連情報の表示「スニペット（抜粋）の表示」
スマホ端末でスニペットを表示（480px以下）にチェックを付ければ表示されます。
A2
phpを操作するので、自己責任でお願いします。
CSSについて、分からない場合、ご自身で勉強されるか、業者に依頼願います。
上記コードは、100円とだけ出力しましたが、HTMLタグで囲めば、CSSでレイアウト設定できます。
echo '<div class=price>' . $price . '円' . '</div>';
CSS例
.price {
font-size: 10px;
text-align: right;
}
●ご参考
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。