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

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

ご教授ください)ウイジェットにカスタム...
 
共有:
通知
すべてクリア

[解決済] ご教授ください)ウイジェットにカスタムHTMLを使うのはどうすればよいですか?  

17 投稿
4 ユーザー
8 Reactions
248 表示
(@o-nakamura)
Trusted Member Registered
結合: 2年前
投稿: 40
トピックスターター  

カスタムHTMLの内容に以下のHTML文を書き込みましたが、内容は表示されず、HTML文そのものが表示されました。基本的な使い方が理解できていないので、根本的条件が抜けているのだと思っています。その辺をご教授ください。
宜しくお願いします。
<h3>電話、メールアドレス</h3> <img src="https://handycab.org/wp-content/uploads/2024/10/連絡先バナー2-1.png" alt="電話番号、メールアドレス" width="159" height="242" />

なお、>や<等の「特使文字」< https://tech-unlimited.com/escape.html >提供のツールを利用してエスケープしております。


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

O.Nakamuraさん

ご提示のものを、投稿編集画面で、「カスタムHTML」ブロックに貼り付けました。

 
その投稿ページを表示させたものです。
 
フォーラム上部の案内にもあると思うのですけれど。
実際の状態を確認させていただかないと分からないと思うのですけれど・・・。
 
なかなか皆さん、フォーラムマナー・ルールを守っていただけなくて。
こういうやりとりが増えてしまうんですよね。
 
フォーラム上部の案内にありますように、「不具合・カスタマイズ対象ページのURLを提示」願います。
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります
 
 
もしかすると、この辺で何かして、ご提示のものとは違うものを貼り付けなさっているのでしょうか。
(それも実際のものを確認させていただかないと、第三者には分からないですよ・・・)
投稿者:: @o-nakamura

なお、>や<等の「特使文字」< https://tech-unlimited.com/escape.html >提供のツールを利用してエスケープしております。

 

なぜ「カスタムHTML」なのか・・・もありますね。
もしかすると、サイドバー等のウィジェットエリアなのかも?

その場合は、見出しは「ウィジェットタイトル」にすれば良いのでは?
画像は、投稿編集画面に一回貼りつけて、そのHTMLを丸ごとコピーすれば良いだけなのでは?

 

正しく状況を伝えることも大事なのではないかと。
こちらからは状況は見えませんし、伝わらなければ正しい回答も得られず、結果的に1番お困りになるのはご質問者ご本人なのではないかと。
(こちらとしては、本来必要ないやりとりが増え、時間が・・・。推測だらけでお答えするのもあまり好ましいことではないですし)


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

ああ、件名に「ウィジェット」と書いてあるんですね・・・。
(本文にも書いて欲しいです、大事なことだと思うのですけれど。)

ご提示のものを「カスタムHTML」ウィジェットに貼り付けました。
但し、見出しについてはウィジェットタイトルに貼り付けました。

 
サイドバーのウィジェットエリアに入れた時の表示です。

   
わいひら reacted
返信引用
(@o-nakamura)
Trusted Member Registered
結合: 2年前
投稿: 40
トピックスターター  

 mk2  様 ウイジェットのカスタムHTMLの件、早々のご教授ありがとうございます。昨日は、投稿後に遅くまで外出する羽目になり、返礼が遅れてしまい、失礼しました。
まず、「不具合・カスタマイズ対象ページのURLを提示」の件、申し訳ありません。今回は、不具合というよりは私の知識不足の点をご教授頂ければと思いましたので、欠落させてしまいました。今後は改めて注意するようにします。改めてサイトURLは下記です。
  https://handycab.org/

ご教授頂きました内容の件、私も同じく、提示HTML文を投稿ページに貼付けて正常表示を確認しまています。
しかし、サイドバーに「カスタムHTML」ウイジェットに同じHTML文を貼り付けた場合は、mk2  様ご提示頂いたようにはならず、HTML文そのものが表示されました。

mk2  様が正常表示されていることを確認頂きましたので、私も再度試みてみます。少し、時間を要しそうなので、中途半端ですが、ここでいったん送信させて頂きます。
ありがとうございました。       

             


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

O.Nakamuraさん

先にお示ししたのは、投稿編集画面でしたけれど、以下のようにすれば表示されるということなのではないかと思うのですが、いかがでしょうか?
(既に、私は例示しているかと思うのですけれど)

投稿者:: @mk2_mk2

した。

 


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

O.Nakamuraさん

O.Nakamuraさんのサイトの該当部分のHTMLソースです。
(赤線部分)

 
 
これを、私の環境で再現させます。
 
青枠・青矢印部分が、私が入力したもの。
赤枠・赤矢印部分が、O.Nakamuraさんの環境の再現。
です。
 
その結果は、以下です。
 
該当部分のHTMLソースです。
 
 
2枚目のウィジェットに入力したものをご覧いただくのが、分かり易いと思います。
(クリックして、拡大した方が見易いかと思います)

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

結局のところ、先にお示ししたようにすれば良さそうに思うのですけれど。

投稿者:: @mk2_mk2

ご提示のものを「カスタムHTML」ウィジェットに貼り付けました。
但し、見出しについてはウィジェットタイトルに貼り付けました。

 
サイドバーのウィジェットエリアに入れた時の表示です。


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

投稿者:: @o-nakamura

提供のツールを利用してエスケープしております。

補足しておきます。

●原因

エスケープした結果を、カスタムHTMLに貼り付けてませんか?
エスケープするとHTMLタグが文字(& → &amp;)として扱われるようになります(現象の通り)。


●対策

エスケープせず、そのままHTMLタグをカスタムHTMLに貼り付けます。


   
わいひら reacted
返信引用
(@o-nakamura)
Trusted Member Registered
結合: 2年前
投稿: 40
トピックスターター  

chu-ya 様 mk2 ご教授ありがとうございました。

  https://handycab.org/  サイトで「サイドバーがカスタムHTMLウィジェット」が上手く使えない件、
chu-ya 様ご指摘通り、 エスケープした結果を、カスタムHTMLに貼り付けてました。この場合、当然にHTML文がそのまま表示されるのですね。お恥ずかしいことですが、知らなかったのです。

ただ、カスタムHTMLウィジェットにHTML文を入力しようとすると、<、>等の特殊文字はエスケープしないとエラーになっていたのです。
後で気付いたのですが、サイトヘルスに致命的問題としてCocoon親テーマ必要とのメッセージが出ていたので、最新版に更新しました。
多分その結果と思われるのですが、その後は、カスタムHTMLに通常のHTML文が書けるようになりました。それで、概ね希望の形になりました。
お騒がせしましたが、幾つものご教授を頂きましたこと、深く感謝申し上げます。
ありがとうございました。


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

O.Nakamuraさん

とりあえず、解決して良かったですけれど。

できれば、返信を良く読んでいただきたいな・・・と。

投稿者:: @mk2_mk2

もしかすると、この辺で何かして、ご提示のものとは違うものを貼り付けなさっているのでしょうか。
(それも実際のものを確認させていただかないと、第三者には分からないですよ・・・)
投稿者:: @o-nakamura

 

なお、>や<等の「特使文字」< https://tech-unlimited.com/escape.html >提供のツールを利用してエスケープしております。

 

画像は、クリックすれば拡大できますので、見づらい場合は拡大していただければと。

投稿者:: @mk2_mk2

これを、私の環境で再現させます。
 
青枠・青矢印部分が、私が入力したもの。
赤枠・赤矢印部分が、O.Nakamuraさんの環境の再現。
です。

 

以下の返信の段階でも、ご自分の入力と比較すれば、違うことが分かるはずなのですけれど。

投稿者:: @mk2_mk2

ご提示のものを「カスタムHTML」ウィジェットに貼り付けました。
但し、見出しについてはウィジェットタイトルに貼り付けました。

 

 

リンクいただいた、以下にも書いてあります。

投稿者:: @o-nakamura

なお、>や<等の「特使文字」< https://tech-unlimited.com/escape.html >提供のツールを利用してエスケープしております。

 
 

熟読する。
ご自分のなさっていることと比較する。

大事だと思います。


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

投稿者:: @o-nakamura

ただ、カスタムHTMLウィジェットにHTML文を入力しようとすると、<、>等の特殊文字はエスケープしないとエラーになっていたのです。

これは、おそらく別の何かでエラーになっていたのではないか・・・と。

実際の状況が分かりませんので、確かなことは言えないのですけれど。

 エスケープしなければエラーになるということはないと思います。
文字を入力する分には、保存できると思います。

投稿者:: @o-nakamura

後で気付いたのですが、サイトヘルスに致命的問題としてCocoon親テーマ必要とのメッセージが出ていたので、最新版に更新しました。

特に最新版でなくとも、ウィジェットの保存には影響はないと思います。
ちょっと何が起こっていたかは、分からないですね。
(別件で何かがあったのだとは思いますが、正確なメッセージなどがないと分からないです。何かあった場合はキャプチャ(スクリーンショット)しておくことをお勧めします)

 

お返事いただきましたので、本トピックは「解決済」とさせていただきます。
(クローズもしてしまいます)


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

投稿者:: @o-nakamura

ただ、カスタムHTMLウィジェットにHTML文を入力しようとすると、<、>等の特殊文字はエスケープしないとエラーになっていたのです。

サイトのサーバーを見たら、さくらインターネットとなっていました。
だとしたら、WAFの設定が原因の可能性もあるかもしれません。
これを無効にしてウィジェットに書き込むと、うまくいくのかもしれません。※正常にポストできたら、元に戻しておいた方がいいかと思います。

WAF(ウェブアプリケーションファイアウォール) - レンタルサーバーはさくらインターネット
https://rs.sakura.ad.jp/function/waf/
Webアプリケーションファイアウォール(WAF)を設定したい | さくらのサポート情報
https://help.sakura.ad.jp/rs/2233/

ただ詳しいことは書かれていないので、確かかどうかは分かりません。

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

   
返信引用
(@o-nakamura)
Trusted Member Registered
結合: 2年前
投稿: 40
トピックスターター  

わいひら様  大幅に遅れましたが、状況を返信いたします。

ご指摘の「WAF」は現状では有効化していません(正確には理解不十分な点がありできていない、ということですが)。
ただ、カスタムHTMLウイジェットの正常復帰前の対処として、前報まではCocoon親テーマの最新化しか書かなかったのですが、実はテーマ最新化後に、Cocoon設定において「高速化を無効化」「キャッシュを無効化」を処置しました。この辺が効果あったのでしょうか?
取り敢えず、現状は正常に表示されています。ご参考までに、カスタムHTML文とその表示結果のスクリーンキャプチャ画像を貼り付けたWordファイルを添付します。
一言追加すれば、ウイジェットの中でもHTML文の自動編集機能が使えますね。オレンジ色でマーキングされているのは、その結果です。  
 

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

こちらも、添付の画像を貼り付けさせていただきます。
(私はそれだけにしておきます)

【現状のカスタムHTMLウイジェット内容(サイドバーに設定)】

 
【カスタムHTMLの表示結果】

   
わいひら reacted
返信引用
(@o-nakamura)
Trusted Member Registered
結合: 2年前
投稿: 40
トピックスターター  

@mk2_mk2 様 度々ありがとうございます。
別件で教えて頂きましたことを反映し、「解決済」ボタンをクリックし、「未解決」ボタンを表示させておきます。
分からないことだらけですが、今後とも宜しくお願いします。


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

投稿者:: @o-nakamura

Cocoon親テーマの最新化しか書かなかったのですが、実はテーマ最新化後に、Cocoon設定において「高速化を無効化」「キャッシュを無効化」を処置しました。この辺が効果あったのでしょうか?

高速化やキャッシュが有効化されていたからと言って、そういった動作になったという報告は今のところなかったかと思います。自分の環境でもそのようになったことはないです。ウィジェットのような管理画面は高速化もキャッシュもされないので。

詳しくはどういったエラー(メッセージ)が出たか分からないとちょっと何とも言えないかもしれません。WAFはあくまで可能性の一つとして、挙げました。


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

O.Nakamuraさん

老婆心?で、書かせていただきます。

投稿者:: @o-nakamura

ご指摘の「WAF」は現状では有効化していません(正確には理解不十分な点がありできていない、ということですが)。

WAFは、有効化することを、強くお勧めします。
セキュリティ機能ですし、ご自分のサイトを守るためでもあります。

WAFが過剰反応して、管理画面内で保存ができないということも、起こることもあり、不便なこともありますけれど。
(それもある意味守られていると考えることはできるかと)

 

ご自分のサイトが、乗っ取られたり、勝手に管理者権限のユーザーを追加されたり、マルウェアを植え付けられたり、改ざんされたり。
そんなことは、そうそうあることではないというお考えもあるかもしれません。

しかし、このフォーラムでやりとりしていると、年数件レベルでそういうものを見掛けるんですよね。

今年も既に数件見ているはず・・・記憶では最低2件はあったような。
1件はプラグインの脆弱性を利用されて管理者権限のユーザーが追加されていました。
(こういうものはWAFでは防げないと思いますが)

 

ご参考に、さくらインターネットのWAFに関するページをリンクしておきます。

WAF(ウェブアプリケーションファイアウォール)
https://rs.sakura.ad.jp/function/waf/

Webアプリケーションファイアウォール(WAF)を設定したい
https://help.sakura.ad.jp/rs/2233/


   
わいひら reacted
返信引用
共有:

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

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

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

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

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

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

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

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