WordPress의 반응형 동적 배경 이미지

웹 사이트에서 이미지를 표시하는 가장 일반적인 방법은 HTML 태그<img> 및 <picture>를 사용하거나 CSS 속성background-image을 사용하는 것입니다. 브라우저 뷰포트를 기준으로 attributes in the HTML tags to show different images이 있습니다. 또는 배경 이미지와 함께 media queries to show different images을 사용할 수 있습니다. 기사The CSS background-image property as an anti-pattern가 매우 흥미로울 수 있습니다. 어쨌든 background-image를 사용하는 경우 이 문서에서는 WordPress에서 반응형 동적 배경 이미지를 사용하는 방법을 설명합니다.

요즘 한 가지 트렌드는 방문자의 관심을 끌기 위해 웹 사이트의 기사 및 뉴스 상단에 눈길을 끄는 이미지를 사용하는 것입니다. 웹 사이트에서 이미지를 다운로드하는 것은 속도 로딩의 주요 요인 중 하나입니다. 큰 이미지는 다운로드할 데이터의 양을 늘립니다. 웹 사이트 트래픽의 대부분은 모바일 장치를 통해 이루어집니다. 이러한 이미지의 로딩을 최적화하는 것이 중요합니다.

WordPress에는 대표 이미지와 기사를 연결하는 필드featured image가 있습니다. 일부 웹사이트는 기사 헤더에 이 이미지를 사용합니다. 다음 솔루션은 이미지가 추천 이미지 필드가 아니라 기사의 사용자 정의 필드에 있는 경우에도 작동합니다.

1. CSS 중단점 정의

CSS 중단점은 콘텐츠가 특정 방식으로 응답하는 기기 화면 너비의 범위를 정의합니다. 예를 들어, 프레임워크Twitter Bootstrap defines 4 breakpoints and 5 ranges: 특소형, 소형, 중형, 대형 및 특대형.

매우 작은 화면: <576px

작은 화면: ≥576px

중간 화면: ≥768px

대형 화면: ≥992px

초대형 화면: ≥1200px

2. 각 화면 너비 범위에 대한 이미지 크기 등록

CSS 중단점에 의해 정의된 각 화면 너비 범위는 범위에서 이미지를 표시하기 위한 치수를 정의해야 합니다. Twitter 부트스트랩의 예를 계속 살펴보겠습니다. containers을 사용하고 컨테이너의 전체 너비를 사용하여 이미지를 표시한 다음 다음 치수(WxH)를 정의할 수 있습니다.

초소형 화면의 컨테이너용 576×350

작은 화면의 컨테이너용 540×350

중간 화면의 컨테이너용 720×350

대형 화면의 컨테이너용 960×400

초대형 화면의 컨테이너용 1140×400

WordPress 기능add_image_size은 이미지 크기를 등록합니다. WordPress는 이미지가 업로드될 때 등록된 각 치수에 대해 잘린 버전의 이미지를 생성합니다.

// register image sizes
add_image_size('header-image-xs', 576, 350);
add_image_size('header-image-sm', 540, 350);
add_image_size('header-image-md', 720, 350);
add_image_size('header-image-lg', 960, 400);
add_image_size('header-image-xl', 1140, 400);

3. 테마 템플릿에 이미지 포함

WordPress 테마에는 다양한 종류의 페이지에 대해 서로 다른 템플릿이 있습니다. 이 예에서는 기사의 이미지를 표시합니다. 따라서 이미지를 포함하도록 single-post.php 템플릿을 편집합니다.

// ... content before the background image

<div class="site-content">
  <div class="header-image-container">
    // ... some content over the background image
  </div>
</div>

// ... content after the background image

4. 미디어 쿼리 포함

background-image를 사용하여 이미지를 표시할 때 반응형 방식으로 이미지를 표시하려면 CSS 미디어 쿼리를 사용해야 합니다. WordPress 후크wp_head를 사용하여 HTML 문서의 헤드에 CSS 코드를 포함할 수 있습니다. 후크에 연결된 함수에서 기사의 추천 이미지를 가져오고 미디어 쿼리를 빌드합니다. 이 시점에서 우리는 HTML structure을 정의했으며 background-image가 사용되는 요소를 가리키는 데 필요한 CSS 선택기를 알고 있습니다.

// print the background CSS rules
add_action('wp_head', function(){
  // link breakpoints and image sizes
  $images = [
    '0' => 'header-image-xs',
    '576' => 'header-image-sm',
    '768' => 'header-image-md',
    '992' => 'header-image-lg',
    '1200' => 'header-image-xl',
  ];

  // check if the post/page has a featured image
  if (has_post_thumbnail()) {
    // get the thumbnail images
    array_walk($images, function(&$item) {
        $item = get_the_post_thumbnail_url(get_the_ID(), $item);
    });
    ?>
    <style>
    <?php foreach($args['images'] as $breakpoint => $image_url): ?>
      <?php if ('0' == $breakpoint): ?>
      .site-content .header-image-container {
        background-image: url("<?= $image_url ?>");
      }
      <?php else; ?>
      @media (min-width: <?= $breakpoint ?>px) {
        .site-content .header-image-container {
          background-image: url("<?= $image_url ?>");
        }
      }
      <?php endif; ?>
    <?php endforeach; ?>
    </style>
    <?php
  }
});

그리고 그게 다야. 이 접근 방식의 데모here를 찾을 수 있습니다.

WordPress의 반응형 동적 배경 이미지 데모

라이브러리wp-responsive-background-image가 유용할 수 있습니다. 배경 규칙을 쉽게 추가할 수 있는 몇 가지 방법이 있는 인터페이스를 제공하는 이 라이브러리를 만들었습니다. WordPress에 반응형 동적 배경 이미지를 삽입하기 위해 앞서 언급한 접근 방식을 사용합니다.

게시물 Responsive dynamic background images in WordPress이 Carlos Guzman에 처음 나타났습니다.