④では footer.php index.php を作成します
ここの説明は確実ではありません。
もっとスマートなやり方が多数あると思います、作業をする場合は自己責任でお願いします。

各.php の作成

index.php中身を基本に使っていきます
ローカル(XAMPP)フォルダで説明していきます
フルパスは下記のような感じになります、説明では下記を相対パスで説明させていただきます
C:/xampp/htdocs/wpblog/wordpress/wp-content/themes/wp_Theme/
短略:C:/WPテーマまでのパス/wp_Theme/
「wp_Theme」は作成していくテンプレートを収納するフォルダです(お好きな名前で)

footer.php の作成

index.php中身の56行目から最後までをテキストエディタで新しくページを作成し貼付け
footer.php
<!-- / #contents END --></div></div>

<footer id="globalFooter"><div class="inner">
<ul class="by">
<li>コピーライトとか</li>
</ul>
<!-- / footer.global END --></div></footer>

</div><!-- / #page -->

</body>
</html>
上記の状態で名前を付けて保存します
保存先:C:/WPテーマまでのパス/wp_Theme/
名前:「footer.php」
文字コード:UTF-8

「footer.php」へWP用タグを追加

*</body> の直前に <?php wp_footer(); ?> 追加
footer.php </body> の直前
<?php wp_footer(); ?>
</body>
</html>

*60行目 <li>コピーライトとか</li> の箇所
footer.php
<li><small>&copy; 2011-<?php echo date('Y'); ?> <?php bloginfo('name'); ?>. All rights reserved.</small></li>
見本では囲いタグを<ul><li></li></ul>にしていますが
お好みのタグでOKです

*フッターにウィジェットを設置する場合もこのテンプレートに追加します
 sidebar.php の説明と一緒に記事にします

footer.php はこれで完了。
他に著作権表記等で増やす場合は60行目に追加していくと良いかと思います

sidebar.php の作成

index.php中身の42~54行目 をテキストエディタで新しくページを作成し貼付け
sidebar.php
<div id="sub">
<div class="item" id="sideSearch">
サーチウィジェット
<!-- / .item END --></div>
<div class="item category">
<h2>カテゴリ</h2>
カテゴリウィジェット
</div>
<div class="item resentEntries">
<h2>最近のエントリー</h2>
最近のエントリーウィジェット
<!-- / .item END --></div>
<!-- / #sub END --></div>
上記の状態で名前を付けて保存します
保存先:C:/WPテーマまでのパス/wp_Theme/
名前:「sidebar.php」
文字コード:UTF-8

「sidebar.php」へWP用タグを追加

私の場合…サイドバーウィジェットを使用しておりません、なのでウィジェット呼び出しタグは自信ありません(^_^;)
このブログでのサイドバーを説明いたします
各ウィジェットの囲いタグは殆ど同じです
sidebar.php
<div class="item">
<h2>ウィジェットタイトル</h2>
ウィジェット読み込みタグ
<!-- / .item END --></div>
読み込ませるウィジェットのタイトルに変更し、ウィジェット読み込みタグの箇所に読み込みタグを追加します
例:カテゴリの場合
sidebar.php
<div class="item category">
<h2>カテゴリ</h2>
<?php wp_list_categories('引数'); ?>
<!-- / .item END --></div>
囲いタグに category クラス属性を追加
タイトル:カテゴリ
ウィジェット読み込みタグ:<?php wp_list_categories(); ?>
<?php wp_list_categories(); ?> も色々指定し表示を変えられます テンプレートタグ/wp list categories参照

他のウィジェットも同じように読み込みタグがあります
<?php get_search_form(‘引数’); ?>:検索フォーム
<?php get_posts(‘引数’); ?>:最近のエントリ
<?php wp_get_archives(‘引数’); ?>:月別アーカイブ
<?php wp_tag_cloud(‘引数’)?>:タグクラウド などなど

*ウィジェットを使えるようにしておく(自信ないので飛ばしていいです
サイドバーを1~5つに分けてあるテーマもよく見かけます
デフォルトで入っているテーマを見ていただくとわかると思うので省略
下記はサイドバーを分けない場合だと思います(^_^;)
sidebar.php
<?php dynamic_sidebar( 'side-widget' ); ?>
囲いタグは、functions.php に書くことで好みに変更できます
functions.php をテキストエディタで新しくページを作成
functions.php
<?php
// サイドバーウィジェット
register_sidebar( array(
	'name' => __( 'Side Widget' ),
	'id' => 'side-widget',
	'before_widget' => '<div class="item">',
	'after_widget' => '</div>',
	'before_title' => '<h2>',
	'after_title' => '</h2>',
) );
?>
上記指定ですと管理画面ウィジェットでカテゴリを追加した場合下記のような内容になります
表示結果のタグ
<div class="item">
<h2>カテゴリ</h2>
<ul>
<li>カテゴリ1</li>
<li>カテゴリ2</li>
<li>カテゴリ3</li>
</ul>
</div>

*フッターでウィジェット表示 表示したい箇所に下記タグを追加
<?php dynamic_sidebar( 'footer-widget' ); ?>
functions.php に
functions.php
<?php
// フッターエリアウィジェット
register_sidebar( array(
	'name' => __( 'Footer Widget' ),
	'id' => 'footer-widget',
	'before_widget' => '<div class="item">',
	'after_widget' => '</div>',
	'before_title' => '<h2>',
	'after_title' => '</h2>',
) );
?>

ウィジェット使用に関してはまったく勉強してません、、すみません

index.php の修正

先にこのテンプレートの説明をすべきだったでしょうか・・・悩
header.php と footer.php で上下の箇所が無くなって残った物の説明
25~40行目 index.php
index.php
<div id="contents"><div class="inner">
<div id="main">
<div class="article">
<div class="articleHeader">
<h2>記事タイトル</h2>
<ul>
<li class="time">投稿日</li>
<li class="category">カテゴリ</li>
<li class="tag">タグ</li>
</ul>
<!-- / .articleHeader END --></div>
<div class="articleBody">
記事内容
<!-- / .articleBody END --></div>
<!-- / .article END --></div>
<!-- / #main END --></div>

*25行目 <div id="contents"><div class="inner"> の前に追加
index.php
<?php get_header(); ?>
<?php get_header(); ?>は、header.php を読み込んでいます

*26行目 <div id="main">の下にループ開始タグを追加
index.php
<div id="main">
<?php if (have_posts()) : ?><?php while (have_posts()) : the_post(); ?>

*29行目 <h2>記事タイトル</h2> の箇所
index.php
<h2><a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">	<?php the_title(); ?></a></h2>

*31~34行目 投稿日 カテゴリ タグ の箇所
index.php
<li class="time"><?php the_time('Y/m/d') ?></li>
<li class="category"><?php the_category(', ') ?></li>
<li class="tag"><?php the_tags('', ', '); ?></li>
<?php the_time(‘Y/m/d’) ?> 日付・時刻等好みで表示できます 日付と時刻の書式参照

*37行目 記事内容の箇所を下記に変更
index.php
<?php the_content('続きを読む'); ?>

*39行目の下にペイジャーを設置
次のページへ と 前のページへ リンク
<?php endwhile; ?>
<ul class="archiveNav">
<li class="prev"><?php next_posts_link('&laquo; 前のエントリー') ?></li>
<li class="next"><?php previous_posts_link('次のエントリー &raquo;') ?></li>
</ul>
ここまではページが存在する場合記事が表示されます
ページが存在しなかった場合に表示させる内容を追加していきます
ページが存在しなかった場合
<?php else : ?>
<div class="article">
<h2>記事が見つかりませんでした。</h2>
<p>検索で見つかるかもしれません。</p><br />
<p><?php get_search_form(); ?></p>
<!-- / .article END --></div>
<?php endif; ?>
<?php get_search_form(); ?>は、検索フォームを置いています
*40行目 <!-- / #main END --></div> の箇所の下に
index.php
<?php get_sidebar(); ?>
<?php get_footer(); ?>
<?php get_sidebar(); ?>は、sidebar.php を読み込んでいます
<?php get_footer(); ?>は、footer.php を読み込んでいます

これで取り敢えずはブログらしい?ページになるのではないでしょうか
スタイルシートを作るのも時間がかかります><
他追加パーツテンプレートのお話もそのうちしたいと思ってます!

2012/01/02 Wordpress
2012/01/08 ,
Comments(0)
関連記事