web-dev-qa-db-ja.com

Advanced Custom Fields Pluginを使ってdivの背景を動的にカスタマイズする方法

私が取り組んでいる今回のWordPressプロジェクトでは、カスタム投稿タイプ、カスタムフィールドを作成してそれらをテンプレートにリンクすることまではできましたが、解決できない問題が発生したようです（そして私はいつも自然にこれらのタイプの問題に出くわします:)。

私は自分のサイトのさまざまなセクション用にいくつかの異なるヘッダーを作成し、それらをさまざまなテンプレートから呼び出す方法を理解しています。しかし、私は27の異なる近隣のページで使用されるこの1つのヘッダーを持っています、そしてキャッチは各近隣の背景色がカスタマイズされる必要があるということです。

これはPHPで達成できますか？それとも、どのようにしてこれを機能させることができるかについて何か提案がありますか？私は私がjQueryの道を行くことができることに気づいたが、私はそれが動的コンテンツを既に生成しているサイトでどのように機能するのかわからない。

私は実際に27種類のheader.phpファイルを作成することを考えていましたが、私は近隣のページテンプレートにどのように近隣に基づいて正しいヘッダーを呼び出すか、27ページのテンプレートを持つことさえ考えないように指示できませんでしたただ27の異なる背景色をヘッダーに表示するだけでは狂った話のように聞こえましたが、やめていないときは、締め切りが近づいているときにはこれらの種類の解決策はかなり良いように思えます。

ありがとう。

更新コード2013年9月24日

<!--Updated Code 9/24-->


    $args = array(
        'post_type' => 'single_neighborhood'
      );

    $the_query = new WP_Query( $args );

  ?>

  <?php if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

  <div class="container-hdr-neighborhood" style="background-color:<?php the_field( 'background_color' ); ?> ;">

  <?php endwhile; else: ?>

  <?php endif; ?>
advanced-custom-fieldscustom-backgroundcolor-picker
2
MARS

@Pat Jご協力ありがとうございます。

私はすでに取り組んでいた解決策に基づいて問題を考え出しました。

私はすでにカスタム投稿タイプUIプラグインと一緒にAdvanced Custom Fieldsプラグインを使用していました（コードの書き方に慣れていない方には、これははるかに良い方法ですが、これはCPTとカスタムフィールドの素晴らしい紹介です）両方を一緒に使用すること;それは私のアドバイスです）だから私はユーザーがバックエンド管理者のカスタムフィールドを通して入力する画像に基づいて私のdivのカスタム背景画像を呼び出す方法を考え出す必要がありました。

背景のURLを書きやすくするために変数を作成する方法を取りました。

<?php

$bg = get_field( 'bg_img' );

?>

それから私のループを始め、背景色のプロパティ値として変数を含めました。

注：外部スタイルシートを介して追加のバックグラウンドプロパティをすべて追加し（よりクリーンで一貫性のあるimo）、必要な実際のプロパティ値のみをインライン内に含めることをお勧めします。ただし、1つのプロパティのみをターゲットにする場合は、これを実行します。例： "background-image："と "background："のほうがより具体的で、外部スタイルシートから追加する他の値は適用されません。この場合も、他の背景プロパティをインラインで追加できます。「background：url（）no-repeat center cover;」私はちょうどその選択肢が好きではありませんでした。

これがインライン参照です。

<div class="bg-img-default" style="background-image: url(<?=$bg?>); "></div>

"bg-img-default"は、他のすべての背景プロパティを外部に含めるために作成されたクラスです。誰かがこれが駄目だと思っていて、もっと良いやり方で成し遂げることができるならば、私はそれを学ぶのが好きです。

ACFプラグインを使用している場合は、最後に戻り値を "image URL"に設定する必要があります。そうしないと、画像が表示されません。

0
MARS

ヘッダの<div>（または<header>要素）にスタイルを適用してから、 wp_add_inline_style() を使用してインラインスタイルを追加できます。

たとえば、header.phpファイルに次のようなものがあるとします。

<header id="masthead" class="site-header" role="banner">

（ Twenty Twelveのテーマ からクリッピング）

update_post_meta() または何らかのカスタムメタボックスを使用して、近所の色を投稿メタ情報として設定したとしましょう。これでメタテーブルからそれを引き出してインラインスタイルにスローすることができます。

add_action(  'wp_enqueue_scripts', 'wpse115373_header_bg' );
function wpse115373_header_bg() {
    global $post;
    // set this to the handle of one of your stylesheets
    $handle = 'twentytwelve-style';
    // set this to the meta key you've used
    $meta_key = 'neighborhood_color';
    $bg_color = get_post_meta( $post->ID, $meta_key, $single = true );
    $css = "header { background-color: $bg_color; }";
    wp_add_inline_style( $handle, $css ); 
}

参照

のコーデックスページ：

0
Pat J