WordPressを使ったFacebookページ作成と更新：基礎編：WordPressでFacebookページを作ろう（1）（4/6 ページ）

» 2011年08月31日 00時00分公開

[野中龍一，クラスメソッド]

前のページへ 1|2|3|4|5|6 次のページへ

Welcomeページ用WordPressテンプレート

　今回はFacebookページの作成に当たって、WordPressを利用しますが、WordPressのインストール、設定などについては省略します。新しくWordPressを用意するか既存のWordPressで、もかまいません。

※ご利用のバージョンやテーマによっては、問題が発生する可能性もあります。サンプルファイルの利用は自己責任となります。ご注意ください。

　今回は開発用にWordPress 3.2.1を使ったWebサイトを用意しました。テーマはデフォルトの「Twenty Eleven 1.1」を利用し、このテンプレートにFacebookページ用の機能を追加していきます。

　また、テンプレートに依存しないように既存のテンプレートファイルは利用せず、Facebookページ用に必要なすべてのファイルを用意します。

（1）追加するファイル

　追加が必要なファイルは以下になります。カスタマイズすることで複雑なことができるようになりますが、今回は一番シンプルなものにします。

　サンプルファイルは、こちらからダウンロードできます。テンプレートを一から作る必要のない方はサンプルをダウンロードして利用してください。

facebook
- css
  - reset.css
  - style.css
- js
  - html5.js
page-facebook.php

　作成後、これらのファイルはWordPress上の任意のテーマファイルに追加します。

（2）ページの構造

　Facebookページ用のテンプレートは以下のような構造になります。今回は世の中の流れに乗ってHTML5で作成します。HTML5で作成するに当たり、前方互換性を持たせるために「html5.js」を使い、Webブラウザが用意しているデフォルトスタイルをリセットするためのHTML5用スタイルシート「reset.css」を用意します。

（3）ファイルの準備

　それでは、空のファイルを作成しましょう。組み方は「page-facebook.php」をベースとし、Facebookフォルダ内のスタイル、スクリプトを読み込んでいきます。

（4）html5.jsのダウンロード\

　こちらのhtml5.jsを利用します。ダウンロードして保存するか、スクリプトをコピーしhtml5.jsにペーストして保存しましょう。

http://remysharp.com/2009/01/07/html5-enabling-script/

（5）reset.cssのダウンロード

　こちらのHTML5用リセットスタイルシートを利用します。コードをコピーしてreset.cssにペーストして保存しましょう。

http://html5doctor.com/html-5-reset-stylesheet/

（6）記事本文用のスタイル

　記事本文用のスタイルはstyle.cssに記述します。独自に設定しても構いませんし、サンプルにあるstyle.cssを利用しても構いません。

（7）HTML構造の作成

　page-facebook.phpにHTMLの構造を作成していきます。まずは、page-facebook.phpをカスタムページテンプレートであると認識させるためのphpコメントを先頭に挿入します。

<?php
/*
Template Name: Facebookページ
*/
?>

　あとは、（2）の構造に従ってHTMLを記述していきましょう。

<?php
/*
Template Name: Facebookページ
*/
?>
<!DOCTYPE HTML>
<html lang="ja-JP">
　　　　　
<head>
<title>タイトル</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="facebook/css/reset.css" />
<link rel="stylesheet" href="facebook/css/style.css" />
<!--[if lt IE 9]>
<script type="text/javascript" src="facebook/js/html5.js"></script>
<![endif]-->
</head>
　　　　　
<body>
<div id="fb-root" class="editArea">
編集領域
</div>
</body>
</html>

　これで構造の作成は完了です。続いてWordPressのテンプレートタグを追加します。

（8）テンプレートタグの挿入

　（7）で作成したHTMLにテンプレートタグを追加していきます。追加が必要な箇所は以下のとおりです。

タイトル
文字コード
テンプレートディレクトリの URL
記事本文

<?php
/*
Template Name: Facebookページ
*/
?>
<!DOCTYPE HTML>
<html lang="ja-JP">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
　　　　　
<title><?php
　　　　　
// タイトル
wp_title( '|', true, 'right' ); 
　　　　　
// ブログ名
bloginfo( 'name' ); 
　　　　　
//ホーム、フロントページ時にキャッチフレーズを表示
$site_description = get_bloginfo( 'description', 'display' );
if ( $site_description && ( is_home() || is_front_page() ) )
echo " | $site_description"; 
　　　　　
?></title>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/facebook/css/reset.css" />
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/facebook/css/style.css" />
<!--[if lt IE 9]>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/facebook/js/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="fb-root" class="editArea">
<?php the_post(); ?>
</div>
</body>
</html>

　これで、テンプレートの完成です。必要に応じて、header.phpやfooter.phpなどのモジュールファイルを作成し汎用的にするのもいいですね。今回は基礎編のサンプルなので分かりやすい１つのテンプレートに収めておきます。