web-dev-qa-db-ja.com

背景サイズを処理する方法：Wordpressの表紙画像？

ここでワードプレスに新しいデザイナー。注目の画像を投稿に貼り付け、投稿単一ページの主人公の画像にします。

通常これを行う方法は、divを作成し、幅を100％に、高さを必要なサイズに設定してから、背景サイズをcoverに設定してCSSの画像URLに設定することです。

だから私はWordpressでこれをやろうとしている方法はこのようなものです：

<section class="hero" style="background: url('<?php echo $hero_image['url'];?> ');" xmlns="http://www.w3.org/1999/html">

インラインスタイルで背景を設定すると、すべてのCSSがオーバーライドされてデフォルトの要素に戻ります。これをより良くするためのアイデアはありますか？できる限り多くのコードを実行する方法を学習しようとしているので、プラグインを使用しないでください。ただし、Advanced Custom FieldsとCustom Post Type UIはすでにインストールされており、それらを広く使用しています。

imagescsscustom-background
2
David A. French

それで、ジャックの答えはうまくいって、そして正しいです、しかし、私は私がすでに持っていたもののためにもっと優雅な解決策も見つけました。背景の代わりにインラインスタイルの背景画像を作りました。

0
David A. French

背景サイズ「cover」をインラインで追加しようとしたことがありますか。

 <section class="hero" style="background: url('<?php echo $hero_image['url'];?> ') cover;" xmlns="http://www.w3.org/1999/html">
0
jay_R_champ

テーマのヘッダにフックしてスタイルを追加することができます。このコードをテーマのfunctions.phpファイルに追加してください。

<?php 
add_action('wp_head','my_hero_image');
function my_hero_image() {
    if( is_single() ) { ?>
        section.hero {
            background-image: <?php the_post_thumbnail_url('full'); ?>;
            background-size: cover;
        } <?php 
    }
}
?>

これにより、単一の投稿のテーマのヘッダーに次のスタイルが追加されます。

<style>
    section.hero {
        background-image: YOUR IMAGE URL;
        background-size: cover
    }
</style>

これでうまくいくでしょう。

0
Jack Johansson