워드프레스 함수로 자바스크립트 변수 데이터 생성

위의 그림은 완성 예제에서 본 둘러보기 페이지의 이미지 포스트 아카이브 일부입니다. 이미지에서 첫 번째 사진은 마우스를 올렸을 때 나타나는 정보를 함께 나타낸 것입니다. 또, 그림에서 각각의 사진은 하나의 이미지 포스트 단위로 워드프레스 루프에 의해 여러 포스트를 출력한 것입니다.

그림을 보면 각 줄의 사진은 세로 사이즈가 모두 같고, 가로와 세로 사이즈 비율을 유지하고 있습니다. 그림으로 알 수는 없지만, 콘텐츠 영역에 꽉 차도록 사진이 출력되어 사진이 5개인 줄과 6개인 줄이 있습니다. 세로 사이즈보다 가로 사이즈가 작은 사진이 존재한다면 각 줄에 출력되는 개수는 자동으로 조정되어 그림과 다른 개수로 출력될 것입니다.

그림의 출력 형태는 예제 과정 초기에 안내한 바 있는 Pixabay Goodies 중 하나인 ‘Fleximage’ 자바스크립트 소스를 사용한 결과입니다. 세로 나열 형태가 아닌 특정 높이 기준으로 각 줄의 사진 크기가 조정되어 콘텐츠 영역에 꽉 차도록 자동으로 출력됩니다.

이번 장에서는 아카이브 페이지에 사용할 루프 파일을 정의하고, 자바스크립트 코드에 사용할 변수 데이터를 PHP의 워드프레스에서 생성하고 조건으로 사용하여 위의 그림과 같은 아카이브 이미지 포스트 출력을 구성합니다. 과정을 통해 이해를 더하기 바랍니다. 우선, 이번 장에서 변경할 아래의 파일을 미리 편집기로 모두 엽니다.

index.php
archive.php
search.php
template-parts/pic/pic-archive.php
inc/enqueue-script.php
assets/js/pics.js

아카이브 루프 파일

현재 예제 단계에서 둘러보기(index.php, is_home) 페이지와 아카이브(archive.php, is_archive) 페이지는 다음 목록 첫 번째 파일을 루프 파일로 사용하고 있으며, 검색 결과(search.php, is_search) 페이지는 목록의 두 번째 파일을 루프 파일로 사용하고 있습니다.

template-parts/post/content.php
template-parts/search/content-search.php

첫 번째 content.php 파일은 나중에 post 타입의 루프 파일로 사용할 것이며, 두 번째 목록의 파일은 사용하지 않으므로 이번 과정에서 삭제할 것입니다.

미리 알리는 것으로, 예제는 attachment 포스트 타입 외의 포스트는 검색 결과에 반영하지 않습니다. 타입 post의 포스트는 예제의 구성 흐름을 위한 하나의 요소로 다루므로 검색 결과에 추가하지 않는데, 실 운영 사이트에서는 예제의 post 타입과 같은 성격의 포스트를 별도의 서브 도메인 사이트로 구성하여 제공하는 것이 운영 흐름에 도움이 될 것으로 생각합니다.

예제에서 둘러보기, 아카이브, 검색 결과 페이지는 모두 ‘pic-archive.php’ 파일을 루프 파일로 사용하며, 나중에 구성할 프런트 페이지에도 이 파일을 사용하여 이미지 포스트를 출력합니다. 먼저, 해당 파일을 루프 파일로 사용하도록 열린 파일을 편집합니다. 다음 순서로 진행하세요.

‘index.php’, ‘archive.php’ 파일에서 다음 코드 1번 줄을 찾아 4번 줄로 변경하고 저장합니다.
‘search.php’ 파일에서 다음 코드 2번 줄을 찾아 4번 줄로 변경하고 저장합니다.

get_template_part( 'template-parts/post/content', get_post_format() ); // index.php, archive.php
get_template_part( 'template-parts/search/content', 'search' ); // search.php

get_template_part( 'template-parts/pic/pic', 'archive' );

사이트에서 둘러보기 및 관련 아카이브 페이지를 확인하면 ‘이미지 루프’ 글자만 설정 개수만큼 출력되는 것을 볼 수 있습니다. ‘pic-archive.php’ 파일의 다음 코드에 의한 올바른 결과입니다.

<?php
/* 이미지 아카이브 루프 파일 */

echo '이미지 루프';

계속해서 다음 안내에 따라 진행합니다.

변경한 ‘index.php’, ‘archive.php’, ‘search.php’ 파일에서 다음 코드 1번 줄에서 5번 줄을 8번 줄에서 16번 줄로 대체하고 저장합니다.
저장한 ‘index.php’, ‘archive.php’, ‘search.php’ 파일은 편집기에서 닫아도 됩니다.

while ( have_posts() ) : the_post();

    get_template_part( 'template-parts/pic/pic', 'archive' );

endwhile;

// 아래 코드로 변경
echo '<div class="flex-images">';

    while ( have_posts() ) : the_post();

        get_template_part( 'template-parts/pic/pic', 'archive' );

    endwhile;

echo '</div>';

8번 줄과 16번 줄에 추가한 코드는 Fleximage 출력을 위해 미리 추가한 것으로 해당 소스의 기본 안내에 충실히 따른 것입니다. 이번 장의 결과를 보고 가늠하기 바랍니다. 사이트에서 관련 페이지를 확인하면 이전의 결과와 같을 것입니다.

pic-archive.php

이제 루프 파일을 편집합니다. 우선, 예제에서는 이미지 포스트 아카이브에 관련한 모든 페이지에 ‘medium’ 이미지 사이즈를 사용합니다. 사이트 구성에 적절한 사이즈를 필자가 미리 정한 것이며, 특정 기준은 아닙니다.

Fleximage 출력 유형의 이미지 포스트 아카이브는 Fleximage의 기본 안내와 워드프레스 루프 파일을 적절히 응용하면 쉽게 구성할 수 있는데, 다음은 예제에서 구성할 Fleximage와 루프 파일의 기본 마크업입니다.

<div class="flex-images">
    <article id="post-포스트ID">
        <div class="item" data-w="가로사이즈" data-h="세로사이즈">
            // 이미지 (Lazy Load)
        </div>
            // 이미지 포스트 정보 (다운로드 및 추천수, 포스트 이름)
    </article>
</div>

1, 3, 5, 8번 줄의 Fleximage 마크업에 2, 7번 줄의 일반적인 워드프레스 루프 파일 마크업을 추가한 것이며, 1번과 8번 줄은 테마의 index.php, archive.php, search.php 파일에 조금 전 미리 추가하였습니다. 1번 줄의 ‘flex-images’ CSS 클래스는 테마의 ‘assets/css/add-style.css’ 파일에 미리 정의하여 제공한 것이며, CSS에 관한 내용은 별도 안내하지 않습니다.

2번 줄에서 7번 줄이 이번 장에서 처리할 부분으로, 3번 줄은 ‘medium’ 이미지 사이즈의 가로와 세로 사이즈 값을 대입합니다. 4번 줄은 이미지를 출력하는 코드를 추가하는데, 이미지 중심의 웹사이트에 보통 필요한 트래픽 절감 대책의 기본을 적용하기 위해 ‘Lazy Load’ 기능을 적용합니다.

6번 줄은 아카이브 페이지에서 하나의 이미지에 마우스를 올렸을 때 해당 포스트의 특정 정보를 보여주는 것으로, ‘다운로드 및 추천 수’, ‘포스트 제목’을 출력합니다. 다운로드와 추천 수는 이미지 포스트의 메타 데이터를 가져오므로 쉽게 구성할 수 있습니다.

이와 같은 구성 내용을 기준으로 앞의 코드 2번 줄에서 7번 줄을 사용할 변수와 함께 모두 나타내면 다음과 같습니다. 변수는 정의하지 않았지만, 사용할 변수를 그대로 포함한 것이며, 단순한 PHP 출력 방식으로 처리하였습니다.

echo '<article id="post-' . $attach_id . '">';
    echo '<div class="item" data-w="' . $_w . '" data-h="' . $_h . '">';
        echo '<a href="' . esc_url( $posturl ) . '">';
            echo '<img title="' . $alt . '" alt="' . esc_attr( $postname ) . '" class="lazy" src="' . esc_url( $blankimg ) . '" data-original="' . esc_url( $imgurl ) . '">'; // Lazy loading.
        echo '</a>';
        echo '<div class="hover_info">';
            echo '<div class="dl_count">';
                echo '<span class="dc">' . $down_count . '</span>';
                echo '<span class="lc">' . $like_count . '</span>';
            echo '</div>';
            echo '<span class="iname">' . $postname . '</span>';
        echo '</div>';
    echo '</div>';
echo '</article>';

위의 코드에 있는 변수의 데이터는 ‘포스트 ID’ 기준으로 모두 쉽게 구할 수 있습니다. 다음 코드를 확인하세요.

$attach_id = get_the_ID(); // 이미지 포스트 ID
$postname = get_the_title(); // 이미지 포스트(첨부페이지) 제목
$posturl = get_permalink( $attach_id ); // 싱글 이미지 포스트 URL
$image_size = 'medium'; // 루프에 사용할 이미지 사이즈 명칭
$imgurls = wp_get_attachment_image_src( $attach_id, $image_size ); // medium 사이즈
$imgurl = $imgurls[0]; // URL
$_w = $imgurls[1]; // 가로 사이즈
$_h = $imgurls[2]; // 세로 사이즈
$alt = trim( strip_tags( get_post_meta( $attach_id, '_wp_attachment_image_alt', true ) ) ); // alt 메타 데이터
$blankimg = get_template_directory_uri() . '/assets/images/blank.gif'; // Lazy Load
$dc = get_post_meta( $attach_id, 'download_count', true ); // 다운로드 수
$lc = get_post_meta( $attach_id, 'simplefavorites_count', true ); // 추천 수
( $dc ) ? $down_count = $dc : $down_count = 0; // 값이 없을 때 '0'
( $lc ) ? $like_count = $lc : $like_count = 0; // 값이 없을 때 '0'

3번 줄 get_permalink 함수는 해당 포스트 ID의 URL을 구하는 것으로 예제에서 다음 함수와 코드로 사용해도 문제가 없습니다. 예제와 다르게 포스트에 이미지를 첨부하여 사용할 때 attachment 타입의 포스트(콘텐츠) 정보를 구하는 경우 등의 개념 기준에 맞추어 사용하면 됩니다.

$posturl = get_attachment_link( $attach_id );
$posturl = get_post_permalink( $attach_id );
$posturl = home_url( '/'.$postname );

5번 줄에 사용한 wp_get_attachment_image_src 함수는 지난 과정에서 사용한 때가 있습니다. 지금의 루프 파일 구성에 알맞은 함수로 특정 이미지 사이즈의 ‘URL’, ‘가로’, ‘세로’ 정보를 순서대로 구할 수 있어 편리합니다. 6, 7, 8번 줄을 참고하여 이해를 더하세요.

9번 줄은 PHP 함수를 함께 사용하여 이미지의 메타 데이터(alt)를 구하는 것이며, 10번 줄은 Lazy Load 기능을 위한 일종의 ‘빈 이미지’로 예제 테마에 이미 포함하여 제공하였습니다.

11, 12번 줄은 이미지 포스트의 메타 데이터(커스텀 필드)에서 다운로드와 추천 수를 구하는 것으로 플러그인에서 제공한 커스텀 필드와 예제에서 직접 추가한 커스텀 필드 데이터입니다.

앞의 내용을 종합하여 ‘pic-archive.php’ 파일을 다음처럼 구성할 수 있습니다.

<?php
/* 이미지 아카이브 루프 파일 */
$attach_id = get_the_ID(); // 이미지 포스트 ID
$postname = get_the_title(); // 이미지 포스트(첨부페이지) 제목
$posturl = get_permalink( $attach_id ); // 싱글 이미지 포스트 URL
$image_size = 'medium'; // 루프에 사용할 이미지 사이즈 명칭
$imgurls = wp_get_attachment_image_src( $attach_id, $image_size ); // medium 사이즈
$imgurl = $imgurls[0]; // URL
$_w = $imgurls[1]; // 가로 사이즈
$_h = $imgurls[2]; // 세로 사이즈
$alt = trim( strip_tags( get_post_meta( $attach_id, '_wp_attachment_image_alt', true ) ) ); // alt 메타 데이터
$blankimg = get_template_directory_uri() . '/assets/images/blank.gif'; // Lazy Load
$dc = get_post_meta( $attach_id, 'download_count', true ); // 다운로드 수
$lc = get_post_meta( $attach_id, 'simplefavorites_count', true ); // 추천 수
( $dc ) ? $down_count = $dc : $down_count = 0; // 값이 없을 때 '0'
( $lc ) ? $like_count = $lc : $like_count = 0; // 값이 없을 때 '0'

echo '<article id="post-' . $attach_id . '">';
    echo '<div class="item" data-w="' . $_w . '" data-h="' . $_h . '">';
        echo '<a href="' . esc_url( $posturl ) . '">';
            echo '<img title="' . $alt . '" alt="' . esc_attr( $postname ) . '" class="lazy" src="' . esc_url( $blankimg ) . '" data-original="' . esc_url( $imgurl ) . '">'; // Lazy loading.
        echo '</a>';
        echo '<div class="hover_info">';
            echo '<div class="dl_count">';
                echo '<span class="dc">' . $down_count . '</span>';
                echo '<span class="lc">' . $like_count . '</span>';
            echo '</div>';
            echo '<span class="iname">' . $postname . '</span>';
        echo '</div>';
    echo '</div>';
echo '</article>';

위의 코드로 파일을 구성하여 저장 후 사이트에서 둘러보기 및 아카이브 페이지를 확인하면 아직 이미지 포스트가 나오지 않을 것입니다. 코드는 Fleximage와 Lazy Load 기능을 사용하도록 구성했는데, 관련 리소스와 자바스크립트 코드를 추가하지 않았기 때문입니다.

워드프레스에서 jQuery 변수 사용

편집기에 열린 ‘enqueue-script.php’ 파일을 보면 다음의 1, 2번 줄처럼 비활성화한 것을 확인할 수 있습니다. 4, 5번 줄처럼 변경하여 활성화하고 저장합니다.

//wp_enqueue_script( 'flex-js', get_theme_file_uri( '/assets/js/jquery.flex-images.min.js' ) );
//wp_enqueue_script( 'lazyload-js', get_theme_file_uri( '/assets/js/jquery.lazyload.min.js' ) );

wp_enqueue_script( 'flex-js', get_theme_file_uri( '/assets/js/jquery.flex-images.min.js' ) );
wp_enqueue_script( 'lazyload-js', get_theme_file_uri( '/assets/js/jquery.lazyload.min.js' ) );

위의 코드처럼 변경해도 아직은 이미지 포스트가 출력되지 않습니다. 편집기에 열린 ‘pics.js’ 파일에서 다음 코드 1, 9번 줄을 찾아 2번 줄에서 8번 줄을 추가하고 저장합니다.

jQuery(document).ready(function($) {
    $('.flex-images').flexImages({ rowHeight: 350 });
    $('img.lazy').lazyload({
        effect: "fadeIn",
        //load: function() {
        //  $('.lazy').attr('class','early-bird');
        //}
    });
});

2번 줄의 코드는 Fleximage 구현을 위한 기본 자바스크립트 코드 예시로 ‘최대’ 높이(세로) ‘350px’ 기준으로 이미지를 조정하여 콘텐츠 영역에 맞춘다는 뜻으로 생각하면 됩니다. ‘flex-images’ 셀렉터^selector는 사용자가 정한 것으로 앞서 아카이브 관련 파일에 ‘flex-images’ 클래스를 추가하였으므로 가늠하여 이해하세요. 또, Pixabay Goodies와 관련한 추가 정보는 검색으로 얻기 바랍니다.

3번 줄에서 8번 줄은 Lazy Load 기능으로 설명은 생략하며, 5번에서 7번 줄을 비활성화한 것을 볼 수 있습니다. 이미지를 로드할 때 ‘lazy’ CSS 클래스를 ‘early-bird’ 클래스로 대체하는 것으로 나중에 워드프레스 REST API로 포스트 ‘더보기’ 기능을 구현할 때 Fleximage와 Lazy Load 기능의 오류를 막기 위한 것입니다. 나중에 다시 확인합니다.

예제에서는 기초적인 방법의 jQuery 사용을 기준으로 두며, 관련 안내는 하지 않습니다. 해당 지식이 다소 부족하다면 코드를 통해 가늠하여 이해하거나 별도의 학습으로 이해를 보충하세요. 다만, 워드프레스에서 위의 코드처럼 jQuery를 사용하기 위한 간략한 기준을 알고 있어야 합니다.

먼저, 워드프레스에서 $ 변수는 사용할 수 없습니다. jQuery로 대체하여 사용해야 합니다. 그다음으로 예제처럼 ‘pics.js’ 스크립트 파일을 문서의 head에 로드할 경우 ready 함수를 사용하여 다음 패턴처럼 구성할 수 있습니다. 이때는 2번 줄처럼 $ 변수를 사용하면 됩니다.

jQuery(document).ready(function( $ ) {
    $('.flex-images').flexImages({ rowHeight: 350 });
});

만약 스크립트 파일을 문서의 하단에 로드하면서 $ 변수를 사용하려면 다음 패턴으로 사용해야 합니다.

(function($) {
    $('.flex-images').flexImages({ rowHeight: 350 });
})( jQuery );

그러나, 문서의 하단에 스크립트 파일을 로드하고 위의 코드 패턴을 사용해도 지금의 예제에서는 오류가 발생합니다. 관련 스크립트 파일은 아직 문서의 head에 로드하고 있기 때문인데, 모두 문서의 하단에 출력하도록 변경해야 합니다. ‘enqueue-script.php’ 파일의 코드에서 9, 10, 11번 줄의 스크립트 파일을 8번 줄처럼 문서의 하단에 로드하도록 변경해야 합니다. 안내하지 않으므로 원한다면 직접 변경하여 확인해보세요. 워드프레스에서 ‘문서의 하단’은 wp_footer 함수 또는 액션으로 출력되는 영역을 뜻하는 것이 일반적입니다.

나머지 다른 경우도 존재할 수 있으므로 워드프레스에서 jQuery 사용이 필요할 때 검색으로 추가 정보를 얻으세요.

이제 사이트에서 다음 목록의 주소에 접근하여 이미지 포스트 아카이브의 출력 결과를 확인하는데, Lazy Load 효과를 보기 위해 관리페이지 ‘읽기’ 설정의 페이지당 글 수를 ‘100’개로 변경한 후에 확인해보세요. 확인 후 읽기 설정은 다시 ‘20’개로 지정하세요.

localhost/pics
localhost/author/photoman
localhost/author/photowoman
localhost/mediacat/사진
localhost/camera/nikon-d90
localhost/photocat/여행
localhost/?s=

자바스크립트 변수 데이터 생성

예제에서 Fleximage 출력 형태를 사용하는 요소는 다음과 같은데, 괄호의 조건은 각 요소가 가지는 조건 태그이며 일부 생략한 것도 있습니다. 사이트에서 각 페이지에 접근 후 QM 영역에 마우스를 올리면 확인할 수 있습니다.

둘러보기 (is_home)
아카이브 (is_archive – is_tax, is_author)
검색 결과 (is_search)
프런트 페이지 (is_front_page, is_page, is_page_template, is_singular)
앨범 아카이브 페이지 (is_page, is_page_template, is_singular)
싱글 앨범 페이지 (is_single, is_singular)
싱글 이미지 포스트 페이지의 관련 이미지 (is_single, is_singular, is_attachment)

위의 목록에서 둘러보기, 아카이브, 검색 결과는 조금 전에 구성을 끝냈으며 다음 코드를 사용하여 이미지의 높이(세로)를 정의했습니다.

 // 이미지 높이(세로) 최대 350
$('.flex-images').flexImages({ rowHeight: 350 });

이번 장이 아니라 나중에 구성하지만, 예제에서 프런트 페이지는 다음의 코드를 사용하여 이미지 높이와 출력 형태를 지정할 것입니다.

// 프런트 페이지 이미지 높이 최대 300
$('.flex-images').flexImages({ rowHeight: 300, truncate:true });

위의 코드에서 truncate 프로퍼티는 불완전한 이미지 줄(Line)일 때 그 줄을 생략(true)하는 것입니다. 쉽게 한 줄에 있는 하나 이상의 이미지가 콘텐츠 영역을 완전히 채우지 못할 때를 말합니다. 나중 과정에서 이해를 더할 수 있습니다.

앨범 싱글 페이지와 싱글 이미지 포스트의 관련 이미지는 다음 코드로 높이와 개수를 제한한 출력 설정을 정의할 것입니다.

$('.flex-images').flexImages({ rowHeight: 400 }); // 앨범 싱글 페이지
$('#realted_photo').flexImages({ rowHeight: 150, maxRows:6, truncate:true }); // 싱글 이미지 포스트의 관련 이미지

나열한 몇 가지 자바스크립트 코드를 모두 pics.js 파일에 그대로 추가한다면 다음과 같습니다.

$('.flex-images').flexImages({ rowHeight: 350 });
$('.flex-images').flexImages({ rowHeight: 300, truncate:true });
$('.flex-images').flexImages({ rowHeight: 400 });
$('#realted_photo').flexImages({ rowHeight: 150, maxRows:6, truncate:true });

그러나, 위의 코드를 정말 그대로 나열하여 추가하면 각 페이지에서 출력되는 이미지는 구성하는 사람의 의도에 맞게 출력되지 않습니다. 4번째 코드는 사이트 전체에 걸쳐 유일한 셀렉터(flex-images)이므로 문제가 발생하지 않을 수 있지만, 나머지는 그대로 추가하면 원하는 결과를 얻을 수 없습니다. 따라서 예제에서는 다음처럼 자바스크립트 변수와 조건을 추가하여 특정 페이지에서는 특정 코드만 사용하도록 정의할 것입니다.

var currentCondition = currentPage.current_condition; // 자바스크립트 변수
if ( currentCondition === 'archive' ) {
    $('.flex-images').flexImages({ rowHeight: 350 }); // 둘러보기, 아카이브, 검색, 앨범 아카이브
}
if ( currentCondition === 'single' ) {
    $('.flex-images').flexImages({ rowHeight: 400 }); // 앨범 싱글 페이지
    $('#realted_photo').flexImages({ rowHeight: 150, maxRows:6, truncate:true }); // 싱글 이미지 포스트의 관련 이미지
}
if ( currentCondition === 'front' ) {
    $('.flex-images').flexImages({ rowHeight: 300, truncate:true }); // 프런트 페이지
}

위의 코드 1번 줄은 자바스크립트 변수를 정의한 것이며, 2, 5, 9번 줄의 자바스크립트 archive, single, front 데이터(값)는 워드프레스와 관계가 없는 필자가 구분하기 편하도록 임의로 지정한 것입니다. 혼동하지 말아야 합니다. 지금 단계에서는 모두 존재하지 않습니다.

편집기의 pics.js 파일에 기존 코드를 지우고 위의 코드를 추가한다면 다음과 같습니다. 직접 입력하여 저장해보세요.

jQuery(document).ready(function($) {
    var currentCondition = currentPage.current_condition; // 자바스크립트 변수
    if ( currentCondition === 'archive' ) {
        $('.flex-images').flexImages({ rowHeight: 350 }); // 둘러보기, 아카이브, 검색, 앨범 아카이브
    }
    if ( currentCondition === 'single' ) {
        $('.flex-images').flexImages({ rowHeight: 400 }); // 앨범 싱글 페이지
        $('#realted_photo').flexImages({ rowHeight: 150, maxRows:6, truncate:true }); // 싱글 이미지 포스트의 관련 이미지
    }
    if ( currentCondition === 'front' ) {
        $('.flex-images').flexImages({ rowHeight: 300, truncate:true }); // 프런트 페이지
    }
    $('img.lazy').lazyload({
        effect: "fadeIn",
        //load: function() {
        //  $('.lazy').attr('class','early-bird');
        //}
    });
});

위의 코드로 변경하고 저장하면 사이트에서 관련 이미지 포스트는 출력되지 않는데, 2번 줄의 자바스크립트 변수와 데이터가 정의되어 있지 않기 때문입니다.

PHP 기반의 워드프레스와 자바스크립트 간 변수와 데이터 교환은 직접 어려우므로 워드프레스에서 필요한 변수와 데이터를 생성해야 합니다. 또, 필요에 따라 각 페이지(둘러보기, 아카이브 등) 로드 시 결정되는 조건 (태그) 등을 이용하여 제어할 수 있습니다. 그때 다음 함수를 사용할 수 있습니다.

wp_localize_script

간단하고 쉽게, 사용자가 자바스크립트 및 데이터를 직접 정의하여 사이트 소스에 등록하는 함수입니다. 함수 정의는 과정을 통해 이해를 더하면 되는데, 다음처럼 함수 사용 예시만 간단하게 알아봅니다.

wp_localize_script( $handle, $name, $data );
wp_localize_script( 의존할자바스크립트이름, 대표이름, 포함할데이터 );

2번 줄의 한글은 필자가 마음대로 적은 것인데 ‘의존할자바스크립트이름’은 사용자가 추가할 자바스크립트 데이터가 어떤 자바스크립트에 사용할 것인가 정도의 뜻으로 생각하면 됩니다. ‘대표이름’은 사용자가 정하는 것으로 ‘오브젝트’ 등으로 볼 수 있으며, 글자 그대로 ‘이름’으로 이해하면 됩니다.

예제에서는 ‘pics.js’ 파일에 필요한 자바스크립트 코드를 추가하므로 이 파일이 ‘의존할자바스크립트이름’이 됩니다. 그러나 파일 이름이 아니라 워드프레스 자바스크립트 등록 방식으로 지정한 이름을 사용해야 합니다. ‘enqueue-script.php’ 파일 11번 줄을 보면 다음 코드가 있습니다. 코드에서 ‘pics-js’가 그것입니다.

// enqueue-script.php 파일 11번 줄
wp_enqueue_script( 'pics-js', get_theme_file_uri( '/assets/js/pics.js' ), array(), $pics_js_ver );

따라서 다음처럼 로컬 자바스크립트 데이터를 정의할 수 있습니다.

wp_localize_script('pics-js', 'currentPage', array(
    // 포함할데이터
));

위의 코드에서 currentPage 이름은 현재 페이지의 조건을 구하기 위한 자바스크립트 데이터를 정의하는 코드의 뜻에 맞춰 필자가 정한 것입니다. 남은 것은 어떤 데이터를 포함할 것인가로 pics.js 파일에 추가한 변수와 데이터에 맞춰 구성하면 됩니다. archive 데이터는 다음처럼 구성할 수 있습니다.

if ( is_home() || is_archive() || is_search() || is_page_template( 'page-templates/album-page.php' ) ) {
    wp_localize_script('pics-js', 'currentPage', array(
        'current_condition' => 'archive',
    ));
}

1번 줄의 조건일 때 3번 줄의 데이터가 소스에 생성됩니다. 1번 줄에서 앨범 페이지는 아직 구성하지 않았지만, 조건을 미리 추가하였습니다. 위의 코드를 포함하여 enqueue-script.php 파일 일부를 다음처럼 변경할 수 있습니다. 참고하여 변경한 후 저장하세요.

wp_enqueue_script( 'pics-js', get_theme_file_uri( '/assets/js/pics.js' ), array(), $pics_js_ver );
//wp_enqueue_script( 'wp-util' );

/* Fleximage 자바스크립트 변수 */
if ( is_home() || is_archive() || is_search() || is_page_template( 'page-templates/album-page.php' ) ) {
    wp_localize_script('pics-js', 'currentPage', array(
        'current_condition' => 'archive',
    ));
}

1, 2번 줄에 해당하는 코드를 찾아 3번에서 9번 줄을 추가하면 됩니다.

파일을 편집한 후 사이트의 둘러보기, 아카이브, 검색 결과 페이지를 확인하면 이미지 포스트가 출력될 것입니다. 그리고 각 페이지의 소스를 보면 head 영역에 다음 소스를 볼 수 있습니다.

<script type='text/javascript'>
/* <![CDATA[ */
var currentPage = {"current_condition":"archive"};
/* ]]> */
</script>

3번 줄을 확인한 후 pics.js 파일에 추가한 자바스크립트 변수와 데이터를 다시 본다면 조금 더 이해하기 쉬울 것입니다.

아직 페이지를 구성하거나 포스트 타입을 생성하지 않았지만, 앨범 아카이브 페이지, 프런트 페이지, 싱글 앨범 페이지, 그리고 Fleximage 출력 유형을 사용하지 않는 페이지의 스크립트 오류 방지를 포함한 enqueue-script.php 파일 전체 코드는 다음과 같습니다.

<?php
/**
 * Custom Enqueue front-end scripts.
 */
add_action( 'wp_enqueue_scripts', 'custom_scripts' );
function custom_scripts() {
    $pics_js_ver = md5( filemtime( get_template_directory() . '/assets/js/pics.js' ) );
    wp_enqueue_script( 'pics_press-navigation', get_theme_file_uri( '/assets/js/navigation.js' ), array('jquery'), '', true );
    wp_enqueue_script( 'flex-js', get_theme_file_uri( '/assets/js/jquery.flex-images.min.js' ) );
    wp_enqueue_script( 'lazyload-js', get_theme_file_uri( '/assets/js/jquery.lazyload.min.js' ) );
    wp_enqueue_script( 'pics-js', get_theme_file_uri( '/assets/js/pics.js' ), array(), $pics_js_ver );
    //wp_enqueue_script( 'wp-util' );

    /* Fleximage 자바스크립트 변수 */
    // 프런트 페이지
    if ( is_page_template( 'page-templates/front-page.php' ) ) {
        wp_localize_script('pics-js', 'currentPage', array(
            'current_condition' => 'front',
        ));
    }
    // 둘러보기, 아카이브, 검색 결과, 앨범 아카이브 페이지
    elseif ( is_home() || is_archive() || is_search() || is_page_template( 'page-templates/album-page.php' ) ) {
        wp_localize_script('pics-js', 'currentPage', array(
            'current_condition' => 'archive',
        ));
    }
    // 싱글 이미지 포스트 페이지의 관련 이미지 포스트, 싱글 앨범 페이지
    elseif ( is_singular( array( 'attachment', 'pic_album' ) ) ) {
        wp_localize_script('pics-js', 'currentPage', array(
            'current_condition' => 'single',
        ));
    }
    // Fleximage 사용하지 않는 페이지
    else {
        wp_localize_script('pics-js', 'currentPage', array(
            'current_condition' => 'other',
        ));
    }
    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}

특정 페이지는 복수의 조건 태그를 가질 수 있으므로, 위의 코드처럼 is_page_template, is_singular 조건에 특정 페이지나 포스트 타입을 지정하여 중복으로 오류가 발생하지 않도록 관계와 조건에 유의해야 합니다.

사이트에서 둘러보기 페이지를 포함하여 이미지 아카이브 출력과 관계한 모든 페이지를 둘러보세요. 그것으로 이번 장의 내용은 정리하며, 이번 장에서 변경한 다음 링크의 압축 파일을 받고 풀어 테마 루트에 덮어쓰세요.

26장에서 변경한 파일

그리고, 테마 루트의 template-parts 디렉터리에 있는 ‘search’ 디렉터리와 디렉터리의 ‘content-search.php’ 파일은 삭제합니다.