こんにちは。fsです。
WordPressテーマ開発シリーズの続きです。
今回は固定ページを作っていきます。
仕上がりはこんなイメージです。
アイキャッチ画像とタイトル、説明文を表示できるようにしていきます。
前回同様にコードを共有しながら進めていきますので、初心者の方も安心して読み進めていただければと思います。
それではご覧ください。
固定ページとは
まず、固定ページの説明から。
WordPressには投稿ページ、固定ページの2つのページ種類があります。
・投稿ページ→個別記事のページ
・固定ページ→基本情報（プロフィールやポートフォリオなど）を載せるページ
ブログの場合、記事は頻繁に更新していきますが、プロフィールなどの基本情報はそのまま載せておきます。
ほとんど更新しない（動かない）ので、固定ページと言います。
固定ページを作成
それでは固定ページの作成にとりかかりましょう。
ここからは画像をお見せしながら解説していきます。
デフォルトページを削除
まず、Wordpressのデフォルトで入っている固定ページ（Privacy PoclicyとSample Page）を削除します。
次に新規追加をクリックし、新しい固定ページを作ります。
タイトルを記入し（ここではAboutとしました）、公開ボタンを押して見てみます。
ここではまだ固定ページのファイルがないので、index.phpのフォーマットになっています。
これから固定ページ専用のフォーマットにしていきます。
page.phpで固定ページのファイルを作る
固定ページ用のファイル名は『page.php』です。
これはWordpressで指定されているファイル名なので、難しく考える必要はありません。
Start Bootstrapのベースファイルに固定ページ用のレイアウト（about.html）が予め用意されているので、そのファイル名をpage.phpに変えていきます。
ヘッダーやフッターなどのパーツ化した共通部分は前回作ったsingle.phpからコピーして書いていきます。
※（参考）single.phpの内容はこちら
↓↓↓↓↓↓↓
固定ページのループを作る
共通部をコピペで記入したら、固定ページの『ループ』を作っていきましょう。
ここでいう『ループ』はWordPress上で固定ページを動作させるためのプログラムと理解していただければと思います。
以下のような手順で書いていきます。
- バグが起きないためのおまじない（if構文）
- WordPressの固定ページ内にデータがあれば取得するループ処理（While構文）
- 固定ページのタイトルを表示させる
- 記載内容（コンテンツ）を表示させる
実際にコードを書くとこんな感じになります。
固定ページ編集画面で内容を追加して、見てみる（プレビュー）と内容も表示されています。
アイキャッチ画像を入れる
続いて、固定ページにもアイキャッチ画像を入れていきます。
single.phpと共通して使う処理なので、これもパーツ化していきましょう。
今回のように、一部のプログラムだけをパーツ化する場合は『関数』という処理を作っていくと便利です。
※関数は命令処理のひとまとまりとご理解いただければOKです
パーツ化は関数を定義できるファイルである、functions.phpに記述していきます。
具体的な手順は以下のとおりです。
- 関数の名前を定義する（関数名は何でもOK）
- アイキャッチ画像を表示させるプログラム（single.phpで作成）を切り取って関数の中括弧に入れる
- ”return”で作った変数（ここでは画像を取り出す命令）を返す（出てくる）処理を書く
実際のコードはこんな感じになります。
これで関数が完成したので、single.phpで作った関数を呼び出して動作を確認してみます。
パーツ化ができたので、同じように固定ページのファイルにも付け足していきます。
改めて固定ページをプレビューで見てみると、デフォルトの画像が表示されています。
これで固定ページの作成が完了です。
まとめ 『関数』で共通処理をパーツ化してシンプルにしよう
いかがだったでしょうか。
今回は固定ページを作りながら、
・固定ページの内容
・関数を用いて同じような処理のパーツ化
を実践していきました。
ウェブサイトやウェブアプリケーションを開発していくと、各ページで同じような処理（命令）を書くケースがとても多いです。
そんなときは関数にまとめてあげると便利かつコードもシンプルになります。
関数は一見複雑に感じますが（僕も最初は全くわかりませんでした😅）、シンプルな処理から記載していくと徐々に慣れていきます。
プログラミング初心者の方はWordpressのページを作りながら覚えていくと良いかと思います。
以上、少しでも参考になれば幸いです。
最後までお読みいただきありがとうございました。
Macbookでプログラミングを始めよう！
コメント