個人的に役立ったデザイン素材やTips、WEBサービス、役立つグッズ、あれやこれやをご紹介

HTML+CSSページ(レスポンシブWEBデザイン)をWordPress用オリジナルテーマにする方法vol.6

HTML+CSSページ(レスポンシブWEBデザイン)をWordPress用のオリジナルテーマにする方法の第6回目になります。
前回に引き続き、実際にHTML+CSSページをWordPressオリジナルテーマにするための書き換え作業を行っていきたいと思います。
第6回目の今回は、ContactやAboutページといったいわゆる「固定ページ」を表示するためのテンプレートpage.phpを完成させていただきたいと思います。

なお、「HTML+CSSページ(レスポンシブWEBデザイン)をWordPress用のオリジナルテーマにする方法」には以下の記事があります。
HTML+CSSページ(レスポンシブWEBデザイン)をWordPress用オリジナルテーマにする方法vol.1」=WordPressをサーバーにインストールして、オリジナルテーマをつくるために必要なファイル群をアップし、基本的な設定を行うまでの記事
HTML+CSSページ(レスポンシブWEBデザイン)をWordPress用オリジナルテーマにする方法vol.2」=画像のパスの差し替え、カテゴリーの登録、パーマリンク設定、アイキャッチ画像の設定、投稿記事のタイトル表示までの記事
HTML+CSSページ(レスポンシブWEBデザイン)をWordPress用オリジナルテーマにする方法vol.3」=カスタムメニュー機能を利用してグローバルナビゲーションを設定して、SNSボタンを設定するまでの記事
HTML+CSSページ(レスポンシブWEBデザイン)をWordPress用オリジナルテーマにする方法vol.4」=index.phpを細かいパーツに分けたうえで、ページネーションを設定して新しい記事・過去の記事に自由に行き来できるようにし、index.phpのテンプレート化を完成させるまでの記事
HTML+CSSページ(レスポンシブWEBデザイン)をWordPress用オリジナルテーマにする方法vol.5」=トップページに一覧表示されている投稿記事の中身(詳細)を表示するためのテンプレートsingle.phpを完成させるまでの記事
HTML+CSSページ(レスポンシブWEBデザイン)をWordPress用オリジナルテーマにする方法vol.6」=ContactやAboutページといったいわゆる「固定ページ」を表示するためのテンプレートpage.phpを完成させるまでの記事
HTML+CSSページ(レスポンシブWEBデザイン)をWordPress用オリジナルテーマにする方法vol.7プラグイン編」=WordPressを導入するなら最低限入れておきたいプラグインについての記事

一連の記事が、これからWordPressでオリジナルテーマを作ってみたいという方のご参考になれば幸いです。
注意:本文中に<?php 〜 ?>という記述がいくつも出てきますが、HTML文書の関係で、< >はすべて全角で記述しています。
利用される際には、全角の< >を半角の< >に変えてご利用ください。
全角まま利用すると、うまく機能しません。

固定ページを表示するためのpage.php

前回まではブログのように日々コンテンツを作成し追加する「投稿記事」に関連したテンプレートsingle.phpを扱ってきました。
トップページに利用しているindex.phpについても、投稿記事の抜粋(サムネールとタイトル)を表示しているわけですから、ほぼ投稿記事といってもいいでしょう。
一方、今回解説するのはContactページやAboutページといった、日々更新したり増やしてくことがないページ=1ページだけで終わる単一ページは「固定ページ」に対応するテンプレートpage.phpです(固定ページについては、「HTML+CSSページ(レスポンシブWEBデザイン)をWordPress用オリジナルテーマにする方法vol.3」「2. 固定ページを追加する」のところで触れています)。

このように書くと、大層なように聞こえるかもしれませんが、single.phpと中身はほとんどかわりません。
ほぼ一緒の場合も多々あります。
今回もsingle.phpを利用してpage.phpを作成します。
なお、「固定ページ」については以下の管理画面からコンテンツを作成できます(詳しくは、、「HTML+CSSページ(レスポンシブWEBデザイン)をWordPress用オリジナルテーマにする方法vol.3」「2. 固定ページを追加する」をご覧ください)。
HTML+CSSページをWordPress用オリジナルテーマにする方法
HTML+CSSページをWordPress用オリジナルテーマにする方法

page.phpを作成する

早速、page.phpを準備しましょう。
作業は簡単。
single.phpをコピーし、page.phpにリネームするだけです。

ブラウザで確認する

書き換えたらブラウザで確認してみましょう。
以下のように写真以外の部分が投稿記事と同じようになっていると思います。
あとは固定ページのコンテンツに合った調整をしていけば、完了です。

HTML+CSSページ(レスポンシブWEBデザイン)をWordPress用オリジナルテーマにする方法vol.6

page.phpの微調整する

固定ページで画像を利用する場合は、投稿記事と同じようにアイキャッチ画像を登録すれば、そのまま利用できます。
今回は、そのアイキャッチ画像を削除して、ナビゲーション部分も削除してみます。

before

after

まずは、<section class=”top”>〜</div><!– end work_nav –>を削除します。
続いて、<?php if(have_posts()): while(have_posts()) : the_post(); ?>
<h1 class=”title”><?php the_title(); ?></h1>
までを、<div class=”content”>の下に移動させます。
</section><!– end top –>を削除すれば以下のように表示されます。

HTML+CSSページ(レスポンシブWEBデザイン)をWordPress用オリジナルテーマにする方法vol.6

*左右にあるグレーの罫線はコンテンツ量によって変化します。

あとは固定ページでコンテンツを作成すれば完了です。

なお、完成した場合の固定ページは以下のようになります。

COJIN SAMPLE:About

お役に立てましたら、以下どれでも結構のですので、ポチリと……。

  • 0
  • 0
  • 1
  • 1

Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

この記事を読んだ人はこんな記事も読んでいます

WordPressのテーマ検索に最適!テーマをより探しやすくした検索サービス「ThemeBro」

WordPressのテーマ検索に最適!テーマをより探しやすくした検索サービス「ThemeBro」

WordPressのテーマ検索に最適な、テーマ検索に最適化された検索サービス「ThemeBro」をご

記事を読む

HTML+CSSページ(レスポンシブWEBデザイン)をWordPress用オリジナルテーマにする方法vol.3

HTML+CSSページ(レスポンシブWEBデザイン)をWordPress用オリジナルテーマにする方法vol.3

HTML+CSSページ(レスポンシブWEBデザイン)をWordPress用のオリジナルテーマにする方

記事を読む

HTML+CSSページ(レスポンシブWEBデザイン)をWordPress用オリジナルテーマにする方法vol.2

HTML+CSSページ(レスポンシブWEBデザイン)をWordPress用オリジナルテーマにする方法vol.2

HTML+CSSページ(レスポンシブWEBデザイン)をWordPress用のオリジナルテーマにする方

記事を読む

HTML+CSSページ(レスポンシブWEBデザイン)をWordPress用オリジナルテーマにする方法vol.7プラグイン編

HTML+CSSページ(レスポンシブWEBデザイン)をWordPress用オリジナルテーマにする方法vol.7プラグイン編

HTML+CSSページ(レスポンシブWEBデザイン)をWordPress用のオリジナルテーマにする方

記事を読む

無料で利用できるキレイなデザインのWordPressテーマ50(2015年版)

無料で利用できるキレイなデザインのWordPressテーマ50(2015年版)

無料で利用できるキレイなデザインのWordPressテーマ2015年版をご紹介します。 WordP

記事を読む

HTML+CSSページ(レスポンシブWEBデザイン)をWordPress用オリジナルテーマにする方法vol.5

HTML+CSSページ(レスポンシブWEBデザイン)をWordPress用オリジナルテーマにする方法vol.5

HTML+CSSページ(レスポンシブWEBデザイン)をWordPress用のオリジナルテーマにする方

記事を読む

WordPressで前後ページへのリンク先URLだけを取得するテンプレートタグget_permalinkとget_adjacent_post

WordPressで前後ページへのリンク先URLだけを取得するテンプレートタグget_permalinkとget_adjacent_post

WordPressで前後ページへのリンク先URLだけを取得するテンプレートタグをご紹介します。 W

記事を読む

HTML+CSSページ(レスポンシブWEBデザイン)をWordPress用オリジナルテーマにする方法vol.1

HTML+CSSページ(レスポンシブWEBデザイン)をWordPress用オリジナルテーマにする方法vol.1

HTML+CSSページ(レスポンシブWEBデザイン)をWordPress用のオリジナルテーマにする方

記事を読む

HTML+CSSページ(レスポンシブWEBデザイン)をWordPress用オリジナルテーマにする方法vol.4

HTML+CSSページ(レスポンシブWEBデザイン)をWordPress用オリジナルテーマにする方法vol.4

HTML+CSSページ(レスポンシブWEBデザイン)をWordPress用のオリジナルテーマにする方

記事を読む

WordPressのカスタマイズでよく使うWordPressのif文と条件分岐タグ

WordPressのカスタマイズでよく使うWordPressのif文と条件分岐タグ15

WordPressのカスタマイズでよく使うWordPressのif文と条件分岐タグを、個人的にまとめ

記事を読む