ACFでカラーピッカーを使ってカテゴリーごとに色を付け、TOPページのループ内で表示。styleでbackground-colorを変える
ACFカラーピッカーの表示
ACFでカラーピッカーを使ってカテゴリーごとに色を設定し、TOPページのループ内で表示。
下記、styleでbackground-colorを変える場合
<ul>
<?php if ( have_posts() ) : query_posts('cat=1,20&showposts=3'); ?>
<?php while (have_posts()) : the_post(); ?>
<li>
<span class="date"><?php echo get_the_date('Y.m.d'); ?></span>
<span class="cate">
<?php
$category = get_the_category();
if ( $category[0] ) {
echo '<a href="' . get_category_link( $category[0]->term_id ) . '" class="' .$category[0]->category_nicename . '" ' ;
echo 'style="background-color:';
$this_category_color = get_field( 'cate_color', 'category_' . $category[0]->term_id );
$cat_id = get_queried_object()->cat_ID;
$post_id = 'category_'.$cat_id;
echo $this_category_color;
echo '"';
echo '">' . $category[0]->cat_name . '</a>' ;
}
?>
</span>
<p><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p>
</li>
<?php endwhile; endif; ?>
<?php wp_reset_query();?>
</ul>
重要ポイント抜粋
<?php
$category = get_the_category();
if ( $category[0] ) {
$this_category_color = get_field( 'フィールド名', 'category_' . $category[0]->term_id );
$cat_id = get_queried_object()->cat_ID;
$post_id = 'category_'.$cat_id;
echo $this_category_color; //←#xxxxxxが出る
}
?>
基本:カテゴリーに作成(設定)したカスタムフィールドを表示する
<?php $cat_id = get_queried_object()->cat_ID; $post_id = 'category_'.$cat_id; ?>
<?php the_field('フィールド名',$post_id); ?>
HOME > wordpress設計術 > ACFでカラーピッカーを使ってカテゴリーごとに色を付け、TOPページのループ内で表示。styleでbackground-colorを変える
wordpress設計術
- WPでSNSシェアボタンを手動でつける・HTML+PHPコード
- category.phpアイキャッチ優先順位
- contactform7 Enter・returunキーで送信させない
- ACFを使用すると通常のカスタムフィールドが消えるので両方表示させる
- wpトピックパス(パンクズ)を作成2
- Yoast SEO でtitleが出ない時にチェックするところ
- wordpressの記事内にショートコードでphpテンプレートを呼び出す
- Contact Form 7でチェックボックスを設置すると見入力必須項目に「入力してください。」が出る
- wordpressカスタム投稿のsingle-カスタム.phpのページナビ(ターム分類内)
- category.php分岐カテゴリーごとにテンプレートを変える(子カテゴリー含む)
- サイドバーの年月アーカイブからカテゴリーを絞った記事一覧をcategory.phpで出力
- サイドバーの年月アーカイブからカテゴリーを絞った記事一覧をarchive.phpで出力
- mw wp formでチェックボックス(1つ)にチェックを入れた時だけ表示・表示されたinputは入力必須
- wp-親テーマのcssを無効にする
- Advanced Custom Fieldsを入れると消えるカスタムフィールドを表示する方法|wordpress
- wpカスタム投稿月別アーカイブが404になる時
- お知らせ等・月ごとに記事をまとめる(jsを使えば開閉可能)サイドナビで使える
- wpカスタムフィールドに入力した投稿ページのIDの記事を呼び出すWP_Query
- CPI UI taxonomy- タームテンプレートのタイトル表示
- wordpressのパンクズ(トピックパス)2024年functions.phpとテンプレートに記載
- Advanced Custom Fieldsのチェックボックス・ラジオボタンの結果にクラス名を付ける
- singleページのページ送り・通常とカスタム投稿(CPI UI)
- ブラウザ幅を判定して、特定のページをリダイレクトするjavascript
- wp固定ページとその子(一部除外)に表示
- wordpresのスラッグ名を取得
- conohaサーバー:EC-CUBE4ディレクトリと並列でwpディレクトリを作成した際のhtaccessの書き方
- 投稿記事のスラッグを自動入力
- qTranslate-XT テンプレート内で言語別に分岐させる方法
- wpカテゴリーごとに年月アーカイブを表示
- single.phpをカテゴリーごとに分岐wordpress
- wpのパンくず(トピックパス)をfunctions.phpで作成
- wordpress固定ページでループとページネーション
- wordpressの検索枠設置と条件検索
- CPIの共用レンタルサーバー「シェアードプラン ACE01」パーマリンク変更時のエラー
- Advanced Custom Fields・値によって分岐する
- 今見ている投稿記事と同カテゴリーの記事を表示
- wpログインしている時としていない時で、表示させる内容を変える
- wpセキュリティ対策まとめ
- 標準装備のカスタムフィールドでショートコードを入力して表示する【wordpress】
- functions.phpにショートコードを登録するwordpress
- single.phpに、投稿ページでチェックした特定のカテゴリーの子カテゴリーに限定して表示
- 特定のカテゴリーとその子の時に表示する
- テンプレートに固定ページの内容を読み込む
- WordPressの記事の前後のページへのリンクを自動で表示する方法(カテゴリー内・カテゴリー混合)
- wp プラグイン無しのカスタムフィールドのテンプレート出力
- the_content()の内容をmore前後で2つに分割して出力できる
- 月別アーカイブと記事一覧
- worpressのパーマリンクを変更すると403エラーになる場合
- contact form7 に前ページの情報を与える
- Advanced Custom Fieldsとslick.jsスライダー
- wordpress・ページの子ページ一覧を出力
- wpのcategory.phpで1ページ目にだけ表示する
- WP-PageNaviの2ページ目以降404を解決
- Custom Post Type UIで、特定のカテゴリー一覧を取得する方法
- WordPressで記事の最初の画像を取得してサムネイルサイズで表示する
- ループ記事を古い順に並べる【wordpress】
- Advanced Custom Fields テキストエリアの改行文字列をリストタグ(li)で囲む【wordpress】
- Advanced Custom Fields の表示【wordpress】
- Custom Post Type UIのテンプレート【wordpress】
- Custom Post Type UIカスタム投稿の表示【wordpress】
- Advanced Custom Fieldsでチェックボックスの値を表示する【wordpress】
- 自分が所属するカテゴリーをリンク無し・有りで表示【wordpress】
- 投稿記事全てのリストをpage.phpに表示【wordpress】
- wp分岐・特定の親固定ページとその子ページの時に表示