워드프레스 폼 요소로 원하는 이미지 사이즈 다운로드

연재고품격 고품질 워드프레스 무료 사진 저장소완결2

이번 장에서는 싱글 이미지 포스트 페이지에 출력한 사이즈별 이미지 중 로그인 회원에 제한하여 선택한 사이즈의 이미지를 다운로드할 수 있도록 처리합니다.

다운로드에 필요한 폼 데이터

다음은 테마 루트 template-parts/pic/pic-single-side.php 파일에서 폼 블록의 소스를 분리하여 다운로드에 필요한 데이터와 폼 액션을 파악하고 설명하기 위해 편집한 임의의 코드입니다.

<form action="다운로드버튼클릭후이동링크또는액션" method="POST">
    <table id="download_list" class="table">
        <tr>
            <td class="choice_down"><input type="radio" name="img_name" value="선택한사이즈의이미지파일이름" required></td>
            <td class="choice_size">이미지사이즈</td>
            <td class="choice_ext">확장자</td>
            <td class="choice_filesize">이미지용량</td>
        </tr>
    </table>
    <input type="hidden" name="attach_id" value="이미지포스트아이디">
    <?php wp_nonce_field(); ?>
    <button type="submit" class="btn_download">이미지 무료 다운로드</button>
</form>

현재의 단계에서는 앞 장에서 구성한 코드로 다운로드에 필요한 데이터를 모두 확보한 상태입니다. 목록 중에 일부는 꼭 필요하다고 볼 수 없지만, 예제에서는 목록의 데이터를 기준으로 구성합니다.

  • 이미지 포스트 ID: attach_id ($attach_id)
  • 회원이 선택한 사이즈의 이미지 파일 이름: img_name ($filename)
  • NONCE: _wpnonce
  • HTTP referer: _wp_http_referer

위의 목록에서 포스트 ID와 파일 이름을 폼 액션으로 전달하여 해당 이미지의 URL을 얻어 브라우저에서 이미지 파일 다운로드가 가능하도록 처리합니다. 이때 일종의 ‘워드프레스 보안 토큰’으로 부를 수 있는 ‘nonce’ 데이터와 HTTP referrer 정보를 함께 전달하여 올바른 접근 여부를 확인합니다.

워드프레스 Nonces

Nonce’는 ‘Number used once’를 줄인 것으로 보통 URL 또는 폼 데이터의 악용을 막기 위한 최소한의 방법입니다. ‘한 번 사용’의 뜻이 아니라 ‘사용 기한이 있는’ 또는 ‘수명이 있는’ 해시 데이터를 말하며 숫자를 뜻하지 않습니다.

앞의 코드 11번 줄은 폼 필드로 생성하는 nonce 사용의 기본 방식으로 다음의 html 소스로 자동으로 변환되어 출력됩니다. 값(value)은 다를 수 있으며, 사이트에서 싱글 이미지 포스트 페이지의 소스를 보면 즉시 확인할 수 있습니다.

<input type="hidden" id="_wpnonce" name="_wpnonce" value="602d60b50c">
<input type="hidden" name="_wp_http_referer" value="/%EB%8B%AC%EB%82%98%EB%9D%BC-%EC%97%AC%ED%96%89">

Nonce 이름은 사용자가 원하는 것으로 생성할 수 있으며, nonce 데이터를 검증할 때는 접근 페이지 환경에 따라 다르며, 지금의 예제 과정에서는 다음의 함수를 사용합니다.

// nonce 데이터 검증 함수
wp_verify_nonce();

검증 함수는 이번 장에서 실제 사용하므로 그때 확인하면 되고, Nonce에 관한 조금 더 상세한 내용은 코덱스를 통해 얻기 바라며, 나중에 검색 기능을 구현할 때도 사용하므로 실제 예제를 통해 경험하는 것에 초점을 두세요.

싱글 이미지 포스트 페이지의 폼 데이터

실제로 싱글 이미지 포스트 페이지에서 특정 이미지 사이즈를 선택하고 다운로드 버튼을 클릭했을 때 어떤 폼 데이터를 전달하는지 확인해봅니다.

먼저, 사이트에서 싱글 이미지 포스트 페이지를 한 번 새로 고친 후 키보드의 F121를 눌러 크롬 브라우저 개발자 도구를 실행합니다. 다음으로 페이지 오른쪽의 이미지 사이즈 리스트에서 원하는 사이즈의 라디오 버튼을 선택하고 ‘이미지 무료 다운로드’ 버튼을 클릭해보세요. 그리고, 다음 그림을 참고하여 폼 데이터를 확인하세요.

크롬 개발자 도구에서 본 폼 데이터

그림에 나오는 것처럼 필요한 폼 데이터가 모두 전달되는 것을 확인할 수 있습니다. 다른 이미지 사이즈를 선택하여 결과를 확인해도 됩니다.

이제 남은 것은 이 폼 데이터를 전송하여 이미지를 다운로드하는 것인데, 보통의 웹사이트에서 폼 데이터를 전송하여 특정 기능 또는 결과를 유도할 때 전송 페이지를 별도로 만들어 처리합니다. 워드프레스에서도 같은 방식을 사용해도 되지만, 예제에서는 ‘워드프레스 방식’을 사용합니다.

워드프레스 방식의 폼 데이터 처리

우선, 예제는 폼 데이터 전송 방식 중 POST 방식을 사용합니다. 소스에도 다음처럼 미리 정의하였습니다.

// POST 방식의 폼 데이터 전송
<form action="다운로드버튼클릭후이동링크또는액션" method="POST">

워드프레스 방식의 폼 데이터 처리는 간단하게 말해 위의 소스 ‘action’에 다음 URL을 지정하는 것입니다.

// 워드프레스 방식의 폼 데이터 처리
<form action="<?php echo esc_url( admin_url( 'admin-post.php' ) ); ?>" method="POST">

실제 URL은 다음과 같습니다.

http://localhost/wp-admin/admin-post.php

위의 URL에 있는 ‘admin-post.php’ 파일은 워드프레스에서 폼 액션을 위한 일종의 공용 파일로 생각하면 문제가 없습니다. 그러나 이 파일을 통해 폼 데이터를 처리하려면 폼 데이터 중 ‘action’ 필드에 해당하는 데이터가 있어야 합니다.

다르게 말하면, 전송할 폼 데이터에 데이터를 가공 또는 처리할 명령(액션) 데이터도 함께 전송해야 한다는 뜻입니다. 이 특정 명령 데이터를 전송하기 위해 다음의 소스를 추가해야 합니다.

// direct_download_files 함수를 폼 데이터로 함께 전송
<input type="hidden" name="action" value="direct_download_files">

위의 소스에서 name ‘action’은 admin-post.php 파일에서 확인하는 필드 이름이며, 워드프레스 ‘action’의 개념으로 응용하여 해석해도 됩니다. 그리고 그 액션의 이름(데이터)을 direct_download_files로 지정한 것입니다. 액션 이름은 원하는 것으로 사용하면 됩니다.

코드에서 액션 훅으로 사용할 때에는 워드프레스 규칙에 따른 ‘접두어(Prefix)’를 추가해야 합니다. 다음의 코드를 살펴보세요.

admin_post_nopriv_액션이름 // 로그인 전 방문자에게 적용
admin_post_액션이름 // 로그인 후 회원에게 적용

위의 기준에 따라 전송된 데이터를 처리할 액션과 함수는 다음처럼 구성할 수 있습니다.

add_action( 'admin_post_nopriv_direct_download_files', 'func_direct_download_files' );
add_action( 'admin_post_direct_download_files', 'func_direct_download_files' );
function func_direct_download_files() {
    // 다운로드 코드
}

파일을 수정하여 하나씩 확인해봅니다. 편집기에 테마 루트 template-parts/pic/pic-single-side.php 파일이 열려 있지 않다면 열고, 다음 코드를 파일의 38번 줄과 대체합니다.

// 아래 코드를 파일 38번 줄과 대체
<form action="<?php echo esc_url( admin_url( 'admin-post.php' ) ); ?>" method="POST">

또, 다음 코드 2번 줄을 파일 76번 줄 위에 추가하고 저장합니다.

</table> // 이 줄 다음에 추가
<input type="hidden" name="action" value="direct_download_files">
<input type="hidden" name="attach_id" value="<?php echo $attach_id; ?>"> // 이 줄 위에 추가

브라우저에 개발자 도구 창이 열린 상태에서 사이트 싱글 이미지 포스트 페이지를 다시 로드한 후 특정 이미지 사이즈 선택하고 다운로드 버튼을 클릭합니다. 브라우저 주소 필드에는 폼 액션에 지정한 URL이, 개발자 도구 창의 폼 데이터에는 다음 그림처럼 추가된 ‘action’ 데이터를 확인할 수 있습니다.

크롬 개발자 도구에서 action 필드 데이터 확인

워드프레스 방식의 폼 데이터 처리는 이 정도의 과정만 알고 있으면 됩니다. 이제 액션에 의해 실행할 함수를 정의합니다.

이미지 다운로드 함수

먼저, 편집기로 테마 루트 inc/image-functions.php 파일을 엽니다. 파일 맨 아래에 다음 코드를 추가하고 저장합니다.

/**
 * 이미지 다운로드 처리
 */
add_action( 'admin_post_nopriv_direct_download_files', 'func_direct_download_files' );
add_action( 'admin_post_direct_download_files', 'func_direct_download_files' );
function func_direct_download_files() {
    // 다운로드 코드
}

위의 코드만으로는 직전 결과와 다르지 않으므로 7번 줄에 세부 내용을 정의합니다.

폼 데이터 검증

먼저, 다음 코드를 7번 줄과 대체하여 추가하고 저장하여 전송받은 폼 데이터를 검증합니다.

$_wp_http_referer = $_REQUEST['_wp_http_referer'];
$_wpnonce = $_REQUEST['_wpnonce'];
$img_name = sanitize_file_name( $_REQUEST['img_name'] );
$attach_id = absint( $_REQUEST['attach_id'] );

if ( ! ( wp_verify_nonce( $_wpnonce ) && $_wp_http_referer && $img_name && $attach_id ) ) {
    wp_die( '<span style="margin-bottom:1.5em;font-size: 1.5em; display: block">! 올바른 접근이 아닙니다.</span><a href="' . esc_url( home_url( '/') ) .'">첫 페이지로</a>' );
    exit;
}

1번 줄에서 4번 줄의 데이터 모두 존재해야 하며, 그렇지 않을 때 싱글 이미지 포스트 페이지의 다운로드 버튼을 클릭하면 wp_die 함수에 의해 워드프레스 동작을 종료합니다.

3, 4번 줄에 사용한 sanitize_file_name, absint 워드프레스 함수는 순서대로 파일 이름의 공백을 ‘Dash(-)’ 기호로 대체하는 것과 음의 기호를 제거하는 것입니다. 파일 이름은 원본 이미지 업로드 시 이미 워드프레스 규칙에 의해 처리되어 저장된 것이며, 포스트 ID 역시 음수가 없지만, 혹시 모를 가능성을 염두에 두고 추가한 것입니다. 또, 6번 줄의 wp_verify_nonce 함수로 nonce 데이터가 올바른지 검증합니다.

로그인 회원으로 제한

다음 코드를 이어서 추가하고 저장하면 로그인 전 상태에서는 로그인 페이지로 이동합니다. 그리고 로그인하면 직전 싱글 이미지 포스트 페이지로 이동(Redirect)합니다.

// 로그인하지 않았다면 로그인 페이지로 이동. 로그인 후 이전 페이지로 리디렉트
if ( ! is_user_logged_in() ) {
    wp_safe_redirect( '/wp-login.php?redirect_to=' . esc_url( home_url( $_wp_http_referer ) ) );
    exit;
}

위의 코드에서 사용한 함수는 템플릿 파일을 편집하여 워드프레스 사이트를 구성할 때 자주 사용하는 함수로 볼 수 있으므로 직접 코덱스에서 추가 정보를 얻기 바랍니다. 함수보다 3번 줄에 있는 redirect_to 파라미터의 직접 사용으로 로그인 후 특정 페이지로 이동하도록 간단하게 처리할 수 있다는 것에 초점을 두세요.

이미지 다운로드

다음 코드는 브라우저에서 이미지가 열리지 않고, 강제로 다운로드하는 코드입니다. PHP 레퍼런스에 있는 예시를 그대로 가져온 것으로 일부는 워드프레스 함수로 대체한 것입니다.

$upload_dir = wp_upload_dir();
$download_image = $upload_dir['basedir'] . '/' . $img_name;
header('Content-Description: File Transfer');
header('content-type: application/octet-stream');
header('Content-Disposition: attachment; filename=' . wp_basename( $download_image ) );
header('Expires: 0');
header('Cache-Control: no-cache, must-revalidate');
header('Pragma: public');
header('Content-Transfer-Encoding: binary');
readfile( $download_image );
exit;

조건과 다운로드 확인

위의 코드까지 추가하고 저장한 상태에서 함수의 기능을 확인해봅니다. 그림을 통해 따로 안내하지 않으므로 직접 확인해보세요.

  • 현재 접근한 싱글 이미지 포스트 페이지의 주소를 복사합니다.
  • 사이트에서 로그아웃합니다.
  • 복사한 주소를 브라우저 주소 필드에 붙여넣고 접근합니다.
  • 싱글 이미지 포스트 페이지에서 원하는 이미지 사이즈를 선택하고 다운로드 버튼을 클릭했을 때 로그인 페이지로 이동하는지 확인합니다.
  • 로그인 후 직전의 싱글 이미지 포스트 페이지로 이동하는지 확인합니다.
  • 다시 원하는 이미지 사이즈를 선택하고 다운로드 버튼을 클릭하여 선택한 이미지 사이즈의 파일을 다운로드하는지 확인합니다.

과정의 코드만 올바르게 추가했다면 결과에 오류는 없을 것입니다.

다운로드 수 및 다운로드 포스트 ID 저장

다운로드 관련 함수에 해당 이미지 포스트의 커스텀 필드를 추가하여 다운로드 수를 더하고, 다운로드한 회원의 메타 데이터에도 필드를 추가하여 다운로드한 이미지 포스트의 ID를 추가해봅니다.

다운로드 수는 한 회원이 같은 이미지를 여러 번 다운로드해도 한 번만 카운트하며, 이미지 사이즈별 파일을 구분하지는 않는다는 기준을 둡니다. 또, 회원의 메타 데이터에 추가하는 이미지 포스트의 ID는 배열(시리얼Serialize)데이터로 저장하여 회원마다 하나의 다운로드 이미지 포스트 ID 저장 필드를 부여하도록 정합니다.

다음은 다운로드 수를 저장하는 이미지 포스트 ID의 커스텀 필드와 최초 다운로드 시 커스텀 필드가 존재하지 않으므로 생성하고 ‘1’을 추가하는 코드입니다.

/* 다운로드 수 커스텀 필드와 회원 메타 데이터에 다운로드 이미지 포스트 ID 추가 */
$dcount = get_post_meta( $attach_id, 'download_count', true ); // 다운로드 수 저장 커스텀 필드
if ( $dcount == '' ) {
    add_post_meta( $attach_id, 'download_count', 1 ); // 해당 이미지 포스트의 최초 커스텀 필드 생성 및 추가
}

다음은 현재 로그인한 회원의 ID를 얻어 그 회원의 메타 데이터 필드에 저장된 다운로드 이미지 포스트 ID를 구하는 코드입니다.

// 다운로드 수 및 다운로드 이미지 포스트 ID를 usermeta에 저장
$current_user_id = get_current_user_id(); // 로그인한 회원 ID
$current_user_download_image_ids = get_user_meta( $current_user_id, 'download_image_ids', true ); // 다운로드 이미지 포스트 ID 메타 데이터 필드

다음은 회원이 특정 이미지 포스트 ID의 이미지를 다운로드할 때 포스트 ID가 회원의 메타 데이터에 존재하지 않는다면 다운로드 수를 이미지 포스트의 커스텀 필드에 더하고, 그 회원의 메타 데이터 필드에는 이미지 포스트 ID를 추가하는 코드입니다.

// 회원의 메타 데이터 필드에 다운로드하는 이미지 포스트 ID가 없을 때
if ( ! in_array( $attach_id, $current_user_download_image_ids ) ) {
    // 다운로드 수 더하기
    $dcount++;
    update_post_meta( $attach_id, 'download_count', $dcount );
    // 다운로드한 회원의 메타 데이터 필드에 이미지 ID 추가
    array_push( $current_user_download_image_ids, $attach_id );
    update_user_meta( $current_user_id, 'download_image_ids', $current_user_download_image_ids );
}

마지막으로 다음은 회원 메타 데이터에 다운로드 이미지 포스트 ID를 최초로 추가할 때 메타 데이터를 업데이트하는 코드입니다.

// 회원 메타데이터에 다운로드 포스트 ID 최초 추가
if ( empty( $current_user_download_image_ids ) ) {
    $first_download_image_id = array( $attach_id );
    update_user_meta( $current_user_id, 'download_image_ids', $first_download_image_id );
}

포스트의 커스텀 필드에 저장하는 다운로드 수와 회원의 메타 데이터에 저장하는 포스트 ID는 예제 사이트의 운영 흐름에서 수정이나 삭제가 필요하지 않으므로 위의 코드로 간단하게 처리할 수 있습니다.

다운로드 수와 이미지 포스트 ID 데이터는 이미지를 완전히 다운로드한 상태에 관계하지 않고 다운로드 과정에 오류가 없다면 데이터가 업데이트됩니다.

다운로드 수 및 다운로드 이미지 포스트 ID 관련 코드 추가와 최종 결과 확인은 다음에 제공하는 이번 장 변경 파일을 받아 테마 루트에 덮어쓴 후 간단하게 알아봅니다. 먼저, 편집기에 열린 테마 파일을 모두 닫고 다음의 파일을 받아 테마 루트에 덮어쓰세요.

이미지 다운로드 수 증가 및 회원 메타 데이터 확인

결과 데이터 확인은 데이터베이스를 통해 직접 확인할 수도 있고, 연습장 파일에 쿼리와 조건을 추가하여 확인할 수도 있습니다. 그보다 먼저 다음 안내로 이미지를 다운로드하여 데이터를 업데이트합니다.

사이트에 관리자로 로그인 또는 로그인 상태에서 다음 주소에 각각 접근하여 이미지를 다운로드합니다.

  • localhost/달나라-여행
  • localhost/초록에-노랑

이번에는 PhotoWoman 회원으로 사이트에 로그인한 후 위의 주소에 각각 접근하여 이미지를 다운로드합니다.

위의 각 주소에 해당하는 이미지 포스트의 다운로드 수는 ‘2’, 각 회원의 메타 데이터에는 2개의 이미지 포스트 ID가 저장된다면 올바른 결과입니다. 이를 확인하기 위해 다음 코드를 연습장 파일에 추가하고 저장한 후 연습장 페이지를 확인합니다. 앞에서 추가한 코드가 있다면 지우고 추가하세요.

$user1 = get_user_by( 'login', '@Picsman' );
$user2 = get_user_by( 'login', 'PhotoWoman' );
$user1_id = $user1->ID; $user1_login = $user1->user_login;
$user2_id = $user2->ID; $user2_login = $user2->user_login;
$user_meta1 = get_user_meta($user1_id, 'download_image_ids', true);
$user_meta2 = get_user_meta($user2_id, 'download_image_ids', true);
echo $user1_login.'<br>';
foreach ( $user_meta1 as $um1 ) {
    echo get_the_title($um1).' - 다운로드 수('.get_post_meta($um1, 'download_count', true).')<br>';
}
echo $user2_login.'<br>';
foreach ( $user_meta2 as $um2 ) {
    echo get_the_title($um2).' - 다운로드 수('.get_post_meta($um2, 'download_count', true).')<br>';
}

연습장 페이지에 나오는 데이터를 확인하여 올바른 결과인지 직접 판단하세요.

다운로드 수는 데이터베이스 ‘_postmeta’ 테이블에는 다음 그림처럼 저장됩니다.

데이터베이스의 다운로드 수 저장 필드

마찬가지로 회원 메타 데이터는 데이터베이스 ‘_usermeta’ 테이블에 다음 그림처럼 저장됩니다.

다운로드 포스트 ID를 저장하는 회원 메타 데이터 테이블

데이터에서 숫자(ID 데이터)는 다를 수 있으므로 염두에 두지 않아도 됩니다.

페이지 템플릿으로 폼 데이터 처리

지금까지는 워드프레스 방식의 폼 데이터 처리에 관하여 살펴본 것인데, 워드프레스의 페이지 템플릿을 사용하여 폼 데이터를 처리해도 됩니다. 간략한 설명으로 안내합니다.

먼저, 테마 루트 page-templates/_imgDownload.php 파일을 열어 다음 코드로 대체하고 저장합니다.

<?php
/**
 * Template Name: _다운로드 페이지
 */

$_wp_http_referer = $_REQUEST['_wp_http_referer'];
$_wpnonce = $_REQUEST['_wpnonce'];
$img_name = sanitize_file_name( $_REQUEST['img_name'] );
$attach_id = absint( $_REQUEST['attach_id'] );

if ( ! ( wp_verify_nonce( $_wpnonce ) && $_wp_http_referer && $img_name && $attach_id ) ) {
    wp_die( '<span style="margin-bottom:1.5em;font-size: 1.5em; display: block">! 올바른 접근이 아닙니다.</span><a href="' . esc_url( home_url( '/') ) .'">첫 페이지로</a>' );
    exit;
}
// 로그인하지 않았다면 로그인 페이지로 이동. 로그인 후 이전 페이지로 리디렉트
if ( ! is_user_logged_in() ) {
    wp_safe_redirect( '/wp-login.php?redirect_to=' . esc_url( home_url( $_wp_http_referer ) ) );
    exit;
} else {
    do_action('pagetemplate_direct_download_files');
}

테마 루트 inc/image-functions.php 파일 177번 줄 위에 다음 코드를 추가하고 저장합니다. 20번 줄에 액션 코드 대신 직접 다운로드 관련 코드를 작성해도 됩니다.

// inc/image-functions.php 파일 175번 줄 다음에 다음 코드를 추가하고 저장
add_action( 'pagetemplate_direct_download_files', 'func_direct_download_files' );

마지막으로 테마 루트 template-parts/pic/pic-single-side.php 파일 38번 줄을 다음 코드로 대체하고 저장합니다. 액션 URL은 page 타입의 포스트 고유주소로 지난 과정에서 이미 생성한 것입니다.

// template-parts/pic/pic-single-side.php 파일 38번 줄을 다음 코드로 대체
<form action="<?php echo esc_url( home_url( '/_imgdownload') ); ?>" method="POST">

위와 같이 변경하면 일부 필요하지 않은 코드가 있지만, 오류가 없으므로 그대로 두고 이미지 다운로드로 결과를 확인하면 워드프레스 방식의 폼 데이터 처리와 같이 원하는 결과를 얻을 수 있습니다.

워드프레스 페이지 템플릿은 포스트 타입의 콘텐츠를 표현하는 것뿐 아니라 지금의 예처럼 다양하게 활용할 수 있다는 것도 염두에 두면 좋습니다. 혹시 따라 했다면 페이지 템플릿 파일은 그대로 두고, 나머지 파일은 원래의 상태로 되돌리세요.

예제 목차

0. 고품격 고품질 워드프레스 무료 사진 저장소

1. 예제 구성 환경과 파일

2. XAMPP, 워드프레스, 테마, 플러그인 설치와 설정

3. 테마 Pics Press

4. page 포스트 타입과 페이지 템플릿, 메뉴 구성

5. 워드프레스 핵심 용어 짚기

6. 워드프레스 포스트 타입 attachment

7. 워드프레스 이미지 사이즈

8. 워드프레스 이미지 사이즈 추가 및 변경

9. 워드프레스 이미지 파일 제어

10. 타입 attachment 템플릿과 image.php

11. 워드프레스 이미지 메타 데이터

12. GPS 데이터를 워드프레스 메타 데이터로 저장

13. 이미지 메타 데이터를 포스트 메타 데이터에 추가

14. Attachment 타입을 위한 워드프레스 커스텀 분류 등록

15. 이미지 메타 데이터를 워드프레스 분류와 필드 데이터에 저장

16. 이미지를 편집할 때 포스트 데이터와 메타 데이터 업데이트

17. 워드프레스 미디어 파일 업로드

18. 워드프레스 싱글 이미지 포스트 페이지

19. 워드프레스 아바타와 Author Archives

20. 워드프레스 이미지 사이즈별 데이터 출력

» 워드프레스 폼 요소로 원하는 이미지 사이즈 다운로드

22. 워드프레스 텍스트 단락 및 줄 바꿈, wpautop

23. 워드프레스 사진의 EXIF 데이터 출력

24. 구글 지도에 표시하는 사진 촬영 위치

25. 워드프레스 attachment 포스트 타입의 아카이브

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

27. 워드프레스 커스텀 검색 – 쿼리 변수

28. 워드프레스 커스텀 검색 – 검색 폼과 쿼리 데이터

29. 워드프레스 커스텀 포스트 타입 ‘pic_album’

30. 커스텀 포스트 타입의 싱글 페이지

31. 워드프레스 WP_Query

32. 커스텀 쿼리, 페이지 템플릿, 포스트 아카이브

33. 분류 기준의 관련 포스트 커스텀 쿼리

34. wpdb 클래스로 구글 지도에 마커와 섬네일 표시

35. 워드프레스 분류 데이터 쿼리 클래스, WP_Term_Query

36. 워드프레스 템플릿 태그

37. 워드프레스 옵션 페이지, 옵션 필드

38. 워드프레스 사이트 프런트 페이지

39. 사이트 메뉴 및 포스트 페이지 링크

40. 워드프레스 Transient API

41. 워드프레스 분류의 term 데이터를 캐시 데이터로 생성

42. 워드프레스 역할 그룹과 권한으로 구성 요소 제어

43. 간단한 워드프레스 코멘트 폼 수정

44. 워드프레스 대시보드 위젯 추가

45. 워드프레스 REST API 간략 이해

46. 워드프레스 REST API 응답에 커스텀 필드 추가

47. 워드프레스 REST API 커스텀 라우트 및 엔드포인트

48. 워드프레스 REST API 커스텀 엔드포인트로 구글 클러스터 지도 마커와 인포 윈도 표시

49. 워드프레스 REST API, Underscore.js 자바스크립트 템플릿, 포스트 Ajax Load More

50. 워드프레스 REST API, Underscore.js 자바스크립트 템플릿, 코멘트 Ajax Load More

51. 워드프레스 REST API 인증과 제한 및 제어