はじめてのWordPress テーマの作成トップページ

　まずはトップページを作っていきます。
テーマ作成講座は、サンプルテーマを使って順番に
講座を進めていきますので、もしこのページから読み始めた人は、こちらの「テーマの作成準備」の記事から順番に読み進めてください。

それでは、始めていきます。

管理画面メニュー「外観」の「テーマ編集」を
選択してください。

右のテンプレートの中から「home.php」を
選択してください。

この「home.php」に記入したものが、トップページに表示されます。

使える記述は、htmlタグとWordPress用のタグです。cssは、style.cssから読み込みます。

それでは、作っていきましょう。

　今回、作るWebページは、右のように、
3カラム（3列）のサイトで、全ページにおいて
ヘッダー部分とフッター部分、左右サイドバーが
共通の内容のページを作ります。

WordPressの場合、ヘッダー部分やフッター部分
など全ページに共通で同じ部分を作る場合、
別ファイルで保存しておきます。

　例えば、ヘッダー部分の記述は、header.phpに、フッター部分の記述は、footer.phpに保存しておきます。

このように別ファイルにそれぞれ書き込んでおき、その記述を使いたい箇所で
WordPress用のタグを使い読み出すのです。

　実際にやってみましょう。home.phpに以下の記述を記入（コピペ）してみてください。

※記述部分をダブルクリックすると記述が全て選択されます。右クリックで保存して貼り付けてください。

<?php get_header(); ?><!-- 　ヘッダー部分（上部分）呼び出し　 -->

<!-- 　記事コンテンツ（中央部分）　 -->
<!-- 　左サイドバー　 -->
<!-- 　右サイドバー　 -->

<?php get_footer(); ?><!-- 　フッター部分（下部分）呼び出し　 -->

　ここで使っている＜？php get_header（）；　？＞、＜？php get_footer（）；　？＞は、
WordPress用タグです。

＜？php get_header（）；　？＞が、header.phpの内容を呼び出し代入するタグ、
＜？php get_footer（）；　？＞が、footer.phpの内容を呼び出し代入するタグとなります。

ひとまず、記入（コピペ）し終わったら、「ファイルを更新」ボタンを押します。

header.php、footer.phpの編集

　つづいて、header.php、footer.phpを編集していきます。

header.php <!DOCTYPE html> <html> <head> </head> <body>
footer.php </body> </html>

home.phpに記入したように、ヘッダーとフッターの記述を読み込みますので
上のようにヘッダーとフッターでhtmlの記述をわけて作ります。
このような感じで記述を分けつつ作っていきます。

header.php <!DOCTYPE html> <html> <head> <meta charset="<?php bloginfo ('charset'); ?>" /> <title><?php wp_title('｜',true,'right'); ?><?php bloginfo('name'); ?></title> <link rel="stylesheet" href="<?php bloginfo ('stylesheet_url'); ?>" type="text/css" /> <link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/favicon.ico" /> <?php wp_head(); ?> </head> <body> <div id="header_1"> <div id="rssf"> <a href="<?php bloginfo('rss2_url'); ?>"><img src="<?php bloginfo('template_url'); ?>/image/feed.png" alt="RSS FEED"width="28" height="28" /></a> </div> <h1><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></h1> <p id="desc"><a href="<?php echo home_url(); ?>"><?php bloginfo('description'); ?></a></p> </div> <div id="container">
footer.php <div id="footer"> <p>Copyright © 2011 - <?php $today = date("Y"); echo $today;?> 　<?php bloginfo('name'); ?>　, All rights reserved.</p> </div> </div> <?php wp_footer(); ?> </body> </html>

　とりあえず、基本的なものをWordPress用タグを使いつつ埋めてみました。
header.php、footer.phpに記入（コピペ）しましょう。終わったら、「ファイルを更新」ボタンを押します。

　内容としては、WordPress用タグを使って管理画面での設定などで記入した値をそれぞれに
代入しています。WordPress用のタグがかなり出ていますが、全部覚えると大変ですので、
別に覚えなくて大丈夫です。

　項目を弄りたい箇所だけ実際のWebページのソースと見比べてみて、記述を移動したり
調整してみてください。＜？php 　～　；　？＞で囲まれた部分がWordPress用のタグですので
移動する時は、コレをひとまとまりとして考えてください。

　まだ基本的なものしか入れてませんので実際のWebページを見ても
たいしたことは書いていません。これからどんどん追加していきます。

　次のWordPress テーマの作成　トップページ作成その2の講座ではタイトル画像と
ナビゲーションバーを追加していきます。

« WordPress テーマの作成準備 WordPress テーマの作成　トップページ作成その2 »

登録タグ: wordpress　・ WordPress入門講座　 | 2012年3月19日

この記事へのコメント

【コメントの投稿の仕方について】

　　　このサイトでは、「Disqus」と呼ばれるコメント機能を使っています。
　　ツイッターやフェイスブックなどにアカウントをお持ちの方は、ログインすることで
　　自分の各プロフィールでコメントすることが出来ます。
　　なんのアカウントもない人もメールアドレスさえ入力すればコメントできます。
　　（入力したメアドはコメント投稿には表示されません。）
　　また、コメント欄には画像を張ることも出来ます。

ひと言コメントや、記事の質問や感想などお気軽にお書きください。
　なにか書いていただけると管理人が嬉しがります。