【改訂版】08.共通部分の中身を書き換える　loop.php

現在のファイルの確認

前回、header.phpを書き換えるにあたり、functions.phpを作成した。
ひとまず、現在のファイルを確認しておいてもらいたい。

今回のloop.phpの書き換えが完了すれば、ひとまず全ページの表示自体は可能になる。

共通部分の書き換え loop.php

header.phpの書き換えが完了したので、続いてloop.phpの書き換えを行う。
今回もHTMLサイトと同じ表示になるようにページソースを変更していく作業となる。
また、表示されている記事一覧の内容は「投稿」で「新規追加」にて投稿する形となる。

現在の記述 loop.php

	<!-- main -->
      <div id="main">


         <h2><a href="php_html.html">phpとhtmlの違いは？</a></h2>
         <p>
<img src="sozai/a0002_010858.jpg" align="right">htmlは静的なページとなっているので用意されたページをそのまま表示します。<br />
phpは動的なペーとなっているため、ブラウザ側からページを表示するリクエストがあった場合には、まずサーバー側で処理を行い、動的な部分をブラウザが理解できる情報(HTMLなど)に変換してから、その情報を表示することになります。<br clear="all" />
    </p>



<div align="right">
<a href="php_html.html">続きを読む &rarr;</a>
</div>


<div class="meta">
投稿日: 2013年7月2日<br />
カテゴリー: <a href="wordpress.html">WordPress</a> | タグ: <a href="#">php</a> <a href="#">html</a> | 投稿者: <a href="#">admin</a>
</div>



         <h2><a href="absolutepath_relativepath.html">絶対パスと相対パス</a></h2>
         <p>
<img src="sozai/a0055_000859.jpg" align="left">絶対パスとは、サーバのルートからディレクトリ（フォルダ）名を順に書く方法です。<br />
相対パスとは、今表示しているホームページから、ディレクトリの差分だけを書く方法です。<br clear="all" />
<br />
例）<br />
http://www.testsite.com/d1/e1/index.html<br />
から、<br />
http://www.testsite.com/d1/e1/f1/g.html<br />
へリンクする場合、<br />
絶対パスなら、<br />
<A href="/d1/e1/f1/g.html">～</A>のように、、http://～/を除いて、「/」から書き始めます。<br />
<br />
相対パスなら、<br />
<A href="f1/g.html">～</A>のように、今いるフォルダから足りない部分のみを書き足します。「/」で始めてはいけないので注意です。<br />
同じディレクトリなら、ファイル名だけを書けばよく、一つ下に戻りたい場合は「../」のようにコンマを２つつけてスラッシュで一つ下に戻ります。<br />
応用することで、一つ下へ戻りさらに別のフォルダへ一気に指定することも出来ます。「../e2/f.html」のように指定すれば、http://www.testsite.com/d1/e2/f.htmlへリンクします。<br />
    </p>


<div align="right">
<a href="absolutepath_relativepath.html">続きを読む &rarr;</a>
</div>



<div class="meta">
投稿日: 2013年7月2日<br />
カテゴリー: <a href="elementary.html">基礎知識</a> | タグ: <a href="#">絶対パス</a> <a href="#">相対パス</a> | 投稿者: <a href="#">admin</a>
</div>

         <h2><a href="wordpressplugin.html">WordPressのプラグインとは？</a></h2>
         <p><img src="sozai/a0002_008425.jpg" align="left">
         プラグインは、WordPressの機能を拡張するためのツールです。<br />
         WordPress のコアは、柔軟性を保つため、不必要なコードでふくれあがってしまわないように設計されています。<br />
	ユーザーそれぞれが特定のニーズに合ったプラグインを利用して簡単に機能を追加できます。<br clear="all" />

    </p>

<div align="right">
<a href="wordpressplugin.html">続きを読む &rarr;</a>
</div>

<div class="meta">
投稿日: 2013年7月2日<br />
カテゴリー: <a href="wordpress.html">WordPress</a> | タグ: <a href="#">プラグイン</a> <a href="#">ツール</a> | 投稿者: <a href="#">admin</a>

</div>



<div style="width:100%">
	<div style="float:left">
	<a href="">&laquo;前ページ</a>
	</div>

	<div style="float:right">
	<a href="">次ページ&raquo;</a>
	</div>
</div>


      </div>
	<!-- /main -->

WordPressテンプレタグと、phpで書き換えた記述 loop.php

	<!-- main -->
      <div id="main">


	<!-- ▼表示する記事がある場合、ループ開始▼ -->
<?php
if(have_posts()) :
while(have_posts()) :
the_post(); ?>

	<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
	<p>

	<?php the_content('続きを読む &rarr;'); ?>

	<br clear="all" />
	</p>


	<div class="meta">

	投稿日: <?php the_date(); ?><br />

	カテゴリー: <?php the_category('|'); ?> <?php the_tags('タグ: ',' '); ?> | 投稿者: <?php the_author_posts_link(); ?>
	</div>

<?php endwhile; else: ?>
	<p>
	記事がない場合に表示させる文章など。

	<br clear="all" />
	</p>



<?php
endif;
?>
	<!-- ▲表示する記事がある場合、ループ開始▲ -->



	<!-- ▼もし記事が表示数より多い場合、ページャーを表示する▼ -->

<?php if ( $wp_query -> max_num_pages > 1 ) : ?>
<div style="width:100%">

	<div style="float:left">
	<?php previous_posts_link('&laquo;前ページ'); ?>
	</div>

	<div style="float:right">
	<?php next_posts_link('次ページ&raquo;'); ?>
	</div>
</div>
<?php endif; ?>
	<!-- ▲もし記事が表示数より多い場合、ページャーを表示する▲ -->


      </div>
	<!-- /main -->

【ソース解説】WordPressテンプレタグと、phpで書き換えた記述 loop.php

	<!-- main -->
      <div id="main">


	<!-- ▼表示する記事がある場合、ループ開始▼ -->
<!--
■if( have_posts() ) 
該当ページで表示する記事があるかどうかを判断している。
記事があった場合、if内の処理を実行する。
■have_post()
ワードプレスの条件分岐テンプレタグ。条件式に使用する。
もし記事がある場合、trueを返す。
■while( have_posts() ) 
該当ページで表示する記事があるかどうかを判断している。
phpのループ構文while文。条件式がtrueの間、処理を繰り返す。
■the_post();
現在の記事番号の取得と、カウンターの増減をするテンプレタグ。
while文のループ内で記述する$i++;のような変数の増減と同じ。
ループ内の処理の一番最初に記述する点に注意。
これがないと現在の記事番号が変化しないため、ループから抜け出せれない。
-->
<?php
if(have_posts()) :
while(have_posts()) :
the_post(); ?>

<!--
■the_permalink();
該当記事のURLを出力してくれるテンプレタグ
■the_title();
該当記事のタイトルを出力してくれるテンプレタグ
-->
	<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
	<p>

<!--
■the_content();
該当記事の本文を出力してくれるテンプレタグ
()内の引数は、記事入力内でmoreを使用した際に表示させる文。
なので、moreを使わなかった場合、表示されない。
-->
	<?php the_content('続きを読む &rarr;'); ?>

	<br clear="all" />
	</p>


	<div class="meta">
<!--
■the_date();
該当記事の投稿日を出力してくれるテンプレタグ
-->
	投稿日: <?php the_date(); ?><br />

<!--
■the_category();
該当記事が所属するカテゴリー名とリンクを出力してくれるテンプレタグ
()内の引数は、カテゴリーを出力した後の区切り文字を指定出来る。
■the_tags();
該当記事が所属するタグ名とリンクを出力してくれるテンプレタグ
()内の引数は the_tags('前', '区切り文字', '後'); という形で使用可能。
引数は省略出来るので、今回は第2引数まで入力をしている。
the_tags('タグ: ',' ');
■the_author_posts_link();
該当記事の投稿者名とリンクを出力するテンプレタグ
-->
	カテゴリー: <?php the_category('|'); ?> <?php the_tags('タグ: ',' '); ?> | 投稿者: <?php the_author_posts_link(); ?>
	</div>

<?php endwhile; else: ?>
	<p>
	記事がない場合に表示させる文章など。

	<br clear="all" />
	</p>



<?php
endif;
?>
	<!-- ▲表示する記事がある場合、ループ開始▲ -->



	<!-- ▼もし記事が表示数より多い場合、ページャーを表示する▼ -->
<!--
■$wp_query->max_num_pages
総ページ数を取得する。
■if文の条件式の内容
総ページ数が1より多い場合、ページャーを表示する。
-->

<?php if ( $wp_query -> max_num_pages > 1 ) : ?>
<div style="width:100%">
	<div style="float:left">
<!--
■previous_posts_link('&laquo;次ページ');
previous_posts_link();の引数でリンクする文字を決めている。
-->
	<?php previous_posts_link('&laquo;前ページ'); ?>
	</div>

	<div style="float:right">
<!--
■next_posts_link('&laquo;次ページ');
next_posts_link();の引数でリンクする文字を決めている。
-->
	<?php next_posts_link('次ページ&raquo;'); ?>
	</div>
</div>
<?php endif; ?>
	<!-- ▲もし記事が表示数より多い場合、ページャーを表示する▲ -->


      </div>
	<!-- /main -->

WordPressの既存投稿記事を削除後、新規追加で記事を入力する

書き換えた後の現在のサイト表示

WordPress内の投稿記事の一覧が表示された。
現在は、既存記事の一覧が出力されているので、元々のHTMLファイルの記事内容を出力する必要がある。
※下記画像はInstant WordPressの初期投稿記事が表示されている。

まずは既存記事を削除する

管理画面の「投稿」→「投稿一覧」をクリック。現在の記事の一覧が表示される。
タイトルのすぐ左のチェックボックスにチェック。

「一括操作」のプルダウンを「ゴミ箱へ移動」に選択後、「適用」をクリック。
記事が削除された。

サイトを確認すると、記事が全て消えた状態となっているのが分かる。

元々のHTMLファイルの記事内容を「投稿」→「新規追加」に入力

元々のHTMLファイルの内容を「投稿」に追加していく。
時系列順に表示されるので、下の投稿から順番に「投稿」→「新規追加」へ記事を入れる。
記事内の画像は、記事の編集画面で「メディアを追加」からアップロードする。
カテゴリ名やタグが存在していない場合は、新規作成する。公開日時も元々のファイル同様に7月2日とする。

1番目の投稿を入力した。「続きを読む」のリンクを表示するために「more」を忘れない事。

サイトを確認。1番目の投稿が表示された。

今現在、画像の回り込みが行われていなくても問題はない。
WordPressが記事内の画像に対して、スタイルシートを追加するのだが、まだスタイルシートの編集を行っていないためだ。
後ほど、style.cssに対して、スタイルシートの追加の記述をする。

続いて、2番目と3番目の投稿も新規追加する

サイトの表示を確認する。

これで元々のHTMLファイルの記事を全て移動完了した。

エラー修正

WordPressの記事エディタ上で画像の回り込みを行ったが、回り込み処理が出来ていない場合、スタイルシートに記述を追加しなければならない。
画像の「配置」で回り込みを行った画像には、alignleftやalignright、aligncenterといったclassが追加されるので、そのclass用のスタイルシート記述を行う。

style.cssに記述を追加した

.alignleft {
	display: inline;
	float: left;
	margin-right: 1px;
}
.alignright {
	display: inline;
	float: right;
	margin-left: 1px;
}
.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

また、記事表示部分を修正したが、まだ表示がおかしい。
WordPressは自動的にスタイルシートのdiv class等を吐き出すので、スタイルシートに追加していく。
例えば現在、「続きを読む→」のリンク表示が右寄せになっていないが、記事内にmoreタグを挿入すると、リンクタグにはclass="more-link"が追加されるので、style.cssを編集する事で右寄せ等が可能。

style.cssに記述を追加した

.more-link {
	    padding-top:20px;
	    text-align:right;
	    display:block;
}

「続きを読む→」リンクが右寄せになった

投稿日が1記事しか表示されてない不具合を修正

「the_date();」テンプレタグは、同じ日に複数の記事がある場合、最初の記事の一度だけ出力される仕様になっている。
そのため、残りの2記事に投稿日が表示されていないのだ。

記述を修正する the_date(); から the_time();へ

投稿日を全ての記事で出力してくれるテンプレタグthe_time();を使用する。

修正箇所

	<div class="meta">
<!--
■the_date();
該当記事の投稿日を出力してくれるテンプレタグ
-->
	投稿日: <?php the_date(); ?><br />

修正後の記述

	<div class="meta">
<!--
■the_date();
該当記事の投稿日を出力してくれるテンプレタグ
-->
	投稿日: <?php the_time('Y年m月d日'); ?><br />

管理画面の設定→表示で「1ページに表示する最大投稿数」を2に変更

現在、WordPressには投稿が3記事しか入っていないのでページャーが表示されていない。
ページャー（ページ送り）が表示されているかを確認したいので、表示数を変更する。

ページ下部に次ページへのリンクが表示された。
これでloop.phpの書き換えが完了した。

この記事が気に入ったら下のボタンをクリック