サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Cocoonテーマに関する質問
16
投稿
2
ユーザー
0
Reactions
2,935
表示
トピックスターター 2019年1月13日 23:42
よろしくお願いいたします。
はじめに
今回の話は、私のわがままだと思います。そういうユーザーもいるという程度で受け止めていただけますと幸いです。
前提について
他のテーマからCocoonへ移行をしています。以前のテーマにはブログカード機能はありませんでした。そこでプラグイン「Pz-LinkCard」を使っていました。そのプラグインは以下のようなコードを挿入することで、ブログカードのURLであると明示的に区別していました。
Pz-LinkCardでは
[blogcard url="https://www.yahoo.co.jp/"]
Cocoonでは
もしくは
<a href=” https://www.yahoo.co.jp/”>https://www.yahoo.co.jp/</a>
のように指定するとのことでした。
参照したページ： https://wp-cocoon.com/how-to-use-external-blogcard/
本題
移行作業のため全部のページを開いて手直しするのは大変なので、sedコマンドで置換してインポートさせようと考えました。
以前のブログカードコードは文章の途中でも挿入することが可能でした。Cocoon内蔵のブログカードに対応させるために余分なコードを取り払っても、文の途中にURLが表示されるだけになる場合があります。
例
次のURLを参考にしてください。
[blogcard url="https://www.google.com/"]次のURLを参考にしてください→[blogcard url="https://www.yahoo.co.jp/"]
↓
次のURLを参考にしてください。
https://www.google.com/次のURLを参考にしてください→ https://www.yahoo.co.jp/
※CocoonではURLの前後に文字列があると、ブログカードとして扱わないようです。
Cocoon内蔵のブログカードもコード(タグとか)で明示的に表すことが出来たなら、一発で置換できるのですが、現状では難しそうです。
現状の仕様になっているのは、入力する際の手間を省いているのだと推察しております。Pz-LinkCardはWordPressエディターに挿入ボタンがあり、URL入力フォームが表示されて、挿入時にコードが付与されるという仕様です。
おわりに
いずれにせよ、移行には確認作業は必要ですので、記事ごとに修正していく予定です。利用者にとって明示化するメリットが大きくなりましたら、議論していただけますと嬉しく思います。
2019年1月14日 20:33
Cocoonでは以前からブログカード用の以下のようなショートコードあります（正確にはWordPressのショートコード機能は利用しないけど）。
これだと意図したことができるのではないかと思います。
ただ久しぶりに使用してみると、pタグ内にブログカードが出現した場合、ブラウザによって勝手にタグが挿入されるようになっていたので、その部分を修正しておきました。
https://github.com/yhira/cocoon/archive/master.zip
上記ファイルでアップデートの上試してみてください。
トピックスターター 2019年1月15日 22:08
わいひら様
ご回答いただきありがとうございます。
１．明示化について
Cocoonでは以前からブログカード用の以下のようなショートコードあります（正確にはWordPressのショートコード機能は利用しないけど）。
これだと意図したことができるのではないかと思います。
上記の例では https://wp-cocoon.com/ の前にスペースが入ってますが、不要なんですよね？Cocoonバージョン: 1.5.3.2でテストしたところ、スペースが入ってると期待の動きになりませんでした。スペースを取ったところ動きました。
これで私の意図した事が出来ると思います。
２．ブラウザーによる挙動の違い
ただ久しぶりに使用してみると、pタグ内にブログカードが出現した場合、ブラウザによって勝手にタグが挿入されるようになっていたので、その部分を修正しておきました。
https://github.com/yhira/cocoon/archive/master.zip
上記ファイルでアップデートの上試してみてください。
当方の環境はWordPress 5.0.3、Cocoonバージョン: 1.5.3.2をFirefox64.0.2 (64 ビット)で閲覧しています。どのようなタグが挿入されるか分かりませんが、勝手にタグが挿入される現象は確認できませんでした。
ですから、「 https://github.com/yhira/cocoon/archive/master.zip 」にアップデートして不具合が解消されるかは当方では確認できそうにありません。
ただ動くことを確認するだけでしたら、確認できそうです。アップデートしたところCocoonバージョン: 1.5.4になりました。一つの記事に二つブログカードを設定すると表示がおかしくなるようです。Cocoonバージョン: 1.5.3.2へ戻すと解消しました。このまま書くと長くなりそうですので、一旦区切ります。
トピックスターター 2019年1月15日 22:43
移行作業をしているサイトは今は非公開なので、不具合が直接お見せできません。代わりに出力されたコードを示します。
オリジナルのソース
ブログカード1つ目
[ https://wp-cocoon.com/ ]
ブログカード2つ目
[ https://wp-cocoon.com/ ]
Cocoonバージョン: 1.5.3.2
<p>ブログカード1つ目</p>
<a href="https://wp-cocoon.com/" title="Cocoon" class="blogcard-wrap external-blogcard-wrap a-wrap cf" target="_blank"></a>
<p>ブログカード2つ目</p>
<a href="https://wp-cocoon.com/" title="Cocoon" class="blogcard-wrap external-blogcard-wrap a-wrap cf" target="_blank"></a>
Cocoonバージョン: 1.5.4
トピックスターター 2019年1月15日 22:45
このコミュニティにブログカードコードを書くと、反映されてしまうのですね。表示が乱れまして申し訳ございません。伝わると良いのですが。
2019年1月15日 23:18
上記の例では https://wp-cocoon.com/ の前にスペースが入ってますが、
なんかこのフォーラムの仕様みたいですね。
実際、cocoon-user1206さんが書かれたショートコードにもスペースが入っています。
実際使う場合は、半角スペースなしにしてください。
ただ久しぶりに使用してみると、pタグ内にブログカードが出現した場合、ブラウザによって勝手にタグが挿入されるようになっていたので、その部分を修正しておきました。
これに関しては単なる報告なので動作確認する必要はないです。旧バージョンの場合は上記のような不具合が出るので、新しいファイルを試してくださいという意味で書きました。
原因は不明ですが、開発版は出力されるHTMLコードがおかしいようです。タグの囲み制御に問題がありそうです。
これの症状が以下です。
pタグ内にブログカードが出現した場合、ブラウザによって勝手にタグが挿入されるようになっていたので、
コードに不備があったので修正しておきました。
https://github.com/yhira/cocoon/archive/master.zip
トピックスターター 2019年1月15日 23:23
わりひら様へ
オリジナルのソース
ブログカード1つ目
[ https://wp-cocoon.com/]
ブログカード2つ目
[ https://wp-cocoon.com/]
Cocoonバージョン: 1.5.4にてブログカードが出力するコードは以下のURLにあります。出力するURLは私が改行とインデントして整理しています。
https://notepad.pw/share/h2gfy0zey
期待するのは2つ（ブログカード1つ目、2つ目）とも同じ表示ですが、出力されたコードは同じでなく、表示も異なります。
Cocoonバージョン: 1.5.3.2では表示は同じになりました。今回の改良で新たな問題が起きているようです。
何卒ご確認をよろしくお願い致します。
2019年1月15日 23:27
同時期に書き込んだようですけど、1つ上の僕の書き込みのファイルは試してみられましたか？
トピックスターター 2019年1月15日 23:28
わいひら様へ
入れ違いでした。私の投稿2019年1月15日 23:23はわいひら様の返事を読む前での状況を改めて報告した物です。
ご了承ください。
今日は出来ないのですが、修正後のコードを使用して確認してみます。
ありがとうございました。
2019年1月15日 23:30
入れ違いでした。私の投稿2019年1月15日 23:23はわいひら様の返事を読む前での状況を改めて報告した物です。
このフォーラムは、書き込みが活発に行われているので、結構あることなので大丈夫です。そうじゃないかなと思って直近の返信を書きました。
僕もよくやります。
トピックスターター 2019年1月15日 23:34
わいひら様へ
そうですね。書くのに時間がかかっていると、起きてしまいがちですね(^^;)
明日以降になりますが、確認させたいただきます。
感謝致します。
トピックスターター 2019年1月16日 13:54
わいひら様へ
更新されたファイル「 https://github.com/yhira/cocoon/archive/master.zip 」を適用したところ、バージョン: 1.5.4でした。昨晩確認した表示の乱れはないようです。しかし、出力されるソースは理想的ではなさそうです。それを指摘させて頂きます。
ブログカード部分を含む記事のHTMLソースを以下のURLに示します。
https://notepad.pw/share/1iu8mcf15
以下URLは私が改行とインデントを加えて体裁を整えたものです。
https://notepad.pw/share/jv09dcoj
気づいた点１
を閉じる
場所が、2つ目のブログカードの始まり「[」の直前になっている。ブログカードが複数あり、ブログカードと次のブログカードの間に文章がある場合、その文章を包括して閉じてしまっています。</div>は最初に登場する「]」の場所になるのが理想だと思います。
気づいた点２
ブログカードの範囲を示すと思われる
～
が、ブログカードが2つあるのに、2つ目は登場しません。
気づいた点３
勝手に挿入されるとされる<p></p>について。
現状
ブログカード1つ目
<p>
</p>
理想
<p>ブログカード1つ目</p>
WordPressのコードエディター上では
ブログカード1つ目
ブログカード2つ目
で、<p></p>で括ってませんが、WPが自動で挿入してしまうのでしょうね。肝心のブログカードを示す行の前後には<p></p>は挿入されてないように、私は見えますが、Cocoon側で処理した結果を見ているので、処理前は挿入されているのでしょうね。
ここまできてやっと気づいたのですが、邪魔な<p></p>を削除しようとして、対象ではないブログカードの上の<p>ブログカード1つ目</p>のタグを取ってしまっているようです。
それから本来削除するはずのブログカードを囲んでいた<p></p>が残ってしまい、ブログカードの出力コードがその下に出力されているようです。
ボタンの掛け違いのように、ズレてしまっているようです。
気づいた点４
Coccon設定→ブログカードで内部も外部も「ブログカード表示を有効にする 」チェックボックスをオフにしたところ、[ https://wp-cocoon.com/ ]はブログカード表示のままでした。[ https://yahoo.co.jp ]を追加したところ、やはり[ https://wp-cocoon.com/ ]はブログカード表示のままでしたが、追加した[ https://yahoo.co.jp ]はブログカードではなくなりました。[ https://wp-cocoon.com/ ]は特別な扱いをしているのでしょうか？
ともかく
は、ブログカードオフ状態で<p></p>が挿入されるのは確認しました。
<p>[ https://yahoo.co.jp ]</p>
この制御のおかげで、ブログカードの取り扱いがややこしくなっているようですね。
私の認識違いで、間違った指摘をしている可能性もあります。その場合はご容赦ください。何卒、よろしくお願いいたします。
以上になります。
トピックスターター 2019年1月16日 14:06
※体裁を整えての再投稿です。
わいひら様へ
更新されたファイル「 https://github.com/yhira/cocoon/archive/master.zip」を適用したところ、バージョン: 1.5.4でした。昨晩確認した表示の乱れはないようです。しかし、出力されるソースは理想的ではなさそうです。それを指摘させて頂きます。
ブログカード部分を含む記事のHTMLソースを以下のURLに示します。
https://notepad.pw/share/1iu8mcf15
以下URLは私が改行とインデントを加えて体裁を整えたものです。
https://notepad.pw/share/jv09dcoj
気づいた点１
を閉じる
場所が、2つ目のブログカードの始まり「[」の直前になっている。ブログカードが複数あり、ブログカードと次のブログカードの間に文章がある場合、その文章を包括して閉じてしまっています。
</div>
は最初に登場する「]」の場所になるのが理想だと思います。
気づいた点２
ブログカードの範囲を示すと思われる
～
が、ブログカードが2つあるのに、2つ目は登場しません。
気づいた点３
勝手に挿入されるとされる
<p></p>
について。
現状
ブログカード1つ目
<p>
</p>
理想
<p>ブログカード1つ目</p>
WordPressのコードエディター上では
ブログカード1つ目
ブログカード2つ目
で、<p></p>で括ってませんが、WPが自動で挿入してしまうのでしょうね。肝心のブログカードを示す行の前後には<p></p>は挿入されてないように、私は見えますが、Cocoon側で処理した結果を見ているので、処理前は挿入されているのでしょうね。
ここまできてやっと気づいたのですが、邪魔な<p></p>を削除しようとして、対象ではないブログカードの上の<p>ブログカード1つ目</p>のタグを取ってしまっているようです。
それから本来削除するはずのブログカードを囲んでいた<p></p>が残ってしまい、ブログカードの出力コードがその下に出力されているようです。
ボタンの掛け違いのように、ズレてしまっているようです。
気づいた点４
Coccon設定→ブログカードで内部も外部も「ブログカード表示を有効にする 」チェックボックスをオフにしたところ、
はブログカード表示のままでした。
を追加したところ、やはり
はブログカード表示のままでしたが、追加した
はブログカードではなくなりました。
は特別な扱いをしているのでしょうか？
ともかく
は、ブログカードオフ状態で<p></p>が挿入されるのは確認しました。
<p>[ https://yahoo.co.jp ]</p>
この制御のおかげで、ブログカードの取り扱いがややこしくなっているようですね。
私の認識違いで、間違った指摘をしている可能性もあります。その場合はご容赦ください。何卒、よろしくお願いいたします。
以上になります。
トピックスターター 2019年1月16日 14:14
わいひら様へ
投稿が意図通りにできませんでしたので、以下URLでシェアーさせて頂きます。
https://notepad.pw/share/41d4j7jz3
投稿は削除しない方針のようですが、この画面が随分乱れてしまいましたので、2019年1月16日 13:54 と2019年1月16日 14:06の投稿の削除についてご検討をよろしくお願い致します。お手数をおかけして申し訳ありません。
2019年1月16日 17:10
このトピックは、クリックもできないくらい表示崩れがひどいので、2019年1月16日13:54以降のものを、新たにトピックを立てて貼り付けていただけると助かります。
後半はそのようになっているのですが、一応、なるべくHTMLを貼り付ける場合は、notepad.pwを利用してください。
また、バージョンは公開時にしか変わらないので、公開前の開発時のものは、細かなバージョン管理はされていません。
トピックスターター 2019年1月16日 19:55
わいひら様へ
分かりました。本日更新分は「ブログカードのHTML出力処理について」というタイトルで投稿しなおします。
よろしくお願いいたします。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。
タイトルとURLをコピーしました