WordPressをCMSとして基本的なWebサイトを構築する

Posted on: 2011/07/20

WordPressをCMSとして基本的なWebサイトを構築する

WordPressが、ただの「ブログシステム」だったのは昔の話です。
いまや、簡単な更新方法はそのままに、本格的なWebサイトの構築・運用が可能になりました。
今回は、まず、基本的なWebサイトをWordPressで構築する方法について解説していきます。

なお、使用するテーマは、WordPress Webデザイナー向けオリジナルテーマ作成方法で作成したものを使います。
ダウンロードはこちら→noDesign.zip

1. レイアウトとサイト構成

今回目的とする、Webサイトのレイアウトとサイト構成は、以下のようにします。

↑目次に戻る

2. 固定ページの作成

トップページも含め、すべてのページを、固定ページとして作成します。

管理画面 > 固定ページ > 新規作成

固定ページも、記事として投稿します。
こうしておくことによって、後々コンテンツの更新が発生しても、テキストエディタやFTPを使わずに、Webサイトの管理・更新が行えるようになるのです。

3. 固定ページ用テンプレートの作成 – page.php

固定ページを作成したら、テーマフォルダの中に、新たに、固定ページ用のテンプレート page.phpを作成します。

<?php get_header(); ?>

<!-- content -->

<div id="content">
	
	<?php if (have_posts()) : ?>
		
		<?php while (have_posts()) : the_post(); ?>
			
			<div class="post">
				
				<h2><?php the_title(); ?></h2>
				
				<div class="entry">
					<?php the_content(); ?>
				</div>
				
			</div>
		
		<?php endwhile; ?>
		
	<?php else : ?>
		
		Not Found.
		
	<?php endif; ?>
	
</div>

<?php get_footer(); ?>

この page.php を作成しておくことで、固定ページにアクセスすると、テンプレート階層に従って、page.phpのテンプレートが自動的に適用されます。

ページごとに別々のテンプレートを適用したい場合、例えば、「about」というスラッグ（slug）のページ専用のテンプレートを作成したい場合は、テンプレート階層に従って、page-about.php を作成すればよいことになります。

↑目次に戻る

4. グローバルナビゲーションの設置

ヘッダーに、グローバルナビゲーション（各ページへのリンク）を設置します。
header.php に、ハイライトの部分のコードを追加します。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	
	<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
	
	<meta name="description" content="<?php bloginfo('description'); ?>">
	<meta name="keywords" content="">
	
	<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
	
	<?php wp_head(); ?>
	
</head>
 
<body>

	<div id="wrapper">
	
		<!-- header -->
		
		<div id="header">
			
			<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
			
			<?php wp_nav_menu(); ?>
			
		</div>

wp_nav_menu()　ナビゲーションメニューを表示

これらの「メニュー」は、「管理画面 > メニュー」から、カスタマイズおよび複数定義が可能です。

メニュー作成機能を使う為には、functions.php に、以下のコードを追加します。

<?php
add_theme_support('menus');
?>

テンプレートタグ wp_nav_menu() が出力するhtmlは、以下のような構造になっています。

<div class="menu">
	<ul>
		<li class="page_item page-item-1 current_page_item" >
			<a title="About" href="http://xxxxx/">Top</a>
		</li>
		<li class="page_item page-item-2">
			<a title="About" href="http://xxxxx/about/">About</a>
		</li>
		<li class="page_item page-item-3">
			<a title="About" href="http://xxxxx/blog/">Blog</a>
		</li>
	</ul>
</div>

現在アクティブになっているメニューには、current_page_itemというクラスが付加されています。
これを知っていると、アクティブなメニューのスタイルをcssで変えることが出来ます。

↑目次に戻る

5.フロントページ、投稿ページの設定

ディフォルトでは、フロントページにブログが表示されるようになっています。
これを、フロントページを「Top」という固定ページにして、ブログ（投稿）を「Blog」という固定ページに表示させる設定を行います。

管理画面 > 設定 > 表示設定

「固定ページ」にチェックを入れて、「フロントページ」を「Top」、「投稿ページ」を「Blog」に設定します。

これで、「Top」の固定ページがフロントページになり、「Blog」の固定ページにブログ（投稿）が表示されるようになります。
（「Blog」の固定ページには、page.phpではなく、index.phpのテンプレートが適用されます。）

↑目次に戻る

これだけでも、WordPressをただのブログではなく、CMSとしてWebサイトの構築が可能なことがわかったと思います。
次は、本格的？なWebサイトの構築について解説したいと思います。

hijiriworld Web