Bir web sitesinde bir portföy sayfasına sahip olmak pek çok şey için kullanılabilir. Tanım olarak, kağıtlar, haritalar, çizimler, fotoğraflar vb. gibi materyalleri tutmak için kullanılan bir şeydir. Finans açısından portföy, bir grup yatırımı ifade eder. Veya, insanlar bir portföyü son çalışmalarını sergilemenin bir yolu olarak da düşünürler. Örneğin, grafik tasarımcılar logolarını, baskılarını veya web sitesi tasarımlarını sergilemek için bir portföy kullanabilirler. Bir inşaatçı veya mimar, tamamlanmış projelerini sergilemek için bir portföy kullanabilir.

Buradaki anahtar paket, bir portföyün birçok kullanımının olmasıdır. Her türden öğeyi tutmak veya gruplamak için kullanılabilir.

Bu yazıda, WordPress'te nasıl portföy sitesi oluşturulacağını göstereceğim.

Not: Bir alt temada her zaman böyle özelleştirmeler yapmanızı tavsiye ederim. Üçüncü bir taraftan indirdiğiniz bir temada (kendi geliştirmediğiniz bir temada) özelleştirmeler yapmak, tema güncellemelerini alamayacağınız anlamına gelir. Bunu yaparsanız, tema güncellemesi tüm özelleştirmelerinizi siler.

Başlayalım

Yapmayı önereceğim ilk şey, özel bir gönderi türü (CPT) oluşturmaktır. Bu, portföy öğelerinizi eklemek ve düzenlemek için net bir yer olduğundan emin olmanıza yardımcı olacaktır. Örneğin aşağıdaki resimde Projeler, Yayınlar, İncelemeler ve Slaytlar için CPT oluşturduğum bir sitem olduğunu görebilirsiniz. Bu, içeriğimi düzenli tutmamı çok kolaylaştırıyor.

Özel Gönderi Türü Oluşturma

Bir CPT oluşturmak için aşağıdaki kodu functions.php dosyanıza yerleştirin. Aşağıdaki, 'Projeler' için bir CPT oluşturacaktır, ancak bu herhangi bir şeyle değiştirilebilir. 'Proje' ve 'Projeler' referanslarını istediğiniz şekilde değiştirmeniz yeterlidir.

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

Artık bir CPT'miz olduğuna göre, yönetici panonuza gidin ve test etmek için kullanabileceğiniz birkaç örnek proje ekleyin. Bir başlık, bir alıntı verdiğinizden ve öne çıkan bir resim eklediğinizden emin olun.

Birkaç örnek girdi ekledikten sonra, bunları sitenizin ön ucunda görüntülemek isteyeceksiniz. Bir sonraki adım, projelerinizi görüntülemek için kullanacağınız sayfayı oluşturmaktır. Herhangi bir özelleştirmeye ihtiyacınız yoksa, temanızınarchive.php dosyasındaki her şeyi kopyalayabilir ve archive.php archive-projects.php (archive-{post_type}.php) adlı yeni bir dosyaya yapıştırabilirsiniz. O zaman bu yeni sayfanın url'si basitçe http://yoursitedomain.com/projects/ olacaktır.

Ancak, genellikle sayfam için bazı ek ihtiyaçlarım olduğu için, projects-page.php gibi özel bir şablon oluşturmayı tercih ediyorum. Bu rotaya gitmeyi seçerseniz, wp-admin'inizde bir sayfa oluşturmanız ve 'Sayfa Nitelikleri'ni kullanarak sayfanızı bu yeni şablona atamanız gerekecektir.

Bu yeni şablonda, aşağıdakileri en üste eklediğinizden emin olun:

<?php

/* Template Name: Projects Portfolio */

get_header(); ?>

Şablonun sayfanın alt kısmında get_footer kodunu da içerdiğinden emin olun:

<?php get_footer(); ?>

Şablonunuzun temel temelini oluşturduktan sonra, istediğiniz düzeni oluşturmanız ve ardından CPT'nizi sorgulayan kodu eklemeniz gerekecektir. Aşağıdakileri get_header(); ?> arasına eklediğinizden emin olun. get_header(); ?> ve 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
?>

Not: Yukarıdaki sorguda bir while döngüsü başlattınız. Aşağıdaki kod parçasında while döngüsünü sonlandıracağız.

Bu noktada CPT'yi sorguladınız ve şimdi web sitenizde görüntülemeniz gerekiyor. projects-page.php içinde çalışmaya devam ederken, yukarıdaki sorgu kodundan hemen sonra aşağıdaki kodu ekleyin:

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

Yukarıdaki snippet'te HTML etiketlerinin eklendiğini fark edeceksiniz. Bu etiketler sayfanın düzenini kontrol eder. Döndürülen her projenin CSS sınıflarının yanı sıra tam olarak aynı HTML yapısını alması için bunları while döngüsüne dahil etmek önemlidir. Yukarıdaki sorgu, "proje" sınıfına sahip bir <div> kabı döndürür. Her div kapsayıcısında, küçük resim olarak döndürülen bir 'Öne Çıkan Resim', H4 olarak stillendirilen 'başlık', projenin alıntısı ve ardından 'Projeler' CPT'sinde bulunan her proje için bir 'Ayrıntılar' bağlantısı olacaktır.

Not: CPT kullandığımız için, küçük resim sonrası için tema desteği de eklemeniz gerekecek. Bu kod örneğini kullanmadan önce küçük resim boyutlarını tanımlamanız bile gerekebilir. Bu, functions.php file yapılır.

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

Kısa bir not: HTML ve CSS sınıflarınızın, web sitenizin tasarımına uyacak şekilde ayarlanması gerekir. Örneğimde, mizanpajımı oluşturmak için Bootstrap kullanıyorum ve project ve ek stil içeren page-wrap gibi sınıflar oluşturdum.

Örneğin, col-sm-6 col-md-3 , küçük ekranlarda iki sütunlu bir düzen ve orta ve büyük ekranlarda dört sütunlu bir düzen oluşturur. Bootstrap kullanmıyor olsaydım, proje sınıfına bazı kapsayıcı genişlikleri eklemek zorunda kalırdım. Tüm projelerin sütunlarda güzel bir şekilde hizalanmasını sağlamak için büyük olasılıkla bir float:left ihtiyacım olacak.

Bitirdiğinizde, projects-page.php aşağıdaki gibi görünmelidir:

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

Proje Ayrıntıları sayfanızı oluşturma

Artık bir portföy sayfamız olduğuna göre, kullanıcılarımızı küçük resme veya 'Ayrıntılar' bağlantısını tıkladıklarında götürecekleri bir sayfamız olduğundan emin olmamız gerekecek.

Bunun için temamızda single-projects.php adlı yeni bir şablon oluşturmamız gerekecek. WordPress, 'tek' ve CPT'nin sümüklü böcek 'projelerini' kullanarak, bu şablonu projenin tüm CPT'leri için kullanmayı bilir.

single-{post_type}.php

projects-page.php için yaptığımız gibi, aşağıdakileri eklememiz gerekecek:

<?php

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

get_header(); ?>

Ve altta:

<?php get_footer(); ?>

Bu sayfanın nasıl görünmesini istediğinize dair henüz bir fikriniz yoksa, temanızın single.php tüm kodu kopyalayıp bu yeni dosyaya yapıştırmak isteyebilirsiniz.
İşte bu kadar! Tıpkı bir portföyünüz olduğu gibi. Yorumlarda ne inşa ettiğinizi görelim!