WordPressでオリジナルWEBサイトを作ろう!vol.3

WordPressでオリジナルWEBサイトを作ろう!vol.3

こんにちは、システム開発部のmiwaです。
WordPressでオリジナルWEBサイトを作ろう!もvol.3となりました。今回は下層ページの準備を行なっていきます。

以前の記事はこちら!
>WordPressでオリジナルWEBサイトを作ろう!vol.1「ローカル環境構築編」
>WordPressでオリジナルWEBサイトを作ろう!vol.2「テーマ設定編」

ーーーーーーーーーーーーーーーーーーーーーーーーー
●WordPressの下層ページを組み込む3ステップ!
1.トップページ同様にphpファイルを用意
2.カスタム投稿ページを設定
3.シングルページの準備
ーーーーーーーーーーーーーーーーーーーーーーーーー

1.トップページ同様にphpファイルを用意

下層ページを組み込む際、まず考えるべきは「更新されるページかどうか」です。ワードプレスでは、主に3つの投稿タイプが分類されます。

●固定ページ
会社情報などの更新頻度が少なく、時系列に沿った表示をする必要のないコンテンツや、階層構造を持たせたいコンテンツなど。
●投稿ページ
時系列に沿って表示され、カテゴリーやタグによる分類ができるので、ブログやニュースなどのコンテンツに。
●カスタム投稿ページ
投稿ページとは別にに更新することがあり、それぞれ独自の特徴を持たせて複数の投稿タイプ作ることができます。
商品ページやイベントページなどに向いています。

これらのページに、今回作成している架空のWEBサイトに当てはめていきます。

下層ページは以下の7ページが存在しています。
・コンセプト
・活動紹介
・イベント
・イベント一覧
・ブログ
・ブログ一覧
・お問い合わせ

これらを更新されるページと更新されないページに分類し、それぞれ以下のように設定していきます。

まずは固定ページを前回の記事で説明させていただいたトップページをphpファイルに変換したことと同じことを行います。

●header、footerを以下の記述に変更
・ヘッダー部分を切り取り、新規でheader.phpを作成して保存。
・フッター部分を切り取り、新規でfooter.phpを作成して保存。
・残った部分の一番上に<?php get_header();?>一番下に<?php get_footer();?>を追記し、page_ファイル名.phpとして保存します。
※例:concept.htmlというhtmlファイルの場合、[page_concept.php]と保存します。

●リンク先を変更
画像のリンク先を変更フォルダの前に<?php bloginfo( 'template_url' ); ?>を追加します。
<img src="<?php bloginfo( 'template_url' ); ?>/image/logo.png"alt="">

●固定ページでページを作成
左メニューの固定ページから新規作成をクリック。
先ほど保存したpage_ファイル名のファイル名をタイトルに入力して「公開する」をクリック。
※例:[page_concept.php]の場合、「concept」と保存します。

※詳細は前回の記事をご参考ください

プレビューを確認してみましょう。

表示されましたね!
他の固定ページにするページも、同様の手順で行います。

2.カスタム投稿ページを設定
ブログ以外で、投稿機能が必要なページが1つあります。スケジュールページは、ブログのように常に投稿していかなければなりません。
今回イベントを開催するための投稿を想定しているので、開催場所や開催日時などわかりやすく表現したデザインにしたいので、ブログとは差別化し、カスタム投稿できるプラグインを用いて、独自の投稿機能を追加していきます。
使用したプラグインはこちら!

「Custam Post Type UI」
このプラグインは、WordPressの便利な機能であるカスタム投稿タイプを、簡単に追加・編集できるプラグインです。
https://ja.wordpress.org/plugins/custom-post-type-ui/

左メニューのプラグインから、「Custam Post Type UI」を検索。今すぐインストールをして、有効化します。
左メニューに「CPT UI」という項目が追加されました!

新規投稿タイプの追加より、カスタム投稿タイプを作成していきます。今回のファイル名は「schedule」なので、「schedule」と登録し、複数形のラベル・単数形のラベルも入力します。
左メニューに「SCHEDULE」が追加されました!

3.シングルページの準備
投稿記事ページはsingleページになります。
ブログページはそのまま「single.php」として保存。
カスタム投稿ページであるイベントページは、カスタム投稿設定で「schedule」というページを作成したので、single-schedule.phpという名前に変更して保存します。
ファイルはトップページ、固定ページ同様に、以下を設定しましょう。
●header、footerを以下の記述に変更
●リンク先を変更
●固定ページでページを作成
ブログページとイベントページが表示されます。

これで、ひとまず全ページをWordPressに組み込んで表示することができました。ようやくスタート地点です。ここからちゃんと動的なページになるように設定をかけていきます。次回はこのカスタム投稿ページをカスタマイズを行っていきます!

あっという間に10月も終わろうとしていますね。
気づいたら年末になりそうです〜

一覧へ戻る