2016-09-13 4 views
1

テーマをHTMLテンプレートからWordPressテーマのダイナミックに変換しています。1つのPHPループコードで2 divクラスを使用する方法

私は、サービス、スライド、チームのようないくつかのカスタム投稿タイプを作成しました。 今、私の問題はHTMLテンプレートのようなサービスを設計できないことです。テンプレートは2 DIVクラスを使用するためです。そのうちの1つは "サービスwow fadeInUp"であり、もう1つは "サービスwow fadeInDown"です。

例:
本文1 =サービスWOW fadeInUp
本文2 =サービスWOW fadeInDown
テキスト3 =サービスfadeInUp WOW
テキスト4 =サービスワウfadeInDown
*続ける........ 。*

しかし、私はindex.phpにサービス(カスタム投稿タイプ)を表示するためにPHPコードを使用すると、DIVクラスは1つしかありません。私は私のカスタム投稿の種類を表示するための単一のPHPコードで2 DIVクラスを使用する方法がわかりません。 私はPHP言語の初心者です。もし誰かが私のためにこの問題を解決し、それをどうやって行うかについて私に説明してくれれば、私にとって非常に役に立ちます。 私のコードは以下の通りである:あなたが気付いた場合

のfunctions.php

// add services 

    register_post_type ('tservices', array(
     'labels' => array(
      'name' => 'Services', 
      'add_new_item' => 'Add New Service' 
      ), 
     'public' => true, 
     'supports' => array('title', 'editor',) 
    )); 

のindex.php

<div class="col-sm-3"> 

        <?php 
         $thservices = new WP_Query(array(
          'post_type' => 'tservices', 
          'order' => 'ASC' 
         )); 
        ?> 
        <?php while($thservices->have_posts()) : $thservices->the_post(); ?> 


         <div class="service wow fadeInUp"> 
          <div class="service-icon"><?php echo get_post_meta($post->ID, 'faicon', true); ?></i></div> 
          <h3><?php the_title(); ?></h3> 
          <?php the_content(); ?>... 

          <a class="big-link-1" href="services.html">Read more</a> 
         </div> 

        <?php endwhile; ?> 


        </div> 

、あなたはそこに一つだけのdivクラスが利用できるでしょう。 2番目のdivクラスを追加するにはどうしたらいいですか? お願いします!

+0

これはphp/WPの問題ではなく、CSSですので、回答したくありません。 2つのクラスを追加する代わりに、CSSを 'fadeInUp'と' fadeInDown'の代わりに '.service.wow:nth-​​child(2n)'と '.service.wow:nth-​​child(2n + 1)'に変更してください。 – skobaljic

答えて

0

上記のskobaljicのコメントは1つ(おそらくはネイテッド)の解決策ですが、既存のCSSクラスを維持してPHPで完全に変更したい場合は、ここで説明します。

基本的には変数で交互にクラス名を維持し、ループの各反復のためにそれを変更します。私はPHPの短い出力タグ<?=を使用してい

<div class="col-sm-3"> 

<?php 
    $thservices = new WP_Query(array(
     'post_type' => 'tservices', 
     'order' => 'ASC' 
    )); 
?> 
<?php while($thservices->have_posts()) : 
    $thservices->the_post(); 
    if($divclass == "fadeInUp") { $divclass = "fadeInDown"; } 
    else { $divclass = "fadeInUp"; } 
    ?> 

    <div class="service wow <?=$divclass?>"> 
     <div class="service-icon"><?php echo get_post_meta($post->ID, 'faicon', true); ?></i></div> 
     <h3><?php the_title(); ?></h3> 
     <?php the_content(); ?>... 

     <a class="big-link-1" href="services.html">Read more</a> 
    </div> 

<?php endwhile; ?> 

</div> 

注 - このはかなり相当です印刷やエコー、それは私にはうまく見えます。そのメリットについては、こちらをご覧ください。https://softwareengineering.stackexchange.com/questions/151661/is-it-bad-practice-to-use-tag-in-php また、PHP 5.4以降を使用しているとします。そうでない場合は、ショートタグオプションを有効にするか、印刷またはエコーを使用するようにコードを変更する必要があります。

関連する問題