2013年09月06日 追記・変更

file0001622107744

各パーツファイルの中身を編集していこう

ファイル分割が完了したと思うので、それでは次にそれぞれのファイルの中身を編集していく。
今現在の状態では、まだWordPressの情報を出力出来ていない。
前回作成した、header.php、loop.php、sidebar.php、footer.phpを編集していこう。

サイト名をWordPressで設定したサイト名にWordPressテンプレートタグを使用して書き換えていこう。
テンプレートタグ全てを覚える必要はない。どのタグを使うかを把握していれば問題ない。

参考:覚えるべきWordPressテンプレートタグ

header.phpの書き換え

sorce_header 変更項目:上から順に
UTF-8、サイト名、style.css、サイトの概要、サイトURL を書き換えていく。

具体的な記述

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo('charset'); ?>" />
<title><?php bloginfo('name'); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="all" />
<meta name="description" content="<?php bloginfo('description'); ?>">
</head>
<body>
<div id="container">
<!-- ヘッダー -->
 <div id="boxA">
<h1><a href="<?php bloginfo('url'); ?>/"><?php bloginfo('name'); ?></a></h1>
 </div>
<!-- /ヘッダー -->
 

loop.phpの書き換え

sorce_loop 変更項目:(上から順に) カテゴリー名、記事1~5へのリンク、記事1~5タイトル、本文 今回は記事を1つ表示させるための表示内容を記述した後、ループ文で「表示しなければならない記事が存在する間」だけ回すといった条件にて処理を行う。 まずは1つの記事を表示させるための箇所を見ていこう。
<div class="entry">
カテゴリー名:<a href="記事1へのリンク">記事1タイトル</a><br />
本文本文本文本文本文本文本文本文本文本文本文本文<br />
</div>
となっている。これをWordPressタグに変更しよう。
その後、上記をワードプレス条件分岐タグと、PHPのif文を併せて書き換える。

記事の一覧表示で使う、WordPress条件分岐タグとwhile文

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

ここで、表示しなければならない記事がある分だけループするので
the_content();などを使えば、各記事の内容が出力される。

<?php endwhile; else: ?>

記事がない場合に表示させる文章など。

<?php
endif;
?>

具体的な記述

<div id="boxB">
<?php
if(have_posts()) :
while(have_posts()) :
the_post(); ?>

<div class="entry">
<?php the_category(); ?>:<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a><br />

<?php the_content(); ?><br />
</div>

<?php endwhile; else: ?>
記事がありません。
<?php
endif;
?>
</div>

sidebar.phpの書き換え

sorce_sidebar 現在、相対パスでファイルを呼び出しているので、これをテーマのディレクトリまでの絶対パスと、画像ディレクトリ名とファイル名という形で書き換えなければいけない。

具体的な記述

<!-- サイドバー -->
 <div id="boxC">
 <img src="<?php bloginfo('template_directory'); ?>/images/panda.jpg">
 </div>
<!-- /サイドバー -->

footer.phpの書き換え

sorce_footer フッター部分のサイト名を変更しよう。

具体的な記述

<!-- フッター -->
<div id="boxD">
Copyright © 2013 <?php bloginfo('name'); ?>
</div>
<!-- /フッター -->
</div>
</body>
</html>


  • このエントリーをはてなブックマークに追加
  • Clip to Evernote
  • LINEで送る

Categories: オリジナルテーマ作成 0 like

Leave a Reply