今回の記事は、STEP4の「WordPress関数に書き直す」の「04.投稿ページと固定ページの作成」の解説となります。index.phpをコピーして、single.phpを作成します。特定記事の表示となりますので、不要なループ処理やピックアップ記事を削除し、2列表示を1列表示に変えてsingle.phpを作成します。同様に固定ページとしてsingle.phpをコピーしてpage.phpを作成します。
- STEP1:静的サイトの作成
ワイヤーフレームでサイトをデザインして、HTMLとCSSで静的サイトを作成します。index.htmlとstyle.cssでサイトを作成します。
- STEP2:開発環境構築
自分のパソコン内部だけで開発と動作テストが行えるWordPress専用の環境構築ソフト、HTML、CSS、PHPの編集の為のソースコードエディタ、そしてHTMLとCSSで構築された静的サイトを準備します。
- STEP3:テーマの有効化
自作テーマを有効化する為に、index.htmlをindex.phpに書き換え、style.cssを作成してWordPressにアップロードして認識してもらいます。
- STEP4:WordPress関数に書き直す
テーマとして認識できましたら、index.phpの内容をヘッダー、フッター、サイドバー等コンテンツごとに分割したり、アイキャッチ画像やナビゲーションメニュー等を設定する為に、WordPress関数に書き直していきます。
- STEP5:サーバーにアップロード
サーバーにアップしてWebに公開します。公開後、プラグインなどで必要な機能を追加したり、必要なカスタマイズを行います。
個別ページの作成
解説動画は、こちら
個別投稿ページの作成
トップ画面から、Readmoreをクリックすると表示される個別ページを作成します。
single.phpの作成
新たなファイルとして、single.phpファイルを作成します。
index.phpをコピー
index.phpを全てコピーして、single.phpに貼り付けます。
不要な記述を削除
ピックアップ記事の削除
ボディ部先頭のピックアップ記事の表示は不要ですので、削除します。
「Read more」ボタンの削除
index.phpには詳細を見たる為の「Read more」ボタンが記述されていますが、single.phpでは不要なので、削除します。
ページネーションの削除
single.phpの記述
ピックアップ記事と「Read more」の削除
ページネーションの削除
スタイルの調整
再読み込みでサイトを確認すると1列表示となっていたため、記事の幅を拡げます。
①は2列としてcol-lg-6となっていましたが1列のみの為、col-lg-12と変更しました。
②は抜粋記事表示していましたが、content()で本文表示に変更しました。
single.phpの完成
個別投稿ページが完成しました。
固定ページの作成
固定ページ作成の準備
インストールした直後では以下の2つの固定ページがありますが、ここにaboutというサイトの説明等を記載する固定ページを作ります。
固定ページの確認
固定ページの投稿
固定ページの作成
page.phpの作成
新しいページとしてpage.phpを作成します。
single.phpをコピー
single.phpを全てコピーして、page.phpに貼り付けます。
不要な記述を削除
固定ページはプライバシーポリシーや問い合わせページとして使いますので、サイドバーは不要なので、削除します。
サイトの確認
固定ページは、まだどこからもリンクがはられてないので、固定ページの表示をクリックしてサイトを確認します。
スタイルの調整
サイドバーを削除しましたので、空いたスペースをスタイル調整します。
サイドバーがあった為、col-lg-8となっていましたが、サイドバーをなくしましたので、col-lg-12とします。また、画像はいらないので削除します。
page.phpの完成
固定ページが完成しました。
