웹사이트에 포트폴리오 페이지를 갖는 것은 많은 일에 사용될 수 있습니다. 정의상, 그것은 종이, 지도, 도면, 사진 등과 같은 자료를 보관하는 데 사용되는 것입니다. 금융 용어의 포트폴리오는 투자 그룹을 나타냅니다. 또는 사람들은 포트폴리오를 최근 작업을 보여주는 방법으로 생각하기도 합니다. 예를 들어, 그래픽 디자이너는 포트폴리오를 사용하여 로고, 인쇄물 또는 웹사이트 디자인을 과시할 수 있습니다. 건축업자 또는 건축가는 포트폴리오를 사용하여 완성된 프로젝트를 선보일 수 있습니다.

여기서 중요한 점은 포트폴리오가 다양한 용도로 사용된다는 것입니다. 모든 유형의 항목을 보관하거나 그룹화하는 데 사용할 수 있습니다.

이 게시물에서는 WordPress에서 포트폴리오 사이트를 만드는 방법을 보여 드리겠습니다.

참고: 항상 자식 테마에서 이와 같은 사용자 지정을 수행하는 것이 좋습니다. 타사에서 다운로드한 테마(자신이 개발하지 않은 테마)를 사용자 지정하면 테마 업데이트를 받을 수 없습니다. 그렇게 하면 테마 업데이트로 모든 사용자 정의가 지워집니다.

시작하자

가장 먼저 할 일은 사용자 정의 포스트 유형(CPT)을 만드는 것입니다. 이렇게 하면 포트폴리오 항목을 추가하고 편집할 수 있는 명확한 장소가 있는지 확인하는 데 도움이 됩니다. 예를 들어, 아래 이미지에서 프로젝트, 출판물, 리뷰 및 슬라이드에 대한 CPT를 만든 사이트가 있음을 알 수 있습니다. 이렇게 하면 내 콘텐츠를 매우 쉽게 정리할 수 있습니다.

사용자 정의 포스트 유형 생성

CPT를 생성하려면 다음 코드를 functions.php 파일에 넣습니다. 다음은 '프로젝트'에 대한 CPT를 생성하지만 무엇이든 변경할 수 있습니다. '프로젝트' 및 '프로젝트'에 대한 참조를 원하는 대로 변경하기만 하면 됩니다.

//Creating Custom Post types for Projects
function setup_projects_cpt(){
    $labels = array(
        'name' => _x('Projects', 'post type general name'),
        'singular_name' => _x('Project', 'post type singular name'),
        'add_new' => _x('Add New', 'Project'),
        'add_new_item' => __('Add New Project'),
        'edit_item' => __('Edit Project'),
        'new_item' => __('New Project'),
        'all_items' => __('All Projects'),
        'view_item' => __('View Project'),
        'search_items' => __('Search Projects'),
        'not_found' => __('No Projects Found'),
        'not_found_in_trash' => __('No Projects found in the trash'),
        'parent_item_colon' => '',
        'menu_name' => 'Projects'
        );
    $args = array(
        'labels' => $labels,
        'description' => 'My Projects',
        'rewrite' => array('slug' => 'projects'),
        'public' => true,
        'menu_position' => 5,
        'supports' => array('title', 'editor', 'thumbnail', 'excerpt', 'custom-fields'),
        'has_archive' => true,
        'taxonomies' => array(''),
        'menu_icon' => 'dashicons-admin-multisite', //Find the appropriate dashicon here: https://developer.wordpress.org/resource/dashicons/
        );
    register_post_type('projects', $args);
}
add_action('init', 'setup_projects_cpt');

//The following snippet is used to enable categories for the projects CPT. 
function projects_taxonomy() {  
    register_taxonomy(  
        'project_categories',  //The name of the taxonomy. Name should be in slug form (no spaces and all lowercase. no caps). 
        'projects',        //post type name
        array(  
            'hierarchical' => true,  
            'label' => 'Project Categories',  //Label Displayed in the Admin when creating a new project
            'query_var' => true,
            'rewrite' => array(
                'slug' => 'projects', // This controls the base slug that will display before each term
                'with_front' => false // Don't display the category base before 
            )
        )  
    );  
}  
add_action( 'init', 'projects_taxonomy');

이제 CPT가 있으므로 관리 대시보드로 이동하여 테스트에 사용할 수 있는 몇 가지 샘플 프로젝트를 추가합니다. 제목, 발췌문을 제공하고 추천 이미지를 추가해야 합니다.

몇 가지 샘플 항목을 추가한 후에는 사이트의 프런트 엔드에 표시하고 싶을 것입니다. 다음 단계는 프로젝트를 표시하는 데 사용할 페이지를 만드는 것입니다. 사용자 정의가 필요하지 않은 경우 테마의 archive.php 에서 모든 것을 복사하여 archive-projects.php (archive-{post_type}.php)라는 새 파일에 붙여넣을 수 있습니다. 그러면 이 새 페이지의 URL은 단순히 http://yoursitedomain.com/projects/가 됩니다.

그러나 일반적으로 내 페이지에 대한 몇 가지 추가 요구 사항이 있기 때문에 projects-page.php 와 같은 사용자 지정 템플릿을 만드는 것을 선호합니다. 이 경로를 선택하면 wp-admin에서 페이지를 만들고 '페이지 속성'을 사용하여 이 새 템플릿에 페이지를 할당해야 합니다.

이 새 템플릿에서 맨 위에 다음을 추가해야 합니다.

<?php

/* Template Name: Projects Portfolio */

get_header(); ?>

템플릿에 페이지 하단에 get_footer 코드도 포함되어 있는지 확인하세요.

<?php get_footer(); ?>

템플릿의 기본 기반이 마련되면 원하는 레이아웃을 만든 다음 CPT를 쿼리하는 코드를 추가해야 합니다. get_header(); ?> 사이에 다음을 추가했는지 확인하십시오. get_header(); ?> 및 get_Footer(); ?> get_Footer(); ?> :

<?php
/* Query the post */ 
$args = array( 'post_type' => 'projects', 'posts_per_page' => -1 );//this will return ALL of the posts from the projects CPT. You can also change this to a specific number such as 'posts_per_page' => 10... 
$loop = new WP_Query( $args ); //In this line we are telling WP to query the 'projects' CPT
while ( $loop->have_posts() ) : $loop->the_post(); //In this line we are saying keep looping through the 'projects' CPT until all are returned
?>

참고: 위의 쿼리에서 while 루프를 시작했습니다. 아래 코드 스니펫에서 while 루프를 종료합니다.

이 시점에서 CPT를 쿼리했으며 이제 웹사이트에 표시해야 합니다. 여전히 projects-page.php 내에서 작업하는 동안 위의 쿼리 코드 바로 뒤에 다음 코드를 추가합니다.

<?php echo '<div class="project">';?>
    <a href="<?php print get_permalink($post->ID) ?>"><?php echo the_post_thumbnail(); ?></a> <!-- This returns the featured image with it linked to the page that it was added to-->
        <h4><?php print get_the_title(); ?></h4>
        <?php print get_the_excerpt(); ?><br />
        <a href="<?php print  get_permalink($post->ID) ?>">Details</a><!-- This wraps the ‘Details’ link with the same url that the featured image gets wrapped in. -->
</div> <!-- End individual project col -->

<?php endwhile; ?><!-- End of the while loop -->

위의 스니펫에서 HTML 태그가 추가되었음을 알 수 있습니다. 이 태그는 페이지의 레이아웃을 제어합니다. 반환되는 각 프로젝트가 CSS 클래스와 동일한 HTML 구조를 갖도록 while 루프 내에 이들을 포함하는 것이 중요합니다. 위의 쿼리는 "project" 클래스가 있는 <div> 컨테이너를 반환합니다. 각 div 컨테이너 내에는 썸네일로 반환된 '추천 이미지', H4 스타일의 '제목', 프로젝트 발췌문, '프로젝트' CPT에서 찾은 각 프로젝트에 대한 '세부 정보' 링크가 있습니다.

참고: CPT를 사용하기 때문에 게시물 썸네일에 대한 테마 지원도 추가해야 합니다. 이 코드 예제를 사용하기 전에 축소판 크기를 정의해야 할 수도 있습니다. 이것은 당신의 functions.php file 에서 이루어질 것입니다.

add_theme_support( 'post-thumbnails', array( 'projects' ) ); // adds thumbnail support for the Projects CPT

간단한 참고 사항: HTML 및 CSS 클래스는 웹사이트 디자인에 맞게 적절하게 조정해야 합니다. 내 예에서는 Bootstrap을 사용하여 레이아웃을 만들고 추가 스타일이 포함된 project 및 page-wrap 과 같은 클래스를 만들었습니다.

예를 들어, col-sm-6 col-md-3 은 작은 화면에 2열 레이아웃을 만들고 중대형 화면에 4열 레이아웃을 만듭니다. Bootstrap을 사용하지 않았다면 프로젝트 클래스에 컨테이너 너비를 추가해야 했을 것입니다. 모든 프로젝트가 열에 잘 정렬되도록 하려면 float:left 가 필요할 것입니다.

완료되면 projects-page.php 가 다음과 같아야 합니다.

<?php
/* Template Name: Projects Portfolio */
 
get_header(); 

?>
<!-- ============ CONTENT START ============ -->
<div class="container>
    <div class="row">
        <div id="content-projects" class="page-wrap">
            <div class="col-sm-12 content-wrapper">
                <?php while ( have_posts() ) : the_post(); ?> <!--queries the projects-page.php-->
                    <?php the_content() ?> <!--Grabs any content added to the Editor-->
                    <?php endwhile; // end of the loop. ?>
            </div><!-- End intro/descriptive copy column-->
        </div> <!-- End intro/descriptive copy container-->
    </div>
        
    <div id="projects" class="row">        
    <!-- Start projects Loop -->
        <?php
        /* 
        Query the post 
        */
        $args = array( 'post_type' => 'projects', 'posts_per_page' => -1 );
        $loop = new WP_Query( $args );
        while ( $loop->have_posts() ) : $loop->the_post(); 
                                                    
        <?php echo '<div class="project col-sm-6 col-md-3">';?>
            <a href="<?php print get_permalink($post->ID) ?>">
                <?php echo the_post_thumbnail(); ?></a>
                <h4><?php print get_the_title(); ?></h4>
                <?php print get_the_excerpt(); ?><br />
                <a class="btn btn-default" href="<?php print                   get_permalink($post->ID) ?>">Details</a>
        </div> <!-- End individual project col -->
        <?php endwhile; ?> 
    </div><!-- End Projects Row -->
</div><!-- End Container --> 
<!-- ============ CONTENT END ============ -->

<?php get_footer(); ?>

프로젝트 세부 정보 페이지 만들기

이제 포트폴리오 페이지가 있으므로 사용자가 썸네일 또는 '세부 정보' 링크를 클릭할 때 이동할 페이지가 있는지 확인해야 합니다.

이를 위해 single-projects.php 라는 테마에 새 템플릿을 만들어야 합니다. '단일'과 CPT의 슬러그 '프로젝트'를 사용하는 WordPress는 모든 프로젝트의 CPT에 이 템플릿을 사용한다는 것을 알고 있습니다.

single-{post_type}.php

우리가 projects-page.php 에서 했던 것처럼 다음을 추가해야 합니다:

<?php

/* This is the template for displaying Single Project details */

get_header(); ?>

그리고 맨 아래:

<?php get_footer(); ?>

이 페이지가 어떻게 생겼는지 아직 모른다면 테마의 single.php 에서 모든 코드를 복사하여 이 새 파일에 붙여넣을 수 있습니다.
그게 다야! 그런 포트폴리오가 있습니다. 댓글에서 여러분이 구축한 것을 봅시다!