すみません、スマホだとフォーラムのエディタのボタンが一切機能しなくて読みにくくなってしまいます…。お許しください。

投稿者:: @co781228

最初のh2タグ上（ウィジェットで言うところの「投稿本文中」）から、投稿の終わり（ウィジェットで言うところの投稿本文下）までを特定の<div>タグで囲いたいです。

とのことですが、やりたいことは「一部の記事の最初のh2タグ上から投稿本文下までのデザインを変えたい」ということでしょうか？

@mirumiさんこんばんは

お見知りおきをいただいていたようで、大変光栄です^^

@mirumiさんのサイトも拝見し、是非勉強させていただきます！

また、とても詳しい回答をしていただき感謝いたします。

後ほど、早速サイトに実装してみようかと思います！

お時間を割いての（しかもわざわざスマホからのご回答）、本当に感謝します。

ありがとうございます。

投稿者:: @mirumi

すみません、スマホだとフォーラムのエディタのボタンが一切機能しなくて読みにくくなってしまいます…。お許しください。

とんでもないです。

充分に分かりやすい説明で助かります。

投稿者:: @saruko

とのことですが、やりたいことは「一部の記事の最初のh2タグ上から投稿本文下までのデザインを変えたい」ということでしょうか？

さる子さんこんばんは。

おっしゃるとおりです。

記事内の最初のh2タグ～記事下までのみのデザインを変更したいと思い、ご質問させていただきました。

もしも、@mirumiさんが回答してくれた方法とは別の方法があるのであれば、そちらも試してみたいのでご教授いただけると嬉しいです。

基本的に、このカスタマイズを応用すれば、いけるかと思います。
https://nelog.jp/adsense-insert-body
広告記入部分に、開始タグを入力し、$the_contentの後に閉じタグを付ければできるかと。

@mirumiさんこんばんは。

先程教えていただいたものをテストサイトにて試してみたのですが、サイトの表示が崩れ、このように「サイトに重大なエラーがありました。」と表示されてしまいました。

何かしら不備があるのでしょうか・・・？

もしお時間あれば、再度お力添えいただけると嬉しいです。

すみません…！

「/」が抜けてました。

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です。

@yhiraさんこんにちは。

ご回答、ありがとうございます！

無事に実装完了しました。

開始タグさえ広告部分に入力すれば、終了タグは記入せずとも実装可能でした。

大変助かりました。

ありがとうございます。

@mirumiさんこんにちは。

お忙しい中、度重なるご回答に感謝します。

/についてのご確認、修正ありがとうございます。

こちらも早速試させていただきます！

投稿者:: @co781228

こちらも早速試させていただきます！

いえ、わいひらさんの案で既に成功されている様ですし、こんな方法は無視してくださって結構です。笑

こちらこそちゃんと試していただきありがとうございました。

解決されたようですが、記事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いじらないので手軽かなと思ったのですが、変更したい記事数が多いと指定するセレクタの数が大変なことになりますかね…？

こちらのブログを参考にさせていただきました。

クラスの指定法 – WordPressでCSSを特定の記事だけ、ページだけに反映したい場合 | ネットビジネスで自由に生きる！会社を辞めて海外にいながらブログで稼ぐJINのサイト

@saruko

さる子さん、今回前川さんは「h2タグにスタイルを当てたい」わけではなく「一番最初に現れたh2タグから記事末尾までにクラスを当てたい」という要望だと思います。

掲載されたCSSはたしかに特定の記事のh2に反応しますが、全てのh2自体にCSSが適用されるだけのものとなってしまい、要望とは少し合わないかと思いました。ややこしいカスタマイズを言った自分が言うのもなんですが、どうぞご参考までに。

投稿者:: @co781228

開始タグさえ広告部分に入力すれば、終了タグは記入せずとも実装可能でした。

えっ、それで開始タグと終了タグの数が合います？
まー、表示上の問題がないのであれば、それで良いのかもしれませんが。

投稿者:: @yhira

広告記入部分に、開始タグを入力し、$the_contentの後に閉じタグを付ければできるかと。

投稿者:: @co781228

開始タグさえ広告部分に入力すれば、終了タグは記入せずとも実装可能でした。

@yhiraさんこんばんは。

こちら、終了タグをいれなくても大丈夫かと思っていたのですが、終了タグをきちんと入れないと別のところに問題が生じていました。

「$the_contentの後に閉じタグを付ければできるかと。」

とあるので、入れようと思ったのですが、$the_contentが複数あってどこかわかりませんでした 汗

すみません・・・。

もう少し詳細に教えていただくことは可能ですか？

投稿者:: @yhira

えっ、それで開始タグと終了タグの数が合います？
まー、表示上の問題がないのであれば、それで良いのかもしれませんが。

投稿が行き違いになってしまいました。すみません。

いえ、開始タグと終了タグの数は合いません！

合わないものの、きちんと表示は行えています。

ただ、さきの投稿でも書いたとおり、それが原因なのかわかりませんが、それをしてしまうと同時に実装しようとしていた別のカスタマイズ部分に不具合が生じてしまっています。

いまはみるみさんに教えていただいた方法で実装しているのですが、わいひらさんの方法でのやり方も今後のカスタマイズのときのために教えていただきたいです。

@mirumiさんこんばんは。

ご丁寧にお返事、ありがとうございます！

ご報告がおそくなりましたが、@mirumiさんに教えていただいた方法を試してみたところ、バッチリうまくいきました！

ありがとうございます！

わいひらさんの方法のやり方も一見うまくいったように見えたのですが、終了タグを追加せずに僕がやったものですから、別のカスタマイズを追加したらうまくいかなくなってしまいました（笑）

終了タグを入れる場所がわからず、現在追加で質問させていただいているところです。

@mirumiさん、今回はとても助かりました。

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

@sarukoさんこんばんは。

知恵を貸していただき、ありがとうございました。

記事単位のものなら自分でもできるんですが、記事内の特定の範囲というのが難しく質問させていただいた次第です。

ただ、お時間を使って回答してくれたことが非常に嬉しかったです。

ありがとうございます^^

今後もお力添えをいただく機会があるかもしれません。

その際は、どうぞよろしくおねがいします。

投稿者:: @co781228

もう少し詳細に教えていただくことは可能ですか？

スッキリと書くなら、以下をfunctions.phpに追記する感じかも。
https://gist.github.com/yhira/ab3d9680ad6413c3c43319c890271fa1

ただし、ちゃんとした動作確認はしていないので、利用は自己責任でお願いいたします。

こんな感じでdiv要素でラップされます。

ややこしい書き方をしてしまいすみません…！

最初のh2タグ上（ウィジェットで言うところの「投稿本文中」）から、投稿の終わり（ウィジェットで言うところの投稿本文下）までを特定の<div>タグで囲いたい

もし記事タイトル～h2にタグ直前まで影響がないCSSを追加するだけなら、.postid-(記事ID)の指定でも使えるかなと思ったのですが、言葉足らずでしたね…。

どういったカスタマイズがしたいのか分からなかったため、仮でh2を使ったのですがややこしくなってしまいました。

記事単位のものなら自分でもできるんですが、記事内の特定の範囲というのが難しく

すでにこの方法は試されたようで、お力になれず申し訳ないです。

@yhiraさんっ

詳しい具体的なコードまで教えていただき、大変助かります。

ありがとうございます！

また、メッセージのご確認が送れてしまい、大変申し訳無いです。

先程実際に実装してみたところバッチリ動作しました！

ありがとうございます！

@mirumiさんのほうほうと両方試しましたので、同じようなことをしたい方のために実装した場合の挙動の違いを書いておきます。

【@mirumiさんのやり方】

@mirumiさんに教えてもらったやり方では、記事下に別のウィジェットを配置していた場合、そのウィジェットも含めてCSSが適用されました。

【@yhiraさんのやり方】

@yhiraさんに教えてもらったやり方では、記事下に別のウィジェットを配置していても、そのウィジェットにはCSSが適用されませんでした。

結果的に異なる挙動となり、用途に合わせて使い分けられそうなので２パターンを教えていただき助かりました、

@yhiraさん、@mirumiさん、@sarukoさん、お時間を使って回答いただいて、ありがとうございました！

投稿者:: @co781228

@mirumiさんに教えてもらったやり方では、記事下に別のウィジェットを配置していた場合、そのウィジェットも含めてCSSが適用されました。

すみません。誤りです。

ウィジェット位置誤りなだけでした。

ご報告ありがとうございます?