Webの記録

WordPressでオリジナルテーマ作りにチャレンジ6【single.php編】

投稿日:

この記事は約 4 分で読めます。

カンプイメージ画像

WordPressのオリジナルテーマ作りにチャレンジしています。

今のところ、「index.php」「header.php」「sidebar.php」「footer.php」「functions.php」まで作りました。
これでとりあえず一通りは表示出来るのですが、部分的に気になる所があります。

そんなワケで、ここからは気になる部分を少しずつ変えていくことにしようと思います。

今回は気になったもの1つ目・・・個別記事のページ。
新たに「single.php」を作ってみようと思います。

 

オリジナルテーマの制作の流れ。

  1. html+cssで作ったサイトをWordpressへアップする
  2. html+cssをWordpressへアップしたものをパーツテンプレートへ切り分ける
  3. header・footerを作成
  4. index.phpで各ページのベースを作成
  5. sidebar.phpでサイドバーを作成
  6. single.phpで記事の個別ページを作成 ←今回はココ。
  7. page.phpで固定ページを作成
  8. トップページを作ってみる

 

「single.php」がなくても「index.php」があるので表示はちゃんとされるのですが、「index.php」にはコメント入力をする部分がありません。

なので、今回は記事のタイトルをクリックした時や、「続きを読む」をクリックした時に表示される記事の個別ページ「single.php」の部分を作りたいと思います。

※「single.php」は、「index.php」よりも優先度が高いので「single.php」があると「single.php」の内容を読み込みます。

 

詳しいファイルの階層(テンプレート階層)は、「WordPress日本語Codex」を参考にしたいと思います。

 

「single.php」を用意する

「index.php」の中身をまるまるコピーして「single.php」という名前で保存。(先に空の「single.php」を作ってローカル上でコピーしても良いです。)

 

記事タイトルのリンクを消す

記事タイトル部分にはクリック出来るようにaタグが付いているので、この部分を削除すると残りは以下の1行になります。

<?php the_title(); ?>

 

「続きを読む」部分を消す

「続きを読む」は不要なので、content()の中の’続きを読む’を削除して以下のようにします。

<?php the_content(); ?>

 

前後の記事へのリンクを作る

前後の記事へのリンクイメージ

endwhileの後に以下を追加。divはお好みで・・・。

	    
 <div class="nav-below">
	<span class="nav-previous"><?php previous_post_link('%link', '古い記事へ'); ?></span>
	<span class="nav-next"><?php next_post_link('%link', '新しい記事へ'); ?></span>
</div><!-- /.nav-below -->

 

コメント欄を作る

コメント欄イメージ

前後の記事へのリンクの後に以下の1行を加えると、コメント欄がばっちり付きます♪

<?php comments_template(); ?>

 

これで、記事の個別ページ「single.php」も何とか出来ました。
まだまだ気になる部分があるので、もう少しチャレンジしていきたいと思います♪

-Webの記録
-, ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.

関連記事

no image

X SERVERにa-blog cmsをインストールしてみた。

この記事は約 1 分で読めます。 先日「「AMPPS」にa-blog cmsのローカル環境を作ってみる」でローカル環境にa-blog cmsをインストールしてみました。 今回、a-blog cmsの勉 …

no image

初心者のアクセス解析勉強メモ【用語と計算式】

この記事は約 1 分で読めます。 Webサイトを制作し、運営していく中でアクセス解析は重要だと思っています。そのWebサイトを育て、サイト目的を達成させ、信の目的(事業)の達成をする為にも、とても興味 …

no image

レスポンシブに便利!様々な端末サイズでの見え方を確認できる「Viewport Resizer」

この記事は約 1 分で読めます。 レスポンシブサイトを制作途中、いろんな端末サイズでちょっと見え方を確認をします。 最終的にはやっぱり実機での確認なんですが・・・コーディング途中ではやっぱり手軽に確認 …

no image

WordPress カスタムフィールドを使ってみる

この記事は約 1 分で読めます。 WordPressの便利な機能のひとつ「カスタムフィールド」に今回チャレンジします♪ 「カスタムフィールド」は、記事本文とは別に項目を独自で作って表示するものです。

no image

LIghtBox風画像ギャラリーを「ColorBox」で作ってみた♪

この記事は約 1 分で読めます。LightBoxのように、画像を拡大表示出来るjQueryプラグインを探してみました。 たくさんLightBox風のライブラリはありましたが、今回は「ColorBox」 …