現在デフォルトスキンとして「Season (Autumn)」を適用中。

ブログカードの明示化について | Cocoonテーマに関する質問 | Cocoon フォーラム

書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示してください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法 
  7. ブラウザ環境チェックツール

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

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

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

フォーラムのTwitterアカウント(@CocoonForum)はこちら

スポンサーリンク
Share:

ブログカードの明示化について  


cocoon-user1206
(@cocoon-user1206)
Eminent Member
参加: 9か月 前
投稿: 37
2019年1月13日 23:42  

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

はじめに

今回の話は、私のわがままだと思います。そういうユーザーもいるという程度で受け止めていただけますと幸いです。

前提について

他のテーマからCocoonへ移行をしています。以前のテーマにはブログカード機能はありませんでした。そこでプラグイン「Pz-LinkCard」を使っていました。そのプラグインは以下のようなコードを挿入することで、ブログカードのURLであると明示的に区別していました。

Pz-LinkCardでは

[blogcard url="https://www.yahoo.co.jp/"]

Cocoonでは

https://www.yahoo.co.jp/

もしくは

<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入力フォームが表示されて、挿入時にコードが付与されるという仕様です。

おわりに

いずれにせよ、移行には確認作業は必要ですので、記事ごとに修正していく予定です。利用者にとって明示化するメリットが大きくなりましたら、議論していただけますと嬉しく思います。


引用
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 6382
わいひら - Facebookわいひら - Twitter
2019年1月14日 20:33  

Cocoonでは以前からブログカード用の以下のようなショートコードあります(正確にはWordPressのショートコード機能は利用しないけど)。

[ https://wp-cocoon.com/]

これだと意図したことができるのではないかと思います。

ただ久しぶりに使用してみると、pタグ内にブログカードが出現した場合、ブラウザによって勝手にタグが挿入されるようになっていたので、その部分を修正しておきました。
https://github.com/yhira/cocoon/archive/master.zip
上記ファイルでアップデートの上試してみてください。


返信引用
cocoon-user1206
(@cocoon-user1206)
Eminent Member
参加: 9か月 前
投稿: 37
2019年1月15日 22:08  

わいひら様

ご回答いただきありがとうございます。

1.明示化について

Cocoonでは以前からブログカード用の以下のようなショートコードあります(正確にはWordPressのショートコード機能は利用しないけど)。

[ https://wp-cocoon.com/]

これだと意図したことができるのではないかと思います。

上記の例では https://wp-cocoon.com/ の前にスペースが入ってますが、不要なんですよね?Cocoonバージョン: 1.5.3.2でテストしたところ、スペースが入ってると期待の動きになりませんでした。スペースを取ったところ動きました。

これで私の意図した事が出来ると思います。

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へ戻すと解消しました。このまま書くと長くなりそうですので、一旦区切ります。

This post was modified 8か月 前 by わいひら

返信引用
cocoon-user1206
(@cocoon-user1206)
Eminent Member
参加: 9か月 前
投稿: 37
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">
Cocoon
SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100%GPLテーマです。
</a>
<p>ブログカード2つ目</p>
<a href="https://wp-cocoon.com/" title="Cocoon" class="blogcard-wrap external-blogcard-wrap a-wrap cf" target="_blank">
Cocoon
SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100%GPLテーマです。
</a>

 

Cocoonバージョン: 1.5.4


 

原因は不明ですが、開発版は出力されるHTMLコードがおかしいようです。タグの囲み制御に問題がありそうです。お手数ですがご確認をお願いいたします。


返信引用
cocoon-user1206
(@cocoon-user1206)
Eminent Member
参加: 9か月 前
投稿: 37
2019年1月15日 22:45  

このコミュニティにブログカードコードを書くと、反映されてしまうのですね。表示が乱れまして申し訳ございません。伝わると良いのですが。


返信引用
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 6382
わいひら - Facebookわいひら - Twitter
2019年1月15日 23:18  

上記の例では https://wp-cocoon.com/ の前にスペースが入ってますが、

なんかこのフォーラムの仕様みたいですね。

実際、cocoon-user1206さんが書かれたショートコードにもスペースが入っています。
実際使う場合は、半角スペースなしにしてください。

ただ久しぶりに使用してみると、pタグ内にブログカードが出現した場合、ブラウザによって勝手にタグが挿入されるようになっていたので、その部分を修正しておきました。

これに関しては単なる報告なので動作確認する必要はないです。旧バージョンの場合は上記のような不具合が出るので、新しいファイルを試してくださいという意味で書きました。

原因は不明ですが、開発版は出力されるHTMLコードがおかしいようです。タグの囲み制御に問題がありそうです。

これの症状が以下です。

pタグ内にブログカードが出現した場合、ブラウザによって勝手にタグが挿入されるようになっていたので、

コードに不備があったので修正しておきました。
https://github.com/yhira/cocoon/archive/master.zip

This post was modified 8か月 前 2 times by わいひら

返信引用
cocoon-user1206
(@cocoon-user1206)
Eminent Member
参加: 9か月 前
投稿: 37
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では表示は同じになりました。今回の改良で新たな問題が起きているようです。

何卒ご確認をよろしくお願い致します。

 


返信引用
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 6382
わいひら - Facebookわいひら - Twitter
2019年1月15日 23:27  

同時期に書き込んだようですけど、1つ上の僕の書き込みのファイルは試してみられましたか?


返信引用
cocoon-user1206
(@cocoon-user1206)
Eminent Member
参加: 9か月 前
投稿: 37
2019年1月15日 23:28  

わいひら様へ

入れ違いでした。私の投稿2019年1月15日 23:23はわいひら様の返事を読む前での状況を改めて報告した物です。

ご了承ください。

今日は出来ないのですが、修正後のコードを使用して確認してみます。

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


返信引用
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 6382
わいひら - Facebookわいひら - Twitter
2019年1月15日 23:30  

入れ違いでした。私の投稿2019年1月15日 23:23はわいひら様の返事を読む前での状況を改めて報告した物です。

このフォーラムは、書き込みが活発に行われているので、結構あることなので大丈夫です。そうじゃないかなと思って直近の返信を書きました。
僕もよくやります。

This post was modified 8か月 前 2 times by わいひら

返信引用
cocoon-user1206
(@cocoon-user1206)
Eminent Member
参加: 9か月 前
投稿: 37
2019年1月15日 23:34  

わいひら様へ

そうですね。書くのに時間がかかっていると、起きてしまいがちですね(^^;)

明日以降になりますが、確認させたいただきます。

感謝致します。


返信引用
cocoon-user1206
(@cocoon-user1206)
Eminent Member
参加: 9か月 前
投稿: 37
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

気づいた点1

を閉じる

場所が、2つ目のブログカードの始まり「[」の直前になっている。ブログカードが複数あり、ブログカードと次のブログカードの間に文章がある場合、その文章を包括して閉じてしまっています。</div>は最初に登場する「]」の場所になるのが理想だと思います。

気づいた点2

ブログカードの範囲を示すと思われる

が、ブログカードが2つあるのに、2つ目は登場しません。

気づいた点3

勝手に挿入されるとされる<p></p>について。

現状

ブログカード1つ目
<p>
</p>

理想

<p>ブログカード1つ目</p>

WordPressのコードエディター上では

ブログカード1つ目

[ https://wp-cocoon.com/]

ブログカード2つ目

[ https://wp-cocoon.com/]

で、<p></p>で括ってませんが、WPが自動で挿入してしまうのでしょうね。肝心のブログカードを示す行の前後には<p></p>は挿入されてないように、私は見えますが、Cocoon側で処理した結果を見ているので、処理前は挿入されているのでしょうね。

ここまできてやっと気づいたのですが、邪魔な<p></p>を削除しようとして、対象ではないブログカードの上の<p>ブログカード1つ目</p>のタグを取ってしまっているようです。

それから本来削除するはずのブログカードを囲んでいた<p></p>が残ってしまい、ブログカードの出力コードがその下に出力されているようです。

ボタンの掛け違いのように、ズレてしまっているようです。

 

気づいた点4

Coccon設定→ブログカードで内部も外部も「ブログカード表示を有効にする 」チェックボックスをオフにしたところ、[
Yahoo! JAPAN
日本最大級のポータルサイト。検索、オークション、ニュース、天気、スポーツ、メール、ショッピングなど多数のサービスを展開。あなたの生活をより豊かにする「課題解決エンジン」を目指していきます。
を追加したところ、やはり
Cocoonの特徴
Cocoonテーマの目玉機能をまとめました。
はブログカード表示のままでしたが、追加した
Yahoo! JAPAN
日本最大級のポータルサイト。検索、オークション、ニュース、天気、スポーツ、メール、ショッピングなど多数のサービスを展開。あなたの生活をより豊かにする「課題解決エンジン」を目指していきます。
はブログカードではなくなりました。
Cocoonの特徴
Cocoonテーマの目玉機能をまとめました。
は特別な扱いをしているのでしょうか?" target="_blank">https://wp-cocoon.com/]はブログカード表示のままでした。
Yahoo! JAPAN
日本最大級のポータルサイト。検索、オークション、ニュース、天気、スポーツ、メール、ショッピングなど多数のサービスを展開。あなたの生活をより豊かにする「課題解決エンジン」を目指していきます。
を追加したところ、やはり
Cocoonの特徴
Cocoonテーマの目玉機能をまとめました。
はブログカード表示のままでしたが、追加した
Yahoo! JAPAN
日本最大級のポータルサイト。検索、オークション、ニュース、天気、スポーツ、メール、ショッピングなど多数のサービスを展開。あなたの生活をより豊かにする「課題解決エンジン」を目指していきます。
はブログカードではなくなりました。
Cocoonの特徴
Cocoonテーマの目玉機能をまとめました。
は特別な扱いをしているのでしょうか?

 

ともかく

[ https://yahoo.co.jp]

は、ブログカードオフ状態で<p></p>が挿入されるのは確認しました。

<p>[ https://yahoo.co.jp]</p>

この制御のおかげで、ブログカードの取り扱いがややこしくなっているようですね。

 

私の認識違いで、間違った指摘をしている可能性もあります。その場合はご容赦ください。何卒、よろしくお願いいたします。

以上になります。


返信引用
cocoon-user1206
(@cocoon-user1206)
Eminent Member
参加: 9か月 前
投稿: 37
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

気づいた点1

を閉じる

場所が、2つ目のブログカードの始まり「[」の直前になっている。ブログカードが複数あり、ブログカードと次のブログカードの間に文章がある場合、その文章を包括して閉じてしまっています。

</div>

は最初に登場する「]」の場所になるのが理想だと思います。

気づいた点2

ブログカードの範囲を示すと思われる

が、ブログカードが2つあるのに、2つ目は登場しません。

気づいた点3

勝手に挿入されるとされる

<p></p>

について。

現状

ブログカード1つ目
<p>
</p>

理想

<p>ブログカード1つ目</p>

WordPressのコードエディター上では

ブログカード1つ目

[ https://wp-cocoon.com/]

ブログカード2つ目

[ https://wp-cocoon.com/]

で、<p></p>で括ってませんが、WPが自動で挿入してしまうのでしょうね。肝心のブログカードを示す行の前後には<p></p>は挿入されてないように、私は見えますが、Cocoon側で処理した結果を見ているので、処理前は挿入されているのでしょうね。

ここまできてやっと気づいたのですが、邪魔な<p></p>を削除しようとして、対象ではないブログカードの上の<p>ブログカード1つ目</p>のタグを取ってしまっているようです。

それから本来削除するはずのブログカードを囲んでいた<p></p>が残ってしまい、ブログカードの出力コードがその下に出力されているようです。

ボタンの掛け違いのように、ズレてしまっているようです。

気づいた点4

Coccon設定→ブログカードで内部も外部も「ブログカード表示を有効にする 」チェックボックスをオフにしたところ、

[ https://wp-cocoon.com/]

はブログカード表示のままでした。

[ https://yahoo.co.jp]

を追加したところ、やはり

[ https://wp-cocoon.com/]

はブログカード表示のままでしたが、追加した

[ https://yahoo.co.jp]

はブログカードではなくなりました。

[ https://wp-cocoon.com/]

は特別な扱いをしているのでしょうか?

ともかく

[ https://yahoo.co.jp]

は、ブログカードオフ状態で<p></p>が挿入されるのは確認しました。

<p>[ https://yahoo.co.jp]</p>

この制御のおかげで、ブログカードの取り扱いがややこしくなっているようですね。

私の認識違いで、間違った指摘をしている可能性もあります。その場合はご容赦ください。何卒、よろしくお願いいたします。

以上になります。


返信引用
cocoon-user1206
(@cocoon-user1206)
Eminent Member
参加: 9か月 前
投稿: 37
2019年1月16日 14:14  

わいひら様へ

投稿が意図通りにできませんでしたので、以下URLでシェアーさせて頂きます。

https://notepad.pw/share/41d4j7jz3

 

投稿は削除しない方針のようですが、この画面が随分乱れてしまいましたので、2019年1月16日 13:54 と2019年1月16日 14:06の投稿の削除についてご検討をよろしくお願い致します。お手数をおかけして申し訳ありません。


返信引用
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 6382
わいひら - Facebookわいひら - Twitter
2019年1月16日 17:10  

このトピックは、クリックもできないくらい表示崩れがひどいので、2019年1月16日13:54以降のものを、新たにトピックを立てて貼り付けていただけると助かります。
後半はそのようになっているのですが、一応、なるべくHTMLを貼り付ける場合は、notepad.pwを利用してください。
また、バージョンは公開時にしか変わらないので、公開前の開発時のものは、細かなバージョン管理はされていません。


返信引用
cocoon-user1206
(@cocoon-user1206)
Eminent Member
参加: 9か月 前
投稿: 37
2019年1月16日 19:55  

わいひら様へ

分かりました。本日更新分は「ブログカードのHTML出力処理について」というタイトルで投稿しなおします。

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


返信引用

返信する


許可された最大ファイルサイズ 3MB

 
Share:
スポンサーリンク
わいひらをフォローする
おすすめサーバ

性能も兼ね備えながら安くブログ運営を開始したいのであればここ1択。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越しオプションあり(有料)
サービス運営期間:1年1ヶ月

1年以上の契約をする場合は、クーポンコード入力でさらに10%割引(※2019/12/31まで)。

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

プラン変更で負荷対策が行えるので、ブログ向きのレンタルサーバーです。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
○サーバ引っ越しオプションあり(有料)
○サーバー料金をチャージ払いが可能
サービス運営期間:3年

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
△DBは7日分だけ無料復旧可能(ファイルは有料)
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可
サービス運営期間:16年

とにかく速い。サイトに表示スピードを求めるならココ。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DB復旧は無料(ファイルは有料)
○サーバ引っ越しツールあり
○サーバー料金をチャージ払いが可能
△新しいサービスなので運営櫪がまだ短い
サービス運営期間:11ヶ月

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
サイトを続けるうちにアクセスが増えれば、プランのアップグレートで対応可能です。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越しオプションあり(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)
サービス運営期間:3年

Cocoon
  
動作中

ログイン または 登録 してください

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