ワードプレステーマTCD「UNIQUE」でシンプルなポートフォリオをつくる

ワードプレスTCDのテーマは誰でも簡単にホームページをつくれるテーマです。

私も企業サイトはワードプレスTCDのテーマ「UNIQUE」で作成しています。

www.slashd.com

企画デザイン事務所スラッシュディー | 岡山市のWEBプロデュース会社。想いをつなぐデザイン事務所。

スラッシュディーは岡山市のWEBプロデュース会社です。企画制作からマーケティングコンサルまでワンストップで対応。WEBサイトでの集客を完...

今回はこの「UNIQUE」をカスタマイズして、以下の様なシンプルなポートフォリオを作ってみます。

学ぶこと

front-page.phpの作り方

【PR】「Theme3」では、企業サイトのWordPressベーステーマに、100%GPLテーマ「 Arkhe 」をオススメしています。
「 Arkhe 」は高機能有料プラグイン「 Arkhe Pro Pack 」と連携することによって利便性とカスタマイズ性の両立が可能です。制作・マーケのプロの方に是非！

「Arkhe」の詳細を見る
「Arkhe Pro Pack」（サブスク版）を購入する

「Arkhe Pro Pack」には以下が含まれています。「Arkhe Blocks Pro」と「Arkhe Toolkit」には買い切り版もあります。
・Arkhe Blocks Pro
・Arkhe Toolkit
・Arkhe CSS Editor

1 シンプルなポートフォリオの利用シーン
2 WordPressでポートフォリオを制作する
3 ワードプレスTCD「UNIQUE」の概要
4 ワードプレスTCD「UNIQUE」の制作実績をカスタマイズ
5 archive-work.phpをfront-page.phpに変更する
6 さらにシンプルにするためヘッダー部分を削除する
7 最後に微調整
8 まとめ

シンプルなポートフォリオの利用シーン

企業サイトにTCDのテーマ「UNIQUE」を使っているので、ポートフォリオはあります。

しかし、「ランサーズ」や「クラウドソーシング」といったクラウドソーシングサービスに登録する場合、お問い合わせ機能のあるサイトへのリンクは規約違反になります。

そこで、ポートフォリオ以外の機能を持たないポートフォリオが必要になるのです。

また、代理店が噛んでいる仕事などは、全ての制作を行っていてもポートフォリオを公開できないものもあります。

このような場合はクローズドのポートフォリオを持っていれば、実績を限定的に共有しやすいと思います。

それに、2つ目のポートフォリオはメインサイトと重複するのでクローズドにせざるを得ないと思います。

【PR】「Theme3」では、ブログ用のWordPressテーマに、人気と高機能を誇る「 SWELL 」をオススメしています。

「SWELL」の特徴を見る
「SWELL」の購入はこちら

・ブロックエディター完全対応
・高速化機能を標準搭載
・100%GPL
・企業サイトの制作も可能他、機能多数。

WordPressでポートフォリオを制作する

ワードプレステーマにはポートフォリオ向きのテーマがたくさんあります。

例えば、以下のようなものです。

Fkasawa	Fkasawaは写真家やコレクターのためのミニマルな石積みスタイルのブログテーマです。
Miyazaki	Miyazakiは、ブログ、ポートフォリオ、雑誌向けのスタイリッシュでコントラストの強い WordPress テーマです。
Kai	Kai は、写真ポートフォリオ用のシンプルな 4 列グリッドの WordPress テーマです。

以下は「Fkasawa」と「Miyazaki」のデモサイトです。

andersnoren.se

Fukasawa – Just another WordPress site

Just another WordPress site

andersnoren.se

Beam – Miyazaki

Beam armchair is a minimalist design created by the Netherlands base...

いずれも写真などのイメージ優先のポートフォリオとしてはすぐれています。

しかし、サイト制作などは複数のページがあったり、制作時のコンセプト等を簡単に記述するので、しっくりきません。

他にも、様々なテーマがあるので、いずれ試してみたいと思いますが、TCDのテーマ「UNIQUE」は必要最低限の内容が簡単に記述できるので、「UNIQUE」をカスタマイズすることにしました。

「Arkhe」の詳細を見る
「Arkhe Pro Pack」（サブスク版）を購入する

ワードプレスTCD「UNIQUE」の概要

ワードプレスTCD「UNIQUE」は今となっては少し古いテーマです。

しかし、広告代理店やデザイン会社にとっては必要十分な機能を提供してくれます。

その一つが制作実績をカスタム投稿でサポートしている点です。

クリエイター向けのテーマと言えるでしょう。

UNIQUEの機能

ニュースカスタム投稿
制作実績カスタム投稿
ブログ

前述したように少し古いテーマなので，他のTCDテーマに比べると安価です。（12,980円：税込み　2023.9現在）

※カスタム投稿はブロックエディタに対応していません。

ご購入は以下【PR】

WordPressテーマ「UNIQUE」

ワードプレスTCD「UNIQUE」の制作実績をカスタマイズ

では、本題に入りましょう。

さきほど、見たように「UNIQUE」はカスタム投稿として「制作実績」をサポートしています。

その機能だけを取り出せれば、シンプルなポートフォリオが出来上がるはずです。

では、どのように実現したらいいでしょうか？

カスタム投稿アーカイブをトップページに配置する方法

archive-work.phpをfront-page.phpにする

「UNIQUE」はカスタム投稿として「制作実績」を持っているので、アーカイブページは「archive-work.php」で作られます。

その「archive-work.php」を「front-page.php」にリネームして、子テーマを作ればよいのです。

archive-work.phpをfront-page.phpに変更する

まずは「archive-work.php」を「front-page.php」にリネームして子テーマを作ってみましょう。

すると以下のような画面になります。

ほぼ、問題無いページができていますね。

パンくずリストさえなくなれば、このまま使いたい方もいらっしゃると思います。

ではパンくずの削除をやってみましょう。

<?php
     get_header();
     $options = get_desing_plus_option();
?>

<?php get_template_part('breadcrumb'); ?>

<div id="main_col">

 <?php
      // Headline ----------------------------------------------
      $headline = $options['work_headline'];
      $desc = $options['work_desc'];
      $headline_font_size = $options['work_headline_font_size'];
      $desc_font_size = $options['work_desc_font_size'];
      $catch_headline = $options['archive_work_headline'];
      $catch_desc = $options['archive_work_desc'];
      $catch_headline_font_size = $options['archive_work_headline_font_size'];
      $catch_desc_font_size = $options['archive_work_desc_font_size'];

      if($headline || $desc || $catch_headline || $catch_desc) {
 ?>

front-page.phpの先頭は上記のようになっています。

<?php get_template_part(breadcrumb); ?>を削除するだけでパンくずリストが消えます。

本当に簡単にポートフォリオを作ることが出来ました。

さらにシンプルにするためヘッダー部分を削除する

私の場合はファーストビューにイメージは必要無いと思います。

なぜ、ファーストビューのイメージが入っているかというと、トップページのファーストビューを設定する「header.php」を変更していないからです。

<?php $options = get_desing_plus_option(); ?>
<!DOCTYPE html>
<html class="pc" <?php language_attributes(); ?>>
<?php
     $options = get_desing_plus_option();
     if($options['use_ogp']) {
?>
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
<?php } else { ?>
<head>
<?php }; ?>
<meta charset="<?php bloginfo('charset'); ?>">
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge"><![endif]-->
<?php
if ( is_no_responsive() && wp_is_mobile() ) :
?>
<meta name="viewport" content="width=1280">
<?php
else :
?>
<meta name="viewport" content="width=device-width">
<?php
endif;
?>
<title><?php wp_title('|', true, 'right'); ?></title>
<meta name="description" content="<?php seo_description(); ?>">
<?php if($options['use_ogp']) { ogp(); }; ?>
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">
<?php if ( $options['favicon'] ) : ?>
<link rel="shortcut icon" href="<?php echo $options['favicon']; ?>">
<?php endif; ?>
<?php wp_enqueue_style('style', get_stylesheet_uri(), false, version_num(), 'all'); wp_enqueue_script( 'jquery' ); if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_head(); ?>
</head>
<body id="body" <?php body_class(); ?>>

<div id="site_loader_overlay">
 <div id="site_loader_spinner"></div>
</div>
<div id="site_wrap">

 <div id="header">
  <div id="header_inner" class="clearfix">
   <?php header_logo(); ?>
   <?php if (has_nav_menu('global-menu')) { ?>
   <div id="global_menu">
    <?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'theme_location' => 'global-menu' , 'container' => '' ) ); ?>
   </div>
   <a href="#" class="menu_button"><span><?php _e('menu', 'tcd-w'); ?></span></a>
   <?php }; ?>
  </div>
 </div><!-- END #header -->


 <div id="top">

  <?php
       if(is_front_page()) {
         // Image slider -------------------------------------------------------------------------------------------------
         if($options['header_content_type'] == 'type1') {
  ?>
  <div id="header_slider" class="owl-carousel owl-theme">
   <?php
        for($i=1; $i<= 3; $i++):
	        if (is_mobile()) {
            $image = wp_get_attachment_image_src( $options['slider_image'.$i], 'size6');
            if(is_no_responsive()) {
              $image = wp_get_attachment_image_src( $options['slider_image'.$i], 'full');
            };
          } else {
            $image = wp_get_attachment_image_src( $options['slider_image'.$i], 'full');
          }
          if(!empty($image)) {
            $url = $options['slider_url'.$i];
            $target = $options['slider_target'.$i];
            $use_catch = $options['use_slider_catch'.$i];
           	$use_button = $options['show_slider_catch_button'.$i];
   ?>
   <div class="item item<?php echo $i; ?>" style="background:url(<?php echo esc_attr($image[0]); ?>) no-repeat center center; background-size:cover;">
    <?php
    if($use_catch == 1 || $use_button == 1){
    ?>
    <div class="caption">
		<?php
    	if($use_catch == 1) {
      	$catch = esc_html($options['slider_catch'.$i]);
      	$desc = esc_html($options['slider_desc'.$i]);
      	$font_size = $options['slider_catch_font_size'.$i];
      	$font_type = $options['slider_font_type'.$i];
      	$desc_font_size = $options['slider_desc_font_size'.$i];
      	$font_color = $options['slider_catch_color'.$i];
      	$shadow1 = $options['slider_catch_shadow_a'.$i];
      	$shadow2 = $options['slider_catch_shadow_b'.$i];
      	$shadow3 = $options['slider_catch_shadow_c'.$i];
      	$shadow4 = $options['slider_catch_shadow_color'.$i];
		?>
     <p class="title font_<?php echo esc_attr( $font_type ); ?>" style="font-size:<?php echo esc_html($font_size); ?>px; text-shadow:<?php echo esc_html($shadow1); ?>px <?php echo esc_html($shadow2); ?>px <?php echo esc_html($shadow3); ?>px #<?php echo esc_html($shadow4); ?>; color:#<?php echo esc_html($font_color); ?>;"><?php echo nl2br($catch); ?></p>
     <p class="title desc font_<?php echo esc_attr( $font_type ); ?>" style="font-size:<?php echo esc_html($desc_font_size); ?>px; text-shadow:<?php echo esc_html($shadow1); ?>px <?php echo esc_html($shadow2); ?>px <?php echo esc_html($shadow3); ?>px #<?php echo esc_html($shadow4); ?>; color:#<?php echo esc_html($font_color); ?>;"><?php echo nl2br($desc); ?></p>
    <?php
			} 
      if($use_button == 1 && $url !="") {
      	$button_text = $options['slider_catch_button'.$i];
     ?>
     <a class="button" href="<?php echo esc_url($url); ?>"<?php if($target == 1) { echo ' target="_blank"'; }; ?>><?php echo esc_html($button_text); ?></a>
     <?php }; ?>
    </div><!-- END .caption -->
    <?php }; // END if use catch or use button ?>
    <img class="image" src="<?php echo esc_attr($image[0]); ?>" alt="" />
    <?php if($url && $use_button != 1) { ?>
    <a class="overlay" href="<?php echo esc_url($url); ?>"<?php if($target == 1) { echo ' target="_blank"'; }; ?>></a>
    <?php } else { ?>
    <div class="overlay"></div>
    <?php }; ?>
   </div><!-- END .item -->
   <?php
          } // END if has image
        endfor;
   ?>
  </div><!-- END #header_slider -->
  <?php
       // Video ------------------------------------------------------------------------------------------------------
       } elseif($options['header_content_type'] == 'type2') {
         if(!wp_is_mobile()) { // if is pc
           $video = $options['video'];
           if(!empty($video)) {
  ?>
  <div id="header_video">
   <?php
   $use_catch = $options['use_video_catch'];
   $use_button = $options['show_video_catch_button'];
   if($use_catch == 1 || $use_button == 1) {

   ?>
   <div class="caption">
		<?php
   	if($use_catch == 1) {
    	$catch = esc_html($options['video_catch']);
    	$font_size = $options['video_catch_font_size'];
    	$font_type = $options['video_font_type'];
    	$desc = esc_html($options['video_desc']);
    	$desc_font_size = $options['video_desc_font_size'];
    	$font_color = $options['video_catch_color'];
    	$shadow1 = $options['video_catch_shadow1'];
    	$shadow2 = $options['video_catch_shadow2'];
    	$shadow3 = $options['video_catch_shadow3'];
    	$shadow4 = $options['video_catch_shadow_color'];
		?>
    <p class="title font_<?php echo esc_attr( $font_type ); ?>" style="font-size:<?php echo esc_html($font_size); ?>px; text-shadow:<?php echo esc_html($shadow1); ?>px <?php echo esc_html($shadow2); ?>px <?php echo esc_html($shadow3); ?>px #<?php echo esc_html($shadow4); ?>; color:#<?php echo esc_html($font_color); ?>;"><?php echo nl2br($catch); ?></p>
    <p class="title desc font_<?php echo esc_attr( $font_type ); ?>" style="font-size:<?php echo esc_html($desc_font_size); ?>px; text-shadow:<?php echo esc_html($shadow1); ?>px <?php echo esc_html($shadow2); ?>px <?php echo esc_html($shadow3); ?>px #<?php echo esc_html($shadow4); ?>; color:#<?php echo esc_html($font_color); ?>;"><?php echo nl2br($desc); ?></p>
    <?php
		}
    if($use_button == 1) {
      $url = $options['video_button_url'];
      $target = $options['video_button_target'];
      $button_text = $options['video_catch_button'];
    ?>
    <a class="button" href="<?php echo esc_url($url); ?>"<?php if($target == 1) { echo ' target="_blank"'; }; ?>><?php echo esc_html($button_text); ?></a>
    <?php }; ?>
   </div><!-- END .caption -->
   <?php }; // END if use catch or use button ?>
   <div class="overlay"></div>
  </div><!-- END #header_video -->
  <?php
           }; // END if has video
         } else { // if is mobile device ----------------------------------------------
           $image = wp_get_attachment_image_src( $options['video_image'], 'full');
           if(!empty($image)) {
  ?>
  <div id="header_slider">
   <div class="item item1" style="background:url(<?php echo esc_attr($image[0]); ?>) no-repeat center center; background-size:cover;">
    <?php
    $use_catch = $options['use_video_catch'];
    $use_button = $options['show_video_catch_button'];
    if($use_catch == 1 || $use_button == 1) {
    ?>
    <div class="caption">
		<?php
    if($use_catch == 1) {
    	$catch = esc_html($options['video_catch']);
    	$font_size = $options['video_catch_font_size'];
    	$font_type = $options['video_font_type'];
    	$desc = esc_html($options['video_desc']);
    	$desc_font_size = $options['video_desc_font_size'];
    	$font_color = $options['video_catch_color'];
    	$shadow1 = $options['video_catch_shadow1'];
    	$shadow2 = $options['video_catch_shadow2'];
    	$shadow3 = $options['video_catch_shadow3'];
    	$shadow4 = $options['video_catch_shadow_color'];
		?>
     <p class="title font_<?php echo esc_attr( $font_type ); ?>" style="font-size:<?php echo esc_html($font_size); ?>px; text-shadow:<?php echo esc_html($shadow1); ?>px <?php echo esc_html($shadow2); ?>px <?php echo esc_html($shadow3); ?>px #<?php echo esc_html($shadow4); ?>; color:#<?php echo esc_html($font_color); ?>;"><?php echo nl2br($catch); ?></p>
     <p class="title desc font_<?php echo esc_attr( $font_type ); ?>" style="font-size:<?php echo esc_html($desc_font_size); ?>px; text-shadow:<?php echo esc_html($shadow1); ?>px <?php echo esc_html($shadow2); ?>px <?php echo esc_html($shadow3); ?>px #<?php echo esc_html($shadow4); ?>; color:#<?php echo esc_html($font_color); ?>;"><?php echo nl2br($desc); ?></p>
     <?php
			}
     	if($use_button == 1) {
      $url = $options['video_button_url'];
      $target = $options['video_button_target'];
      $button_text = $options['video_catch_button'];
     ?>
     <a class="button" href="<?php echo esc_url($url); ?>"<?php if($target == 1) { echo ' target="_blank"'; }; ?>><?php echo esc_html($button_text); ?></a>
     <?php }; ?>
    </div><!-- END .caption -->
    <?php }; // END if use catch or use button ?>
    <img class="image" src="<?php echo esc_attr($image[0]); ?>" alt="" />
    <div class="overlay"></div>
   </div>
  </div><!-- END #header_slider -->
  <?php
           }; // END if has image
         }; // END mobile device

       // Youtube -------------------------------------------------------------------------------------------------------------
       } elseif($options['header_content_type'] == 'type3') {
         if(!wp_is_mobile()) { // if is pc
           $youtube_url = $options['youtube_url'];
           if(!empty($youtube_url)) {
  ?>
  <div id="header_youtube">
   <?php
   $use_catch = $options['use_video_catch'];
   $use_button = $options['show_video_catch_button'];
   if($use_catch == 1 || $use_button == 1) {
   ?>
   <div class="caption">
		<?php
   	if($use_catch == 1) {
    	$catch = esc_html($options['video_catch']);
    	$font_size = $options['video_catch_font_size'];
    	$font_type = $options['video_font_type'];
    	$desc = esc_html($options['video_desc']);
    	$desc_font_size = $options['video_desc_font_size'];
    	$font_color = $options['video_catch_color'];
    	$shadow1 = $options['video_catch_shadow1'];
    	$shadow2 = $options['video_catch_shadow2'];
    	$shadow3 = $options['video_catch_shadow3'];
    	$shadow4 = $options['video_catch_shadow_color'];
		?>
    <p class="title font_<?php echo esc_attr( $font_type ); ?>" style="font-size:<?php echo esc_html($font_size); ?>px; text-shadow:<?php echo esc_html($shadow1); ?>px <?php echo esc_html($shadow2); ?>px <?php echo esc_html($shadow3); ?>px #<?php echo esc_html($shadow4); ?>; color:#<?php echo esc_html($font_color); ?>;"><?php echo nl2br($catch); ?></p>
    <p class="title desc font_<?php echo esc_attr( $font_type ); ?>" style="font-size:<?php echo esc_html($desc_font_size); ?>px; text-shadow:<?php echo esc_html($shadow1); ?>px <?php echo esc_html($shadow2); ?>px <?php echo esc_html($shadow3); ?>px #<?php echo esc_html($shadow4); ?>; color:#<?php echo esc_html($font_color); ?>;"><?php echo nl2br($desc); ?></p>
    <?php
		}
     if($use_button == 1) {
     	$url = $options['video_button_url'];
     	$target = $options['video_button_target'];
     	$button_text = $options['video_catch_button'];
    ?>
    <a class="button" href="<?php echo esc_url($url); ?>"<?php if($target == 1) { echo ' target="_blank"'; }; ?>><?php echo esc_html($button_text); ?></a>
    <?php }; ?>
   </div><!-- END .caption -->
   <?php }; // END if use catch or use button ?>
   <div class="overlay"></div>
  </div>
  <div id="youtube_video_player" class="player" data-property="{videoURL:'<?php echo esc_url($youtube_url); ?>',containment:'#header_youtube',startAt:0,mute:true,autoPlay:true,loop:true,opacity:1}"></div>
  <?php
           }; // END if youtube url
         } else { // if is mobile device -----------------------------------------------------
           $image = wp_get_attachment_image_src( $options['youtube_image'], 'full');
           if(!empty($image)) {
  ?>
  <div id="header_slider">
   <div class="item item1"  style="background:url(<?php echo esc_attr($image[0]); ?>) no-repeat center center; background-size:cover;">
    <?php
    $use_catch = $options['use_video_catch'];
    $use_button = $options['show_video_catch_button'];
    if($use_catch == 1 || $use_button == 1) {
    ?>
    <div class="caption">
		<?php
    if($use_catch == 1) {
    	$catch = esc_html($options['video_catch']);
    	$font_size = $options['video_catch_font_size'];
    	$font_type = $options['video_font_type'];
    	$desc = esc_html($options['video_desc']);
    	$desc_font_size = $options['video_desc_font_size'];
    	$font_color = $options['video_catch_color'];
    	$shadow1 = $options['video_catch_shadow1'];
    	$shadow2 = $options['video_catch_shadow2'];
    	$shadow3 = $options['video_catch_shadow3'];
    	$shadow4 = $options['video_catch_shadow_color'];
		?>
     <p class="title font_<?php echo esc_attr( $font_type ); ?>" style="font-size:<?php echo esc_html($font_size); ?>px; text-shadow:<?php echo esc_html($shadow1); ?>px <?php echo esc_html($shadow2); ?>px <?php echo esc_html($shadow3); ?>px #<?php echo esc_html($shadow4); ?>; color:#<?php echo esc_html($font_color); ?>;"><?php echo nl2br($catch); ?></p>
     <p class="title desc font_<?php echo esc_attr( $font_type ); ?>" style="font-size:<?php echo esc_html($desc_font_size); ?>px; text-shadow:<?php echo esc_html($shadow1); ?>px <?php echo esc_html($shadow2); ?>px <?php echo esc_html($shadow3); ?>px #<?php echo esc_html($shadow4); ?>; color:#<?php echo esc_html($font_color); ?>;"><?php echo nl2br($desc); ?></p>
     <?php
			}
     if($use_button == 1) {
     	$url = $options['video_button_url'];
     	$target = $options['video_button_target'];
     	$button_text = $options['video_catch_button'];
     ?>
     <a class="button" href="<?php echo esc_url($url); ?>"<?php if($target == 1) { echo ' target="_blank"'; }; ?>><?php echo esc_html($button_text); ?></a>
     <?php }; ?>
    </div><!-- END .caption -->
    <?php }; // END if use catch ?>
    <img class="image" src="<?php echo esc_attr($image[0]); ?>" alt="" />
    <div class="overlay"></div>
   </div>
  </div><!-- END #header_slider -->
  <?php
           }; // END if has image
         }; // END mobile device
       }; // END if header content type
  ?>

  <?php }; // END if is front page ?>

 </div><!-- END #top -->

 <div id="main_contents" class="clearfix">

「header.php」のコードはかなり長いですね。

これはトップページのスライダーや動画をサポートしているコードが長いからです。

その部分を削除してしまえば、トップページのファーストビューをシンプル化することができます。

<?php $options = get_desing_plus_option(); ?>
<!DOCTYPE html>
<html class="pc" <?php language_attributes(); ?>>
<?php
     $options = get_desing_plus_option();
     if($options['use_ogp']) {
?>
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
<?php } else { ?>
<head>
<?php }; ?>
<meta charset="<?php bloginfo('charset'); ?>">
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge"><![endif]-->
<?php
if ( is_no_responsive() && wp_is_mobile() ) :
?>
<meta name="viewport" content="width=1280">
<?php
else :
?>
<meta name="viewport" content="width=device-width">
<?php
endif;
?>
<title><?php wp_title('|', true, 'right'); ?></title>
<meta name="description" content="<?php seo_description(); ?>">
<?php if($options['use_ogp']) { ogp(); }; ?>
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">
<?php if ( $options['favicon'] ) : ?>
<link rel="shortcut icon" href="<?php echo $options['favicon']; ?>">
<?php endif; ?>
<?php wp_enqueue_style('style', get_stylesheet_uri(), false, version_num(), 'all'); wp_enqueue_script( 'jquery' ); if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_head(); ?>
</head>
<body id="body" <?php body_class(); ?>>

<div id="site_loader_overlay">
 <div id="site_loader_spinner"></div>
</div>
<div id="site_wrap">

 <div id="header">
  <div id="header_inner" class="clearfix">
   <?php header_logo(); ?>
   <?php if (has_nav_menu('global-menu')) { ?>
   <div id="global_menu">
    <?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'theme_location' => 'global-menu' , 'container' => '' ) ); ?>
   </div>
   <a href="#" class="menu_button"><span><?php _e('menu', 'tcd-w'); ?></span></a>
   <?php }; ?>
  </div>
 </div><!-- END #header -->

 <div id="main_contents" class="clearfix">

55行目くらいから始まる305行目までのコードがトップページのファーストビューを作っていますので、まるごと削除します。

<div id=”top”>から</div><!– END #top –>までです。

.home #main_col {
	margin-top: 65px !important;
	padding: 0 15px;
}
@media only screen and (min-width: 768px){
	.home #main_col {
		margin-top: 125px !important;
		margin-bottom: -0px !important;
	}
	.home #main_col #page_header {
		margin-bottom: 20px;
	}
}

タイトルが上に詰まってしまうの防ぐためにCSSを追加します。

さらにシンプルになりました。

最後に微調整

以上で簡単なポートフォリオをつくるという目的は達成できました。

さらに以下の様な微調整を加えます。

トップページおよび制作実績アーカイブの変更

トップページにタイトルは必要ないので削除
カテゴリーのリンクを削除し制作実績のアーカイブへのボタンを配置
制作実績のアーカイブに意味を持たせるためにトップページの表示数を削減
トップページのアイキャッチの上のグレーを削除
制作実績アーカイブでは説明文を削除

全ての修正を加えると以下のような「front-page.php」になります。

<?php
     get_header();
     $options = get_desing_plus_option();
?>



<div id="main_col">

 <?php
      // Headline ----------------------------------------------
      $headline = $options['work_headline'];
      $desc = $options['work_desc'];
      $headline_font_size = $options['work_headline_font_size'];
      $desc_font_size = $options['work_desc_font_size'];
      $catch_headline = $options['archive_work_headline'];
      $catch_desc = $options['archive_work_desc'];
      $catch_headline_font_size = $options['archive_work_headline_font_size'];
      $catch_desc_font_size = $options['archive_work_desc_font_size'];

      if($headline || $desc || $catch_headline || $catch_desc) {
 ?>
 <div id="page_header">
  <?php if($catch_headline) { ?>
  <h3 class="catch_headline rich_font" style="font-size:<?php echo esc_html($catch_headline_font_size); ?>px;"><?php echo esc_html($catch_headline); ?></h3>
  <?php }; ?>
  <?php if($catch_desc) { ?>
  <div class="catch_desc" style="font-size:<?php echo esc_html($catch_desc_font_size); ?>px;">
   <?php echo wpautop(esc_html($catch_desc)); ?>
  </div>
  <?php }; ?>
 </div><!-- END #page header -->
 <?php }; ?>

</div><!-- END #main_col -->

<div id="entry">
 <?php
    // sort list -----------------------------------------------------
    $is_cat_filter = false;
    $post_archive_link = get_post_type_archive_link('work');
    if (rtrim($post_archive_link, '/') !== home_url('')) {
        $is_cat_filter = true;
        $attr = ' class="active"';
        $attr .= ' data-cat-filter="all"';
        echo '<a class="intro-button" href="'. esc_url($post_archive_link) .'"'.$attr.'><span>制作実績一覧はこちら</span></a>';
    } 
  ?>
</div>

<?php
     $args = array('post_type' => 'work', 'ignore_sticky_posts' => 1, 'orderby' => 'date', 'order' => 'DESC', 'posts_per_page' => 12);
     $post_list = get_posts($args);
     if ($post_list) {
?>
<div class="work_list clearfix" id="archive_work_list">
 <?php
      foreach ($post_list as $post) : setup_postdata ($post);
        $work_catch = get_post_meta($post->ID, 'work_catch', true);
        if ($options['archive_work_list_use_retina'] == 1) {
          $image = get_the_post_thumbnail($post->ID,'size6');
        } else {
          $image = get_the_post_thumbnail($post->ID,'size4');
        };
 ?>
 <div class="box <?php
     if ($is_cat_filter) {
       $cat_ids = wp_get_post_terms($post->ID, 'work-cat', array('fields' => 'ids'));
       if ($cat_ids) {
         echo ' cat-'.implode(' cat-', $cat_ids);
       }
     }
 ?>">
  <div class="box_inner">
   <div class="content">
    <h4 class="title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h4>
    <a class="image" href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php if(has_post_thumbnail()) { echo $image; } else { ?><img src="<?php echo bloginfo('template_url'); ?>/img/common/no_image4.gif" title="" alt="" /><?php }; ?></a>
   </div>
  </div>
 </div>
 <?php endforeach; wp_reset_query(); ?>
</div><!-- END #work_list -->
<?php }; ?>

<?php get_footer(); ?>

ひとつ一つ説明します。

タイトル部の削除

以下の部分を削除するとタイトルが消えます。

<?php if($headline) { ?>
  <h2 class="headline rich_font" style="font-size:<?php echo esc_html($headline_font_size); ?>px;"><?php echo esc_html($headline); ?></h2>
  <?php }; ?>
  <?php if($desc) { ?>
  <div class="desc" style="font-size:<?php echo esc_html($desc_font_size); ?>px;">
   <?php echo wpautop(esc_html($desc)); ?>
  </div>
<?php }; ?>

制作実績アーカイブへのボタンを配置

カテゴリーへのリンクリストを制作実績アーカイブへのボタンに変更します。

<div id="entry">
 <?php
    // sort list -----------------------------------------------------
    $is_cat_filter = false;
    $post_archive_link = get_post_type_archive_link('work');
    if (rtrim($post_archive_link, '/') !== home_url('')) {
        $is_cat_filter = true;
        $attr = ' class="active"';
        $attr .= ' data-cat-filter="all"';
        echo '<a class="intro-button" href="'. esc_url($post_archive_link) .'"'.$attr.'><span>制作実績一覧はこちら</span></a>';
    } 
  ?>
</div>

ボタンのCSSを追加します。

#entry {
    text-align: center;
}
.intro-button {
    font-size: 14px; 
    text-decoration: none; 
    height: 45px !important;
    line-height: 45px !important;
    display: inline-block;
    margin: 0 auto 40px;
    width: 230px;
    text-align: center;
    box-sizing: border-box;
    color: #fff;
    background-color: #000;
    transition: all .2s ease-in-out;
}
.intro-button:hover {
    color: #fff;
    background-color: #000;
    text-decoration: none;
    opacity: .8;
}
@media only screen and (min-width: 768px){
	.intro-button {
	    margin: 0 auto 65px;
	}
}

トップページの実績数を変更

全部の実績をトップページで表示すると長くなります。そこで12個までに制限します。

$args = array('post_type' => 'work', 'ignore_sticky_posts' => 1, 'orderby' => 'date', 'order' => 'DESC', 'posts_per_page' => 12);

‘post_per_page’ => -1は全てを取得します。個数を制限する場合は‘post_per_page’ => 12とします。

トップページのアイキャッチはグレーを載せないように変更

以下のCSSを追加します。

.home .work_list .image img {
    opacity: 1;
}

制作実績アーカイブで説明文を削除

設定ではトップページとアーカイブページの説明文は区別できません。

そこで、制作実績アーカイブから説明文を削除します。

.archive .catch_desc {
	display: none;
}

結果は以下のようになりました。

まとめ

微調整の項目が多いので、複雑に見えますが、そんなに難しい修正はありませんでした。

ワードプレスTCD「UNIQUE」を使用すれば、簡単にポートフォリオをつくれることが分かっていただけたと思います。

「UNIQUE」は、TCDテーマとしては安価な部類なので、お得ですね。

ポートフォリオが必要になったら、ワードプレスTCD「UNIQUE」をためしてみてはいかがでしょうか。

ご購入は以下【PR】

WordPressテーマ「UNIQUE」

ワードプレステーマTCD「UNIQUE」でシンプルなポートフォリオをつくる

シンプルなポートフォリオの利用シーン

WordPressでポートフォリオを制作する

ワードプレスTCD「UNIQUE」の概要

ワードプレスTCD「UNIQUE」の制作実績をカスタマイズ

archive-work.phpをfront-page.phpに変更する

さらにシンプルにするためヘッダー部分を削除する

最後に微調整

タイトル部の削除

制作実績アーカイブへのボタンを配置

トップページの実績数を変更

トップページのアイキャッチはグレーを載せないように変更

制作実績アーカイブで説明文を削除

まとめ

戦略的WEBサイト構築方法
WEB担当者にオススメ

コメントを残すコメントをキャンセル

はじめてのブログづくりに最適！

当サイトテーマのSEバーション登場！

最近の投稿

人気の投稿

シンプルなポートフォリオの利用シーン

WordPressでポートフォリオを制作する

ワードプレスTCD「UNIQUE」の概要

ワードプレスTCD「UNIQUE」の制作実績をカスタマイズ

archive-work.phpをfront-page.phpに変更する

さらにシンプルにするためヘッダー部分を削除する

最後に微調整

タイトル部の削除

制作実績アーカイブへのボタンを配置

トップページの実績数を変更

トップページのアイキャッチはグレーを載せないように変更

制作実績アーカイブで説明文を削除

まとめ

戦略的WEBサイト構築方法WEB担当者にオススメ

コメントを残す コメントをキャンセル

はじめてのブログづくりに最適！

当サイトテーマのSEバーション登場！

最近の投稿

人気の投稿

戦略的WEBサイト構築方法
WEB担当者にオススメ

コメントを残すコメントをキャンセル