การมีหน้าพอร์ตโฟลิโอบนเว็บไซต์สามารถนำไปใช้ได้หลายอย่าง ตามความหมายแล้ว เป็นสิ่งที่ใช้เพื่อเก็บเอกสารต่างๆ เช่น กระดาษ แผนที่ ภาพวาด ภาพถ่าย ฯลฯ ผลงานในด้านการเงินหมายถึงกลุ่มการลงทุน หรือผู้คนยังคิดว่าพอร์ตโฟลิโอเป็นวิธีแสดงผลงานล่าสุดของพวกเขาด้วย ตัวอย่างเช่น นักออกแบบกราฟิกอาจใช้พอร์ตโฟลิโอเพื่อแสดงโลโก้ พิมพ์ หรือการออกแบบเว็บไซต์ ผู้สร้างหรือสถาปนิกอาจใช้พอร์ตโฟลิโอเพื่อแสดงโครงการที่เสร็จสมบูรณ์

ประเด็นสำคัญที่นี่คือพอร์ตโฟลิโอมีประโยชน์หลายอย่าง ใช้เก็บหรือจัดกลุ่มสิ่งของได้ทุกประเภท

ในบทความนี้ ผมจะสาธิตวิธีสร้างเว็บไซต์พอร์ตโฟลิโอบน WordPress

หมายเหตุ: ฉันแนะนำให้คุณปรับแต่งในลักษณะนี้ในธีมย่อยเสมอ การปรับแต่งธีมที่คุณดาวน์โหลดจากบุคคลที่สาม (ธีมที่คุณไม่ได้พัฒนาเอง) หมายความว่าคุณจะไม่สามารถอัปเดตธีมได้ หากคุณทำเช่นนั้น การอัปเดตธีมจะลบการปรับแต่งทั้งหมดของคุณ

มาเริ่มกันเลย

สิ่งแรกที่ฉันแนะนำให้ทำคือสร้างประเภทโพสต์ที่กำหนดเอง (CPT) วิธีนี้จะช่วยให้แน่ใจว่ามีที่ที่ชัดเจนในการเพิ่มและแก้ไขรายการพอร์ตโฟลิโอของคุณ ตัวอย่างเช่น ในภาพด้านล่าง คุณจะเห็นว่าฉันมีไซต์ที่ฉันได้สร้าง CPT สำหรับโครงการ สิ่งพิมพ์ รีวิว และสไลด์ สิ่งนี้ทำให้ง่ายต่อการจัดระเบียบเนื้อหาของฉัน

การสร้าง Custom Post Type

ในการสร้าง 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 และกำหนดเพจของคุณให้กับเทมเพลตใหม่นี้โดยใช้ 'Page Attributes'

ในเทมเพลตใหม่นี้ อย่าลืมเพิ่มสิ่งต่อไปนี้ที่ด้านบน:

<?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-loop ในข้อมูลโค้ดด้านล่าง เราจะสิ้นสุด while-loop

ณ จุดนี้ คุณได้สอบถาม 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 แท็กเหล่านี้ควบคุมเลย์เอาต์ของหน้า สิ่งสำคัญคือต้องรวมสิ่งเหล่านี้ไว้ในลูป while เพื่อให้แต่ละโปรเจ็กต์ที่ส่งคืนได้รับโครงสร้าง HTML ที่เหมือนกันทุกประการ เช่นเดียวกับคลาส CSS แบบสอบถามด้านบนจะส่งคืนคอนเทนเนอร์ <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 สร้างเลย์เอาต์สองคอลัมน์บนหน้าจอขนาดเล็กและเลย์เอาต์สี่คอลัมน์บนหน้าจอขนาดกลางและขนาดใหญ่ ถ้าฉันไม่ได้ใช้ 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 ของธีมของคุณแล้ววางลงในไฟล์ใหม่นี้
แค่นั้นแหละ! เช่นเดียวกับที่คุณมีพอร์ตโฟลิโอ ให้เราดูสิ่งที่คุณสร้างขึ้นในความคิดเห็น!