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

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

全ページ共通のブロックの作成 または ...
 
共有:
通知
すべてクリア

全ページ共通のブロックの作成 または 自動生成記事一覧の文字に改行を反映させる

19 投稿
4 ユーザー
6 Reactions
159 表示
(@yamasan)
Active Member Registered
結合: 1か月前
投稿: 12
トピックスターター  

こんにちは
先日はありがとうございました

だいぶ操作も慣れてきまして質問させていただきたいのですが
もし「質問する場所を間違えていたらすみません」

聞きたいことは上記の「ような」ことをしたくてといった感じです

具体的には
ヘッダーメニューより
どの項目の場所に飛んでも
「フッターの上にはかならずこのブロックが表示される」というような感じです
今回の場合は「ケーキの種類」というブロックが
常にどのページに飛んでもフッターの上に表示されていて
種類を選ぶとそのタグが付いた投稿の一覧が表示されるというものです
※ここで生成される一覧にて
各記事の文字列に改行が反映されなくて、
文章が見づらい問題をどうしても解決できないので

質問でした ということです・・・

自分が試したことをこちらに記載します
どのページを開いても必ずフッターの上に種類を表示させたいため
・ウィジェットの「コンテンツ下部」というところにブロックを追加しました
・固定ページで段落ブロックに文字列を打ちます「パンケーキ」
ここにタグリンクを設定します

3つの投稿「スフレパンケーキ」「ホームペイドパンケーキ」「チョコレートパンケーキ」をします
これらの投稿のメタボックスのタグにて「パンケーキ」を設定

これを「ブロックごと切り取り」コードを取得
これをウィジェットの「コンテンツ下部」に貼り付け

どのページに行っても必ずフッターの上に「ケーキの種類別」というブロックが表示される
(文字列は改行が反映されないため 崩れて文章が見づらい)

このようになった原因がウィジェットでブロックを作成したことによるものではないか
と考えたため、違う方法はないか知りたくて質問しました

なお、各ページそれぞれに「ケーキの種類別」というブロックを作成する方法は
「スマート」じゃないため、「どうしてもできなければこれでやろう」と考えています・・・

よろしくお願いいたします・・・

AIに聞きながらやった部分が結構多いため
CSSが影響しているところがあるかもしれません

もしそちらの環境でこれが正常にできるようでしたら
一度いままで設定したCSSを全部消してやってみようと思います・・・

すみません・・・



   
引用
(@yamasan)
Active Member Registered
結合: 1か月前
投稿: 12
トピックスターター  

追記:
「改行が反映されなくて文字が乱れて見づらい」のは
ケーキの種類別から種類を選んだ時に
「表示される一覧の”段落ブロックの内容”」です
わかりづらくてすみませんmm



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

yamasanさん

恐れ入りますが、正直なところ、良く分からんというところです。
客観的に見て、第三者には伝わらないと思われます。
(だから、返信がつかない)
 

1つ1つ不明点を書いていくのも大変ではないかと思われます。(使っている言葉も少し独特かもです)

それを文章で指摘をしていけば、辛辣なものに見えてしまう可能性が高く、止めておきます。
(そんなつもりはなくても、受け手はそう捉えてしまう可能性が高そうに思います)

この返信すら、書こうかどうか、かなり悩んでしまいました。
(正直に言えば、こういうことは書きたくはないです)
 

そこでお願いなのですが。

  • 実際に作成したページのURLのご提示をいただく
    (百聞は一見に如かず。テストページやテストサイトでも良いと思います)
     
  • 上記が不可能であれば
    説明1つ1つにキャプチャ画像(スクリーンショット)を添付いただきたくお願い致します
    どのようなことをなさったのか・なさりたいのか、第三者に伝わるようにする必要があると思います
    (画像が複数枚必要でしょうから、返信も複数になって構いません)

 
上記のようなことが必要に思います。

第三者に伝わるようにすることが、第一歩かなと私は思います。



   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 8年前
投稿: 17989
 

すいません。僕もちょっとよくわかりませんでした。
ご自身で原因と考えられそうなところのスクリーンショットを撮影して、返信で補足を入れていただければ幸いです。
お手数をおかけしますが、よろしくお願いいたします。



   
返信引用
(@yamasan)
Active Member Registered
結合: 1か月前
投稿: 12
トピックスターター  

mk2さん>
お返事ありがとうございます
嫌な思いをさせてしまいすみません・・・

一応、ちゃんとページを完成させれるか正直自身がなくて
AIに聞いてXamppでローカルサーバーを再現して
そこでホームページを組み立てている手前
ページをお見せすることができませんので
画像で失礼させていただきます
(最近スクリーンショットがPCの不具合で
うまくできなくてこれを用意するのが誠意杯でした・・・)

よろしくお願いいたします・・・
画像サイズも大きくてすみません・・・

何もかもすみません・・・



   
返信引用
(@yamasan)
Active Member Registered
結合: 1か月前
投稿: 12
トピックスターター  

ひらいわさまもありがとうございます・・・



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

yamasanさん

もし、Windowsをご利用であれば、キャプチャ画像を取得するには、
「Snipping Tool(切り取りツール)」を使用するのが、便利かなと思います。
(Windows10/11には標準で入っています、Macは所有しておりませんので分かりません)

Snipping Tool を使ってスクリーン ショットをキャプチャする
https://support.microsoft.com/ja-jp/windows/snipping-tool-%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3-%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%E3%82%92%E3%82%AD%E3%83%A3%E3%83%97%E3%83%81%E3%83%A3%E3%81%99%E3%82%8B-00246869-1843-655f-f220-97299b865f6b#id0edd=windows_11

 

公開ページの状態だけでなく、どんな設定をなさっているのか。
そういうことがしりたいのです。
実際のページを拝見できないと、HTMLやCSSがどういう状態か分かりません。
(表面上の話ではなく、作りがどうなっているのか)

そのため、例えば。

  • 投稿ページ編集画面
    実際にどういうブロックを使用していて、どういう設定状況なのか
     
  • ウィジェット設定画面
    (どんなウィジェットで、どんな設定、どんな中身なのか)

 
そういうキャプチャ画像が必要かなと思います。
他にも必要なものがあれは、適宜貼って欲しいです。
(表面上だけみても、何か分からないです)

どういうことをなさりたいのか、いまいちピンと来ていないというのもありますけれど。

 

 

【追記】

今、ちょっと作業をしているもので、しっかり拝見していませんが。
(ご飯もまだですし、しばらく来れません・・・)

画像を拝見すると、「タグアーカイブページ」か表示されていて。
そのカードのスニペットについて改行されていないというお話?



   
わいひら reacted
返信引用
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3824
 

エントリーカードに改行コードを入れ表示しません

●要望

タグアーカイブ一覧(パンケーキ)に該当の投稿がカード表示される。
その際、スニペットを改行付きで、記事の概要、作成時間を綺麗に表示したい。


●説明

ケーキの種別を「タグ」で指定している。
→コンテンツ下部には「タグクラウド」ウィジェットでいいのでは?

[Cocoon設定]→[インデックス]→投稿関連情報の表示「スニペット(抜粋枠)を表示する」がオンとなっている。
スニペット表示は、自動生成抜粋文字数により、本文の冒頭から改行などのHTMLタグを除外した文字数分が表示される。

結果、改行表示されず、途中で文が途切れてしまう。
また画面幅に応じ、スニペットは三点表示で省略、「スマートフォンで表示する(480px以下)」設定に応じ非表示となる。

→エントリーカードに内容を綺麗に表示するには、PHPを使用し独自に情報を表示する必要がある。
例として概要文、作成時間をカスタムフィールドに登録し、それをエントリーカードに反映させる。


●アドバイス

AIもフォーラムも対面であなたの行動、状況を見ているわけではありません。
正しく文面で指示、情報提供しないと、まともな回答はしてくれません。

やりたい事を箇条書きで整理し、正しく仕様をChatGPTに伝えれば、1分もかからず作成してくれ、20行程度のコードで実現できます。

WordPressの基本的ウィジェットなどの操作、エディター、Cocoonの使い方をまず覚えましょう。



   
わいひら reacted
返信引用
(@yamasan)
Active Member Registered
結合: 1か月前
投稿: 12
トピックスターター  

いろいろとアドバイスありがとうございます・・・
まだレンタルサーバーでさえ契約しておりませんくて
すみません・・・

まずいまお二人が皆さんが教えてくださったことを調べてためしてみますmm
結果などお返事が少し遅くなりますmm

どうしても無理そうなときは動画をなんとかあげてみますが
なるべくそうならないように調べてやってみます
スペニットなどわからない単語が多かったので・・・・

お返事と結果はさせていただきます
しばらくお待ちください

もしかしたら3日くらいかかってしまうかもしれませんmm

ありがとうございますmm



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

用語が分からないということは、yamasanさんは、そういう言葉を使って説明していないということですよね。
そういう用語を使っている者とは、会話が通じにくいということだと思います、お互いに。

それをどうやって伝えるのかということは、しっかり考える必要があると思いますよ。
(一応、受取る側はどういうことだろうと、考えてはいますが、それでも今回は難しかったです。できるだけ端的に記載いただくのが良いと思います)

伝わらないと、会話は成立しません。
文字だけで伝えるのは難しいですから、画像の添付等もお考えいただくように、フォーラム上部の案内でお願いしています。
 

用語の説明まで考えるのはちょっとツラいので・・・。
(検索してみると、結構分かると思いますよ)

とりあえず、アーカイブページの説明は、ChatGPTにお願いしてみました。
(細かい内容までは確認していません)

WordPressの主なアーカイブページの種類

  1. 日付アーカイブページ

    特定の年・月・日で公開された投稿を一覧表示します。
    年別アーカイブ:example.com/2024/
    月別アーカイブ:example.com/2024/05/
    日別アーカイブ:example.com/2024/05/20/
     

  2. カテゴリアーカイブページ

    特定のカテゴリに属する投稿を一覧表示します。
    例:example.com/category/news/

  3. タグアーカイブページ
     
    特定のタグが付けられた投稿を一覧表示します。
    例:example.com/tag/wordpress/
     
  4. 投稿者アーカイブページ
     
    特定のユーザーが公開した投稿を一覧表示します。
    例:example.com/author/taro/
     
  5. カスタム投稿タイプのアーカイブページ
     
    「イベント」「商品」など、独自の投稿タイプに属する投稿を一覧表示します。
    例:example.com/event/
     
  6. カスタムタクソノミーアーカイブページ

    ジャンルや地域など、独自に定義された分類(タクソノミー)に基づいた投稿を一覧表示します。
    例:example.com/genre/music/

 

検索すると、以下のようなサイトもありました。(他にもあると思います)

What is: アーカイブ
https://www.wpbeginner.com/ja/glossary/archive/

自動的に作成されるページ
https://wordpressdeec.jp/howto/howto-005/

 

 
スニペットについては、以下のページで何となくお分かりいただけるのではないかと。
(本来スニペットの説明のページではありませんけれど)

スマホでエントリーカード抜粋文(スニペット)表示を切り替える方法
https://wp-cocoon.com/entry-card-snippet-for-smartphone/



   
わいひら reacted
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 5年前
投稿: 9098
 

ちなみに、スニペット(抜粋文)を、自分で入力することもできます

スマホ画面ですので、分かりにくいと思いますが、以下で入力できます

 
PCだと、編集画面右の設定パネルの部分です。
 
Cocoonのメタディスクリプションに入力する方法もあります。
 
ただ、どちらも改行は反映されないです。
(メタディスクリプションは、本来の用途とは違うかもしれません。カード表示だけなら抜粋の方かなと。使用されるのは一緒?)


   
わいひら reacted
返信引用
(@yamasan)
Active Member Registered
結合: 1か月前
投稿: 12
トピックスターター  

みなさん
昨日はありがとうございます
嫌な思いをさせてしまいすみませんmm

大門未知子さん>
スニペッド「抜粋」についてしらべました

投稿のメタボックスの投稿タブの上のほうに
抜粋みたいなことができる機能があるとか
知らなくてためしてみました

ただ、なるべく現状はスニペッドは使用する方向では考えていないです
設定はオフになっていました



   
返信引用
(@yamasan)
Active Member Registered
結合: 1か月前
投稿: 12
トピックスターター  

 mk2>アドバイスありがとうございます

フォーラムにログインして書くのがなれなくて
なかなか書き込み方法が見つけられないため
ウィンドウは開きっぱなしにして
そのままそこから投稿してしまったため

上記にお返事を記入できなかったため
こちらで書き込みさせていただきます
すみませんmm



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

@yamasan さん

先述の通り、エントリーカードには本文の抜粋がスニペットとして表示されます。
その際、改行コードなどは全て除去され表示されます。

●仕様について

  • 図③のエントリーカードに表示した文ですが、どこの文を表示したいのですか?
    単に文脈など関係なく一定行数、改行を含め表示したいだけなのでしょうかしょうか?
    →意味がない。それなら、スニペットとなんら変わらず、読み易くするなら本文に句読点を入れるべきです。
  • カードの幅に応じ、文の折り返しは当然変わってきます。
    結果、改行位置も変わります。その点を考慮していますか?

期待の表示をするためには、仕様を明確にした上で、PHPでのカスタマイズが必須です。

私なら、mk2さんが述べた、エディターのSEOパネルのメタディスクリプションに、句読点を入れアピール文として入力し、スニペットをオンにします。

提示頂いた図②<材料>と<イタメレ>の間にスペースを入れるような文を書いている時点で、エディターの装飾が使えてない印象です、また文脈として変です。

カスタマイズする以前に、ページ構成、レイアウトなどメモしていますか?
設計図もなく家を建てるようなものです。



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

●Cocoon設定

[Cocoon設定]→[インデント]→投稿関連情報の表示
スニペット(抜粋)」をオン
スマートフォンで表示する(480px以下)をオン


●エディターにて入力

メモに作業時間「2時間」と入力。
SEOのメタディスクリプションにエントリーカードに表示するアピール文を入力。


●PHPを追加

スニペットの前にメモに入力した作業時間を追加する。


●CSSを追加

エントリーカードのスニペットは標準4行までしか表示されない。また、画面幅480px以下の場合、3行となる。
これを解除して、メタディスクリプションを全文表示する。

 



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

yamasanさん

少し仰っていることが・・・。

投稿者:: @yamasan

スニペッド「抜粋」についてしらべました

投稿のメタボックスの投稿タブの上のほうに
抜粋みたいなことができる機能があるとか
知らなくてためしてみました

ただ、なるべく現状はスニペッドは使用する方向では考えていないです
設定はオフになっていました

オフだと、スニペットは表示されないはずで。
もし、表示されていたら、何らかの不具合ではないかと・・・。

私の環境で確認すると、「Cocoon設定」-「インデックス」の当該箇所をオフにすると、タグアーカイブページもスニペットは非表示になりました。

 

また、カードのスニペット部分は、以下のいずれかを表示するのではないかと思います。
(条件はあります)

  • 本文からの自動抜粋
  • 「抜粋」欄入力のもの
  • 「メタディスクリプション」欄入力のもの
     

現状の画像を拝見する限り、本文からの自動抜粋が表示されているように見えるのですが・・・。

以下で、自動抜粋していると思います。
(HTMLタグ等もここで除去される)

https://github.com/xserver-inc/cocoon/blob/7f52cca742ae53a5ef3b7feaf5f3dea69866dd26/functions.php#L66-L96

分からないと仰るかもしれませんが、分からないとカスタマイズできないんです。

これをカスタマイズするのか、フックを使ってスニペットの後ろに新たに出力するか、何らかのカスタマイズが必要だと思います。

 

そして、フォーラム上部の案内にリンクのある、サポート対象外にケースには以下のようにあります。

サポート対象外のケース
https://wp-cocoon.com/not-supported/#toc6

 
PHP等のカスタマイズはサポート対象外です。
 
@chu-yaさんが根気強くご対応くださっていますけれど。
本来サポート対象外のケースであることは、ご承知おきください。


   
返信引用
(@yamasan)
Active Member Registered
結合: 1か月前
投稿: 12
トピックスターター  

大門未知子>
お返事ありがとうございます!
なるほど「よくわかりました」

たしかに、ウィンドウなどを縮小したりすれば文の改行などの変わってきますね

いや、たしかにおかしいと思いました
ページを見る環境は人それぞれ違うわけだし
決まった位置で改行になる理由なんて確かにありませんでした汗

それならいっそ、たしかに句読点などを入れて
読みやすくするべきですね

すみません、みなさんには関係ないことなのですが
当方だいぶ目を悪くしていて
スペースだったり改行をしてりすることにより
見やすさを維持してきていたため

文脈による見やすさというものを見誤っていました

最後の案でぜひやらせていただきます
ありがとうございますmm



   
わいひら reacted
返信引用
(@yamasan)
Active Member Registered
結合: 1か月前
投稿: 12
トピックスターター  

@mk2_mk2 
こんばんは
お返事遅くなりすみません汗
ありがとうございますmm

自分でカスタマイズしてみますが
それよりも
そんなことしなくても
見やすくする工夫はありますので
どうしてもできなければ
PHPをカスタマイズしてみます

ありがとうございますmm



   
わいひら reacted
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 5年前
投稿: 9098
 

yamasanさん

まずは、WordPressやCocoonの機能で何ができるのか。
それを知るべきだと思います。

その部分が、足りないように感じます。
それを知らずしては、何もできないと思います。

折角ローカル環境があるのであれば、触り倒すべきだと思います。
先にそれなのではないかと感じます。

そうすれば、自ずとWordPress等の言葉も、知っていくはずです。

 
そして、機能を理解し、それらの機能で工夫してもできない場合は、カスタマイズです。
ご自分のできる範囲で、カスタマイズなされば良いのかなと思います。

少し順番が違うように思います。



   
返信引用
共有:

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

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

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

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

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

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

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

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