jQueryの.appendメソッドを使って本文($content)内の任意のタグに追記したい。

  • 解決済 john.book

    (@johnbook)


    11年、 9ヶ月前

    いまひとつjQueryの使い方が分かりません。
    $content内の特定のidが付いたdivタグの次に任意のタグを追加したいのですが

    例えば、<div id=”test”>テストです。</div>というのを本文に投稿した後
    フィルターフックを利用して$contentの内容を表示する際に自動で
    <div>テスト追記です。</div>というタグを付けることは可能でしょうか？

    調べてみて、jQueryでもしやるとすると
    <script type=”text/javascript”>
    $(function(){$(“<div>テスト追記です。</div>”).appendTo(div#test);
    });
    </script>
    とかappendToの代わりに.appendするということは分かっているのですが(間違っているかもしれませんが。。)

    この<script～>～</script>をどこに書けばいいのかが分かりません。
    試しにsingle.phpに書いてみましたが動きませんでした。
    ※header.php内にjQuery.min.jsは記載済みで、これまた別案件ですがsingle.php内に.toggleを使いクリックしたら表示非表示するcss制御スクリプト、みたいなことは書いて試してみると出来ました。

    後々のカスタマイズのことも考えてfunction.phpにこのscriptを関数として動くよう記述し
    the_contentにフィルターをフックさせたいのですが、

    function test_append($content){
    　～現在表示中の記事($content)内から<div id=”test”>タグを探してappendToする処理内容～
    }
    add_filter(‘the_content’, ‘test_append’);

    こうすると例えばsingle.php内にある<?php the_content(); ?>で表示させた時に
    勝手に毎回
    テストです。テスト追記です。
    という記述になるようにしたいというのが希望です。

    ちょっと質問が支離滅裂かもしれませんが、どなたかご教授頂けないでしょうか。

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • トピック投稿者 john.book

    (@johnbook)

    11年、 9ヶ月前

    少しいじっていると、簡単なテストには成功しました。

    function.phpへ

    function test_append($content){
echo '<script type="text/javascript">
//<![CDATA[
$(function(){$("<div>テスト追記</div>").appendTo("div#test");
});
//]]>
</script>';
return $content;
}
add_filter('the_content', 'test_append');

    これを追加し、loop-single.php(twenty tenテーマでテストしています)へ
    <?php the_content(); ?>
    の直前に
    <?php apply_filters('test_append', $content); ?>
    を追加しましたところ、無事<div id=”test”>テスト本文</div>の後に
    <div>テスト追記</div>が出ました。

    しかし、この追記分のdivへclassやidをつけると出てこなくなります。
    .appendToなどで追記するタグへ<div class=”testtag”>テスト追記</div>とすることは不可能なのでしょうか？

    どなたか、ご教授宜しく御願いします。

    Pimp My Site

    (@pmwp)

    11年、 9ヶ月前

    the_content() で、add_filter() された test_append() が実行されるので、あえて apply_filters() しなくても良いです。

    filter は値を返すのがお約束なので echo せずに全部 return すると良いです。

    function test_append( $content ) {
  return $content
  . '<script type="text/javascript">'
  . '//<![CDATA['
  . '$(function(){$(
  . '"<div class=\'myclass\'>テスト追記</div>").appendTo("div#test");'
  . '});'
  . '//]]>'
  . '</script>';
}

    追記分のdivへclassやidをつける

    上のコードではクラス名を括るクォーテーションが文字列中（の文字列中）に出てくるのでエスケープしています。

    以上を気をつければ大丈夫だと思います。

    トピック投稿者 john.book

    (@johnbook)

    11年、 8ヶ月前

    ご返信ありがとうございます！
    すごく参考になります！
    なるほど先にreturn $contentでいいのですね。

    とても初歩的な質問なのですが、

    . ‘<script type=”text/javascript”>’

    この記述はどういうことなのでしょうか？
    シングルクォーテーションでjQueryの記述をくくることで<?php~?>タグ内で通るようにしていることは分かるのですが、初めのピリオドはどういう役割があるのでしょう？

    また、本来やりたかった次のステップがそのappendToで追記する文字列の中にWPの関数
    例えばcomment_text()関数を使ってコンテンツを挿入したいのですが…
    例があまりないのですが色々調べているとそれは出来ないのでしょうか。。？
    ajaxがどうとかっていうところまでは調べましたが、ajaxはまだ学んでません。
    例えばこれは動きませんが、

    function test_append( $content ) {
  return $content
  . '<script type="text/javascript">'
  . '//<![CDATA['
  . '$(function(){$(
  . '"<ul class=\'myclass\'><?php comment_text(); ?></ul>").appendTo("div#test");'
  . '});'
  . '//]]>'
  . '</script>';
}

    イメージとしてはこんなことがしたいです。
    ちなみにsingle.phpへ、javaを使わずに単純に

    <?php if ( $comments = get_approved_comments( $post->ID ) ) : ?> <!-現在表示している記事のコメント取得->
<?php foreach($comments as $comment): ?> <!-コメント取得ループ->
<ul><?php comment_text(); ?></ul>
<?php endforeach; ?>
<?php endif; ?>

    これでコメント内容をピックアップすることは出来たのですが
    この内容を、好きな場所に挿入したいというのが最終的な目標です。
    初心者なのに難しいことをしようとしているかもしれません。。
    宜しければ何かアドバイスお願い致します。

    トピック投稿者 john.book

    (@johnbook)

    11年、 8ヶ月前

    連投すみません。
    ↑で教えてもらった記述方法なのですが

    function test_append( $content ) {
  return $content
  . '<script type="text/javascript">'
  . '//<![CDATA['
  . '$(function(){$(' //←エラーが出たのでこのシングルクォーテーションはたぶん抜けてただけかと思い自分で足しました。
  . '"<div class=\'myclass\'>テスト追記</div>").appendTo("div#test");'
  . '});'
  . '//]]>'
  . '</script>';
}

    これだとテスト追記が出ませんでした。

    ↑でテストしたっていう

    function test_append($content){
echo '<script type="text/javascript">
//<![CDATA[
$(function(){$("<div>テスト追記</div>").appendTo("div#test");
});
//]]>
</script>';
return $content;
}

    これなら出てくるんですが…どういう違いがあるんでしょう？

    トピック投稿者 john.book

    (@johnbook)

    11年、 8ヶ月前

    あ、ちゃんと

    function test_append($content){
echo '<script type="text/javascript">
//<![CDATA[
$(function(){$("<div class=\'myclass\'>テスト追記</div>").appendTo("div#test");
});
//]]>
</script>';
return $content;
}

    とクラスを追加しててもテスト成功してます。

    Pimp My Site

    (@pmwp)

    11年、 8ヶ月前

    以下のように functions.php に書けば、コメントを #test の後に挿入できます。

    add_filter('the_content', 'test_append');
function test_append( $content ) {
  ob_start();
  echo $content;
?>
<script type="text/javascript">!function($){
  $('<div class="myclass"><ul><?php
  if ( $comments = get_approved_comments( get_the_ID() ) ) : ?>
<?php
foreach( $comments as $comment ): ?><li><?php
  $text = str_replace( array( "\r\n", "\r", "\n" ), '', nl2br( get_comment_text( $comment ) ) );
  echo wp_kses_post( str_replace( '\'', '\\\'', $text ) );
?></li><?php
endforeach;
endif;
?></ul></div>').appendTo('#test')
}(window.jQuery)
</script>
<?php
  return ob_get_clean();
}

    コードの意味は、PHPのリファレンスやCodexなどで調べてください。

    トピック投稿者 john.book

    (@johnbook)

    11年、 8ヶ月前

    ありがとうございました。難しいですが頑張ってみます。

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • トピック「jQueryの.appendメソッドを使って本文($content)内の任意のタグに追記したい。」には新たに返信することはできません。