يمكن استخدام صفحة محفظة على موقع ويب لأشياء كثيرة. بحكم التعريف ، هو شيء يستخدم لحفظ المواد مثل الأوراق ، والخرائط ، والرسومات ، والصور ، وما إلى ذلك. تشير المحفظة في المصطلحات المالية إلى مجموعة من الاستثمارات. أو ، يفكر الأشخاص أيضًا في الحافظة كطريقة لعرض أعمالهم الأخيرة. على سبيل المثال ، قد يستخدم مصممو الجرافيك محفظة لعرض تصميمات الشعار أو الطباعة أو مواقع الويب الخاصة بهم. قد يستخدم البناء أو المهندس المعماري محفظة لعرض مشاريعهم المكتملة.

الوجبات الرئيسية هنا هي أن الحافظة لها العديد من الاستخدامات. يمكن استخدامه للاحتفاظ بالعناصر من جميع الأنواع أو تجميعها.

في هذا المنشور ، سأوضح كيفية إنشاء موقع محفظة على 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-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 . باستخدام المشاريع "الفردية" و "slug" الخاصة بـ CPT ، "يعرف WordPress كيفية استخدام هذا القالب لجميع CPTs الخاصة بالمشروع.

single-{post_type}.php

مثلما فعلنا مع صفحة projects-page.php ، سنحتاج إلى إضافة ما يلي:

<?php

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

get_header(); ?>

وفي الأسفل:

<?php get_footer(); ?>

إذا لم تكن لديك فكرة عما تريد أن تبدو عليه هذه الصفحة حتى الآن ، فقد ترغب في نسخ كل الكود من ملف single.php الخاص بك ولصقه في هذا الملف الجديد.
هذا كل شيء! تمامًا مثل هذا لديك محفظة. دعنا نرى ما قمت ببنائه في التعليقات!