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.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

「Wordbooker」を使ってWordPressからFacebookへ自動表示をさせてみた。

この記事は約 1 分で読めます。最近気になっているのは、「Facebook」です。 気になる事は即実行~♪ってコトで、興味半分で早速Facebookに登録です♪ 今回は、WordPressのプラグイン …

no image

WordPressサイト内検索でのキーワードが分かるプラグライン「Search Meter」を試してみた。

この記事は約 1 分で読めます。 アクセス解析をしていると、どんなキーワードで検索されたのか?を知ることができます。 しかし、キーワードを入力して検索できなかった結果を知る事はなかなか知る事ができない …

WordPressプラグイン「Jetpack」のギャラリーがスマホで表示が崩れたとき

この記事は約 1 分で読めます。WordPressのプラグイン「Jetpack」はとても多機能で、ホントにいろんなコトができて便利。 しかし、たくさんの画像をギャラリー表示をした場合、スマホのように画 …

no image

DreamweaverCS4にHTML5+CSS3のコードヒント・ドキュメントタイプを!

この記事は約 1 分で読めます。 コーディングの時に主に「Dreamweaver」を使用しています。バージョンは、CS4とCS5。 HTML5をぼちぼち・・・なところで、CS5は最初から「HTML5」 …

no image

lang属性に指定できる言語コード

この記事は約 1 分で読めます。 忘れた頃に海外向けの小規模な案件で、外国語のページ制作のお話があったりします。 そんな時に「lang属性に指定できる言語コード」を毎回調べるのが面倒なので、自分用のメ …