WordPressでポートフォリオサイトを作成する方法
公開: 2016-02-18ウェブサイトにポートフォリオページを設けることは、非常に多くのことに使用できます。 定義上、これは、紙、地図、図面、写真などの資料を保持するために使用されるものです。財務用語でのポートフォリオとは、投資のグループを指します。 または、人々はポートフォリオを最近の作品を紹介する方法としても考えています。 たとえば、グラフィックデザイナーは、ポートフォリオを使用して、ロゴ、印刷物、またはWebサイトのデザインを披露することができます。 ビルダーまたはアーキテクトは、ポートフォリオを使用して、完了したプロジェクトを紹介することができます。
ここで重要なポイントは、ポートフォリオには多くの用途があるということです。 すべてのタイプのアイテムを保持またはグループ化するために使用できます。
この投稿では、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ループを終了します。
この時点で、CPTを照会したので、Webサイトに表示する必要があります。 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タグが追加されています。 これらのタグは、ページのレイアウトを制御します。 返される各プロジェクトがまったく同じHTML構造とCSSクラスを取得できるように、これらをwhileループ内に含めることが重要です。 上記のクエリは、「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クラスは、Webサイトのデザインに合わせて調整する必要があります。 私の例では、Bootstrapを使用してレイアウトを作成し、 projectやpage-wrapなど、追加のスタイルを含むクラスを作成しました。
たとえば、 col-sm-6 col-md-3は、小さな画面では2列のレイアウトを作成し、中規模および大きな画面では4列のレイアウトを作成します。 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のスラッグ'プロジェクトを使用して、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からすべてのコードをコピーして、この新しいファイルに貼り付けることをお勧めします。
以上です！ ちょうどそのようにあなたはポートフォリオを持っています。 コメントであなたが構築したものを見てみましょう！