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

ブラウザ別キャッシュクリア(一時ファイルの消去)の方法♪

この記事は約 1 分で読めます。 以前、Webサイトの更新作業をした後に、お客様から「前と表示が変わってない」と言われたことがあります。 キャッシュという、一度表示したページを早く表示するために一時フ …

no image

Creative Cloud デスクトップアプリケーションが何も表示しなくなったとき

この記事は約 1 分で読めます。 Adobe Creative Cloudを使用していて、ディスクトップから起動させようとすると、画面が真っ白になってしまいました。 それぞれ単体のソフト(Photos …

エックスサーバーの無料独自SSL「Let’s Encrypt」をWordPressに設定して、カンタンhttps対応

この記事は約 1 分で読めます。 2016年6月30日から、「エックスサーバー」の全プランにおいて、「Let’s Encrypt」によるドメイン認証型SSL証明書の無料発行および設定機能の …

no image

別窓でリンク先のページをポップアップで開きたいとき

この記事は約 1 分で読めます。 よくリンク設定で、「target=”_blank”」を入れて別タブで開くようにすることは多いですが・・・。 今回、たまたまポップアップでリンク …

no image

WordPressでオリジナルテーマ作りにチャレンジ8【トップページ編】

この記事は約 1 分で読めます。 今回、WordPressのオリジナルテーマ作りにチャレンジしました。 ブログサイトならトップページを特別に作る必要はないのかもしれませんが、通常のサイト「index. …