【旧刊】WordPressテーマ制作のみを取り扱った別冊電子書籍がAmazon Unlimitedでお楽しみ頂けます!!
Amazon Unlimited内で 田中勇輔 で検索してください。

☓ 閉じる

22Aug2012

[WordPress] 最もミニマルなコーポレート型テーマ(企業サイト)の作り方

コーポレート型テーマの作り方

当サイトでWordPressの製作を承りはじめてから半年が経過しました。

以前から部分的なカスタマイズの相談が多かった為「カスタムメイン」で考えていたのですが、蓋を開けてみたら大半は新規製作の依頼です^^;

製作依頼の多くはフリーランス系の人たちの小規模なサイト(僕は「名刺代わりのサイト」と呼んでいます。)で、そのような「小規模サイト+ブログ」という構成はWordPressに最適です。

サイト構成のイメージを具体的に持たない状態のクライアントには、このように説明しています。

私が製作するサイトの“最小構成”は以下になります。

・トップページ
・ブログページ
・お問い合わせ
・その他3ページ (事業紹介/会社概要など)

これに必要なページ・機能を追加すると、追加料金が発生します。

ところが、この最小構成で大半のクライアントは「必要十分」と言うんですね^^

名刺代わりのサイトでは上記構成の需要が多いようですので、今回は上記「最小構成」のサイト製作の手順を記事にしてみたいと思います。

はじめに

今回はHTML/CSSに関する説明を、可能な限り省略します。

どのようにWordPressでコーポレート型サイトを設計し、運営していくのか?
どのようにHTMLページをWordPressのPHPテンプレートに落としこむのか?

この2点を中心に説明していきます。

製作者向けのチュートリアルのようですが、実際はHTML知識のない運営者を意識して書きました。
私に製作依頼をしてくださる方の中で「他に依頼したけど作業内容も費用もよくわからなくて。。。」というお話を聞く事があります。
辛辣な言い方をすれば、最低限のWEB知識も持たずにWEB製作を発注するのは“トンカチも持ったことない人がログハウスを建てるようなもの”です。
作ったら放置するだけの静的なHTMLサイトと違いWordPressは自分で運営・更新をする為のシステムですので、今後WordPressでコーポレートサイトを発注する場合に備えてご一読ください^^

説明の為の素材を用意していたら、実際にサイト一本出来上がってしまいました^^;
誰でも見れる状態になっていますので、デモサイトを確認しながら読み進めてください。

WordPress製作チュートリアル用のデモサイト

デモサイト

WordPressのテーマはPHPで作られていて敷居が高く思われがちですが、実は僕自身PHPは全くと言っていいほど理解していません 笑
PHPは”動的にHTMLを生成する”為のスクリプトです。初歩的な使い方をしている箇所ではHTML+αといった感じで、普段HTMLでWEB製作をしている人は意外とPHPも理解できます。

今回作成するデザインテンプレートは”ザ・プログラム”的ではなく[HTML+α]で製作できますので、テーマ自作を検討している方は是非チャレンジしてみてください。

自作するつもりはなく製作会社に発注する予定の方も、制作側がどういう事をやっているのかが解れば発注時に失敗する事も少なくなると思います。

WEB製作は、個人的に”相場にかなりバラつきのある業界”だと感じています。
「サイト一本100万」の時代の感覚でまだやっている会社、フリーランスで10万円から製作する人。スキルや信頼を除いた純粋な価格はピンキリです。

「発注する側にもそれなりの知識が必要」ということ。これはどんな分野でも同じですが、WEBサイト発注の際には”ぼったくりバー”ならぬ”ぼったくり会社”に相場以上の高値をふっかけられないように、実際に手間がどの程度かかるのか把握しておきましょう^^

1. サイト構成

稼働デモはこちら

今回製作するデモサイトは以下の構成です。
建築会社という事で作ってみました^^

・トップページ (会社紹介/新着情報/サービス紹介)
・ブログ 
・お問い合わせ (問い合わせフォーム込み)
・その他3ページ (事業紹介/施工事例/会社概要)

これをサイトマップにすると、こうなります。
ブラウザから無料で利用できるドローツール【cacoo】で作成しました。

最小構成のサイトマップ

ブログの中で「新着情報」と「一般ブログ」に分かれていますね。どういうサイト設計なのでしょうか??
それではサイト設計・システム設計編に参りましょう。

↑目次に戻る

2. WordPressシステム設計

稼働デモはこちら

2.1. WordPressシステム設計の基本

WordPressの記事には2つの種類があります。

時系列・カテゴリー別・タグ別で記事を管理する「投稿」
記事の親子関係を設定でき、個別のページデザインを指定可能な「固定ページ」

次が超重要。

1. いわゆる”ブログ記事”は「投稿」で作成・管理します。
2. 会社概要・お問い合わせなど、時系列に関係なく固定的に表示させるページは「固定ページ」で作成します。

今回のデモサイトでいうと、

トップページ・事業紹介・施工事例・会社概要・お問い合わせ は【固定ページ】
新着情報欄内に表示させる情報・一般のブログは【投稿】

で作成・管理します。

もちろんどちらの記事でもWordPress管理パネルから編集可能ですので、WEB製作知識のない運営者でもテキスト程度ならサイトの隅々までブラウザから変更できます。
これがWordPressなどCMSの最大の強みですね。

↑目次に戻る

2.2. 特殊な設計1 新着情報

新着情報は、デモサイトトップページの「お知らせ」欄に表示されます。
各記事は、それぞれ詳細ページにリンクされています。

デモサイトで、この新着情報の性質を見てください。
このような「時系列で」「新しい情報が追加される」ような記事は、固定ページではなく「投稿」で作成・管理する必要があります。

“新着情報”カテゴリーを作成して、トップページ「お知らせ」欄に「新着情報カテゴリーの最新記事を5件表示」というスクリプトを書きます。

コードの詳細は後ほど公開します。

ブログページでは「投稿」記事の全てを表示させるようにしていますので、当然一般ブログ記事のほかに新着情報記事も表示されます。
ブログページに”一般ブログ”カテゴリーの記事だけを表示させたい場合は、トップページと同様のスクリプトを書く事で実現できます!

↑目次に戻る

2.3. 特殊な設計2 今日のひとこと

サイドバーの最上部を見てください。

「今日のひとこと」という欄があります。

この箇所は固定記事「今日のひとこと」の本文を表示させています。

WordPressではこのように「指定した記事を任意の箇所に表示させる」という事も可能です。

今回は固定ページで制作して”更新の度に書き換える”という方法を選択しましたので、古い記事は消されて新しい記事に置き換わります。
バックナンバーを残して、更にそれぞれ詳細記事を用意したい場合は、新着情報欄と同様に投稿記事にして「今日のひとことカテゴリーの最新1件をサイドバーに表示」という方法を選択します。

↑目次に戻る

3. 制作するテーマファイルの確認

稼働デモはこちら

3.1. WordPress制作の手順

1. 静的なHTMLページでトップページ(全体的なデザイン)を制作
2. 各パーツに分けて、WordPressテーマファイルに保存

の2段階制作法がオススメです。

PHPのテーマファイルはプレビューに手間がかかる為、最初期の製作はプレビューしながら進められるHTMLページで製作します。
いちいちプレビューしないでフリーハンドでさくさく書けるレベルの人でも、やはり一度HTMLでページ全体を作った方が効率的だと思います。

↑目次に戻る

3.2. 必要なテーマファイルを確認

WordPressのテーマ構造について記事を書いていますのでご覧ください。
[WordPress] 最初に覚えるテンプレートテーマの構造

トップページのHTMLからは以下のテーマファイルが切り出せます。

・header.php (ヘッダー部のみ)
・sidebar.php (サイドバー部のみ)
・footer.php (フッター部のみ)
・page.php (固定ページ用テンプレート
 ※実際はトップページ専用テンプレートpage-top.php(詳しくは次項で) 

上記に加え、最低でも

・single.php (投稿ページ用テンプレート)
・index.php (一覧ページ用テンプレート※注)

が必要になります。

※index.phpは必ずしも一覧ページ用に用意されたテンプレートではありませんが、最小構成で作る今回は一覧ページとして使用します。

【デフォルトテーマをコピーしてカスタムする】

今回製作した中には、コメントシステムも検索システムも含まれていません。
本文内で使用されるCSSの指定もしていないため、運営者がブログ内で指定した”画像のキャプション”や”文字装飾”も無視されてしまいます。

サイト公開時点では全ての用意をしたつもりでも、実際に運営を始めると上記以外にも多岐にわたる準備・設定が必要だということに気付かされます。

あらゆる場面、全ての機能に対応したテーマをゼロから作るというのは、相当な上級者でない限りミッションインポッシブルですね^^;

テーマファイルはゼロから作らずにTwentyTenなどのデフォルトテーマをコピーして、必要なファイルのみ変更、不要ファイルは削除、よくわからないファイルは放置、という方法をとりましょう。

↑目次に戻る

3.3 . 今回特別に用意するテンプレートファイル

デザインを制作していると、固定記事ページだけで3種類のデザインテーマが必要になりました。

【基本の固定ページ用テンプレート】
投稿記事と同様のブログ型デザインだが、投稿日時とカテゴリーの表示を省略。

【コンセプトページ用テンプレート】
本文のデザインに凝ったアピール性の強い記事用に、本文内の全ての表示を省略。 全面を記事本文で使用可能。

【トップページ】
トップページ専用のデザインテンプレート。

基本の固定ページ用テンプレート(page.php)に加えて、
・page-concept.php (コンセプトページ用)
・page-top.php  (トップページ用)
の2つを追加で用意します。

※固定ページごとにデザインテンプレートを変える方法はこちら。
[WordPress] 固定ページのデザインを分ける2つの方法。条件分岐orカスタムテンプレート

↑目次に戻る

4. ソースコード全公開

稼働デモはこちら

この章ではソースコードを全て公開しますので、長文になります・・・
ソースコードに興味のない方は、次章にお進みください。

【5. WordPressのインストールと設定】 にすすむ

※phpで作るテンプレートテーマの理解が主な目的ですので、HTML/CSSについては割愛します。

【パーツテンプレート】
header.php
sidebar.php
footer.php

【詳細ページテンプレート】
page-top.php
page.php
page-concept.php
single.php

【一覧ページテンプレート】
index.php

4.1. まずは重要な3パーツのテンプレート

最初に制作したトップページのHTMLファイルから、3つのパーツテンプレートを切り出します。

3つのパーツとは

・header.php
・sidebar.php
・footer.php

です。

これら3テンプレートは、それ自体がページのテンプレートになるのではなく、他のページテンプレート内で呼び出されて使用します。

HTMLで作ったトップページ

<html>

<head>

<title>デモサイト</title>

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

</head>

<body>

<div id="site-wrapper">

	<div id="header">
		
		<p id="header_title"><a href="#" title="サイト名"><img src="img/cc_logo.gif" alt="サイト名" width="448" height="52" /></a></p>
		<p id="header_text"><a href="#">このサイトはty's empty f'logが製作したWordPressチュートリアル用デモサイトです</a></p>
		
	</div>
	
	<div id="top_navi">
		
		<a id="navi_top" name="navi_" href="#">トップページ</a>
		<a id="navi_item" name="navi_item" href="#">事業紹介</a>
		<a id="navi_price" name="navi_price" href="#">施工事例</a>
		<a id="navi_about" name="navi_about" href="#">会社概要</a>
		<a id="navi_blog" name="navi_blog" href="#">ブログ</a>
		<a id="navi_contact" name="navi_contact" href="#">お問い合わせ</a>
		
	</div>
	
	<div id="middle">	        
	
		<div id="sidebar">
		
		    <div id="widget_board">
		    
		        <div id="widget_board_inner">
		        
		            <p>暑い日が続きますね。このまま熱くなり続けたら12月頃には40度を超えるかもしれないですね!SampleCompanyは8月も無休で営業します。</p>
		            <p id="widget_board_date">(8月17日)</p>
		            
		        </div>
		    
		    </div>
		        
		</div>
		
		<div id="main_content">
		
		    <div id="top_jouhou">
		    
		        <img src="img/top_jouhou.gif" />
		        
			    <div id="top_jouhou_inner">
			      
			        <p>2012.08.08 <span class="top_jouhou_title">トップページの新着情報欄について</span></p>
			        
			    </div>

			</div>
			
		</div>
		
	</div>				
	
	<div id="footer">
	
		<p id="footer_links">| <a href="#">事業紹介</a> | <a href="#">施工事例</a> | <a href="#">会社概要</a> | <a href="#">ブログ</a> | <a href="#">お問い合わせ</a> | </p>
		<p id="footer_copyright">Copyright 2012  Sample Company  All Rights Reserved.</p>
		
	</div>
	
</div>
							
</body>

</html>

header.php

<?php echo '<?xml version="1.0" encoding="'. get_bloginfo('charset') . '" ?>'; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>




<?php wp_head(); ?>
</head>

<body>



<div id="site-wrapper">

      <div id="header">
      	<p id="header_title"><a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/img/cc_logo.gif" alt="<?php bloginfo('title'); ?>" width="448" height="52" /></a></p>
        <p id="header_text"><a href="http://tanaka-yusuke.com/">このサイトはty's empty f'logが製作したWordPressチュートリアル用デモサイトです</a></p>
      </div>
      <div id="top_navi">
      	<a id="navi_top" name="navi_" href="<?php bloginfo('url'); ?>/">トップページ</a>
      	<a id="navi_item" name="navi_item" href="<?php bloginfo('url'); ?>/service">事業紹介</a>
      	<a id="navi_price" name="navi_price" href="<?php bloginfo('url'); ?>/example">施工事例</a>
      	<a id="navi_about" name="navi_about" href="<?php bloginfo('url'); ?>/about">会社概要</a>
      	<a id="navi_blog" name="navi_blog" href="<?php bloginfo('url'); ?>/blog">ブログ</a>
      	<a id="navi_contact" name="navi_contact" href="<?php bloginfo('url'); ?>/contact/">お問い合わせ</a>
      </div>
      
      <div id="middle">

sidebar.php

<div id="sidebar">

<?php dynamic_sidebar( '一番上のウィジェットエリア' ) ; ?>

<div id="widget_board">

<div id="widget_board_inner">

	<?php // ----------------今日のひとこと用WP_query-------------------
    $args = array(
          'pagename' => comment,
    );
    
    $the_query = new WP_Query( $args );
    
    if ( $the_query->have_posts() ) : ?>

    <?php while ( $the_query->have_posts() ) : $the_query->the_post(); 
    ?>
      
    <?php the_content(); ?>
    <p id="widget_board_date">(<?php the_time('Mj日') ?>)</p>

    <?php 
    endwhile; endif;
    wp_reset_postdata();
    // ----------------今日のひとこと用WP_query終了-------------------
    ?>

</div>
</div>

<?php dynamic_sidebar( '一番下のウィジェットエリア' ) ; ?>

</div>

footer.php

		</div>

	</div>
	
	<div id="footer">
	
		<p id="footer_links">| <a href="<?php bloginfo('url'); ?>/?page_id=10">事業紹介</a> | <a href="<?php bloginfo('url'); ?>/?page_id=8">施工事例</a> | <a href="<?php bloginfo('url'); ?>/?page_id=12">会社概要</a> | <a href="<?php bloginfo('url'); ?>/?page_id=18">ブログ</a> | <a href="<?php bloginfo('url'); ?>/?page_id=6">お問い合わせ</a> | </p>
		<p id="footer_copyright">Copyright 2012  Sample Company  All Rights Reserved.</p>
		
	</div>
	
</div>

<?php wp_footer(); ?>

</body>
</html>

ウィジェットエリアをカスタマイズしていますので、functions.phpもカスタマイズします。
functions.phpのカスタムは少し上級者向けですので、うまく動かなかったらTwentyTenデフォルトのまま使うほうが無難です。
(その場合はウィジェットエリアを読み込むsidebar.phpもデフォルトのまま使用します)

参考:[WordPress]ウィジェットエリアを好きな場所に追加するカスタマイズ

if ( function_exists('register_sidebar') )
{
	// サイドバー上部のウィジェットエリアを定義
	register_sidebar( array(
		'name' => __( '一番上のウィジェットエリア' ),
		'id' => 'top',
		'description' => __( 'サイドバーの一番上に表示されるウィジェットエリアです' ),
		'before_widget' => '<div class="widget %2$s" id="%1$s">',
		'after_widget' => '</div>',
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>',
	) );
 
	// サイドバー下部のウィジェットエリアを定義
	register_sidebar( array(
		'name' => __( '一番下のウィジェットエリア' ),
		'id' => 'middle',
		'description' => __( 'サイドバーの真ん中に表示されるウィジェットエリアです' ),
		'before_widget' => '<div class="widget %2$s" id="%1$s">',
		'after_widget' => '</div>',
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>',
	) );
 
}

4.2. つぎに固定ページテンプレート

サイト共通のパーツ3つを作ったら、次は各ページのテンプレートです。

まずはトップページのテンプレートを作成しましょう。

デフォルトの固定ページテンプレートではなく、トップページ専用テンプレート(page-top.php)として作成します。

トップページでは、本文部分に新着情報カテゴリーのリストを作成します。

page-top.php

トップページ用テンプレート 
(適用ページ:トップページ)

<?php
/*
Template Name: トップページ
*/
?>



<?php get_header(); ?>

	<?php get_sidebar(); ?>

    <div id="main_content">

	<div id="top_jouhou">
    
    	<img src="<?php bloginfo('stylesheet_directory'); ?>/img/top_jouhou.gif" />
    
    	<div id="top_jouhou_inner">

		<?php // ----------------新着情報用WP_query-------------------
		$args = array(
		       'category_name' => 'news',
			'posts_per_page' => 5,
		);
		
		$the_query = new WP_Query( $args );
		
		if ( $the_query->have_posts() ) :
		while ( $the_query->have_posts() ) : $the_query->the_post(); 
		?>
		  
        <p><?php the_time('Y.m.d') ?> <span class="top_jouhou_title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></span></p>
  
		<?php 
		endwhile; endif;
		wp_reset_postdata();
		// ----------------新着情報用WP_query終了-------------------
		?>

        </div>

    </div>


	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
		
        <div class="post_body">

            <?php the_content(); ?>

        </div>


    <?php endwhile; ?>

	<?php else: ?>

    <p>記事が見つかりませんでした。</p>

<?php endif; ?>
	
    </div>
    
<?php get_footer(); 

4.3 . その他の固定ページ/投稿ページテンプレート

トップページが出来たら、その他の固定ページテンプレートも製作しましょう。

page.php

デフォルト固定ページテンプレート
(適用ページ:会社概要・お問い合わせ)

<?php get_header(); ?>

	<?php get_sidebar(); ?>

    <div id="main_content">

	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
		

        <h1><?php the_title(); ?></h1>

        <div class="post_body">

            <?php the_content(); ?>

        </div>


    <?php endwhile; ?>

	<?php else: ?>

    <p>記事が見つかりませんでした。</p>

<?php endif; ?>
	
    </div>
    
<?php get_footer(); 

page-concept.php

コンセプトページ用 (テンプレート名:施工事例)
(適用ページ:事業紹介・施工事例)

<?php
/*
Template Name: 施工事例
*/
?>

<?php get_header(); ?>

	<?php get_sidebar(); ?>

    <div id="main_content">

	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
		
        <div class="post_body" style="padding-top:0;">

            <?php the_content(); ?>

        </div>


    <?php endwhile; ?>

	<?php else: ?>

    <p>記事が見つかりませんでした。</p>

<?php endif; ?>
	
    </div>
    
<?php get_footer(); 

single.php

次に投稿ページ。
固定ページとほぼ同じですが、投稿日時・登録カテゴリーの表示をします。
(適用ページ:すべての投稿記事ページ)

<?php get_header(); ?>

	<?php get_sidebar(); ?>

    <div id="main_content">

	      <div class="clear"></div>
	  
		<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
			
        <h1><?php the_title(); ?></h1>

        <div class="post_date">
            <?php the_time('Y年Mj日') ?> <!-- by <?php the_author(); ?>  --><?php the_category(' / ') ?>
        </div>

        <div class="post_body">

            <?php the_content(); ?>

            <?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>')); ?>

        </div>

	    <?php endwhile; ?>
		
		<?php else: ?>
	
	    <p>記事が見つかりませんでした。</p>
	
    </div>


<?php endif; ?>

<?php get_footer();

4.3 . 最後に一覧ページのテンプレート

記事の一覧ページ(index.php)のテンプレートを作成します。

このテンプレートは「ブログトップページ」の他に、自動生成されるカテゴリー別/タグ別などのアーカイブページ、404errorページでも使用されます。

※一般的にはアーカイブページにarchive.php、404errorページに404.phpのテンプレートを用意しますが、今回は最小構成なので。。。詳しくはこちらの記事を。
[WordPress] 最初に覚えるテンプレートテーマの構造

index.php

一覧ページテンプレート
(適用ページ:ブログ、その他)

<?php get_header(); ?>

	<?php get_sidebar(); ?>

    <div id="main_content">
	    

	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
		
			<div class="index_post" id="post-<?php the_ID(); ?>">
				
                <h2 class="index-title-h2"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

                <div class="post_date">
		            <?php the_time('Y年Mj日') ?> <!-- by <?php the_author(); ?>  --><?php the_category(' / ') ?>
                </div>
              				
				<div class="post_body_index">
                
					<?php the_content('この記事を読む &#187;'); ?>

                    
				</div>

			</div>

    <?php endwhile; ?>

        <div id="pagenavi"><?php wp_pagenavi(); ?></div>

	<?php else: ?>

		<h2 class="center">記事が見つかりませんでした</h2>
		<p class="center">古い記事は削除された可能性があります。またリンクが間違えているのかも知れません。</p>
	
	<?php endif; ?>

	</div>

<?php get_footer();

これでテンプレートテーマの製作はオシマイです。

それではWordPressの設定に進みましょう。

↑目次に戻る

5. WordPressのインストールと設定

稼働デモはこちら

5.1. WordPressのインストール

最近はWordPressの自動インストール機能をもつレンタルサーバーが増えてきましたね!

僕自身が触ったことのある国内のサーバーでは以下が対応していました。

さくら スタンダードプラン
ロリポップ ロリポプラン
エックスサーバー

僕は自動でデータベースなどを作られるのが気持ち悪いので、毎回手動でインストールしています^^;

WordPress公式:ダウンロード&インストール

↑目次に戻る

5.2. WordPressの基本設定

インストールが終わったらログインをします。

左メニューの[ 設定 – 一般 ]から、サイト名などの設定を行います。ここは適当に。

次が重要。 パーマリンク設定を行います。

デフォルトのままではURLが ○○.com/?=123となって”?”付きURLは嫌われるうえ、URLの変更が出来ないのでヘッダーやフッターのリンク設定が面倒です。。。
テーマファイル製作で既に各ページURLを「/service/」「/contact/」などと指定してしまいましたので、後ほど固定ページ作成の際にそれに合わせたURLに変更します。

パーマリンクはデフォルト以外を推奨

今回は上から2番目にしました。

※デフォルトは非推奨ですが、デフォルトでもサイト製作可能です。その場合は1.固定ページを製作して生成されたURLを確認。2.テンプレートファイルのリンク先に適用。という手順になります。

↑目次に戻る

5.3. プラグインのインストール

お問い合わせフォームなどはプラグインで実装しますので、必要なプラグインをインストールします。

Contact fotm 7
WP-PageNavi

Contact form 7は、問い合わせフォーム生成プラグインです。
WP-PageNaviは、記事一覧ページのページナビゲーション生成プラグインです。

長文になり過ぎるので、今回はプラグインの説明は割愛します^^;

↑目次に戻る

6. 固定ページを作成する

稼働デモはこちら

6.1. 各固定ページを用意する

固定ページで作成するページは以下になります。

・トップページ
・事業紹介
・施工事例
・会社概要
・ブログ(のトップページ)
・お問い合わせ
・今日のひとこと(サイドバーで読み込んで表示)

↓こんな感じ
固定ページ

↑目次に戻る

6.2. 固定ページごとに適用するテンプレートを指定する

固定ページ用に3つのテーマテンプレートを用意しましたので、各ページに適用します。

page.php = デフォルトテンプレート
page-concept.php = コンセプトページ用 (事業紹介&施工事例)
page-top.php = トップページ用 (トップページ)

固定ページのテンプレートを指定

固定ページテンプレートについて詳しくはコチラの記事で。
[WordPress] 固定ページのデザインを分ける2つの方法。条件分岐orカスタムテンプレート

↑目次に戻る

6.3. 固定ページのURLを変更する

4.1. のheader.phpを見てください。
header.phpでは既に固定ページへのリンクを指定していますので、これから作成する固定ページのURLを同じ物にしましょう。

・トップページ = /
・事業紹介 = /service/
・施工事例 = /example/
・会社概要 = /about/
・ブログ = /blog/
・お問い合わせ = /contact/

固定ページのURLを変更

先述の通り、パーマリンク設定がデフォルトのままではURL変更はできません。

↑目次に戻る

6.4. トップページとブログページは特殊なので注意

固定ページのURLを変更していると困ったことが起きます。

トップページのURLを空欄「/」にすることができません。

実はトップページのURLは特殊なので、こちらでURLを指定することはできません。

[設定 – 表示設定] から、トップページで表示したい固定ページを指定できます。

トップページと投稿記事一覧ページは[表示設定]で指定

同様に、投稿記事の一覧ページもこちらで指定します。

↑目次に戻る

6.5. 準備ができたら、各ページ本文を作成

固定ページを全て用意したら、本文を作成します。

トップページの新着情報欄はテンプレート内に組み込みましたので、本文で製作するのは新着情報欄より下の箇所になります。

ブログページは記事一覧が表示される特殊なページですので、本文は空欄のままでOKです。

問い合わせページにはプラグインContact Form 7を用いて、問い合わせフォームを組み込みます。
Contact Form 7 の使い方については割愛します。

その他のページは本文内を普通に作成しましょう。

↑目次に戻る

6.6. 今日のひとこと を表示するスクリプト

サイドバー上部で 今日のひとこと(/comment/) の本文を表示させています。

4.1. のsidebar.phpの中で、以下の部分が該当します。

	<?php // ----------------新着情報用WP_query-------------------
    $args = array(
          'pagename' => comment,
    );
 
    $the_query = new WP_Query( $args );
 
    if ( $the_query->have_posts() ) : ?>
 
    <?php while ( $the_query->have_posts() ) : $the_query->the_post(); 
    ?>
 
    <?php the_content(); ?>
    <p id="widget_board_date">(<?php the_time('Mj日') ?>)</p>
 
    <?php 
    endwhile; endif;
    wp_reset_postdata();
    // ----------------新着情報用WP_query終了-------------------
    ?>

3行目を見てください。 ほぼ英語なので何となく理解できますね(笑
「ページネーム=commentを読み込む」と書いています。

例えばここで、 comment を service に変更したら、今日のひとこと欄に事業紹介ページの本文が表示されます。

↑目次に戻る

7. 投稿記事を用意する

稼働デモはこちら

7.1. カテゴリーを準備する

投稿記事は、カテゴリーによって複数のグループに分けて管理します。

1. 新着情報カテゴリー
2. 日記カテゴリー

新着情報カテゴリーの記事は、ブログトップページの他、サイトトップページの新着情報欄でリストアップ表示されます。
日記カテゴリーの記事は、ブログトップページでのみリストアップされます。

固定ページのURLと同様に、こちらも先にカテゴリースラッグを決めていますので、作成時に間違えないようにします。

名:新着情報 = スラッグ:news
名:日記 = スラッグ:diary

[ 投稿 – カテゴリー ]
カテゴリーを作成

↑目次に戻る

7.2. トップページの新着情報 を表示するスクリプト

4.2. のpage-top.phpの中で新着情報の箇所は以下です。

		<?php // ----------------新着情報用WP_query-------------------
		$args = array(
		       'category_name' => 'news',
			'posts_per_page' => 5,
		);
 
		$the_query = new WP_Query( $args );
 
		if ( $the_query->have_posts() ) :
		while ( $the_query->have_posts() ) : $the_query->the_post(); 
		?>
 
        <p><?php the_time('Y.m.d') ?> <span class="top_jouhou_title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></span></p>
 
		<?php 
		endwhile; endif;
		wp_reset_postdata();
		// ----------------新着情報用WP_query終了-------------------
		?>

3行目を見てください。 ほぼ英語なので何となく理解できますね。(デジャヴ??)
「カテゴリースラッグ = news を読み込む」と書いています。
ここで news を diary に変更したら、日記カテゴリーの記事が表示されます。

4行目では 表示する記事数 = 5件 と指定しています。

↑目次に戻る

8. PHPテンプレートタグや制作上の注意

稼働デモはこちら

8.1. テンプレートタグ

WordPressのテンプレートファイル内で使用して「記事タイトル」「投稿日時」などを取得できる特殊なタグをテンプレートタグと呼びます。

今回使用したテンプレートタグから、使用頻度の高いものをいくつか紹介します。

<?php wp_head(); ?>
<?php wp_footer(); ?>

それぞれ最下部、最下部に挿入して、外部ファイル読み込みなど必要なコードを出力します。
これが無いと一部プラグインが動作しませんので、何も考えずに指定の場所に記述しましょう。

<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

header.php,sidebar.php,footer.php を読み込みます。

<?php bloginfo('url'); ?>
<?php bloginfo('name'); ?>

さまざまな基本情報を出力します。
参考:テンプレートタグ/bloginfo

<?php the_title(); ?>
<?php the_content(); ?>
<?php the_time('Y年Mj日') ?>

記事タイトル,本文,投稿日時 を出力します。
参考:[WordPress]投稿日時をおしゃれにカスタマイズ

↑目次に戻る

8.2. オリジナルテーマ製作の注意点

■ デフォルトテーマをコピーしてカスタマイズする

コメント機能、記事内の文字装飾など、WordPressの全ての機能を使うには相当な理解とスキルが必要になります。
ゼロからテーマを作ろうとせず、すでに完成されたデフォルトテーマをカスタマイズしてオリジナルテーマを作成しましょう。

WordPress初心者・PHP初級者は、特に

comments.php
searchform.php
functions.php

の3つは変更・削除せずに、テーマフォルダ内のアンタッチャブルな存在として保管しておきましょう^^;

■運営者がウィジェットを楽しめるようにする

運営者が好きにウィジェットを変更できるようにしてあげるのが、WordPressでサイト製作する側の義務だと思います。

他社の案件で、ウィジェットを無効化して全てsidebar.php内に記述している物を数件見ましたが、言語道断だと思います。
(自由に更新できる一般ブログもない、トップページもhome.phpに直書き、固定ページは画像貼り付け。。。 それならWordPressにする意味ないじゃん!)

ただしオリジナルデザインのサイドバーをウィジェットとして保存すると、誤操作で消えてしまうリスクがあります。

そのため僕はいつもウィジェットエリアを複数用意して、

・上のウィジェットエリア
・ココは変更しないでください
・下のウィジェットエリア

という名前にして、誤操作を予防しています。

更に安全にするには、今回製作したサイトのように重要な箇所だけsidebar.phpに直書きしてしまえば、削除のリスクはゼロになります。

■ウィジェット用のスタイルを用意しておく

公開時点で使用していなくても、今後「カテゴリー一覧ウィジェット」などを有効化する時に備えて、デフォルトで用意されているウィジェット用のスタイルを準備しておきましょう。

■本文内で使用できる「見出し・キャプション・強調」などの装飾を用意

記事内で使用する装飾用スタイルを用意しておくと、よりGoodです^^

プラグインAddQuicktagなどを使い、本文内でよく使うタグとスタイルをセットで用意すると、ユーザビリティがグンッと上がります!

【あとがき】

コーポレートサイト型WordPressを製作したい人が多いので「WPインストール+作成済みの企業型テーマ(ちょこっとオリジナルカスタマイズ)+本文は自分で作ってね^^」のセットで10万円以下でできないか、と模索している内に、何故かテーマ製作のチュートリアル記事になってしまいました。

ネットショップを始めて1年後くらいに気づいたのですが、僕はどうやら商売人の気質がゼロのようで、情報・スキルを売るよりも無料公開するほうに向かってしまいます。。。
メールで相談を受ける際も、ストーカーくらい長いメールを返して毎回「無料なのにすごい丁寧にご説明頂き、、ありがとうございます。。。」と多少ひかれてます 笑

ちなみに、今回製作した規模のサイトは10万円程度で請け負っています。(相場は・・お調べください)
何ヶ月も悩んだ上で身銭を切って依頼をしてくれる人に対して、5ページ程度のサイトで数十万は請求できません。。。

僕は運営のプロなので断言しますが、サイトは作っただけでは問い合わせはほとんど来ません。
「ちょっと高い名刺」という感じで、ほぼ無駄金になります。
そういう確信もあり「問い合わせのこないサイト」の費用対効果を考えると「10万円が上限だろう。」と思ってしまいます。
(もちろん、運営者のスキル次第でサイトを盛り上げる事もできますが、運営知識もなく更新に対するモチベーションが低い(サイト完成がゴールだと思っている)場合がほとんどです。)

数十万円かけてサイト製作するのは考えものですが、このサイトで大々的に「WordPressでサイト一本作ります!」と言っていないのに定期的にコーポレート型サイトの依頼があるのは”自分のサイトを持ちたい人が多い”という証拠ですので、このネット社会には「より安くサイトを提供できる方法」が必要です。
僕側もデザイン外注で10万円で請け負っているのは実際”ほぼ無給”ですし、”費用的に無理がなく製作の負担も少ない”という、お互いに良い方法が(個人的にも)早急に必要です。
ここで話が最初に戻り、そんな事を試行錯誤しているうちに何故かテーマ製作のチュートリアル記事になった、というわけです 笑

この素晴らしいWordPressのシステムを使えば本文くらいは自分で製作できるはずなので、本文製作料金は不要だと思うんですよね。
できる箇所は自分で製作したほうがシステムへの理解も深まり、定期的な更新に対するモチベーションも上がるはずです。
自分でできない箇所「本体のインストールとテーマ作成」だけをこちらでやって、本文は全て依頼者に製作してもらえばお互い安くすむはずです。
「簡易的でいいから安いもの」を求める方には、「ある程度テンプレート化されたデザイン+簡単なカスタマイズ」で満足してもらえますし、工数も少なくなります。

依頼者も製作者も笑顔になれるように、依頼者が自分でサイトを製作できるようなサービスパックを近日中に完成させようと思います。
商売アピールをするページ製作はどんどん先延ばしになるので、実際は今年中に完成するかもわかりませんが^^;

関連記事