Memiliki halaman portofolio di situs web dapat digunakan untuk banyak hal. Menurut definisi, itu adalah sesuatu yang digunakan untuk menyimpan bahan seperti kertas, peta, gambar, foto, dll. Portofolio dalam istilah keuangan mengacu pada sekelompok investasi. Atau, orang juga menganggap portofolio sebagai cara untuk memamerkan karya terbaru mereka. Misalnya, desainer grafis dapat menggunakan portofolio untuk memamerkan logo, cetakan, atau desain situs web mereka. Seorang pembangun atau arsitek dapat menggunakan portofolio untuk memamerkan proyek mereka yang telah selesai.

Takeaway kunci di sini adalah bahwa portofolio memiliki banyak kegunaan. Ini dapat digunakan untuk menyimpan atau mengelompokkan item dari semua jenis.

Dalam posting ini, saya akan menunjukkan cara membuat situs portofolio di WordPress.

Catatan: Saya sarankan Anda selalu melakukan penyesuaian seperti ini di tema anak. Membuat penyesuaian pada tema yang telah Anda unduh dari pihak ketiga (tema yang tidak Anda kembangkan sendiri), berarti Anda tidak akan dapat mengambil pembaruan tema. Jika Anda melakukannya, pembaruan tema akan menghapus semua penyesuaian Anda.

Mari kita mulai

Hal pertama yang saya sarankan lakukan adalah membuat custom post type (CPT). Ini akan membantu memastikan ada tempat yang jelas untuk menambahkan dan mengedit item portofolio Anda. Misalnya, pada gambar di bawah, Anda dapat melihat bahwa saya memiliki situs tempat saya membuat CPT untuk Proyek, Publikasi, Ulasan, dan Slide. Ini membuatnya sangat mudah untuk mengatur konten saya.

Membuat Jenis Posting Kustom

Untuk membuat CPT, tempatkan kode berikut ke dalam file functions.php Anda. Berikut ini akan membuat CPT untuk 'Proyek', tetapi itu dapat diubah menjadi apa saja. Cukup ubah referensi apa pun ke 'Proyek' dan 'Proyek' menjadi apa pun yang Anda inginkan.

//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');

Sekarang kami memiliki CPT, buka dasbor admin Anda dan tambahkan beberapa contoh proyek yang dapat Anda gunakan untuk mengujinya. Pastikan Anda memberikan judul, kutipan, dan menambahkan gambar unggulan.

Setelah Anda menambahkan beberapa entri sampel, Anda akan ingin menampilkannya di ujung depan situs Anda. Langkah selanjutnya adalah membuat halaman yang akan Anda gunakan untuk menampilkan proyek Anda. Jika Anda tidak memerlukan penyesuaian apa pun, Anda dapat menyalin semuanya dari archive.php tema Anda dan menempelkannya ke file baru bernama archive-projects.php (archive-{post_type}.php). Maka url halaman baru ini akan menjadi http://yoursitedomain.com/projects/.

Namun, karena saya biasanya memiliki beberapa kebutuhan tambahan untuk halaman saya, saya lebih suka membuat template khusus seperti projects-page.php . Jika Anda memilih untuk mengikuti rute ini, Anda perlu membuat halaman di wp-admin Anda dan menetapkan halaman Anda ke template baru ini menggunakan 'Atribut Halaman'.

Di template baru ini, pastikan untuk menambahkan yang berikut ini ke atas:

<?php

/* Template Name: Projects Portfolio */

get_header(); ?>

Pastikan template juga berisi kode get_footer di bagian bawah halaman:

<?php get_footer(); ?>

Setelah Anda memiliki fondasi dasar template Anda, Anda perlu membuat tata letak yang diinginkan dan kemudian menambahkan kode yang menanyakan CPT Anda. Pastikan Anda menambahkan yang berikut ini di antara get_header(); ?> get_header(); ?> dan 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
?>

Catatan: Dalam kueri di atas Anda telah memulai perulangan sementara. Dalam cuplikan kode di bawah ini, kita akan mengakhiri while-loop.

Pada titik ini, Anda telah menanyakan CPT dan sekarang Anda perlu menampilkannya di situs web Anda. Saat masih bekerja di dalam projects-page.php , tambahkan kode berikut tepat setelah kode kueri di atas:

<?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 -->

Dalam cuplikan di atas, Anda akan melihat penambahan tag HTML. Tag ini mengontrol tata letak halaman. Penting untuk menyertakan ini dalam loop sementara sehingga setiap proyek yang dikembalikan mendapatkan struktur HTML yang sama persis serta kelas CSS. Kueri di atas akan mengembalikan wadah <div> dengan kelas "proyek". Dalam setiap wadah div, akan ada 'Gambar Unggulan' yang dikembalikan sebagai thumbnail, 'judul' ditata sebagai H4, kutipan proyek, dan kemudian tautan 'Rincian' untuk setiap proyek yang ditemukan di CPT 'Proyek'.

Catatan: Karena kami menggunakan CPT, Anda juga perlu menambahkan dukungan tema untuk thumbnail postingan. Anda bahkan mungkin perlu menentukan dimensi thumbnail sebelum menggunakan contoh kode ini. Ini akan dilakukan di functions.php file Anda .

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

Catatan singkat: Kelas HTML dan CSS Anda perlu disesuaikan agar sesuai dengan desain situs web Anda. Dalam contoh saya, saya menggunakan Bootstrap untuk membuat tata letak saya dan saya telah membuat kelas seperti project dan page-wrap , yang berisi gaya tambahan.

Misalnya, col-sm-6 col-md-3 membuat tata letak dua kolom pada layar kecil dan tata letak empat kolom pada layar sedang dan besar. Jika saya tidak menggunakan Bootstrap, saya harus menambahkan beberapa lebar kontainer ke kelas proyek. Saya mungkin membutuhkan float:left untuk membuat semua proyek sejajar dengan baik di kolom.

Setelah selesai, projects-page.php Anda akan terlihat seperti ini:

<?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(); ?>

Membuat halaman Detail Proyek Anda

Sekarang kita memiliki halaman portofolio, kita perlu memastikan bahwa kita memiliki halaman untuk mengarahkan pengguna kita ketika mereka mengklik thumbnail atau link 'Detail'.

Untuk ini, kita perlu membuat template baru di tema kita yang disebut single-projects.php . Menggunakan 'tunggal' dan 'proyek' siput CPT, WordPress tahu menggunakan template ini untuk semua CPT proyek.

single-{post_type}.php

Sama seperti yang kita lakukan untuk projects-page.php , kita perlu menambahkan yang berikut ini:

<?php

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

get_header(); ?>

Dan di bagian bawah:

<?php get_footer(); ?>

Jika Anda belum memiliki gambaran seperti apa tampilan halaman ini, Anda mungkin ingin menyalin semua kode dari single.php tema Anda dan menempelkannya ke file baru ini.
Jadi itu saja! Sama seperti itu Anda memiliki portofolio. Mari kita lihat apa yang telah Anda buat di komentar!