如何使用高级定制字段插件动态定制div背景？

时间：2013-09-23 作者：MARS

在我第一次参与的WordPress项目中，我已经创建了自定义的帖子类型、自定义字段并将它们链接到模板，但我似乎遇到了一个我不容易解决的问题（而且我总是很自然地遇到这些类型的问题：）。

我已经为我的站点的不同部分创建了一些不同的标题，并了解如何从不同的模板调用它们。然而，我有一个标题，将用于27个不同的社区页面，关键是每个社区的背景颜色需要定制。

这可以通过PHP实现吗？或者有没有人对如何实现这一目标有什么建议？我意识到我可以走jQuery路线，但我不确定在一个已经在生成动态内容的网站上如何工作，并且必须知道它位于哪个社区才能知道显示哪个颜色。

我在考虑实际创建27个不同的标题。php文件，但当我不知道如何告诉邻里页面模板如何基于邻里调用正确的页眉，甚至考虑使用27个页面模板来显示27种不同的页眉背景色时，我觉得很疯狂，听起来像是在胡说八道，但是，嘿，当你是一个noob的时候，当最后期限即将到来时，这些解决方案开始听起来相当不错。

谢谢

更新代码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; ?>

2 个回复

最合适的回答,由SO网友:MARS 整理而成

@Pat J谢谢你的帮助。

我根据我正在使用的解决方案解决了这个问题。

我已经在使用高级自定义字段插件和自定义Post类型UI插件（对于那些不熟悉编写代码的人来说，这更好，但这是对CPT和自定义字段的一个很好的介绍，您需要同时使用这两个插件；这只是我的建议），所以我需要找出如何根据用户的图像为我的div调用自定义背景图像将通过后端管理员上的自定义字段输入。

我采用了创建变量的方法，以使后台url更容易写出：

<?php

$bg = get_field( \'bg_img\' );

?>

然后开始循环，并将变量作为背景色的属性值包含在内。

注意：我发现最好通过外部样式表添加所有额外的背景属性（只是更干净、更一致的imo），并且只在内联中具有我需要的实际属性值。但是，如果只针对一个属性，请执行此操作-例如：“background image:”vs.“background:”，因为它更具体，并且不会应用从外部样式表添加的其他值，因此您可以再次内联添加其他背景属性，例如：“background:url（）无重复中心封面我只是不喜欢那个选项。

以下是内联引用：

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

“bg img default”是我创建的类，用于在外部包含所有其他后台属性。如果有人认为这很奇怪，可以用更好的方式来做，请分享，我很乐意学习。

哦，最后，如果您使用的是ACF插件，您需要将返回值设置为“image URL”，否则它不会显示您的图像。

SO网友:Pat J

可以将样式应用于标题<div> （或<header> 元素），然后使用wp_add_inline_style().

例如，假设您的header.php 文件：

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

（从Twenty Twelve theme.)

假设您使用以下方法将邻居的颜色设置为post meta信息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 ); 
}

参考法典页：

结束

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

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 ); }

小码农CODE

如何使用高级定制字段插件动态定制div背景？

相关推荐

小码农CODE

如何使用高级定制字段插件动态定制div背景？

相关推荐