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

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

コメントを改行表示にしたい
 
共有:
通知
すべてクリア

[解決済] コメントを改行表示にしたい

9 投稿
3 ユーザー
12 Reactions
228 表示
(@tanaka203)
Active Member Registered
結合: 2か月前
投稿: 9
トピックスターター  

相談内容:サイト内に投稿されたコメントを改行表示にしたい。

不具合の発生手順:

①サイト内で投稿されたコメントのみを表示する投稿記事を作成した。

②記事内にブロック「最新のコメント」を設置した(ウェジェットではない)。

③表示されたコメントは、元のコメントにあった改行が反映されず、1行の表示になっていた。
文字数はウェジェットのような表示設定が無かった?見当たらなかった。

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

①ウェジェットのHTMLを入れようと模索したがよく分からなかった。

②改行時にスペースをいれたら改行を認識されると思ったが出来なかった。

③chatGPTに聞いて、下記CSSを、外観の追加CSSに追加入力した。
.widget_recent_comments .recentcomments {
white-space: pre-line;
}

④chatGPTに聞いて、「functions.php」に改行タグを新規追加した。

function custom_recent_comments_format($comment_text) {
return nl2br($comment_text); // 改行を反映
}
add_filter('get_comment_text', 'custom_recent_comments_format');

私では解決不可能なようです。
お手数ですがよろしくお願いします。

----------------------------------------------
サイト名:オーバーロードWIKI第7版
サイトURL: https://overlordwiki.matrix.jp 
ホームURL: https://overlordwiki.matrix.jp 
コンテンツ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-ganchan01/style.css
WordPressバージョン:6.7.1
PHPバージョン:8.2.20
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
言語:ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名:Cocoon
バージョン:2.8.2
カテゴリー数:33
タグ数:1
ユーザー数:2
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.1.3
style.cssサイズ:1737 バイト
functions.phpサイズ:716 バイト
----------------------------------------------
Gutenberg:1
Font Awesome:4
Auto Post Thumbnail:0
Retina:0
ホームイメージ:/wp-content/themes/cocoon-master/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化:1
HTML縮小化:0
CSS縮小化:1
JavaScript縮小化:1
Lazy Load:1
----------------------------------------------
利用中のプラグイン:
Advanced Google reCAPTCHA 1.25
All In One WP Security 5.3.6
Auto Linker 0.0.4
Autoptimize 3.1.12
bbPress 2.6.11
Decent Comments 1.13.0
Disable Google Fonts 2.0
Flexible Table Block 3.4.0
Protect Uploads 0.5.2
Relevanssi 4.24.2
TS Webfonts for SAKURA RS 3.1.4
WP Multibyte Patch 2.9
WPS Hide Login 1.9.17.1
WP Super Cache 1.12.4
WP ULike 4.7.6
----------------------------------------------

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

●回答

WordPress標準の「最新のコメント」ブロックのコメント表示はリスト表示です。
このため、1行三点リーダー表示(文字数までは分からず)となり、改行などは削除され表示されます。


●対策方法

Cocoon「[C]最近のコメント」ウィジェット文字数指定あり)を投稿・固定ページの本文埋め込みます。
※投稿のコメント欄と異なり、ウィジェットはあくまでもリストで1行と言う考えのようです。

https://wp-cocoon.com/community/postid/63414/

 


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

表示する内容にもよりますが、ショートコードを自作(約40行)する方が早いかと思います。

理想とするページを作成するには、カスタマイズできるだけの知識が必要です。
カスタマイズするより先に、Chromeデベロッパーの使い方、CSSの基礎知識、WordPressの基本的使い方など、学ぶことは多々あります。

勉強しスキルアップされるか、できなければ有償にて業者に依頼するの2択しかありません。
また、カスタマイズできない場合、既存の機能の範囲で使うのが望ましいです。


   
(@tanaka203)
Active Member Registered
結合: 2か月前
投稿: 9
トピックスターター  

大門未知子さん

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

「コメントはリスト表示のため1行になる」
「文字数指定(文字数を増やす)をしたければウェジェットを使用する」
「自分で出来ないなら既存の範囲で諦める」

理解いたしました。
出来そうな範囲なら頑張りますが、これは私では難しそうなので、有償案件にリストアップします。
無理に悩む必要がなくなり助かりました。
ありがとうございます。

私のサイトは前身のサイトがあり、そちらはトップページでコメントの改行が出来ていたので、恐らくできるのだろうと思い質問させて頂きました。
アーカイブですが下記URLのサイトです。

http://overload.2-d.jp /" target="_blank" rel="noopener"> https://web.archive.org/web/20151205004001/http://overload.2-d.jp/

 

 


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8196
 

とりあえず、コメント本文だけを以下のようなショートコードを作って取得してみたのですけれど。

function latest_comments_shortcode($atts) {
    // デフォルトの引数(コメント数を指定)
    $atts = shortcode_atts(array(
        'number' => 5,  // 取得するコメント数
    ), $atts);

    // 最新のコメントを取得
    $args = array(
        'number' => $atts['number'], // 引数で指定されたコメント数
        'status' => 'approve',       // 承認済みコメントのみ
        'post_status' => 'publish',  // 公開された投稿のコメントのみ
    );

    // コメントを取得
    $comments = get_comments($args);

    // コメントがあれば表示
    if ($comments) {
        $output = '<ul>';
        foreach ($comments as $comment) {
            // コメントの内容のみを表示
            $output .= '<li>' . esc_html($comment->comment_content) . '</li>';
        }
        $output .= '</ul>';
    } else {
        $output = '最新のコメントはありません。';
    }

    return $output; // ショートコードとして返す
}

// ショートコードを登録
add_shortcode('latest_comments', 'latest_comments_shortcode');

 

ショートコードを投稿ページに入れて、表示させてみましたが、以下のように表示されました。

 
上記の上から2番目は、実際のコメントは以下のような感じで、改行されています。
 
データベース(wp-comments)に保存されている内容を確認すると、以下のような感じで、改行タグはなかったです。
(文字コードとしての改行はあるのだと思います)
 
そのため、上記のソースを以下のように「nl2br」で改行タグを入れてやると。
        foreach ($comments as $comment) {
            // コメントの内容のみを表示
            $output .= '<li>' . nl2br(esc_html($comment->comment_content)) . '</li>';
        }
 
表示は、以下のような感じに改行されました。
 
 
WordPress本体の「最新のコメント」ブロックは、おそらく以下だと思うのですけれど。
 
そういう処理がそもそもされていないのでは・・・。

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

@mk2_mk2 さん

コードを提示してしまうとは(笑)

各コードについては、これを機にご自身で勉強して、理解してください。

●答え

ショートコードの使い方

[recent_comments]

CSS
好みでレアウトは調整してください。

.recent-comments-list {
  display:flex;
  flex-direction: column;
  gap: 10px;
  list-style:none;
}

.recent-comments-list li {
  list-style:none;
}

.recent-comments-list p {
  margin-bottom:0
}

 

PHP
少し手直しして、提示された元ページにと同じにしてみました(コメントの文字数は制限していません)。

add_shortcode('recent_comments', function($atts) {
  // デフォルトのオプション
  $atts = shortcode_atts(
    array(
      'number' => 5, // 表示するコメント数のデフォルト値
    ),
    $atts
  );

  // コメントを取得
  $recent_comments = get_comments(array(
    'number'      => intval($atts['number']),
    'status'      => 'approve', // 承認済みのコメントのみ
    'post_status' => 'publish', // 公開中の投稿に限る
  ));

  // コメントがない場合の処理
  if (empty($recent_comments)) {
    return '<p>No comments found.</p>';
  }

  // コメントをリスト形式で出力
  $output = '<ul class="recent-comments-list">';
  foreach ($recent_comments as $comment) {
    $post_title = get_the_title($comment->comment_post_ID); // 投稿タイトル
    $post_link  = get_permalink($comment->comment_post_ID); // 投稿リンク

    $output .= '<li>';
    $output .= '<p><a href="' . esc_url($post_link) . '">' . esc_html($post_title) . '</a> へのコメント (' . esc_html($comment->comment_author) . 'より[' . esc_html(get_comment_date('m/d', $comment)) . '])</p>';
    $output .= '<p class="comment-content">' . nl2br($comment->comment_content) . '</p>';
    $output .= '</li>';
  }
  $output .= '</ul>';

  return $output;
});

   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8196
 

@chu-ya さんこそ・・・。

以下の返信(00:02)以前から、私も自分で試していました。
https://wp-cocoon.com/community/postid/82734/

tanaka203さんの最後の返信は、納得していただいたようで、最後にURLをご提示してあったところに、何と言うのか未練のようなものを感じました。

そこで、どうせ試していたのならばと、それを貼りつけておきました。

ただ、私はコメント本文しか編集していませんでしたから。(改行を確認していましたので)
これを手掛かりに・・・。

  • 他の必要な項目は、HTMLの編集を追加する
  • 見た目をCSSで整える

上記をご自分で調べたり試していただく、踏み台にはなるのかなという感じです。

それをご自分で調べていただくことで・・・。

  • どのようなお問い合わせを、ご自分がなさっているのかということも、分かっていただけるのではないか
    (本来サポート対象外で、Cocoonの問題でもないでしょうし)
     
  • 何より、ご自分で調べる・試すということを、していただけるのではないか(今後のことも含めて)
    その手掛かりになるのではないか

そんな感じだったのですけれど。

全部ご対応してくださったのですね。


(@tanaka203)
Active Member Registered
結合: 2か月前
投稿: 9
トピックスターター  

@chu-yaさん

@mk2_mk2 さん

 

大変お手数おかけしました。

本件は、私では身に余る、プロに頼めばできる。と知れただけでも私としては十分すぎる情報でしたが、コードの提示までご丁寧にありがとうございます。

折角ですので色々触って試してみたいと思います。

それでもわからなさそうであれば、プロに相談する案件の1つにします。

 

サポート対象外の質問はしないよう以後気を付けます。

大変失礼しました。


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8196
 

tanaka203さん

投稿者:: @tanaka203

折角ですので色々触って試してみたいと思います。

ぜひ、そうなさってください。
今回のものに、エッセンスなのか、ノウハウなのか、そういうものが複数あると思います。
良い機会ではないかと思います。
(こういう提示があったとしても、その先自分でメンテナンスできなければ、サイトの維持はできなくなると思います)

文字でのコミュニケーションは難しく。
上手く伝えることができる気がしませんので、短めに書きます。

フォーラムで返信くださっている方々も、回答を持ち合わせている訳ではないということは、ご承知置きいただければと思います。

調べ・考え・試す。
そういうことをした上で、書き込んでくださっているということは、ご理解いただければと思います。
(上手く言えてない気はしますが・・・)


   
tanaka203 reacted
共有:

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

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

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

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

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

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

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

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