サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2020年3月11日 09:25
わいひらさん、Cocoonフォーラムの皆さんお世話になっております。
本日はウィジェットに<div>を書き込んで、囲わずに保存する方法を知りたく投稿させていただきました。
お忙しいかと思いますが、お力添えいただけると嬉しいです。
【実装したいサイト】
https://black-magic-palace.com/
【やりたいこと】
最初のh2タグ上（ウィジェットで言うところの「投稿本文中」）から、投稿の終わり（ウィジェットで言うところの投稿本文下）までを特定の<div>タグで囲いたいです。
１記事のみならエディターで直接<div class="★"></div>とスタイルを適用したい部分だけ囲めば良いのですが、複数記事あるので、ウィジェットで解決したいと思っています。
【発生している問題】
投稿本文中に設置するウィジェットにこのように（ https://gyazo.com/a8904a1e7f766b1268ec8ab6acec1916 ）記述し、投稿本文下に設置するウィジェットでこのように（ https://gyazo.com/cc71e4bc7a49695877f0d6a12b978b7e ）記述したいのですが、ご覧の通り終わりのタグがないのでエラーとなり保存できません。
テキストウィジェットなら保存できるのですが、保存後に勝手に終わりのタグ</div>で囲われてしまいます。
最初のh2タグ上から投稿本文下までを特定の<div>タグで複数記事を一括で囲うには、どうすれば良いでしょうか？
2020年3月11日 12:25
すみません、スマホだとフォーラムのエディタのボタンが一切機能しなくて読みにくくなってしまいます…。お許しください。
2020年3月11日 20:09
最初のh2タグ上（ウィジェットで言うところの「投稿本文中」）から、投稿の終わり（ウィジェットで言うところの投稿本文下）までを特定の<div>タグで囲いたいです。
とのことですが、やりたいことは「一部の記事の最初のh2タグ上から投稿本文下までのデザインを変えたい」ということでしょうか？
わいひら reacted
トピックスターター 2020年3月11日 21:23
@mirumiさんこんばんは
お見知りおきをいただいていたようで、大変光栄です^^
@mirumiさんのサイトも拝見し、是非勉強させていただきます！
また、とても詳しい回答をしていただき感謝いたします。
後ほど、早速サイトに実装してみようかと思います！
お時間を割いての（しかもわざわざスマホからのご回答）、本当に感謝します。
ありがとうございます。
トピックスターター 2020年3月11日 21:23
すみません、スマホだとフォーラムのエディタのボタンが一切機能しなくて読みにくくなってしまいます…。お許しください。
とんでもないです。
充分に分かりやすい説明で助かります。
トピックスターター 2020年3月11日 21:25
とのことですが、やりたいことは「一部の記事の最初のh2タグ上から投稿本文下までのデザインを変えたい」ということでしょうか？
さる子さんこんばんは。
おっしゃるとおりです。
記事内の最初のh2タグ～記事下までのみのデザインを変更したいと思い、ご質問させていただきました。
もしも、@mirumiさんが回答してくれた方法とは別の方法があるのであれば、そちらも試してみたいのでご教授いただけると嬉しいです。
2020年3月11日 23:01
基本的に、このカスタマイズを応用すれば、いけるかと思います。
https://nelog.jp/adsense-insert-body
広告記入部分に、開始タグを入力し、$the_contentの後に閉じタグを付ければできるかと。
トピックスターター 2020年3月11日 23:04
@mirumiさんこんばんは。
先程教えていただいたものをテストサイトにて試してみたのですが、サイトの表示が崩れ、このように「サイトに重大なエラーがありました。」と表示されてしまいました。
何かしら不備があるのでしょうか・・・？
もしお時間あれば、再度お力添えいただけると嬉しいです。
2020年3月11日 23:36
すみません…！
「/」が抜けてました。
PHPコードを以下に変更ください。
add_filter('widget_text', 'do_shortcode' );
function div_start() {
require_once $_SERVER['DOCUMENT_ROOT']."/wp-content/themes/cocoon-child-master/div_start.php";
}
add_shortcode('sc_div_start','div_start');
function div_end() {
require_once $_SERVER['DOCUMENT_ROOT']."/wp-content/themes/cocoon-child-master/div_end.php";
}
add_shortcode('sc_div_end','div_end');
これで実際に僕の環境でも試してみましたが、以下のように成功しました。
また、テキストウィジェットじゃなくて「カスタムHTML」でもOKです。
この投稿は5年前 3回ずつみるみに変更されました
わいひら reacted
トピックスターター 2020年3月12日 13:16
@yhiraさんこんにちは。
ご回答、ありがとうございます！
無事に実装完了しました。
開始タグさえ広告部分に入力すれば、終了タグは記入せずとも実装可能でした。
大変助かりました。
ありがとうございます。
トピックスターター 2020年3月12日 13:17
@mirumiさんこんにちは。
お忙しい中、度重なるご回答に感謝します。
/についてのご確認、修正ありがとうございます。
こちらも早速試させていただきます！
2020年3月12日 14:04
こちらも早速試させていただきます！
いえ、わいひらさんの案で既に成功されている様ですし、こんな方法は無視してくださって結構です。笑
こちらこそちゃんと試していただきありがとうございました。
2020年3月12日 20:37
解決されたようですが、記事IDを使って記事単位でCSSを指定する方法もあるので書いておきます。
.postid-362 .article h2 {
background-color: #000;
}
.postid-362の362の部分に記事ID、
.article h2の部分が変更したいCSSのセレクタ、
background-color: #000;の部分は変更したい内容のCSS。
このように記述すれば指定したIDの記事だけCSSを変更できます。
記事IDは管理画面の記事一覧から見れます（画像参照）
IDが表示されていない場合は、「表示オプション」の中の「ID」にチェックを入れてください。
この方法ならPHPいじらないので手軽かなと思ったのですが、変更したい記事数が多いと指定するセレクタの数が大変なことになりますかね…？
2020年3月12日 20:39
こちらのブログを参考にさせていただきました。
クラスの指定法 – WordPressでCSSを特定の記事だけ、ページだけに反映したい場合 | ネットビジネスで自由に生きる！会社を辞めて海外にいながらブログで稼ぐJINのサイト
2020年3月12日 20:48
さる子さん、今回前川さんは「h2タグにスタイルを当てたい」わけではなく「一番最初に現れたh2タグから記事末尾までにクラスを当てたい」という要望だと思います。
掲載されたCSSはたしかに特定の記事のh2に反応しますが、全てのh2自体にCSSが適用されるだけのものとなってしまい、要望とは少し合わないかと思いました。ややこしいカスタマイズを言った自分が言うのもなんですが、どうぞご参考までに。
2020年3月12日 23:00
開始タグさえ広告部分に入力すれば、終了タグは記入せずとも実装可能でした。
えっ、それで開始タグと終了タグの数が合います？
まー、表示上の問題がないのであれば、それで良いのかもしれませんが。
トピックスターター 2020年3月12日 23:04
広告記入部分に、開始タグを入力し、$the_contentの後に閉じタグを付ければできるかと。
開始タグさえ広告部分に入力すれば、終了タグは記入せずとも実装可能でした。
@yhiraさんこんばんは。
こちら、終了タグをいれなくても大丈夫かと思っていたのですが、終了タグをきちんと入れないと別のところに問題が生じていました。
「$the_contentの後に閉じタグを付ければできるかと。」
とあるので、入れようと思ったのですが、$the_contentが複数あってどこかわかりませんでした 汗
すみません・・・。
もう少し詳細に教えていただくことは可能ですか？
トピックスターター 2020年3月12日 23:07
えっ、それで開始タグと終了タグの数が合います？
まー、表示上の問題がないのであれば、それで良いのかもしれませんが。
投稿が行き違いになってしまいました。すみません。
いえ、開始タグと終了タグの数は合いません！
合わないものの、きちんと表示は行えています。
ただ、さきの投稿でも書いたとおり、それが原因なのかわかりませんが、それをしてしまうと同時に実装しようとしていた別のカスタマイズ部分に不具合が生じてしまっています。
いまはみるみさんに教えていただいた方法で実装しているのですが、わいひらさんの方法でのやり方も今後のカスタマイズのときのために教えていただきたいです。
トピックスターター 2020年3月12日 23:10
@mirumiさんこんばんは。
ご丁寧にお返事、ありがとうございます！
ご報告がおそくなりましたが、@mirumiさんに教えていただいた方法を試してみたところ、バッチリうまくいきました！
ありがとうございます！
わいひらさんの方法のやり方も一見うまくいったように見えたのですが、終了タグを追加せずに僕がやったものですから、別のカスタマイズを追加したらうまくいかなくなってしまいました（笑）
終了タグを入れる場所がわからず、現在追加で質問させていただいているところです。
@mirumiさん、今回はとても助かりました。
ありがとうございました！
みるみ reacted
トピックスターター 2020年3月12日 23:19
@sarukoさんこんばんは。
知恵を貸していただき、ありがとうございました。
記事単位のものなら自分でもできるんですが、記事内の特定の範囲というのが難しく質問させていただいた次第です。
ただ、お時間を使って回答してくれたことが非常に嬉しかったです。
ありがとうございます^^
今後もお力添えをいただく機会があるかもしれません。
その際は、どうぞよろしくおねがいします。
2020年3月12日 23:51
もう少し詳細に教えていただくことは可能ですか？
スッキリと書くなら、以下をfunctions.phpに追記する感じかも。
https://gist.github.com/yhira/ab3d9680ad6413c3c43319c890271fa1
ただし、ちゃんとした動作確認はしていないので、利用は自己責任でお願いいたします。
2020年3月12日 23:51
こんな感じでdiv要素でラップされます。
2020年3月13日 17:08
ややこしい書き方をしてしまいすみません…！
最初のh2タグ上（ウィジェットで言うところの「投稿本文中」）から、投稿の終わり（ウィジェットで言うところの投稿本文下）までを特定の<div>タグで囲いたい
もし記事タイトル～h2にタグ直前まで影響がないCSSを追加するだけなら、.postid-(記事ID)の指定でも使えるかなと思ったのですが、言葉足らずでしたね…。
どういったカスタマイズがしたいのか分からなかったため、仮でh2を使ったのですがややこしくなってしまいました。
記事単位のものなら自分でもできるんですが、記事内の特定の範囲というのが難しく
すでにこの方法は試されたようで、お力になれず申し訳ないです。
わいひら reacted
トピックスターター 2020年3月20日 13:02
@yhiraさんっ
詳しい具体的なコードまで教えていただき、大変助かります。
ありがとうございます！
また、メッセージのご確認が送れてしまい、大変申し訳無いです。
先程実際に実装してみたところバッチリ動作しました！
ありがとうございます！
@mirumiさんのほうほうと両方試しましたので、同じようなことをしたい方のために実装した場合の挙動の違いを書いておきます。
【@mirumiさんのやり方】
@mirumiさんに教えてもらったやり方では、記事下に別のウィジェットを配置していた場合、そのウィジェットも含めてCSSが適用されました。
【@yhiraさんのやり方】
@yhiraさんに教えてもらったやり方では、記事下に別のウィジェットを配置していても、そのウィジェットにはCSSが適用されませんでした。
結果的に異なる挙動となり、用途に合わせて使い分けられそうなので２パターンを教えていただき助かりました、
@yhiraさん、@mirumiさん、@sarukoさん、お時間を使って回答いただいて、ありがとうございました！
トピックスターター 2020年3月20日 14:47
@mirumiさんに教えてもらったやり方では、記事下に別のウィジェットを配置していた場合、そのウィジェットも含めてCSSが適用されました。
すみません。誤りです。
ウィジェット位置誤りなだけでした。
みるみ reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。