web-dev-qa-db-ja.com

カスタムブートタイプでTwitterブートストラップの使用が折りたたまれる

私はWordpressでBootstrapを使用していて、特定のカスタム投稿タイプの単一ページのコンテンツに 折りたたみ 機能を実装したいと思います。

私は私がショートコードを作成することができることを知っています、しかし、大量の投稿でショートコードは理想的ではないでしょう。カスタム投稿タイプ（custom-single.php）の_contentに折りたたみを含めることは可能ですか。そのため、ユーザーがその下にテキストを含む.H2を入力すると、これを折りたたみグループに使用します。

そのため、custom-single.phpではthe_contentをカスタムdiv IDでラップしています。

 <div id="my-accordion"><?php the_content(); ?></div>

どのように私はブートストラップのために適切なdivクラスにH2とpを関連付けることができますか。これは可能ですか？

    <div class="accordion" id="accordion2">
        <div class="accordion-group">
          <div class="accordion-heading">
               <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
               Collapsible Group Item #1
               </a>
          </div>
          <div id="collapseOne" class="accordion-body collapse in">
              <div class="accordion-inner">
              Anim pariatur cliche...
          </div>
          </div>
      </div>

       <div class="accordion-heading">
           <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
           Collapsible Group Item #2
           </a>
       </div>
      <div id="collapseTwo" class="accordion-body collapse">
        <div class="accordion-inner">
         Anim pariatur cliche...
     </div>
   </div>
  </div>
</div>
jquerycsstwitter-bootstrap
2
stemie

スクリプト

まずスクリプトをエンキューする必要があります。カスタム投稿タイプとそのアーカイブに対してのみ条件付きでロードします。

// in your functions.php
function wpse69274_enqueue_tbs_collapse()
{
    if (
        ! is_post_type_archive()
        AND 'YOUR_POST_TYPE' !== get_post_type()
    )
        return;

    wp_enqueue_script(
         'tbs-collapse'
        ,get_stylesheet_directory_url().'path/to/your/collapse.js';
        ,array( 'jquery' )
        ,filemtime( get_stylesheet_directory().'path/to/your/collapse.js' )
        ,true
    );
}
add_action( 'wp_enqueue_scripts', 'wpse69274_enqueue_tbs_collapse' );

マークアップ

今度は適切なMarkUpを追加する必要があります。ターゲットは現在ループしている投稿の実際のthe_ID()を使ってマークされます。

<div class="container">
<div class="accordion" id="accordion">
    <?php
    global $wp_query;
    if ( have_posts() ) 
    {
        while( have_posts )
        {
            the_post();
            ?>
            <div class="accordion-group">
                <div class="accordion-heading">
                    <h2><a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-<?php the_ID(); ?>">
                        <?php the_title(); ?>
                    </a></h2>
                </div>
                <div id="collapse-<?php the_ID(); ?>" class="accordion-body collapse in">
                    <div class="accordion-inner">
                        <?php
                        if ( is_singular()
                        {
                            the_content();
                        }
                        else
                        {
                            the_excerpt();
                        }
                        ?>
                    </div>
                </div>
            </div><!-- // .accordion-group -->
            <?php
        } // endwhile;
    } // endif;
    ?>
</div>
</div>
2
kaiser

コーデックス から投稿のタイトルを前後の要素で囲むことができます。だから...私はあなたがあなたのPOST TITLEを切り取り/変更すると思う

<?php the_title('<h2 class="accordion-heading">', '</h2>'); ?>
0
Damien