初心者の為のWEB開発

【ワードプレス】初心者でも見たらできる固定ページの簡単な作り方

※当サイトはPR(プロモーション)を含みます。

WorddPress「固定ページの作り方」 初心者の為のWEB開発

初めてワードプレスを使う人の中には投稿ページと固定ページの違いや、そもそも作り方がわからなかったりするもの!!

実際ぼくも初めて触った時はサッパリで、ボタン1つ押すことさえためらっていた状態・・・よくあの状態からフロントエンジニアなんかに慣れたなと自分で思います(笑)

今回は初心に戻り、ワードプレスで固定ページの作り方がわからないという方に

  • ゼロから簡単固定ページの作り方STEP
  • 作る時のポイント
  • 再編集方法
  • 公開設定

上記の点を画像付きで説明していこうと思います!

初心者さんや、これからワードプレスで何かやっていこうという人の参考になれれば幸いです。

ちなみに投稿ページの作り方については下記の記事で解説しているので、そちらも良ければどうぞっ!

WordPress関連記事
ファズ

Hello!ファズです。

【WEB制作経験:4年】
WordPress/カスタムテーマ開発/SEO対策

【ハマってる趣味】
ガンプラ 数十種類以上の制作経験

【おすすめソイプロテイン】
2年間の常用、数十種類を試用

↑仕事関係から趣味までファズの知識と経験をベースに発信しています!

※当サイトはリンクフリーですが「出展元」として記載をお願いします。
質問等あればコメントやお問合わせからお気軽にどぞ!

ファズをフォローする
wordpressのおすすめテーマ
WordPressのテーマ選びでお悩みの方必見!

【初心者におすすめの記事】

◆おすすめ有料テーマが知りたい
◆「集客」や「収益」をあげたい
◆テーマを選ぶポイントが知りたい
◆初心者でも使いやすいテーマが知りたい

固定ページを作る2つの方法

まずは固定ページの作り方についてなですが、実は

  1. 管理画面から編集して作る方法
  2. テンプレートを使って作る方法

この2つの方法があることは知っておいてください!

2つは全く異なる方法で、いざ調べた時にどちらの方法なのか判断できないと初心者の段階で難しい方法を選択してしまうことになってしまう可能性があります。

ちなみに難しいのは②の「テンプレートを使った作り方」。

この方法は中級者に向けた方法で、見た目や設計をそのまま使う初心者さんブロガーには必要ありません。

下記では「管理画面から編集して作る方法」について今回は解説していきたいと思います。

①管理画面の『固定ページ』から作る方(初心者向け)

まずは何もベースがない状態からの固定ページ作成方法。

下記は一連の作り方STEP!この流れで作成・設定していきます!

  1. 固定ページの『新規ページの追加』
  2. タイトルや固定ページ設定をする
  3. コンテンツ作成をして公開

以下作成STEPを詳しく解説。

  • STEP1
    固定ページの新規作成

    ワードプレスのダッシュボードから「固定ページ」にカーソルを合わせると「新規固定ページを追加」が出るのでそれを押す。

    またはメニューの「固定ページ」を押すと固定ページの一覧上部にに「新規固定ページの追加」のボタンがあるのでそれを選択したら作成できます。

    【ワードプレス】初心者でも見たらできる固定ページの簡単な作り方 pagemake
  • STEP2
    「ページタイトル」や固定ページの「設定」

    ページ編集画面に移ると、まずは仮で「タイトル」を入力。

    右側の「固定ページ」タブにあるURLなど、決まっているものは先に入力して一度「下書き保存」してください。

    【ワードプレス】初心者でも見たらできる固定ページの簡単な作り方 pagemake

    下書きをしないで先にデータを入力してページを離れてしまったり、閉じてしまったりしすると、ページ自体は下書き状態で残りますが入力した内容は消えてしまう可能性があります

    下書きをしておくと、データが残せるので最初に一度保存しておくのをおすすめ!

  • STEP3
    コンテンツを作成して公開

    後は画像部分にテキストやワードプレスのテーマに実装されている装飾機能などを使ってコンテンツを作り、右上の公開ボタンを押せば出来上がり!

    【ワードプレス】初心者でも見たらできる固定ページの簡単な作り方 page_contents

    特に難しいことはないと思います。公開に関してはすぐ公開しない場合、一旦下書きで保存しておいたり非公開で置いておくといいと思います。

以上が「管理画面から固定ページを作る方法」。

ワードプレスの基本的な使い方で、投稿ページも基本的に同じ。

「固定ページ」と「投稿」の設定は」若干異なりますが、特に問題はないと思います。適切な情報を入力してください。

管理画面から作成した固定ページの編集方法

固定ページも投稿ページも、作成後にも修正を加えることができます!

  • 作ったページから編集ページを開く
  • 投稿・固定ページ一覧からクイック編集を開く
【ワードプレス】初心者でも見たらできる固定ページの簡単な作り方 pagemake

赤枠内の「タイトル」と「編集」の部分をクリックすると編集ページが開きます。

【ワードプレス】初心者でも見たらできる固定ページの簡単な作り方 pagemake

「クイック編集」はカテゴリーやタイトル、スラッグなどが編集できる簡易版。

↑こんな感じ!

投稿した記事の「カテゴリー設定が間違っていたり」、「テンプレートを変更したり」、「公開設定」を簡単に再設定できます。

表示が早いのでサクッと直したい時に使える便利機能!

②カスタムテンプレートで固定ページを作る方法(中級者向け)

WordPressで固定ページを作る方法にはテンプレートファイルを作成する「カスタムテンプレート」があります。

【手順】

  • カスタムテンプレートファイルを作成
  • カスタムテンプレートファイルを編集
  • WordPress管理画面からテンプレートを選択
  • 反映を確認

やることはちょっと面倒ですが、STEPで分けるとこんな感じ。

それでは実際に作っていきたいと思います。

【作成①】カスタムテンプレートファイルを作成

まずは「子テーマ」を作成

子テーマの作成方法については「【簡単初心者向け】誰でもできるWordPress子テーマの作り方の記事で解説してるので参考にしてみてください。

次に親テーマフォルダから子テーマフォルダへ階層を合わせた状態で「固定ページのテンプレートファイル」をコピー

ファイルはテーマフォルダの直下。

多くのテーマで使われている固定ページのファイルは「page.php」です。これをコピーして子テーマフォルダ内へ貼り付けてください。

今回はテーマEmanon」を使って例を書いていきますが、基本的にどのテーマも一緒

【ワードプレス】初心者でも見たらできる固定ページの簡単な作り方 template-img
親テーマフォルダからpage.phpをコピー
【ワードプレス】初心者でも見たらできる固定ページの簡単な作り方 template-img
子テーマにpage.phpを貼り付け

貼り付け後、下記ファイル名書き方が決まっているので任意で選んでファイル名を編集。上から順に優先度が高い順番になります。

page-「slug」.phpが良く使われるので、よくわからない方はこれを選択してください。slug(スラッグ)はURLに設定するアルファベットを記述。

今回の例では「test」がスラッグに該当します。

  1. カスタムテンプレートファイル(任意の名前)
  2. page-「slug」.php
  3. page-「id」.php
  4. page.php

【作成②】カスタムテンプレートファイルを編集

コピーした「page.php」のファイル名を「page-test.php」として編集。

ファイル名を編集したらテキストエディタでファイルを開いて、ファイル内の一番上に下記コードを記述。

<?php
/* Template Name: テストカスタムテンプレートの名称 */
?>

「テストカスタムテンプレートの名称」は選択する時に表示される名前なので任意で変更してもOK!

↓追加するとこんなカンジ。

【ワードプレス】初心者でも見たらできる固定ページの簡単な作り方 template-img

この段階でWordPressの管理画面からテンプレートを変更することができます。

実際に反映されているのか確認できるよう、一部↓画像赤枠内コードを改変。

【ワードプレス】初心者でも見たらできる固定ページの簡単な作り方 template-img

これでファイルの準備はOK!!

【作成③】WordPress管理画面からテンプレートを選択

WordPressへログインし、「固定ページ」から「新規作成」。

まっさらなページができたら↓「テンプレート」項目から作成したテンプレートファイルを選択

カスタムテンプレートの名前が追加され、選択できる状態なら読み込みOK!

【ワードプレス】初心者でも見たらできる固定ページの簡単な作り方 template-img

【作成④】反映を確認

最後に反映の確認ですね。

テンプレートの読み込みはできているので、後は追記した部分が反映されているかチェック!

【ワードプレス】初心者でも見たらできる固定ページの簡単な作り方 template-img-x

はい、反映確認もOK!

こんな感じでオリジナルの固定ページを作ることができます!

使いどころとしては、

  • 独自性を持たせたい固定ページを作る
  • LPとして利用する

主にこんな感じですね!

注意点としては、ファイル内の改変は「静的」と「動的」で使い分ける必要があるのは気を付けてください。

今回サンプルとして使った「Emanon」にはそもそもLP機能が付いているので不要ですが、カスタムテンプレートは色々ページを作るのに便利。

初心者さんでもある程度ファイルを見慣れたらできるはず!
是非試してみてね。

WordPressの基礎を見る!
初心者必見!WordPress使い方基本ガイド!!

これから「WordPress」を始める方や、使い方で困っている方必見!

「表示されない」・「CSSが効かない」・「エディタが違う」。
↑こんなつまづきやすいポイントや、よくある疑問など基礎的な部分からCSSの応用まで記事リンクをまとめています。

固定ページ公開設定方法

固定ページに限らず投稿ページでも同様ですが、記事の状態は任意で変更することができます。

「新規追加」したり、「下書き」状態では「下書き」か「公開」しか選択できませんが、一度公開した後は

  • 公開
  • 非公開
  • パスワード保護
  • 下書き

この4つから選択できます。

【ワードプレス】初心者でも見たらできる固定ページの簡単な作り方 pagemake

「パスワード保護」はパスワードを知っている人しか閲覧できない状態。

下書きに戻すには「ゴミ箱に移動」の隣にある「下書きへ切り替え」を選べばOK!

【ワードプレス】初心者でも見たらできる固定ページの簡単な作り方 page_contents

こんな感じ。

あと、記事を一度ゴミ箱に入れて復元すると下書き状態になります。

固定ページはどういう時に使う?

項目固定ページ
使われるページ例TOPページ
会社情報
プロフィール
お問合せページ
サイトマップ
採用情報
固定ページの特徴①固定ページ同士はカテゴリーやタグを使用せずに独立したページとして機能する。

②カテゴリーに「親カテゴリー」と「子カテゴリー」を設定できる。

固定ページと投稿ページの違い

上記表を見てもらえたら分かる通り、固定ページは投稿ページのように「記事」としては利用せず、単一ページで完結するページ。

主に「サイトの運営者」や「自身のプロフィール」など「カテゴリー化できない情報」をまとめたページと思ってもらうといいもです。

投稿ページ同様、ディスクリプションの設定はした方がいいので、ページ毎に設定できる場合はしっかり対策しておくのをおすすめ!

固定ページの簡単な作り方まとめ

以上、ワードプレス初心者に向けて固定ページの作り方STEPをお伝えしてきました。

投稿ページ同様全然難しいものではありませんので、解説で分からなかった場合はサンプルページを作り、実際に触ってみるとすぐにわかると思います。

また、今回はワードプレスのデフォルトテーマを使って解説しましたが、使っているテーマによって入力箇所が増える場合があります。

入力箇所の良く分からない場合は、「テーマ名+書いてある内容」で検索してみると情報が探せると思いますよ!

あまり知名度のないテーマを使っている場合、情報が少ないかったりして初心者さんにはおすすめできないので別テーマを使う選択肢をおすすめします。

【ワードプレス】初心者でも見たらできる固定ページの簡単な作り方 Mask-group
ファズ

今回はこんな感じ!

ありがとうございました~

コメント

タイトルとURLをコピーしました