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

Facebookページに「お問い合せフォーム」を簡単設置♪

この記事は約 2 分で読めます。何気に始めたFacebookでは意外な人との繋がりが持てて、思ったより面白くて毎日開いて見てしまいます。 きっとそんな風に思っている方も多いのでしょう。 最近、Face …

no image

Webフォント「Google Web Fonts」を使ってみた

この記事は約 1 分で読めます。 だんだんと古いブラウザに対応しなくてよくなってくると、以前は画像だけで対応していたものがcss3などを利用できるようになってきます。 Webフォントもcss3の技術。 …

no image

苦手なJavaScriptをイチから勉強してみる【if文とfor文】

この記事は約 1 分で読めます。 苦手なJavaScriptをイチから勉強してみる【JavaScriptを外部ファイルにする】の続きとしてメモします。 イチから「JavaScript」を学び直しをする …

no image

ちょっと複雑なtableがコピペで簡単にできる「Table Tag Generator」

この記事は約 1 分で読めます。 滅多に複雑なtableタグを書くことがないのですが、久々にtableタグを使うことになって・・・すっかり忘れていました。。。 tableデザインの時代のコーディングで …

no image

WordPressプラグイン「Simple Map」でスマホ対応GoogleMapを簡単設置。

この記事は約 1 分で読めます。 GoogleMapは、いろいろとお世話になっています。ただスマホで時々面倒だと思うのが、スクロールしていてGoogleMapに何気に指が触れてしまった時。 画面の横幅 …