質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

91.36%

  • PHP

    15157questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • WordPress

    4766questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

  • HTML5

    2842questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • Bootstrap

    686questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

カスタム投稿で指定するクラスを付与する

解決済

回答 3

投稿 2017/11/20 10:48 ・編集 2017/11/21 14:38

  • 評価
  • クリップ 0
  • VIEW 106

uzuki

score 4

ご質問失礼します。
カスタム投稿で指定するクラスを付与したいのですが、ご助力お願いします。
偶数と奇数に分けて色を変化させたいのですが、いかがでしょうか。

<div class="row">
        <?php $i = 0;
        if ( $i % 2 == 1 ) {
            post_class( 'odd' );
        } else {
            post_class( 'even' );
        }
        $args = array( 'post_type' => circle );
        $myposts = get_posts( $args );
        foreach ( $myposts as $post ) : setup_postdata( $post );
        ?>

            <div class="col-md-4 col-sm-6">
                <h3 class="circlename-item"><?php echo post_custom( 'circlename' ); ?></h3>
                <div class="circle-wrapper">
                    <?php the_post_thumbnail( 'circle-thumb', array( 'class' => 'img-fluid    circle-thumb' ) ); ?>
                    <p class="genre-item"><?php echo post_custom( 'genre' ); ?></p>
                    <p class="penname-item">PN&nbsp;<?php echo post_custom( 'penname' ); ?></p>
                    <p class="spacenumber-item">スペースNo&nbsp;<?php echo post_custom( 'spacenumber' ); ?></p>
                </div>
            </div>

        <?php
        $i++;
        if ( $i % 3 == 0 ) {
        echo '</div>';
        }
        ?>

    <?php endforeach;
    wp_reset_postdata();?>


ここまで修正しましたが、すべてのClassコードも表示されてしまいます。

<div class="row">
        <?php $i = 0;
        $args = array( 'post_type' => circle );
        $myposts = get_posts( $args );
        foreach ( $myposts as $post ) : setup_postdata( $post );
        ?>

            <div class="col-md-4 col-sm-6">
                <?php if ($i % 2 == 1): ?>
                  <h3 <?php post_class( 'odd circlename-item' ); ?>><?php echo post_custom( 'circlename' ); ?></h3>
              <?php else: ?>
                  <h3 <?php post_class( 'even circlename-item' ); ?>><?php echo post_custom( 'circlename' ); ?></h3>
              <?php endif; ?>
                <div class="circle-wrapper">
                    <?php the_post_thumbnail( 'circle-thumb', array( 'class' => 'img-fluid    circle-thumb' ) ); ?>
                    <p class="genre-item"><?php echo post_custom( 'genre' ); ?></p>
                    <p class="penname-item">PN&nbsp;<?php echo post_custom( 'penname' ); ?></p>
                    <p class="spacenumber-item">スペースNo&nbsp;<?php echo post_custom( 'spacenumber' ); ?></p>
                </div>
            </div>

        <?php
        $i++;
        if ( $i % 3 == 0 ) {
        echo '</div>';
        }
        ?>

    <?php endforeach;
    wp_reset_postdata();?>


配列から条件式で別けることができますでしょうか?

<?php $classes = array( 'odd', 'even' );?>
<?php if ($i % 2 == 1): ?>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

+2

偶数と奇数に分けて色を変化させたい

色を変える程度のことであればcssのnth-childではダメですか?

投稿 2017/11/20 10:55

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/11/20 10:57

    それも試してみたのですが、変化がありませんでした。

    キャンセル

  • 2017/11/20 11:07

    具体的にどうやりましたか?
    普通に反映されるとおもいますが

    キャンセル

  • 2017/11/20 11:16

    .circle-list .circlename-item {
    display: block;
    width: 18rem;
    margin: 0 auto;
    padding: 1rem 0;
    margin-bottom: 1rem;
    text-align: center;
    }

    .circle-list .circlename-item:nth-child(odd) {
    background-color: $green;
    }

    .circle-list .circlename-item:nth-child(even) {
    background-color: $yellow;
    }

    キャンセル

  • 2017/11/20 22:01

    とりあえず
    $green→green
    $yellow→yellow
    では?

    キャンセル

  • 2017/11/20 22:04

    ご回答ありがとうございます。すみません、css3ではなくscssでした。

    キャンセル

checkベストアンサー

+1

yambejpさんの回答のコメント欄にて提示されているCSSであれば、下記のようにする必要があります。

.circle-list .row > div:nth-child(odd) .circlename-item {}
.circle-list .row > div:nth-child(even) .circlename-item {}

この処理はCSSで行うほうがお勧めですが、PHPの問題はHTML部分とPHP部分を混ぜて書いているためです。

<!--
<h3 class="circlename-item . post_class('odd');"><?php echo post_custom( 'circlename' ); ?></h3>-->
<h3 class="circlename-item<?php post_class('odd'); ?>"><?php echo post_custom( 'circlename' ); ?></h3>

ただ、post_class 関数は class="" も出力するので、単純に下記で良いです。

<h3 class="circlename-item odd"><?php echo post_custom( 'circlename' ); ?></h3>

投稿 2017/11/21 11:23

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

post_class()で奇数件目と偶数件目で違う情報を出力します。

        <?php $i = 0;
        $args = array( 'post_type' => circle );
        $myposts = get_posts( $args );
        foreach ( $myposts as $post ) : setup_postdata( $post );
        ?>

            <div class="col-md-4 col-sm-6">
                <?php if ($i % 2 == 1): ?>
                  <h3 <?php post_class( 'odd circlename-item' ); ?>><?php echo post_custom( 'circlename' ); ?></h3>
              <?php else: ?>
                  <h3 <?php post_class( 'even circlename-item' ); ?>><?php echo post_custom( 'circlename' ); ?></h3>
              <?php endif; ?>
                <div class="circle-wrapper">
                    <?php the_post_thumbnail( 'circle-thumb', array( 'class' => 'img-fluid    circle-thumb' ) ); ?>
                    <p class="genre-item"><?php echo post_custom( 'genre' ); ?></p>
                    <p class="penname-item">PN&nbsp;<?php echo post_custom( 'penname' ); ?></p>
                    <p class="spacenumber-item">スペースNo&nbsp;<?php echo post_custom( 'spacenumber' ); ?></p>
                </div>
            </div>

        <?php
        $i++;
        if ( $i % 3 == 0 ) {
        echo '</div>';
        }
        ?>

    <?php endforeach;
    wp_reset_postdata();?>

投稿 2017/11/20 21:48

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/11/20 21:51

    <?php post_class(); ?>>では余計な情報まで出力してしまうので、奇数と偶数のみ表示したいです。ご助力いただければ幸いです。

    キャンセル

  • 2017/11/21 08:12

    今のところfunction.phpで設定するくらいですね。もし他の方法がありましたら、ご教示いただければ幸いです。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

ただいまの回答率

91.36%

関連した質問

同じタグがついた質問を見る

  • PHP

    15157questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • WordPress

    4766questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

  • HTML5

    2842questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • Bootstrap

    686questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。