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

이번 장에서 구성하는 예제 사이트의 프런트 페이지는 지난 과정에서 경험하거나 준비한 커스텀 쿼리, 검색 폼, term 데이터, 옵션 데이터 등의 각 요소를 반복하여 표현하는 정도의 단순한 과정입니다. 따라서 완성 파일을 올려 구성을 완료한 상태에서 간단한 설명으로 과정을 마칩니다.

연습장 파일을 제외하고, 편집기에 열린 모든 파일을 닫은 후 위의 링크에서 파일을 받고 압축을 풀어 테마 루트에 덮어쓰고, 편집기로 이 파일을 엽니다. 그리고 사이트의 프런트 페이지를 둘러보세요.

옵션 데이터, 검색 폼, 대표 추천 이미지

다음 그림은 이번 장에서 구성할 프런트 페이지 일부 영역으로, 옵션 데이터, 검색 폼, 추천이 가장 많은 이미지가 자동으로 출력된 것이며, 해당 이미지 포스트 제목과 등록자 이름(display_name)도 함께 출력하고 있습니다.

포스트 제목(post_title)으로 포스트 아이디(ID) 구하기

위의 그림에 나온 프런트 페이지의 이미지 (포스트)는 포스트 제목이 ‘달나라 여행’으로, 필자의 화면입니다. 예제 과정에서 이미지 포스트 추천 상황에 따라 다른 이미지가 출력될 수 있습니다. 또. 위의 그림에 나온 이미지 아이디(ID)도 필자와 다를 수 있습니다. 같은 것은 제목이 ‘달나라 여행’이라는 것인데, 이 이미지를 예제 사이트의 프런트 페이지에 출력하기 위해서는 추천 수가 제일 많아야 합니다.

추천 수는 favorites 플러그인에서 생성하는 simplefavorites_count 커스텀 필드에 저장되어 있습니다. 메타 데이터 함수를 사용하여 임의로 데이터를 삽입하여 프런트 페이지에 출력할 수 있지만, 포스트 아이디를 알아야 합니다. 물론, 해당 이미지 포스트를 검색하여 아이디를 알 수 있지만, 포스트 제목만 알고 있다는 가정에서 제목으로 포스트 아이디를 구하여 메타 데이터를 업데이트해봅니다.

2가지 방법을 알아봅니다. 연습장 파일에 기존 코드를 지우고 다음 코드를 추가한 후 저장하고, 사이트에서 연습장 페이지를 확인합니다.

$obj_post = get_page_by_title( '달나라 여행', '', 'attachment' );
$pid = $obj_post->ID;  // 달나라 여행 포스트 ID

//global $wpdb;
//$pid = $wpdb->get_var("SELECT ID FROM $wpdb->posts WHERE post_title = '달나라 여행'"); // 달나라 여행 포스트 ID

update_post_meta( $pid, 'simplefavorites_count', 99 ); // 메타 데이터 업데이트

echo '제목 : 달나라 여행<br>';
echo '포스트 아이디 : ' . $pid . '<br>';
echo '추천 개수 : ' . get_post_meta( $pid, 'simplefavorites_count', true );

연습장 페이지에는 다음의 결과가 출력될 것이며 포스트 아이디 데이터는 다를 수 있습니다.

제목 : 달나라 여행
포스트 아이디 : 357
추천 개수 : 99

위의 코드 1, 2번 줄을 비활성화하고, 4, 5번 줄을 활성화한 후 연습장 페이지를 확인해도 결과는 같습니다.

프런트 페이지에 접근하여 ‘달나라 여행’ 이미지가 출력되는지 확인하세요.

위의 코드에서 사용한 get_page_by_title 함수는 이름처럼 포스트 제목으로 지정한 포스트 타입의 데이터를 구하는 것으로 지금의 가정과 같을 때 사용하면 유용합니다.

5번 줄의 wpdb 쿼리 클래스도 지금의 가정뿐 아니라 워드프레스 템플릿 파일 어디에서나 사용할 수 있으므로 위의 코드처럼 간단한 예는 익혀두면 좋습니다.

옵션 데이터

편집기의 front-page.php 파일 6번에서 13번 줄은 다음과 같은데, 파일과 다르게 줄로 구분하여 나열하였습니다.

// 옵션 페이지 '프런트 페이지에 사용할 텍스트'
$front_text = get_option( 'pics_text' );
// 프런트 페이지 슬로건
( $front_text[ 'front_h1' ] ) ? 
$f1_text = $front_text[ 'front_h1' ] : 
$f1_text = get_option( 'blogdescription' );
// 프런트 페이지 슬로건 아래 설명
( $front_text[ 'front_desc' ] ) ? 
$f2_text = total_pics_count() . $front_text[ 'front_desc' ] : 
$f2_text = total_pics_count() . '장의 방대한 무료 하이퀄리티 사진, 이미지, 벡터, 일러스트';
// 프런트 페이지 가운데 안내 글자
( $front_text[ 'front_middle' ] ) ? 
$f3_text = $front_text[ 'front_middle' ] : 
$f3_text = '분류를 선택하여 둘러보세요';

코드는 지난 과정에서 구성한 옵션 페이지의 옵션 데이터를 출력하는 것으로, 옵션 데이터가 없을 때의 텍스트도 추가한 것이며, 사이트 전체에서 ‘첨부되지 않은 이미지 포스트의 개수’를 구하는 total_pics_count 템플릿 태그도 지난 과정에서 정의한 것입니다.

관리페이지의 ‘옵션’ 메뉴를 클릭하여 ‘프런트 페이지에 사용할 텍스트’ 옵션 데이터를 원하는 것으로 입력하여 프런트 페이지에서 결과를 확인하기 바랍니다.

워드프레스 루프 밖에서 포스트 아이디(ID)로 다른 데이터 구하기

편집기 파일 24번에서 32번 줄은 다음과 같은데, 포스트 아이디로 등록자 아이디(post_author)와 포스트 제목(post_title)을 구하는 것으로, 등록자 아이디는 등록자의 사이트 출력 이름(display_name)을 구하기 위한 것입니다.

/* get_post_field */
$author_id = get_post_field( 'post_author', $postid ); // 등록자 아이디(post_author)
$post_title = get_post_field( 'post_title', $postid ); // 포스트 제목(post_title)

/* $wpdb */
//global $wpdb;
//$_post = $wpdb->get_row( $wpdb->prepare( "SELECT post_author, post_title FROM $wpdb->posts WHERE ID = %d", $postid ) );
//$author_id = $_post->post_author; // 등록자 아이디(post_author)
//$post_title = $_post->post_title; // 포스트 제목(post_title)

따로 안내하지 않으며, 2번과 3번 줄을 비활성화하고, 6번에서 9번 줄을 활성화한 후 프런트 페이지의 이미지 위에 나타나는 포스트 제목과 등록자 이름을 확인하세요. 2가지의 결과는 같습니다.

특정 이미지 사이즈의 이미지 출력

파일 15번 줄에서 18번 줄은 다음과 같고, 추천 수가 제일 많은 이미지 포스트의 large_second 이미지 사이즈 파일 주소와 이미지 포스트의 주소(퍼머링크)를 구하는 것입니다.

$postid = like_best_pic(); // 추천이 가장 많은 이미지 포스트  ID
$_img_obj = wp_get_attachment_image_src( $postid, 'large_second' ); // large_second 이미지 사이즈 정보
$img_url = $_img_obj[0]; // large_second 이미지 사이즈의 이미지 파일 URL
$post_url = get_permalink( $postid ); // 이미지 포스트 퍼머링크

이 코드로 구한 데이터는 파일 36, 37번 줄에서 배경 이미지와 링크 주소로 사용하였습니다.

<div id="hero" style="background-image: url('<?php echo esc_url( $img_url ); ?>')">
    <a class="front_link" href="<?php echo esc_url( $post_url ); ?>"></a>

분류의 term 데이터 출력

다음 그림은 photocat 분류의 term 데이터를 출력하고 각 term 아카이브 페이지로 링크한 것입니다. ‘분류를 선택하여 둘러보세요’ 텍스트는 옵션 데이터에 의존하므로 term과 상관이 없습니다.

분류 term 데이터를 출력하는 코드는 파일 54번 줄에서 71번 줄 코드로 다음과 같습니다.

$photocat_terms = new WP_Term_Query( array(
    'taxonomy' => 'photocat',
    'hide_empty' => false,
) );            
if ( ! empty( $photocat_terms ) ) {
    echo '<h2>' . $f3_text . '</h2>';
    echo '<ul>';
    foreach ( $photocat_terms->terms as $term ) {
        $term_id = $term->term_id; // term id
        $term_name = $term->name; // term name
        echo '<li>';
        //echo '<a href="'. esc_url( home_url( '/photocat/' . $term_name ) ) . '">' . $term_name . '</a>';
        echo '<a href="'. esc_url( get_term_link( $term_id ) ) . '">' . $term_name . '</a>';
        echo '</li>';
    }
    echo '</ul>';
}

워드프레스 WP_Term_Query 클래스로 인스턴스를 생성하여 term 데이터를 출력하는 위의 코드는 검색 폼에서 2가지 분류의 term 데이터를 구할 때 경험한 것이므로 쉽게 이해할 수 있을 것입니다.

13번 줄과 비활성화한 12번 줄은 term 이름을 출력하고 해당 term 아카이브 페이지로 링크한 것인데, 2가지 모두 같은 결과입니다. 다만, 12번 줄의 ‘photocat’ 분류 이름 직접 입력보다 13번 줄처럼 get_term_link 함수를 사용하여 유동적으로 구성하는 게 좋습니다.

이 term 데이터 출력을 포함하여 검색 폼의 term, 사이트 아래 나중에 추가할 mediacat term 메뉴는 Transient API로 다시 구성할 것입니다.

get_posts

편집기의 파일 78번 줄에서 94번 줄은 워드프레스 커스텀 쿼리로 첨부되지 않은 이미지 포스트를 무작위로 30개 출력하는 코드입니다. 일부 제외하면 다음과 같습니다.

$front_query = get_posts( $arg );

if ( $front_query ) :
    echo '<div class="flex-images">';
        foreach( $front_query as $post ) {
            get_template_part( 'template-parts/pic/pic', 'archive' );
        }
        wp_reset_postdata();
    echo '</div>';
endif;

위 1번 줄의 get_posts 함수는 지난 과정에서 간략한 정의로 알아본 때가 있는데, 간단한 기준으로 포스트를 출력할 때 사용하면 좋다는 것이 일반론입니다. 그러나, WP_Query 클래스를 사용하지 않아도 되는 기준(파라미터)의 포스트 출력이라면 언제든지 사용해도 된다는 뜻으로 사용 기준을 정하는 것이 좋습니다.

예제의 프런트 페이지에서 get_posts 함수를 사용하여 포스트를 출력한 것은 사용 예를 위한 목적이며, 필요에 의한 것은 아닙니다. WP_Query 클래스를 사용하여 다음처럼 구성해도 됩니다.

$front_query = new WP_Query( $arg );

if ( $front_query->have_posts() ) :
    echo '<div class="flex-images">';
        while ( $front_query->have_posts() ) : $front_query->the_post();
            get_template_part( 'template-parts/pic/pic', 'archive' );
        endwhile;
        wp_reset_postdata();
    echo '</div>';
endif;

한편, 편집기 파일 89번 줄은 $post 변수에 포스트 데이터를 할당했는데, 워드프레스 루프가 아니면 일부 포스트 데이터, 특히 포스트 아이디(ID)는 사용(접근)할 수 없기 때문에 특정 템플릿 태그(함수) 역시 사용할 수 없습니다. 이때 $post 변수를 사용하면 포스트 데이터에 접근할 수 있습니다.

물론, $post 변수를 사용하지 않아도 데이터베이스 테이터에 접근할 수 있지만, 이때는 인클루드한 pic-archive.php 파일을 사용할 수 없으므로 추가 작업이 필요합니다. 결국, 번거로운 과정 하나가 늘어나게 됩니다.

편집기 파일에서 get_posts 함수로 프런트 페이지에 출력할 이미지 포스트를 위해 사용한 코드는 다음처럼 조금 더 명확하게 구성할 수 있습니다.

global $post;
$arg = array(
    'post_type' => 'attachment',
    'post_status' => 'inherit',
    'posts_per_page' => 30,
    'post_parent' => 0,
    'orderby' => 'rand',
);
$front_query = get_posts( $arg );

if ( $front_query ) :
    echo '<div class="flex-images">';
        foreach( $front_query as $post ) {
            setup_postdata( $post );
            get_template_part( 'template-parts/pic/pic', 'archive' );
        }
        wp_reset_postdata();
    echo '</div>';
endif;

1, 14번 줄을 추가한 것으로, wpdb 클래스를 사용하여 포스트를 출력할 때도 포스트 데이터에 접근하여 워드프레스의 풍부한 템플릿 태그를 사용하려면 추가한 코드가 필요하다는 정도로 이해하고, 관련 내용은 코덱스를 참고하기 바랍니다.

프런트 페이지 스타일

배경으로 추천 개수가 많은 이미지 출력, 옵션 데이터와 검색 폼 및 포스트 데이터의 출력 위치, 프런트 페이지 전체의 콘텐츠 출력 스타일 등 예제의 전체 스타일은 모두 완성하여 제공하였고, 따로 안내하지 않는다는 것을 반복해서 알립니다.

프런트 페이지 이미지 포스트 출력은 pics.js 파일의 다음 코드에 의한 결과이며, 30개를 무작위로 출력하지만, 출력 이미지에 따라 영역을 채우지 못하는 줄의 이미지 역시 다음 코드에 의해 출력되지 않으므로 30개가 아닐 때도 있습니다.

if ( currentCondition === 'front' ) {
    $('.flex-images').flexImages({ rowHeight: 300, truncate:true }); // 프런트 페이지
}