WordPress의 CSS 배경 이미지
WordPress에서 작업할 때 HTML에서처럼 CSS에서 배경 이미지를 얻을 수 있습니까?이거 해봤는데 안 되네.
background-image: url("<?php bloginfo('template_directory'); ?>/images/parallax_image.jpg ");
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")
}
이 질문에서는 PHP를 사용할 필요가 없습니다.CSS 파일은 이미 템플릿 폴더에 있기 때문에 다음과 같이 이미지를 호출할 수 있습니다.
background-image: url("images/parallax_image.jpg");
따라서 테마에서 이미지를 호출하기 위해 템플릿 경로를 알 필요가 없습니다.
이미지 폴더가 테마 폴더에 있는 경우 다음을 사용할 수 있습니다.
background-image: url("/wp-content/themes/themeNameHere/images/parallax_image.jpg ");
WordPress Media Library에 이미지를 업로드하기만 하면 됩니다.
그 후 CSS에서 업로드한 파일의 경로를 다음과 같이 지정할 수 있습니다.
background-image:url('/wp-content/uploads/2019/12/filename.png');
주의: 업로드된 이미지를 열면 경로가 있습니다.
한 가지 방법은 이 CSS를 PHP 페이지에 추가하는 것입니다.bloginfo()기능.Say in (말하기)index.php, 추가한다...
<style>
.some-element {
background-image: url("<?php bloginfo('template_directory'); ?>/images/parallax_image.jpg ");
}
</style>
또 하나의 방법은 css 파일 위치를 참조 포인트로 사용하여 이미지에 액세스하는 것입니다.예를 들어, .class-name{background-image:url("../images/file-name"); //1레벨 위로 이미지 폴더 background-image:url("../images-directory-02/file-name"); //2레벨 위로 이미지 폴더 background-images-image:url(');/2/2/2/file-name) 등입니다.
언더스코어 기반 테마에 배경 이미지를 추가하는 데 문제가 있었는데 다음 작업을 발견했습니다.
background: url('assets/img/tile.jpg') top left repeat;
처음 시도했습니다.
background: url('/wp-content/themes/underscores/assets/img/tile.jpg');
하지만 난 그게 통하지 않았어.
태그에서 스타일 속성을 사용하고 css를 사용합니다.
<div style="background-image: url("<?php bloginfo('template_directory'); ?>/images/parallax_image.jpg ");">
Your other html here
</div>
이미 많은 사람들이 제안했듯이, .css ext에 php를 사용하지 마십시오. 해석되지 않습니다.
그러나 응답하지 않기 때문에 php만 사용해야 하는 경우에는 스타일시트의 확장자를 .php로 변경할 수 있습니다.
그럼 넌 가질 수 있다.
커스텀 스타일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>
이미지 폴더가 테마 폴더와 상대적인 경우:theme-folder/images그리고 당신의 css는 이 구조 안에 있습니다.theme-folder/css/your-css-file.csscss 내의 폴더 경로를 쉽게 이동할 수 있습니다..custom-element{ background-image: url(../images/name-of-image.png) }
PHP의 CSS입니다..<rel>, 「」를 하고 있는 것만으로,/images/parralax_iamge.jpgsyslog.syslog.
페이지에서 브라우저 도구/인스펙터를 사용하여 대응하는 요소(태그, 클래스 또는 ID)를 찾아 자테마의 스타일시트 또는 테마 옵션의 "customCSS" 필드에 해당 요소에 대한 CSS 규칙을 추가합니다.
php 코드를 .css 파일에 추가할 수 없습니다.단, php를 사용하여 이 작업을 수행하려면 여기를 참조하십시오.
한 것처럼 '어울리다'를 .background-imageCSS.
그러나 다른 답변에서 제시한 URL은 모두 작동하지 않았습니다.
그 이유는 제 모든 이미지가 "미디어" 영역에 저장되었기 때문이라고 생각합니다.
「미디어」영역에 이미지를 보존하고 있는 모든 사용자:
이미지의 URL 을 검색하려면 , 다음의 조작을 실시합니다.
- 사이트의 관리 대시보드를 엽니다.
- "미디어" 영역을 엽니다.
- 사용할 이미지를 클릭합니다.
- URL 필드에서 URL을 복사하고 도메인 이름 뒤에 있는 부분만 복사합니다(예: domain-name.com).
- 합니다.
background-image
도메인 이름이 변경되면 URL이 깨지기 때문에 URL 전체를 사용하는 것은 권장하지 않습니다.
다음은 전체 URL의 예를 제시하겠습니다.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/...도 없이wp-content/....
번째 음 in에서div 결과는 승인된 응답,두 응답에서 할 수 .div를 알 수
<div style="background-image: url('<?= get_the_post_thumbnail_url(); ?>');">
하지 않는 div는 첫 이 두 텍스트 블록으로 입니다."어나나다
get_the_post_thumbnail_url() 함수를 에코해야 합니다.
예를들면
style="background-image: url('<?php echo get_the_post_thumbnail_url();?>
폴더 구조: THEME_FOLDER --> 자산 --> 이미지
등대를 사용하여 최적화 테스트를 할 때 문제가 발생하므로 권장하지 않을 인라인 CSS를 사용하지만 사용할 수 있습니다.
.title{backgroound:url(' /assets/images/title.png'); }또는 테마 CSS에서 사용할 수 있습니다.
배경: url../filength/filength.jpg';
나한테는 통했어
언급URL : https://stackoverflow.com/questions/43852116/css-background-images-in-wordpress
'source' 카테고리의 다른 글
| 게시물의 URL 접두사 WordPress (0) | 2023.03.22 |
|---|---|
| htaccess의 Apache Rewrite Rule - 루트가 끊어졌습니다. (0) | 2023.03.22 |
| local스토리지 vs session스토리지 vs 쿠키 (0) | 2023.03.22 |
| Respect Router v4 루트가 작동하지 않음 (0) | 2023.03.22 |
| JSON-JSON 변압기 (0) | 2023.03.17 |