ビジネス向けWEBサイトをつくる

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

本ページはプロモーションが含まれています

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

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

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

目標のポートフォリオ
学ぶこと

front-page.phpの作り方

【PR】「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「GENESIS」の詳細をTCDのページで見る

ブロックエディタ対応
カスタム投稿タイプ「お知らせ」「サービス(事業案内)」
SEO機能(metaタグ、OGP、高速化)
他、機能多数。

ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。

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

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

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

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

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

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

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

【PR】「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「SOLARIS」の詳細をTCDのページで見る

レスポンシブ対応
カスタム投稿タイプ「お知らせ」「企業情報」「サービス」「プロジェクト」
高速化設定(絵文字読み込み・コード最適化)
他、機能多数。

ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。

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

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

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

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

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

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

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

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

【PR】「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「GENESIS」の詳細をTCDのページで見る

ブロックエディタ対応
カスタム投稿タイプ「お知らせ」「サービス(事業案内)」
SEO機能(metaタグ、OGP、高速化)
他、機能多数。

ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。

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

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

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

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

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

UNIQUEの機能
  • ニュースカスタム投稿
  • 制作実績カスタム投稿
  • ブログ

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

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

ご購入は以下【PR】

ワードプレス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】

【PR】「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「GENESIS」の詳細をTCDのページで見る

ブロックエディタ対応
カスタム投稿タイプ「お知らせ」「サービス(事業案内)」
SEO機能(metaタグ、OGP、高速化)
他、機能多数。

ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。

プロモーション

戦略的WEBサイト構築方法

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

WEBサイトをビジネス戦略のPDCAサイクルに組み込むための考え方と、サイトを内製化する方法を分かりやすく解説します。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

8 + seven =

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

ABOUT US
lin記事を書いている人
はじめまして。「lin」です。クリエイティブディレクター兼グラフィックデザイナーとして活動しています。おかげさまで、キャリア25年以上になりました。「Theme3」は、私が企画デザイン事務所スラッシュディーの仕事で得たノウハウを公開します。
※以下は私が活動している企業情報にリンクしています。