Как динамически настроить фон div с помощью плагина Advanced Custom Fields?

Question

Как динамически настроить фон div с помощью плагина Advanced Custom Fields?

24 сент. 2013 г., 00:07:48

Просмотры: 13.8K

Голосов: 2

Я уже разобрался с созданием пользовательских типов записей, полей и их привязкой к шаблонам в моем первом проекте на WordPress, но столкнулся с проблемой, которую не могу легко решить (а такие проблемы у меня возникают постоянно:).

Я создал несколько разных заголовков для разных разделов сайта и понимаю, как их вызывать из разных шаблонов. Однако у меня есть один заголовок, который будет использоваться на 27 страницах районов, и особенность в том, что фон для каждого района должен быть уникальным.

Можно ли это реализовать с помощью PHP? Или у кого-то есть предложения, как это можно сделать? Я понимаю, что можно пойти по пути jQuery, но не уверен, как это будет работать на сайте, который уже генерирует динамический контент, и как определять, для какого района нужно отображать какой цвет.

Я думал о создании 27 разных файлов header.php, но потом понял, что это безумие, особенно когда не мог понять, как сказать шаблону страницы района, какой заголовок вызывать, и даже мысль о 27 шаблонах страниц только для отображения разных цветов фона заголовка казалась сумасшедшей, но когда ты новичок, такие решения начинают казаться вполне приемлемыми, особенно когда сроки поджимают.

Спасибо.

ОБНОВЛЕННЫЙ КОД 24.09.2013

<!--Обновленный код 24.09-->


    $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; ?>

MARS

163

расширенные произвольные поля пользовательский фон выбор-цвета

Все ответы на вопрос

Вы можете применить стиль к заголовку <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;
    // укажите здесь хендл одной из ваших таблиц стилей
    $handle = 'twentytwelve-style';
    // укажите здесь мета-ключ, который вы использовали
    $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 ); 
}

Справочные материалы

Страницы Codex для:

Pat J

12.3K

24 сент. 2013 г. 00:32:37

Комментарии

спасибо за ответ, я просто не уверен, куда вставить функцию — в файл functions.php или functions.wp-styles.php внутри папки wp-includes. Также, как вы думаете, может ли это работать с плагином Advanced Custom Fields, где я могу создать пользовательское поле Color picker и использовать тег описания (в моем случае 'background_color'), чтобы добавить шаблонный тег the_field() в этот пользовательский файл заголовка, а затем написать какой-то $args для запроса, который будет выбирать цвет на основе таксономии? Это все, что я пока понимаю. Спасибо.

MARS

24 сент. 2013 г. 16:35:46

Можно ли вообще выполнять запросы на уровне заголовка или это глупая идея? В идеале я хотел бы иметь возможность создавать несколько версий этого CPT и чтобы заголовок выбирал цвет на основе таксономии — возможно ли такое вообще?

MARS

24 сент. 2013 г. 16:36:32

Отвечая на ваш первый вопрос: добавьте это в functions.php вашей темы или создайте плагин. Не помещайте код в директорию wp-includes — это ядро WordPress, и ваши изменения могут быть перезаписаны при обновлении. (Я никогда не использовал ACF, так что не могу ничего сказать по этому поводу).

Pat J

24 сент. 2013 г. 16:41:08

На ваш второй вопрос: я не уверен, что вы имеете в виду под "можно ли выполнять запросы на уровне заголовка". Хук действия wp_enqueue_scripts выполнит действие, когда таблицы стилей и скрипты будут поставлены в очередь. Также вы должны иметь возможность вызывать цвет на основе таксономии: вам нужно использовать что-то вроде wp_get_object_terms(), если вы используете пользовательские таксономии с вашими CPT.

Pat J

24 сент. 2013 г. 16:45:12

Под запросом я имел в виду запуск цикла в заголовке, что, как я только что обнаружил, возможно. Должен сказать, ваши знания по теме впечатляют, мои — не очень, так что я все еще работаю с того ракурса, который могу понять, и хотя я попытаюсь разобраться в вашем решении, это займет у меня больше времени. Однако, если вы будете так любезны взглянуть на мой обновленный код выше, как вы думаете, могу ли я использовать метод wp_get_object_terms(), передать ему аргумент и включить в этот аргумент массив со всеми различными таксономиями? Вот что меня смущает — я понимаю, как назначать таксономии, но не понимаю, как динамически их вызывать?

MARS

24 сент. 2013 г. 17:05:37

Показать остальные 2 комментариев

MARS 163 · Accepted Answer · 2013-09-26T21:59:05Z

@Pat J спасибо за вашу помощь.

Я разобрался с проблемой на основе решения, над которым уже работал.

Я уже использовал плагин Advanced Custom Fields вместе с плагином Custom Post Type UI (для тех, кто не знаком с написанием кода вручную, что, кстати, гораздо лучше, но это хорошее введение в CPT и пользовательские поля, и вам нужно будет использовать оба плагина вместе; это просто мой совет), поэтому мне нужно было понять, как вызвать пользовательское фоновое изображение для моего div на основе изображения, которое пользователь вводит через пользовательское поле в админке.

Я выбрал путь создания переменной для упрощения записи URL фона:

<?php

$bg = get_field( 'bg_img' );

?>

Затем я начал цикл и включил переменную в качестве значения свойства для фонового изображения.

ПРИМЕЧАНИЕ: Я обнаружил, что лучше добавить все дополнительные свойства фона через внешнюю таблицу стилей (просто чище и более последовательно, на мой взгляд) и оставить только само значение свойства, которое мне нужно, встроенным. Однако если вы собираетесь нацелиться только на одно свойство, делайте так — например, "background-image:" вместо "background:", так как это более конкретно и не применит другие значения, которые вы добавляете из внешней таблицы стилей. Опять же, вы можете добавить другие свойства фона встроенно, например: "background: url() no-repeat center cover;", но мне просто не понравился этот вариант.

Вот встроенная ссылка:

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

Класс "bg-img-default" — это класс, который я создал для включения всех других свойств фона во внешней таблице стилей. Если кто-то считает, что это не лучший вариант и можно сделать лучше, пожалуйста, поделитесь, я бы хотел узнать.

И последнее: если вы используете плагин ACF, вам нужно установить возвращаемое значение как "URL изображения", иначе ваше изображение не будет отображаться.