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

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

このフォーラムには初心者の方も多く参加されています。質問に不慣れな方も安心して相談できるよう、できるだけ穏やかな言葉でご案内いただけますと幸いです。

「brBrbr」のような連続改行ができ...
 
通知
すべてクリア

[解決済] 「brBrbr」のような連続改行ができるようにしてほしい

18 投稿
4 ユーザー
7 Reactions
448 表示
(@taka2026)
Active Member Registered
結合: 3週間前
投稿: 7
トピックスターター  

今まで、別のテーマで「brBrbr」というプラグインを使って連続改行(2~3行連続の改行)をしていたんですが、

Cocoonで「brBrbr」を使うと、サイトの表示が崩れてしまいます(Firefox)

ですから、Cocoonの設定で、「brBrbr」を使ったのと同じような、連続改行ができる設定を追加していただけると幸甚です。

Gutenbergをオフにした、クラシックエディタで、ビジュアルリッチエディターを使用しない環境です。

ぜひ、宜しくお願い致します!

 



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

●原因

「brBrbr」ですがWordPress公式プラグインではありません。

プラグイン中で文字を置き替えをiseとしています。
しかし、PHP 7.0以降では/eが使えず、プラグインが警告となり正しく動作しません。


●対策

プラグイン「Advanced Editor Tools」を用います。
旧エディター(TinyMCE)の「クラシックブロックとクラシックエディター内のパラグラフタグを保持」をオンにすると、改行brがそのまま保存されます。

しかし、WordPress標準の動作で、連続したbrを除去してしまいます。
そこで、functions.phpに以下を追加し、本文表示の際、brを除去しないようにします。

remove_filter('the_content', 'wpautop');

この投稿は3週間前 2回ずつ大門未知子に変更されました

   
わいひら reacted
(@taka2026)
Active Member Registered
結合: 3週間前
投稿: 7
トピックスターター  

できませんでした。

逆に、改行が全部なくなってしまいました。。



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

@taka2026 さん

brが1つにならず複数改行となります。

①Advanced Editor Toolsの設定。
②クラシックエディターで複数改行brを入力。
③本文表示。


この投稿は3週間前 4回ずつ大門未知子に変更されました

   
わいひら reacted
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 5年前
投稿: 4695
 
再現しました。
先の手順では、過去の文はAdvanced Editor Toolsにより改行コードをbrタグとして保存していません。
このため、消えたのではなく、文中に改行コードのままとなり、brタグとならないことが問題でした。
 
brBrbrを見るとコメントなども操作していますが、本文だけなら以下で対応可能かと思います。
remove_filter('the_content', 'wpautop');

add_filter('the_content', function($content) {
  $content = trim($content);
  $content = nl2br($content);
  return '<p>' . $content . '</p>';
});
 

●補足
 
Gutenbergエディターの場合、HTMLタグのまま保存され、そのまま複数改行として表示される。
<!-- wp:paragraph -->
<p>こんにちは<br><br><br><br><br><br>さようなら</p>
<!-- /wp:paragraph -->

●ご参考
 
以下brBrbrのソースをそのまま張っておきます。
 

この投稿は3週間前 3回ずつ大門未知子に変更されました

   
わいひら reacted
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 5年前
投稿: 4695
 

●追記

プラグイン「brBrbr」を修正して動作させてみましたが、大きな問題があります。

改行コードをbrタグに変更し、本文全体をpタグで囲んでいます。

HTML仕様ではpタグの中にdivタグは許されません。
例えばボックスなどを使った場合、この状態になります。

これは上記コードでも同様です、ご了承ください。


この投稿は3週間前 3回ずつ大門未知子に変更されました

   
わいひら reacted
(@taka2026)
Active Member Registered
結合: 3週間前
投稿: 7
トピックスターター  

「本文だけなら以下で対応可能」というコードだと、

記事の前半は、連続改行されるんですが、以下の見出しコードの下から、改行がおかしくなってしまいます↓

(改行されすぎる。「brBrbr」を使った時と同じような感じになる。Firefox)

 

<div style="border-left:8px solid maroon; border-bottom:2px solid maroon; padding:0px 0px 1px 5px;"><span style="font-size:18px;"><b>テスト</b></span></div>

 

どういうことなんでしょうか。

 



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

どういうことなんでしょうか。

どういうことでしょうね。

添付頂いたコードが悪いわけではありません。
(このコードは見出しではありません。)

改行コードをbrタグに変換できています。

しかし、ChromeとFirefoxでは、brタグに指定した margin の扱いが異なるようです。
Chromeは brの margin を無視しますが、Firefoxは適用されるようです。

そのため、Firefoxでは改行が1つでも margin の分だけ余白が加わり、2つ改行されたように見えます。

以下のCSSを追加して改善されませんか?

.entry-content br {
  margin: 0;
}

Gutenbergエディターではこのような問題は発生しないので、切り替えを強くお勧めします。


この投稿は3週間前 4回ずつ大門未知子に変更されました

   
わいひら reacted
(@taka2026)
Active Member Registered
結合: 3週間前
投稿: 7
トピックスターター  

CSSを追加しようとすると、エラーが出て更新できませんでした。

Gutenbergは、難しすぎて無理です。すみません。。

 

連続改行が、Cocoonの設定項目となる可能性は、どれくらいありますか?

設定で、「連続改行を可にする」というような項目が作られる可能性はありますか?

 



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

●補足

気付いたことがあり。

pタグの中にdivタグがあることで、ブラウザ側でタグの解釈が変わる。
結果、.entry-content > *となり、brタグにmarginが付与されてしまう。

pタグで囲むのではなくdivタグで囲めば解決するのでは?

実際のページの提示もなく、こちらの環境で想定した範囲で回答しており、期待通りなのか不明。

CSSを追加しようとすると、エラーが出て更新できませんでした。

どんなエラーですか?具体的にメッセージなど提示してください。
対面で対応しているわけではないので、貴方が書いた文(情報)が全てです。

マナーとして少なくとも、実際のページを提示の上、問題点を述べてほしいです。

私からの回答は以上でお終いです。

return '<p>' . $content . '</p>';

 

 


この投稿は2週間前 6回ずつ大門未知子に変更されました

   
(@taka2026)
Active Member Registered
結合: 3週間前
投稿: 7
トピックスターター  

シンプルに要望です。

Cocoonの設定で、「連続改行を可にする」というような項目を作っていただければ幸甚です。

もし可能であれば、宜しくお願い致します。

 



   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 6年前
投稿: 9698
 

失礼します。
(返信がないようですので)

ご判断はわいひらさんがなさることですが、私見を書かせていただきます。

私は、現状シンプルな状態ではないと思います。
(具体的な要件が、提示されて/煮詰まって、いないのではないかと)
 


①

「brタグによる連続改行」を可能にするだけであれば、先にあったように、WordPressの自動整形機能(wpautop)を無効化すれば、済む話です。
これで「brタグによる連続改行」は可能になります。(タブの切り替えはなさそうですし)

WordPressの自動整形機能はクセが強いですが・・・。
HTMLに疎い方が、サイト(HTMLの構造)を壊さないためには、必要な機能かと思います。

特にクラシックエディタの「テキスト」タブでは、自由にタグなど編集できてしまいます。

そういう意味では、自動整形機能の無効化は、リスクがあると思います。
Cocoonの利用者には、初心者の方も多く、これをテーマ側で無効化することには、不安を覚えます。
(サイトを壊す方が増え、更にご自分で修復できない方が、現れる可能性を感じます)

そもそも、「brタグによる連続改行」は、HTML的に非推奨ではないでしょうか。
 


②

おそらく「brタグによる連続改行」を可能にするだけではなく。

プラグインと同様に?(私はプラグインの機能を十分理解している訳ではありません)、「改行コードの前に、brタグを挿入」する事も、ご要望なさっているのでは?

その他にもプラグインには、微妙な調節機能があるようです。
(table/見出しタグ等の直後の余分なbrタグをトリミングする?等々、他にも)

「テキスト」タブのみをご利用のようですので、Shirt+Enterでのbrタグ挿入ができないことからのご要望かもしれないと、思料。
(そもそもこの使い方もイレギュラーかと)

クイックタグ等を利用すれば、brタグ挿入もできそうですが

ただ、ご提示のプラグインは、本文全体をpタグで囲む?という仕様もあるようで、これは先にもあったようにHTML構造を壊す可能性が高そうに思います。

つまり、プラグインの仕様に問題がある?
プラグインにある微妙な調節機能も必要そう?
そういう状態のものを、テーマに組み込む?
問題があるのではないでしょうか。
(仕様を詰めればいいのでしょうけれど)


③

ブロックエディタ(Gutenberg)が主流となった今、どれだけの需要があるのだろうと思います。

とてもニッチで、しかもHTML的に好ましくないとなると、テーマ側で対応すべきかどうか。
 
 
私も、本番環境では、クラシックエディタを使用しています。
ただ、ビジュアルエディタをメインで使用しますし、「brタグによる連続改行」は使いません。
(間隔を開けるためのclassを子テーマに定義して、ビジュアルエディタの「スタイル」メニューからclass追加できるようにしています)

先にも書きましたが、「brタグによる連続改行」は、HTML的には非推奨かと思います。

また、この機能が、ブロックエディタ(Gutenberg)側へ影響ないのかも、心配します。
(回避はできると思いますが)


④

元々の発端は、プラグインが現状主流のPHP8.x系で動作しないということのように、思われます。

であれば。
PHP8.x系で動作するように、プラグインをご自身で修正/更新するのが、1番素直なのではないかと、思います。

検索すると、以下のようなサイトもあります。

WordPress brBrbrプラグインでエラー!Warning: preg_replace()を解決する方法
https://www.saka-en.com/wordpress/wordpress-brbrbr-error-php7/

ただ、上記だけで足りるかということはあるかもしれません。

しかし今は、AIに用件を伝えて、プラグインのソースを提示すれば、修正されたソースを提示してくれますよ。
(プラグインのソースは貼っていただいていますし)

それで対応可能かと思います。
 


今回のご要望は、あくまで自己責任の範囲で行うべきものではないかと、個人的には思います。
(カスタマイズの相談にのってくださっているのに、何かもったいないとも思います)

HTML非推奨、HTML構造を壊すリスク、プラグインの仕様に問題がある、等の懸念のあるように思います。

あくまでも私個人の私見ですので、ご承知置きください。


この投稿は2週間前 4回ずつmk2に変更されました

   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 6年前
投稿: 9698
 

投稿者:: @taka2026
↑

Cocoonで「brBrbr」を使うと、サイトの表示が崩れてしまいます(Firefox)

これの原因が何か・・・にもよりますが。

これまで出てきた中では、本文全体をpタグで囲ってしまい、更にpタグの中に、他のブロック要素があるということなのだとすると、やはり仕様的に問題があると思いますから、プラグインを修正すべきなのではないかと思います。(pタグは必要?entry-content自体がdivタグですし)



   
(@taka2026)
Active Member Registered
結合: 3週間前
投稿: 7
トピックスターター  

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

やはり連続改行を、設定で行うのは難しいですかね。

参考になりました。

もし可能であれば、わいひらさんの見解もお聞きできれば幸甚です。

宜しくお願い致します。



   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 9年前
投稿: 18749
 

ご要望ありがとうございます。
連続改行に対応するには、WordPress標準の本文の自動整形処理にも手を加える必要があると思います。HTMLタグを含む記事や、既存の記事の表示などへの影響も考慮する必要があるため、Cocoonの標準設定としての追加は、現時点では見送らせていただければと思っております。

実装方法は考えられると思いますが、設定を切り替えるだけで、さまざまな記事を問題なく表示できるようにするには、かなり慎重な検討が必要だと考えています。

ご希望に添えず恐縮ですが、ご理解いただけますと幸いです。


この投稿は2週間前ずつわいひらに変更されました

   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 6年前
投稿: 9698
 

個人的に思うのは。

brタグは、

  • 手入力
  • もしくは、クイックタグ/ショートカットキーに割り当てて入力

上記辺りが現実的かなと思います。(先にも簡単に書きましたけれど)
自身で意図して挿入する方が良いと思います。

この場合でも、自動整形機能(wpautop)の無効化は必須ですが。

編集済みの投稿/固定ページは救えませんが(要再編集)、新規作成のページは「brタグによる連続改行」は、比較的軽いコストでできると思います。
 
 
brタグを自動挿入しようとすると、影響範囲が広すぎると思います。
仕様確認だけでも大変ではないかと思います。

得られるメリットの割に、膨大なコストが掛かりますし。(メリットは非推奨なものですし)
それはテーマ実装時だけではなく、今後のメンテナンスコストにも影響があると思います。
(その割には使う方も多くはなさそうに思います)


この投稿は2週間前 4回ずつmk2に変更されました

   
わいひら reacted
(@taka2026)
Active Member Registered
結合: 3週間前
投稿: 7
トピックスターター  

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

やっぱり難しいんですね。

よく理解できました。

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



   
わいひら reacted
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 5年前
投稿: 4695
 

●補足

根本的な問題は、プラグイン「brBrbr」の処理にあります。

そもそも、根本的な問題は、段落(HTML)の構造を意識せずに本文を記述していることにあります。
HTMLでは、文章の内容だけでなく、段落やブロック要素の構造を適切に考慮する必要があります。

人為的なミスをテーマ側の処理で吸収することには限界があります。
テーマ側で無理に対応しようとしても、HTMLの構造を正しく保てるとは限らず、かえって別の問題を引き起こす可能性があります。

本文全体をpタグで囲んでいるため、途中にdivタグなどのブロック要素が含まれると、HTMLの仕様に反し、ブラウザが意図しない表示や動作をする原因となります。

先にも述べられているとおり、wpautopは段落の区切りを判断し、適切にpタグを補完する重要な機能です。

しかし、このプラグインではwpautopを停止し、改行コードをbrタグに変換したうえで、本文全体をpタグで囲むことで対応しています。
この処理では、本文中にブロック要素が含まれる場合に適切に対応できません。

単純に全体をdivタグで囲めば、HTMLの構造上の問題は解消できると考えられます。

しかし、divタグは汎用的なブロック要素であり、段落を表す意味はありません。
そのため、本文中の段落構造が適切に維持されず、文書の意味構造やSEOに悪影響を及ぼす可能性があります。



   
共有:

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

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

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

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

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

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

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

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