web-dev-qa-db-ja.com

インライン化せずに、ページの特集画像をCSSの背景として使用することは可能ですか。

それで、私はWordPressに全く慣れておらず、静的サイトをWPテーマに "変換"しようとしています。

注目の画像をdivの背景として使用したいページがあります。

私は最善の方法は何だろうか、またはそれを行うための条約をいただきました？

その画像が特色であるかどうかは関係ありませんが、ダッシュボードから画像を変更できるようにしたいだけです。

可能であればインライン展開を恥ずかしがりますが、それが唯一の選択肢でしょうか。

phptheme-developmenttemplatescsswp-enqueue-style
2
lastnoob

動的に生成された値からスタイルシートを作成する方法は2つあります。最初のオプションは、インラインスタイルシートです。

<div id="hero" 
  style="background-image: url(<?php // TODO retrieve image here. ?>); ">
</div>

そして2番目のオプションは、内部スタイルシートを使用することです。スタイルシートを内部的に使用するには、divにIDまたはクラスを割り当てることができる識別子を付ける必要があります。

<div id="hero"></div>

内部スタイルシート：

<style>
    #hero {
       background-image: url('<?php // TODO retrieve image here. ?>');
       background-position: 50% 50%;
       background-size: cover;
    }
</style>

データベースから画像の値を取得して割り当てるために外部スタイルシートを使用することは不可能です。 divの残りのスタイルには、まだ外部スタイルシートを使うことができます。つまり#heroで、画像を取得してインライン/内部スタイルシートを介して割り当てることができます。

1
Den Isahac

明らかに、ページごとに異なる背景画像が必要なので、静的ファイルにCSSを含めることはできません。その場で生成する必要があります。

最も簡単な方法は、テンプレートファイルの<style>タグの間にCSSを含めることです。他の答えはこれを行う方法を示しています。

最も 'WordPressy'の方法は異なるでしょう。つまり、これをfunctions.phpファイルで仮想スタイルシートとして wp_add_inline_style を使用して処理するということです。基本的に、これは既存のcssファイルにいくつかのステートメントを追加していることを意味します。あなたのスタイルはそれが属しているページの先頭に置かれます、ボディの代わりに（これはうまくいきますが、意味的には間違っています）。

そのため、あなたの関数ファイルには、例えば以下のようになります。

add_action ('wp_enqueue_style','wpse271934_add_styles');
function wpse271934_add_styles () {
  global $post;
  $extra_styling = '';
  if (is_page() || is_single ()) {
    $image = get_the_post_thumbnail ($post->ID,'large');
    if (!empty($image))
      $extra_styling = '.post, .page {background:url(' . $image . ');}';
    }
  // assuming style.css has the handle 'main_style' in your theme
  wp_add_inline_style ('main_style', $extra_styling);
  }

上記の例（私はテストしていないのでバグに注意してください）では、背景画像を単一のページと投稿に追加しています。しかし、もっと可能性があります。たとえば 404 pagesをテストしてその背景画像を定義する場合、背景がない場合は特定の背景を挿入し、カテゴリページごとに異なることを行うなどです。それで、最も正しいアプローチであることは別として、これはあなたにあなたのバックグラウンドをコントロールするための最も可能性を与えます。

1
cjbj

これはページ内スタイルの例です。 ：）

<?php get_header();          


     <div id="primary" class="content-area">
       <main id="main" class="site-main" role="main">

          <?php
          // Start the loop.
          while ( have_posts() ) : the_post();

           if ( has_post_thumbnail( $_post->ID ) ) { ?>

           <style>
            .featureimg{
            /* dynamic img url */
            background: url(<?= get_the_post_thumbnail( $_post->ID,'large' );?>);

            /* full width */
            width:100%;

            /* half height */
            height: 50%; 

            /* Center and scale the image nicely */
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            }
          </style>

              <div class="featureimg"></div>
              <div class="title"><?php the_title();?></div>
              <div class="content"><?php the_content();?></div>


            <?php           
            // If comments are open or we have at least one comment, load up the comment template.
              if ( comments_open() || get_comments_number() ) :
                comments_template();
              endif;

            // End the loop.
            endwhile;
            ?>

         </main><!-- .site-main -->
       </div><!-- .content-area -->

    <?php get_footer(); ?>
0
samjco