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 Fields在您的网站上导航到http://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) 并选择名为“横幅标题”的新模板现在只需编辑显示的字段并发布页面希望这里有些东西对你有用。。。很明显,您可能需要编辑到css以根据您的喜好设置样式。
<小时>
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>\';
}