사용자정의 헤더의 이미지를 랜덤으로 표시하기

사용자정의 기능을 이용해서 복수의 이미지를 업로드하면 헤더 이미지를 랜덤으로 표시할 수 있다.

  1. 헤더 이미지 표시하기
    앞에서 아래와 같이 사용자정의 헤더의 기능을 활성화해서 function.php의 define(‘HEADER_IMAGE’,~)로 지정한 이미지를 기본 헤더 이미지로 표시한다. 여기에서는 header_red.jpg를 표시하고 있다.
    function.php

    //사용자정의 헤더
    add_custom_image_header(”,’admin_header_style’);
    function admin_header_style() {}

    define(‘NO_HEADER_TEXT’,true);
    define(‘HEADER_IMAGE’,’%s/header_red.jpg’);
    define(‘HEADER_IMAGE_WIDTH’,900);
    define(‘HEADER_IMAGE_HEIGHT’,228);

  2. 헤더 이미지 변경하기
    헤더 이미지를 변경하기 위해서는 [외모]-[헤더] ‘이미지 선택하기’ 항목에서 이미지를 업로드한다. 이미지가 업로드되면 ‘업로드된 이미지들’에 표시되고, 선택한 상태가 된다. [변경 사항 저장] 버튼을 클릭해서 저장하면 헤더 이미지가 업로드한 이미지로 변경된다.
  3. 복수의 헤더 이미지 업로드하기
    여러 장의 이미지를 업로드한다. 워드프레스 3.2 버전부터는 이전에 올렸던 이미지도 없어지지 않고 ‘업로드된 이미지들’ 항목에 표시되어 선택할 수 있는 상태가 된다.
  4. 헤더 이미지를 랜덤으로 표시하기
    2장 이상의 이미지를 업로드하면 ‘업로드된 이미지들’ 항목에 ‘랜덤: 각 페이지에 다른 이미지 보여주기’를 선택하고 [변경 사항 저장] 버튼을 클릭해서 설정을 저장한다.
    ㅍ시를 확인하면 페이지를 로딩할 때마다 헤더 이미지가 랜덤으로 표시된다. 같은 이미지가 반복되면 표시되는 경우도 있기 때문에 브라우저를 여러 차례 갱신해서 확인하기 바란다. 또한 랜덤으로 표시되는 이미지는 ‘업로드된 이미지들’에 등록된 이미지만 해당되며, 기본 이미지는 포함되지 않는다.
  5. 기본 헤더 이미지도 랜덤 표시에 포함하기
    기본 이미지도 포함하고 싶은 경우 이 이미지도 ‘이미지 선택하기’ 항목으로 업로드하면 선택할 수 있는 이미지 가운데 하나로 등록된다.

출처: 바꾸면서 배우는 워드프레스 디자인

“사용자정의 헤더의 이미지를 랜덤으로 표시하기”에 대한 한개의 댓글

답글 남기기