每页创建全宽响应页眉图像

时间:2015-10-01 作者:John

我是Wordpress的新手,目前正在创建一个只有几个页面(主页、艺术家、历史、视频)的网站。

这些页面中的每一个都需要一个包含响应全幅图像的自定义标题(该图像将用作CSS中的背景图像)。

我想让这个CMS变得友好,并允许内容编辑器选择&;从小部件区域(从页面部分)上载标题图像(理想情况下为2个图像,桌面和移动)。

你会怎么做?

信息:(我用的是215主题)。

谢谢

UPDATE

我为页面创建了一个自定义字段-header\\u imge-(字段类型-->Image)

然后,我从标记中设置背景图像(使用自定义字段的值)。其余部分通过CSS进行管理。

    <?php   
        $args = array(
            \'meta_key\' => \'header_image\'
        );
        $the_query = new WP_Query( $args );
    ?>  

<div class="header-banner" style="background-image:url(<?php the_field(\'header_image\'); ?>)"></div>
这是迄今为止最快速、最简单的解决方案。添加内联样式(&A);虽然PHP内部感觉有点黑客。

1 个回复
最合适的回答,由SO网友:Bryan Willis 整理而成

John有很多方法可以做到这一点,具体取决于你想要什么,以及你对html/php/css有多少经验(或者你想花多少时间学习)。

There are plenty of plugins on wordpress that could achieve this. You might want to just try some of them out:

https://wordpress.org/plugins/search.php?q=custom+header

如果你想要直接从盒子里拿出来的东西this 是一个很好的选项,尽管选项是在后端而不是小部件定制器中更改的。其他也可以实现类似功能的插件有Revolution Slider或Visual Composer,尽管它们也不允许您直接使用自定义程序。

如果你真的想去image widget 路线,我已经在插件目录中尝试了大多数评级的插件,它们都工作得很好。然而,我不确定是否有任何背景图像支持。如果您找到了一个这样的模板,那么就这样做,然后简单地创建一个带有新窗口小部件区域的自定义模板来显示您的横幅。

Example of how to create custom widget area and page template in twenty-fifteen:

<?php

/* include in functions.php */

function register_banner_widget_area() {

    $args = array(
        \'id\'            => \'custom-banner-area\',
        \'name\'          => __( \'After Header - (Custom Banner Area)\', \'my-theme\' ),
        \'description\'   => __( \'This is an area for a custom banner\',  \'my-theme\'  ),
        \'class\'         => \'banner-area\',
        \'before_widget\' => \'<div id="%1$s" class="widget %2$s">\',
        \'after_widget\'  => \'</div>\',
        \'before_title\'  => \'\',
        \'after_title\'   => \'\',
    );

    register_sidebar( $args );

}
add_action(\'widgets_init\', \'register_banner_widget_area\');

function do_custom_banner_area() {
   if ( is_active_sidebar( \'custom-banner-area\' ) ) {
        dynamic_sidebar( \'custom-banner-area\' );
   }
}
add_action(\'custom_banner_widget_area\', \'do_custom_banner_area\');
下一个副本page.php 并将其重命名为“template\\u header-image.php”。在文件中包括您新创建的钩子,它将在内容上方添加对自定义小部件区域的支持(假设这是您想要的)。

 <?php
  /**
   * Template Name: Custom Header Area
   * Description: A Template Which Allows Custom Header Areas
   */

 get_header(); ?>
 <?php do_action( \'custom_banner_widget_area\' ); ?> 
    <div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">
        <?php
        while ( have_posts() ) : the_post();
            get_template_part( \'content\', \'page\' );
            if ( comments_open() || get_comments_number() ) :
                comments_template();
            endif;
        // End the loop.
        endwhile;
        ?>
        </main><!-- .site-main -->
    </div><!-- .content-area -->
<?php get_footer(); ?>
如果您找不到图像小部件,或者您想创建一个真正的“自定义”CMS,并具有简单的可编辑字段,并且对css和html有一定的经验,Advanced Custom Fields 一直以来都是许多人的最爱,可能是自定义字段插件中功能最丰富的。它有大量的文档和大量的支持,以免您轻松地为站点模板创建自定义后端。

下面是我放在一起的一个示例,可以让您在每个页面上选择一个图像(这个示例用于后端编辑,但如果需要,也可以使用ACF创建自定义小部件字段。)

安装Advanced Custom Fieldshttp://example.com/wp-admin/edit.php?post_type=acf-field-group&page=acf-settings-export 和上载acf-banner-import.json. page_banner-header.php 到活动主题文件夹。最后,在添加新页面(http://example.com/wp-admin/post-new.php?post_type=page) 并选择名为“横幅标题”的新模板

<小时>

UPDATE:

看看wordpress是如何将自定义标题背景(通过css)添加到215主题的。

twentyfifteen/inc/custom-header.php#L141

twentyfifteen/inc/custom-header.php#L157

因此,如果要编辑,您只需注释掉/删除当前背景图像,或者通过添加到自定义标题中的同一部分来扩展它们。php文件。

示例:

.css-selector {
    background-image: url(<?php header_image(); ?>);
}
要直接在您的网站上编辑此内容,请更改您的网站。com链接到您的站点名称(您必须登录到wordpress后端),这将直接带您到您为默认的二十五主题编辑标题css的位置。

http://yoursite.com/wp-admin/theme-editor.php?file=inc%2Fcustom-header.php&theme=twentyfifteen&scrollto=2397

老实说,只要插件没有糟糕的评论,使用任何声称添加自定义标题的插件都可以。如果您使用的是215个自定义标题插件,大多数都会将它们添加为背景图像,因为默认情况下主题就是这样工作的。

试试这些。两者都应该工作良好。

Custom Headers Extended

Unique Headers

<人力资源>

Update 2: ACF Method

这是对您上次更新高级自定义字段的回复。如果您将其作为一个简单的页面/帖子模板,那么在最新的更新中不需要该meta\\u键和WP\\u查询代码。

仅此一项就可以:

<div class="header-banner" style="background-image:url(<?php the_field(\'header_image\'); ?>)"></div>
如果您想更清楚地了解它,可以将其包装在If语句中,以便在未选择图像时不会吐出不必要的html:

if(get_field(\'header_image\'))
{
    echo\'<div class="header-banner" style="background-image:url(\' . get_field(\'header_image\') . \')"></div>\';
}

相关推荐

在带有PHP的子主题中包含style.css

在里面https://codex.wordpress.org/Child_Themes 这是包含样式的最佳实践。css在子主题中,必须将下面的代码放入函数中。php的子主题,但将“父样式”替换为可以在函数中找到的父主题的参数。父主题的php。我在我的主题文件中找不到它,那里也没有多少代码。使用@import包含父主题样式表的方法不适用于我,放入文件的css不会在任何浏览器的站点上显示自己。function my_theme_enqueue_styles() { $parent_s