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.

関連記事

『WordPress閲覧しているページが使用しているテンプレートがひと目でわかる!』便利プラグイン「Show Current Template」

この記事は約 1 分で読めます。 WordPressのテンプレートを制作・カスタマイズをしていて、「表示しているページがどのテンプレートを読んでるんだろう」と思ったことはないですか? 「Show Cu …

no image

軽量で簡単に設置出来るjQueryスライダー「FlexSlider」。

この記事は約 1 分で読めます。 今までいくつかのjQueryスライダーライブラリを利用しました。今回も軽量で簡単に設置が出来る「FlexSlider」を見つけたので、早速メモです。 スマートフォンで …

no image

OS+ブラウザごとのcssが簡単に書けるJavaScript「CSS Browser Selector」

この記事は約 1 分で読めます。 「このブラウザだけデザインが崩れてる?!」というのはよくあることで、時々cssにブラウザハックを書かねばならないことがありました。 そんな時、ほんの少しcssでクラス …

no image

画面のスクリーンショット(キャプチャー)をとる3つの方法+1

この記事は約 2 分で読めます。 Webサイトのスクリーンショット(キャプチャー)をとる時、画面に表示されている部分のみの場合や、Webサイト1ページ分全体などあります。 特にWebサイト1ページ全体 …

no image

WordPressログイン画面にオリジナルロゴを表示させる

この記事は約 1 分で読めます。 パッとひと目でそのサイトだと分かりやすくしたいなぁと思って、ログイン画面のロゴをオリジナルに変更してみました。 WordPressのバージョンによって、ロゴ部分のサイ …