如何在 WordPress 上创建投资组合网站

已发表: 2016-02-18

在网站上有一个投资组合页面可以用于很多事情。根据定义，它是用来保存文件、地图、图纸、照片等材料的东西。金融术语中的投资组合是指一组投资。或者，人们也将作品集视为展示他们最近作品的一种方式。例如，平面设计师可能会使用作品集来展示他们的标志、印刷品或网站设计。建筑商或建筑师可以使用作品集来展示他们完成的项目。

这里的关键点是投资组合有很多用途。它可用于保存或分组所有类型的项目。

在这篇文章中，我将演示如何在 WordPress 上创建投资组合网站。

注意：我建议您始终在子主题中进行这样的自定义。对您从第三方下载的主题（不是您自己开发的主题）进行自定义意味着您将无法进行主题更新。如果这样做，主题更新将清除您的所有自定义设置。

让我们开始吧

我建议做的第一件事是创建自定义帖子类型 (CPT)。这将有助于确保有一个明确的位置来添加和编辑您的投资组合项目。例如，在下图中，您可以看到我有一个网站，我在其中为项目、出版物、评论和幻灯片创建了 CPT。这只是让我的内容井井有条变得非常容易。

创建组合-wordpress-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 标记。这些标签控制页面的布局。将这些包含在 while 循环中很重要，这样返回的每个项目都可以获得完全相同的 HTML 结构和 CSS 类。上面的查询将返回一个带有“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在小屏幕上创建两列布局，在中、大屏幕上创建四列布局。如果我不使用 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的新模板。使用“single”和 CPT 的 slug“projects”，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中复制所有代码并将其粘贴到这个新文件中。
就是这样了！就像你有一个投资组合一样。让我们看看您在评论中构建了什么！

请记住，这些更改最好在子主题中进行。以下是如何制作一个。