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

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

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

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

WordPress

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

PHP

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

Bootstrap

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

Q&A

解決済

3回答

2399閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

HTML5

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

WordPress

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

PHP

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

Bootstrap

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

0グッド

0クリップ

投稿2017/11/20 01:48

編集2017/11/21 05:38

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

PHP

1<div class="row"> 2 <?php $i = 0; 3 if ( $i % 2 == 1 ) { 4 post_class( 'odd' ); 5 } else { 6 post_class( 'even' ); 7 } 8 $args = array( 'post_type' => circle ); 9 $myposts = get_posts( $args ); 10 foreach ( $myposts as $post ) : setup_postdata( $post ); 11 ?> 12 13 <div class="col-md-4 col-sm-6"> 14 <h3 class="circlename-item"><?php echo post_custom( 'circlename' ); ?></h3> 15 <div class="circle-wrapper"> 16 <?php the_post_thumbnail( 'circle-thumb', array( 'class' => 'img-fluid circle-thumb' ) ); ?> 17 <p class="genre-item"><?php echo post_custom( 'genre' ); ?></p> 18 <p class="penname-item">PN&nbsp;<?php echo post_custom( 'penname' ); ?></p> 19 <p class="spacenumber-item">スペースNo&nbsp;<?php echo post_custom( 'spacenumber' ); ?></p> 20 </div> 21 </div> 22 23 <?php 24 $i++; 25 if ( $i % 3 == 0 ) { 26 echo '</div>'; 27 } 28 ?> 29 30 <?php endforeach; 31 wp_reset_postdata();?> 32

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

PHP

1<div class="row"> 2 <?php $i = 0; 3 $args = array( 'post_type' => circle ); 4 $myposts = get_posts( $args ); 5 foreach ( $myposts as $post ) : setup_postdata( $post ); 6 ?> 7 8 <div class="col-md-4 col-sm-6"> 9 <?php if ($i % 2 == 1): ?> 10 <h3 <?php post_class( 'odd circlename-item' ); ?>><?php echo post_custom( 'circlename' ); ?></h3> 11 <?php else: ?> 12 <h3 <?php post_class( 'even circlename-item' ); ?>><?php echo post_custom( 'circlename' ); ?></h3> 13 <?php endif; ?> 14 <div class="circle-wrapper"> 15 <?php the_post_thumbnail( 'circle-thumb', array( 'class' => 'img-fluid circle-thumb' ) ); ?> 16 <p class="genre-item"><?php echo post_custom( 'genre' ); ?></p> 17 <p class="penname-item">PN&nbsp;<?php echo post_custom( 'penname' ); ?></p> 18 <p class="spacenumber-item">スペースNo&nbsp;<?php echo post_custom( 'spacenumber' ); ?></p> 19 </div> 20 </div> 21 22 <?php 23 $i++; 24 if ( $i % 3 == 0 ) { 25 echo '</div>'; 26 } 27 ?> 28 29 <?php endforeach; 30 wp_reset_postdata();?>

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

PHP

1<?php $classes = array( 'odd', 'even' );?> 2<?php if ($i % 2 == 1): ?>

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

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

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

投稿2017/11/20 01:55

yambejp

総合スコア114585

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2017/11/20 01:57

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

2017/11/20 02:07

具体的にどうやりましたか? 普通に反映されるとおもいますが
退会済みユーザー

退会済みユーザー

2017/11/20 02: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; }
yambejp

2017/11/20 13:01

とりあえず $green→green $yellow→yellow では?
退会済みユーザー

退会済みユーザー

2017/11/20 13:04

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

0

ベストアンサー

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

CSS

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

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

PHP

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

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

PHP

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

投稿2017/11/21 02:23

kei344

総合スコア69366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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 12:48

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2017/11/20 12:51

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

退会済みユーザー

2017/11/20 23:12

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問