web-dev-qa-db-ja.com

ページごとに全幅の応答性の高いヘッダー画像を作成する

私はWordpressが初めてです - 現在、数ページ（Home、Artists、History、Videos）のサイトを構築しています。

これらの各ページには、レスポンシブ全角画像を含むカスタムヘッダーが必要です（画像はCSSの背景画像として使用されます）。

このCMSを使いやすくし、コンテンツ編集者が（ページセクションから）ウィジェット領域からヘッダー画像（理想的にはデスクトップとモバイルの2つの画像）を選択してアップロードできるようにしたいです。

どのようにあなたはこれにアプローチしますか？

info：（私は15のテーマを使っています）.

ありがとう

_アップデート_

ページのカスタムフィールド - header_imge - （Field Type - > Image）を作成しました。

それから、タグからbackground-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>

これは今までのところ最も早くて簡単な解決策です。インラインスタイル＆PHPを内側に追加するのはちょっと厄介です。

categoriescustom-fieldpagescsstheme-twenty-fifteen
1
John

Johnこれを実現する方法はたくさんあります。正確に何をしたいのか、そしてhtml/php/cssをどれだけ経験したか（または学習にどのくらいの時間をかけたいか）によって異なります。

これを達成することができるワードプレス上のプラグインがたくさんあります。あなたはそれらのうちのいくつかを試してみたいと思うかもしれません：

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

オプションをウィジェットのカスタマイザではなくバックエンドで変更していますが、そのまま使用したい場合は this をお勧めします。このようなことを達成できる他のプラグインは、Revolution SliderやVisual Composerのようなものですが、カスタマイザを直接使用することもできません。

あなたが本当に image widget ルートに行きたいと決心した場合、私はプラグインディレクトリで評価されたもののほとんどを試してみました、そしてそれらはすべてうまく機能します。ただし、背景画像をサポートしているものがあるかどうかはわかりません。もしそれを見つけたら、それを使って、あなたのバナーを表示するための新しいウィジェット領域を持つカスタムテンプレートを作成してください。

25個のカスタムウィジェット領域とページテンプレートを作成する方法の例： 

<?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');

次に、15個のテーマから page.php を複製し、 "template_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を使用してカスタムウィジェットフィールドを作成することもできます）。

  1. インストール アドバンストカスタムフィールド
  2. あなたのサイトで http://example.com/wp-admin/edit.php?post_type=acf-field-group&page=acf-settings-export にナビゲートして acf-banner-import.json をアップロードしてください。 ]。
  3. アクティブなテーマフォルダに page_banner-header.php を追加します。最後に、新しいページを（ http://example.com/wp-admin/post-new.php?post_type=page ）に追加して、 "Banner Header"という新しいテンプレートを選択します。
  4. 表示されたフィールドを編集してページを公開します。

うまくいけば、ここに何かがあなたのために動作します...あなたはそれをあなたの好みに合わせるためにcssに編集する必要があるでしょう。

更新：

ここでWordpressが25のテーマにカスタムヘッダーの背景（CSS経由）を追加する方法について見てみましょう。

15// inc/custom-header.php＃L141

15// inc/custom-header.php＃L157

それで、もしあなたがそれを編集しようとしているならば、あなたは単に現在の背景画像をコメントアウトするか削除するか、単にcustom-header.phpファイルの同じセクションに追加することによってそれらを拡張するでしょう。

例：

.css-selector {
    background-image: url(<?php header_image(); ?>);
}

あなたのサイトでこれを直接編集するには、あなたのサイト名にあなたのサイト名にあなたのサイト名にあなたのsite.comを変更してください。

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

プラグインがそれほどひどいレビューを持っていない限り正直に言うと、あなたはカスタムヘッダを追加すると主張するそれらのどれかを使って大丈夫であるべきです。 15個のカスタムヘッダープラグインを使用している場合は、ほとんどすべてのカスタムヘッダープラグインが背景画像として追加されます。これは、デフォルトでテーマが機能するためです。

これらを試してみてください。両方ともうまく動くはずです。

カスタムヘッダ拡張

ユニークなヘッダー

更新2：ACF法

これは、高度なカスタムフィールドの最後の更新に対するreplyです。これを単純なページ/投稿テンプレートにするのであれば、最新の更新ではそのmeta_keyコードとWP_Queryコードは必要ありません。

これだけでうまくいくはずです。

<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>';
}
3
Bryan Willis