web-dev-qa-db-ja.com

WordPress=のCSS背景画像

WordPressで作業するときにHTMLで通常行うように、CSSで背景画像を取得することは可能ですか？これを試しましたが、うまくいきません。

background-image: url("<?php bloginfo('template_directory'); ?>/images/parallax_image.jpg ");
phpcsswordpresswordpress-theming
12
Reece

PHPコードは.cssファイルで実行できませんが、次のようなインラインスタイルを使用できます。

<div style="background-image: url("<?php //url ?>");">

または

<style>
  .class-name {
    background-image: url("<?php //url ?>");
  }
</style>

上記は、動的画像パスのカスタムフィールドを操作するときに役立ちます。

画像がテーマディレクトリにある場合、PHPは不要です。画像フォルダはテーマフォルダ/theme-name/imagesの直下にあり、スタイルシートは/theme-name/style.css、次のようにcssファイルに背景画像を追加するだけです。

.class-name {
  background-image: url("images/file.jpg")
}
20
Stickers

この質問ではPHPを使用する必要はありません。CSSファイルは既にテンプレートフォルダにあるため、次のように画像を呼び出すことができます。

background-image: url("images/parallax_image.jpg");

したがって、テーマから画像を呼び出すためにテンプレートパスを知る必要はありません。

6
Alex

画像フォルダがテーマフォルダにある場合は、次を使用できます。

background-image: url("/wp-content/themes/themeNameHere/images/parallax_image.jpg ");
4
mattD

別の方法は、CSSファイルの場所を参照ポイントとして使用して画像にアクセスすることです。 .class-name {background-image：url（ "../ images/file-name"）; // 1レベル上に移動してから、画像フォルダbackground-image：url（ "../../ images-directory-02/images/file-name"）; //レベルを2つ上げ、次に}の2つのフォルダ

1
Arlan T

タグでスタイル属性を使用し、cssを使用します。

<div style="background-image: url("<?php bloginfo('template_directory'); ?>/images/parallax_image.jpg ");">
Your other html here
</div>
1
Sourov Roy Chowdhury

私はアンダースコアベースのテーマに背景画像を追加するときにこの問題を抱えていましたが、これがうまくいくことがわかりました：

background: url('assets/img/tile.jpg') top left repeat;


私が最初に試した：

background: url('/wp-content/themes/underscores/assets/img/tile.jpg');

しかし、それは私にはうまくいきませんでした。

1
SpyrosKo

簡単な答えは、CSSファイルでPHPをレンダリングできないことです。<rel>タグは正しくセットアップされ、/images/parralax_iamge.jpgパート。

0
Donny Bridgen

Result

最初のdivには承認された応答の結果が表示され、2番目のdivには結果が表示されます

<div style="background-image: url('<?= get_the_post_thumbnail_url(); ?>');">

最初のdivで機能しないのは、パーサーがテキストの最初のブロックが2番目の"が発生します。

0
bem22

ページ内のブラウザーツール/インスペクターで対応する要素（タグ、クラス、またはID）を見つけ、その要素のCSSルールを、子テーマのスタイルシートまたはテーマオプションの「customCSS」フィールドに追加します。

0
Johannes

多くの人がすでに示唆しているように、.css extでphpを使用しないでください。解釈されません。

ただし、応答しないとしかわからない何らかの理由でphpを本当に使用する必要がある場合は、スタイルシートの拡張子を.phpに変更できます。

その後、あなたは持つことができます

customestyles.php

<?php
    header("Content-type: text/css; charset: UTF-8");
   $sectionImage = bloginfo('template_directory')."/images/parallax_image.jpg";

?>
<style type="text/css">

    .selector{

        background-image: url(<?php echo "$sectionImage";?>);
    }
</style>
0
Masivuye Cokile

他の人が示唆しているように、background-image CSSプロパティを設定するだけでこれを行うことができます。

しかし、他の回答が示唆するURLはどれも私にとってはうまくいきませんでした。

その理由は、すべての画像が「メディア」領域に保存されたためだと思います。

「メディア」領域に画像を保存しているすべての人：

画像のURLを見つけるには、次のことができます。

  1. サイトの管理ダッシュボードを開きます
  2. 「メディア」エリアを開きます
  3. 使用する画像をクリックします
  4. URLフィールドからURLをコピーしますが、ドメイン名の後の部分のみ（例：domain-name.com）
  5. これをbackground-imageプロパティのURLとして使用します

ドメイン名を変更するとURLが破損するため、URL全体を使用することはお勧めしません（ドメイン名を削除せずにwithoutを使用します）。

以下は、私のfullURLの例です：https://example.com/wp-content/uploads/2018/06/<Name of the Image>.jpegですが、/wp-content/uploads/2018/06/<Name of the Image>.jpeg部分のみを使用しました。

最終的に、私のCSSプロパティは次のようになりました。

background-image: url("/wp-content/uploads/2018/06/<Name of the Image>.jpeg");

サイドノートとして、URLは最初のスラッシュ/wp-content/...で動作し、1つのwp-content/...なしで動作しました。

0
Fearnbuster

phpコードを.cssファイルに追加することはできません。しかし、PHPを使用してこれを行いたい場合は、 this を参照してください。

0
Awais Khan