記事本文のH2タイトルの直後にウィジェットを追加することは可能か

例えばその追加したいウィジェットはどんなものですか？

パソコン用テキストウィジェット
モバイル用テキストウィジェット

上記のウィジェットを記事本文中のH2タイトルのすぐ後、さらにH3やH2タイトルの前後に挿入できるようスペースを追加したいと思っています

その用途としては、PCとモバイルで、表示する定型文の内容を仕分けたいと言うことですかね？

その通りです。
【投稿本文中】のようなウィジェット挿入スペースをH2タイトルの後、そしてH3やH4タイトルの前後に作成できないかと考えております。

#45171と#45181の私の投稿で「H3やH2タイトルの前後」と記載をしておりましたが、正確には「H3やH4タイトルの前後」でした。

やはりウィジェットを挿入するスペースを作成するのは難しいのでしょうか？

> ウィジェットを挿入するスペースを作成するのは難しいのでしょうか？

ウィジェットエリア自体は既に既存のh2手前があるので、h2の後と言う条件なら、

function add_widget_before_1st_h2($the_content) {
  if ( is_single() && //投稿ページのとき、固定ページも表示する場合はis_singular()にする
       is_active_sidebar( 'widget-in-article' ) //ウィジェットが設定されているとき
  ) {
    ob_start();//バッファリング
    echo '<div id="widget-in-article" class="widgets">';
    dynamic_sidebar( 'widget-in-article' );//本文中ウィジェットの表示
    echo '</div>';
    $ad_template = ob_get_clean();

    $pattern = "/<h2.+\/h2>/i";
    if ( preg_match( $pattern, $the_content, $h2results )) {//H2見出しが本文中にあるかどうか
      $h2result =  $h2results[0];
    }
    if ( $h2result ) {//H2見出しが本文中にある場合のみ
      //最初のH2の手前に広告を挿入（最初のH2を置換）
      //$count = 1;
      $the_content = preg_replace($pattern, $h2result.$ad_template, $the_content, 1);
    }
  }
  return $the_content;
}
add_filter('the_content','add_widget_before_1st_h2');

元の関数を子テーマfunctions.phpで上書きして、こんなふうにすればh2の後に投稿本文中のウィジェットが入れられると思うんですが、汎用性がありませんよね。

好きな所に挿入できるのが良いと考えられている場合は、カスタムフィードと言う手もありますし、ショートコードと言う手もあります。普通にjQueryで挿入しても良いですし方法はいくつかあるかと思います。

ショートコードやjQueryならページ内のどこでも任意の要素を入れることができます。入れられますが、その中身がどういうものかにもよりけりです。

例えばウィジェットエリア自体は簡単に追加できますし、上記サンプルをちょっといじればその位置を好きな見出しの後にすることはできます。ただこれは、便利そうに見えてそんなに便利ではないんですよね。設定も面倒くさいですし。

で、使おうとしているウィジェットが「パソコン用テキストウィジェット」と「モバイル用テキストウィジェット」で、これらを使いその中身をデバイスによって使い分けたいと言う事なので、結局PC用、モバイル用それぞれのhtmlなりテキストなりを用意することになると思うんですよ。

「PC用html」「モバイル用html」があって、「デバイスによって表示を分ける」

これだけを考えたら、jQuery等で任意のidなりセレクタに挿入すればよいのではなかろうかと思ったりします。これが例えば新着ウィジェットをデバイスごとに仕分けたいとか、そういう意味合いならウィジェットエリアを作ったほうが良いかもしれませんが、htmlなりテキストならjQuery等で良いのではなかろうかと思います。

サンプル: PCとmobileそれぞれのファイルを任意の場所に読み込む | jsFiddle

サンプルはjsFiddle上では動作しませんが、自身のサイト上では動作します。クロスドメインとパスの問題です。

使い方はcss欄に書きましたが、

子テーマlibフォルダに、pc.htmlとmobile.htmlをそれぞれ作る
libフォルダがない場合は新たに作る。
pc(mobile).htmlの中身は普通にその部分のhtmlを書く。

例) <p>pc用テキスト</p>

編集画面にて記事中の任意の場所に <div class="insertText"></div> のようにタグを入れる。
このclassは任意のものに変えられる。
変えた場合は、javascript欄の「設定するセレクタ」部分にcssで使うのと同様にクラスを書く。
クラスの場合、先頭のピリオドを忘れずに。

こんな感じで使えます。
AddQuicktagみたいなプラグイン、あるいはIMEの辞書等にタグを登録しておけば1クリックで任意の場所に要素を入れられるので、記事中の好きな所に好きな定型文の内容を入れられます。

if ($("#the-content, insertSelector").length) {
// ↓
if ($("#the-content").find(insertSelector).length) {

の方が良いと思うので、サンプルをアップデートしときました。

if ($("#the-content, insertSelector").length) {
// ↓
if ($("#the-content, "+insertSelector).length) {

ならわからなくもないですが、上段のように書いてしまったので、ついでにサンプルのようにしました。アップデートしたサンプルの場合、記事中に.insertTextが無い場合は、$.getでファイルを読み込みに行くこともないので負荷がかからないだろうと言うことです。

function add_widget_before_1st_h2($the_content) {
  if ( is_single() && //投稿ページのとき、固定ページも表示する場合はis_singular()にする
       is_active_sidebar( 'widget-in-article' ) //ウィジェットが設定されているとき
  ) {
    ob_start();//バッファリング
    echo '<div id="widget-in-article" class="widgets">';
    dynamic_sidebar( 'widget-in-article' );//本文中ウィジェットの表示
    echo '</div>';
    $ad_template = ob_get_clean();

    $pattern = "/<h2.+\/h2>/i";
    if ( preg_match( $pattern, $the_content, $h2results )) {//H2見出しが本文中にあるかどうか
      $h2result =  $h2results[0];
    }
    if ( $h2result ) {//H2見出しが本文中にある場合のみ
      //最初のH2の手前に広告を挿入（最初のH2を置換）
      //$count = 1;
      $the_content = preg_replace($pattern, $h2result.$ad_template, $the_content, 1);
    }
  }
  return $the_content;
}
add_filter('the_content','add_widget_before_1st_h2');

上記をfunctions.phpに貼り付けただけではエラーになってしまうのですが、なにか方法があるのでしょうか？

また、これはH2タイトルの上のウィジェットスペースをH2タイトルの下に移動するというものでしょうか？

H2タイトルの上と下にウィジェットスペースを確保したいと考えております。

> 上記をfunctions.phpに貼り付けただけでは
> エラーになってしまうのですが、なにか方法があるのでしょうか？

Simplicityのバージョンはいくつですか？
もしかすると古いバージョンでは、大元の同じ関数が上書きできない仕様なのかもしれません。
2.2.8ではエラーなく動作してます。

> これはH2タイトルの上のウィジェットスペースを
> H2タイトルの下に移動するというものでしょうか？

これは投稿中ウィジェットを最初のh2の後に表示するためのものです。

こんな感じになります。

> H2タイトルの上と下にウィジェットスペースを確保したいと考えております。

これをするならサンプルのjQueryの方が圧倒的に簡単です。jQueryは使いたくないと言う理由もよくわかりませんが、ひとまず必要なこととしては、

「そのh2の上下にはどういったものが入るのか」

と言う最終形態です。前の質問のように、パソコン用とモバイル用とでウィジェットを入れて仕分けをしたいわけですよね？仕分けるのは簡単ですが「何が入ってどうゆう運用がしたいのか」というのを書いてもらうと他の方法を含めて色々アイデアが出せると思います。

ここで言う何が入ってとは、h2の前後に入る内容です。ウィジェットであろうとなかろうと結局はhtmlで出力するのでウィジェットにこだわる必要もないと思うんですよ。

例えば、投稿中ウィジェットに、それぞれ

<div class="h2_first_before">
  <div class="text_widget">テキストウィジェットの内容</div>
</div>
<div class="h2_first_after">
  <div class="text_widget">テキストウィジェットの内容</div>
</div>

こんな感じでテキストウィジェットを2つ入れておけば、最初のh2の前後にそれぞれを入れることはjQueryでできます。なので場所とかはどこでもいいんですよ。つまり、「h2の前後にウィジェットエリアはいらない」と言うことです。

入れておく内容は投稿中ウィジェットでなくても、SNS前後どちらでも良いですし、サイドバーの一番下でも良いです。

これを応用すれば、例えば投稿中ウィジェットエリアに、パソコン用テキストウィジェットとモバイル用テキストウィジェットを入れておきます。それぞれを上記のようにdivで囲んで同じ名前にしておきます。

<div class="h2_first_before">
  <div class="text_widget">パソコン用テキストウィジェットの内容</div>
</div>
<div class="h2_first_before">
  <div class="text_widget">モバイル用テキストウィジェットの内容</div>
</div>
<div class="h2_first_after">
  <div class="text_widget">パソコン用テキストウィジェットの内容</div>
</div>
<div class="h2_first_after">
  <div class="text_widget">モバイル用テキストウィジェットの内容</div>
</div>

こうしておきます。そうしたら、モバイル用はPCの時には読み込まれないのでパソコン用のbeforeとafterのテキストウィジェットが存在することになります。モバイルの場合は逆ですね。
jQuery側はbeforeは最初のh2の前にafterは後に入れるだけで良いですからごく簡単な仕組みになります。

ただ、4つのhtmlなりテキストを用意しないといけないので面倒くさいですよね？
パソコン用とPC用があれば事足りるわけですが、前後に入れるとなるとこういう感じになります。

で、ここらで僕が最初に聞いた、そこにはどんなもの(内容)が入りますか？と言うのの意味が理解してもらえるかもしれません。
h2の前後に入れるその内容がわかればより手間を掛けず、また大きくテーマを改造することなく実現できるかもしれないわけですが、そこが明確でないので、色々なアプローチを考えないといけません。

wordpressのウィジェットエリアはregister_sidebarを使えば作れます。最初のh2の前後にウィジェットエリアを作ると言うのは元々のSimplicityのがh2手前、僕が答えたのがh2後なので、元々の関数を上書きせず新たに作成して配置すればここらは実現もできるでしょう。

ただそれは最初のh2手前しか動作しないわけです。h3にするなら、その分も作らないといけません。
本当にそうするのが最善の方法なのかどうかは、h2手前に入れようとしている内容次第です。

☓ ただそれは最初のh2手前
○ ただそれは最初のh2前後

自身がプラグラムに不慣れたためすべてを理解できたかわかりませんが、そのような事ができるのですね！

H2タイトル前後のウィジェットスペースには画像のリンクやテキストリンクをスクリプトを使用してランダム表示をしようと考えております。

よろしければ、

例えば、投稿中ウィジェットに、それぞれ

<div class="h2_first_before">
  <div class="text_widget">テキストウィジェットの内容</div>
</div>
<div class="h2_first_after">
  <div class="text_widget">テキストウィジェットの内容</div>
</div>

こんな感じでテキストウィジェットを2つ入れておけば、最初のh2の前後にそれぞれを入れることはjQueryでできます。なので場所とかはどこでもいいんですよ。つまり、「h2の前後にウィジェットエリアはいらない」と言うことです。

こちらですとどのように記述すればいいのですか？

テーマを2.2.9fにしてfunctions.phpに#45201をコピペしたのですが下記のように標示されてしまいます。

Parse error: syntax error, unexpected ‘$’, expecting ‘&’ or T_VARIABLE in /home/🔴🔴🔴/public_html/アカウント名/wp-content/themes/simplicity2-child/functions.php on line 41

#45201はfunctions.phpに記載するものではないのでしょうか？

投稿中ウィジェットにパソコン用(モバイル用)テキストにて、

<div class='h2_first_before'>
<p>PC用テキストウィジェットの内容(前)</p>
</div>
<div class='h2_first_after'>
<p>PC用テキストウィジェットの内容(後)</p>
</div>

と入力されている場合を想定して、出力されたhtmlを元にサンプルを作りました。
モバイル用テキストは、上記pタグの中身が違うだけです。
※ 注意!! class=の後ダブルクォート(shift+2)では全角に変換されてclass="”test”"のようになってしまうので必ずシングルクォート(shift+7)でclassを囲んでください。(2016/09/15現在のウィジェットpc-text.phpにて確認)
※ 注意! 上記条件でclass="”test”"になるとjQueryで要素が取得できないので正常に動作しません。

サンプル: h2の前後にそれぞれのテキストウィジェットの中身を表示 | codepen

それぞれは以下のように表示されます。

h2の前後のマージンなりはcssで調整してください。h2自体に設定してあるmarginやpadding等で画像のような表示になっています。
また前後に挿入した要素のスタイルもそれぞれのクラスに対して行えば色々できます。

サンプルでは、最後にmiddleWidget.remove();と言うのが入れてあります。これを有効にすると挿入完了後カラになった投稿中ウィジェットを削除します。

> #45201はfunctions.phpに記載するものではないのでしょうか？

jQueryは、子テーマjavascript.jsにコピペしてください。
#45214も同様です。

ありがとうございます！
とても勉強になりました！

更に質問をして申し訳ないのですが、いまプラグインの「Post Snippets」を利用して下のスクリプトにて他サイト様のＲＳＳをテキスト形式で出力しています。

<?php include_once(ABSPATH . WPINC . '/feed.php');
$rss = fetch_feed(array(
//以下にブログのRSS Feedを記述（複数の場合はカンマ区切り）
'ブログのRSS feedを記入',
'ブログのRSS feedを記入'
));
if (!is_wp_error( $rss ) ) :
    $rss->set_cache_duration(1800);
    $rss->init();
    $maxitems = $rss->get_item_quantity(15);
    $rss_items = $rss->get_items(0, $maxitems);
    date_default_timezone_set('Asia/Tokyo');
endif;
?>

    <?php if ($maxitems == 0) echo '<dt>No items.</dt>';
    else
    foreach ( $rss_items as $item ) : ?>
	<li>
	
<span class="blog-title"><span><a href='<?php echo $item->get_permalink(); ?>' target="_blank"><?php echo $item->get_title(); ?></a></span>

	</li>
	<?php endforeach; ?>

最初の<?phpは不要とどこかで見たのでその通りにしてショートコードを作成しているのですが、記事本文に上記にてRSSを表示するとテキストが大きく右にはみ出して画面が右寄りになってしまいます。

divでwidthを使って幅を100％で指定しているのですがスマホの横幅に収まってくれません。

上記のようなプログラムだと本文の横幅を制御することはできませんか？

申し訳ございません。
至急新しいトピックを立てせていただきます。

わいひら体調が回復したようで安心いたしました。
お体にお気をつけ下さい。