WordPress

WordPressの固定ページについて[基礎~応用]機能と使い方のすべて

WordPressには普通の投稿の他に、「固定ページ」があるのをご存知ですか?固定ページでは運営会社情報ページや問い合わせページなどを作成し、それを決まった場所に表示されるので、ブログの利用者にいつでも閲覧してもらうことができます。そこで今回はWordpressの固定ページとは何か、また固定ページの作成方法、その他にも編集方法や削除方法などをご説明していきます。

固定ページとは

固定ページと投稿の違い

まず「投稿」の特徴として、自動的にカテゴリーページに紐づけられ、トップページにも表示されるという点が挙げられます。簡単に言うと、一つの投稿を作るだけで、たくさんのページに繋がるようになる仕組みがあるのです。また、投稿から記事を更新する度にその記事に紐づくカテゴリーページのSEO効果はどんどん向上していきます。最終的にカテゴリーページのSEO効果は記事単体よりも高くなっていきます。
「固定ページ」はと言うと、投稿とは逆にカテゴリーとの紐づけやトップページとの連動がない、独立したページを作る機能をもちます。よって、お問い合わせページや会社紹介ページなどカテゴリーに属さないコンテンツを作るのに適しています。また、固定ページは投稿と違って、RSSが生成されないことも覚えておきましょう。

固定ページを作る目的

固定ページの特徴として、「他のページと独立していること」「カテゴリやタグを持たないこと」があるのは先述しましたね。このことから、固定ページを使う目的として、「あえて独立したページを作る」「固定ページでしか作れないページを作る」などが挙げらられます。

固定ページを使う具体例

①プロフィール・運営者情報

ブログやサイトを見て興味を持ってくれたユーザーは、どんな人が書いているのか気になるものです。また、読者に親近感を持ってもらうことによりファンになってもらう可能性が高くなります。簡単な経歴やブログのコンセプト等を載せておくと、より理解を深めてくれたり、信頼性のアップにつながります。基本的には、名前(ニックネームも可)・所在地・連絡先(メールアドレス)・ブログを作成した背景を書くと良いです。さらにできれば顔写真を載せることで大きな効果を得られるでしょう。

②お問い合わせ・メールフォーム

交流や執筆依頼など、思わぬ良い出来事(悪い出来事が起きる可能性もありますが、、)があるかもしれません。そのような場合のために、お問い合わせフォームを設置しておきましょう。コメントやSNSなどのユーザーからコンタクトを取れるような双方向の仕組みをつくることは重要です。

③記事一覧・サイトマップ

ブログの内容を一覧で見られるサイトマップは、よっぽどの理由がない限り必要となってきます。その場合、自動作成をしてくれる「PS Auto Sitemap」というプラグインをおすすめします。なお、Wordpressのサイトマップについては、こちらの記事も参考にしてみてください。
https://docs.google.com/document/d/1MrbMpHgSmuwOPS0ndGEV0Cfqrc5J9ze_OZCb3eEaylo/edit

④プライバシーポリシー

個人情報を収集する場合は作っておくべきです。Wordpressにカートをつけて商品を販売するショッピングサイトの場合は、「特定商取引法に基づく表記」や「お支払い方法」「配送について」なども固定ページで作成しましょう。

固定ページの作成方法

固定ページの作成画面を開く

それでは、実際に固定ページを作成していきましょう。まずは「ダッシュボード」から「固定ページ」、「新規追加」をクリックします。
すると、「新規固定ページを追加」の画面が表示されます。固定ページはここから編集することになります。まずは固定ページのタイトルを入力します。「会社案内」や「サイトマップ」など、作りたいページのタイトルを入力してください。
次に編集ボタンをクリックして、パーマリンク(URL)を設定します。設定前はタイトルに入力した文字がそのままパーマリンクとして設定されてしまうので、英数字などに修正をしておきましょう。

固定ページを入力する

続いて、本文を入力していきます。「メディアを追加」から画像ファイルなどを挿入したり、ツールバーで文字の装飾をしたりしながら、入力していきます。
また、Wordpressではコメント欄やサイドバーを自由に表示・非表示していくレイアアウトの変更ができます。ページ属性の「テンプレート」を設定するとサイドバーを非表示にすることができます。テーマによって項目名も異なりますが、たいていサイドバーの非表示ができます。また、ディスカッションの「コメントの投稿を許可する」のチェックを外すとコメント入力欄が非表示にできます。設定が完了したら、「プレビュー」をクリックしてください。「プレビュー」をクリックして、実際にページがどのように表示されているか確認しておきましょう。「公開」をクリックすれば、作成した固定ページが公開されます。

固定ページ用のカスタムページテンプレートの作り方

投稿ページにはなく固定ページの特徴として、ページごとにデザインテンプレートを変更できる点が挙げられます。まずテンプレートを変更できるとどんな事ができるのかをご説明します。

固定ページのテンプレートを変更することの利点

固定ページのテンプレートを複数用意することにより、そのページに最適なデザインにする事ができます。例えば、アイキャッチ画像や広告などを排除した「お問い合わせスタイル」や、カテゴリーページのような「記事一覧スタイル」など、デフォルトテンプレートの他にもそのようなテンプレートを作成することにより、ページの用途に分けて利用することができます。

固定ページ用のカスタムページテンプレートの作り方

まずは固定ページ用のカスタムページテンプレートファイルを作ります。固定ページのデフォルトテンプレートは「page.php」なので、このテンプレートをコピーして作成しましょう。ファイル名に制約はありませんが、固定ページ用のテンプレートだと分かるように「page-temlate-○○.php」というファイル名にするのをおすすめします。こうすると、テーマの編集画面ではテンプレートが揃って並ぶので分かりやすくなります。新しく作ったテンプレートの先頭に、コードと共にテンプレート名を記入します。設定したテンプレート名が、固定ページの編集画面でテンプレートを切り替えるメニューに表示されるので、分かりやすい名前にしておきましょう。最後にWordpressのテーマフォルダに作成したテンプレートをアップロードすれば準備完了です。

作成した固定ページをテンプレートを使う方法

作成した固定ページテンプレートは、固定ページの編集画面で設定していきます。まずは固定ページの新規作成画面か、作成したテンプレートを使いたい固定ページの編集画面を表示します。「固定ページの属性」にテンプレートを選ぶメニューが表示されているはずです。表示されていない場合には、テンプレートファイルの記述が間違っている可能性があります。「デフォルトテンプレート」から作成したテンプレートに変更し、「更新」ボタンをクリックします。これで編集した固定ページで利用されるテンプレートが変更されます。もし「固定ページの属性」が表示されていない場合、編集画面最上部にある「表示オプション」で「固定ページの属性」にチェックが入っていない可能性があるので確認してみてください。

固定ページを管理

固定ページは複数作成することができるので、作成するだけでなく管理しておきましょう。作成したページの一覧は、「ダッシュボード」から「固定ページ」から「固定ページ一覧」から確認できます。ページ一覧からすべての固定ページを見ることができるので、修正が必要な場合はタイトルをクリックして編集してください。

固定ページの編集

ここで編集方法をご説明します。タイトルをクリックすると、新規に固定ページを作成したものと同じような画面が出てきます。タイトルや本文に現在公開されている内容が表示されていますので、内容を修正したり追加したりしてください。編集が終わったら、画面の右上にある「公開」にある「変更をプレビュー」をクリックしてみましょう。クリックすると、編集した内容がブログ画面でどのように表示されるのかを確認できます。最後に「更新」ボタンをクリックすると編集した内容が更新されます。引き続き編集を行う場合は同じ画面上で修正を行うことができます。

固定ページの順番を変える方法

少し応用編ですが、固定ページの順番を変えてみましょう。編集画面にある「ページ属性」から「順序」の部分の値を編集することで、簡単に表示順を変更することができます。デフォルトでは0が入っています。ここに数値を入れると、数値が小さい順にリンクが表示されるようになります。よって、設定で最小の値は1になるので、固定ページが増えるごとに1、2、3…と数値を入力していきましょう。

固定ページをトップページにする

順番に関連して、固定ページをトップページに設定する方法もご説明していきます。ブログのトップページには新着記事が並んでいる場合がほとんどです。しかし、別の情報をトップページにしたい場合、作成した固定ページをトップページに設定することで可能になります。管理画面の設定から表示設定、フロントページの表示のところで「最近の投稿」にチェックが入っていますが、これを「固定ページ」にチェックを入れます。次にフロントページのプルダウンメニューから、設定したい固定ページを選択して、変更を保存するとトップページが選択した固定ページに切り替わります。
フロントページの下の「投稿ページ」は、固定ページをトップページにしたことにより、本来トップページに表示していた、記事の一覧ページがなくなった場合に使います。その場合の記事一覧ページの作成方法はまず「新着記事」などのタイトルで固定ページを作成します。中身はなくても大丈夫です。次に、管理画面の設定→表示設定→フロントページの表示の投稿ページのプルダウンメニューから先程作成した「新着記事」を選択して、変更を保存します。「新着記事」ページにアクセスすると、記事の一覧が表示されます。

パスワードを付与し会員限定コンテンツにする

固定ページを会員限定コンテンツにすることも可能です。例えば、メルマガやSNSでパスワードを配布することにより、パスワードを知っている人だけが見られる限定コンテンツを作成できます。ページにパスワード機能を実装するためにはプラグインも可能ですが、お手軽な方法として、Wordpressのデフォルト機能の「パスワード保護」でパスワード機能をつけましょう。投稿でも固定ページでも実装は可能です。

固定ページの削除

ゴミ箱へ移動

公開済の固定ページを削除するには、編集の場合と同じく管理画面の「固定ページ」メニューの中にある「固定ページ一覧」メニューをクリックしてください。固定ページの画面が表示され、公開済の固定ページの一覧が表示されます。削除を行いたい固定ページにマウスを合わせてください。次の画面にある「ゴミ箱」と書かれたメニューをクリックしてください。固定ページの場合、削除されるといったんはゴミ箱へ移動します。ゴミ箱にある固定ページは完全に削除できたり、元に戻すことができます。

ゴミ箱から固定ページを復元

ここで、ゴミ箱に入っている固定ページを復元する方法についてもご説明します。「固定ページ」の画面で「ゴミ箱」と書かれたリンクをクリックしてください。ゴミ箱に入っている固定ページの一覧が表示されます。復元したい固定ページにマウスを合わせ、表示されたメニューの中から「復元」メニューをクリックしてください。該当の固定ページの復元が完了し、削除する前の状態に戻ります。最後に復元されているか確認しましょう。再度管理画面の「固定ページ一覧」メニューをクリックしてください。固定ページの画面が表示され公開済の固定ページの一覧が表示されます。ここで復元された記事を確認できます。

ゴミ箱から固定ページを完全に削除

固定ページを削除するといったんゴミ箱に入りますが、ゴミ箱から完全に削除すると固定ページが完全に削除され、復元することはできなくなります。完全に削除したい場合は「固定ページ」の画面で「ゴミ箱」と書かれたリンクをクリックしてください。ゴミ箱に入っている固定ページの一覧が表示されます。完全に削除したい固定ページにマウスを合わせ、表示されたメニューの中から「完全に削除する」メニューをクリックしてください。該当の固定ページが完全に削除されます。ゴミ箱から完全に固定ページを削除したい場合は元に戻す事はできないのでくれぐれも注意してくださいね。

まとめ

今回はWordpressの固定ページについて説明してきました。固定ページとは何かから固定ページの編集方法やカスタムテンプレートについてまで、内容盛りだくさんでご説明してきました。固定ページは様々な使い方ができて便利なので、固定ページを利用していなかった方はぜひこの機会に使ってみてください。

ピックアップ記事

  1. 被リンクはSEOに意味がある?効果的な被リンクの増やし方
  2. 【初心者向け】seoの正しい読み方は?意味や効果を解説
  3. 適したタイトルタグの文字数とは?SEOで注意すべきについて</a> </li> <li> <a class="title" href="https://min-web.com/webmarketing-type/">Webマーケティングとは?基礎知識と種類ごとの導入メリット・活用方法</a> </li> <li> <a class="title" href="https://min-web.com/instagram-reservation-post/">Instagramの予約投稿に便利なツール5選!比較・特徴・使い方</a> </li> </ol> </div> <div id="related_post"> <h3 class="headline">関連記事</h3> <ol class="clearfix"> <li class="clearfix num1"> <a class="image" href="https://min-web.com/wordpress-use-with-smartphone/"><img width="200" height="200" src="https://min-web.com/wp-content/uploads/2019/03/pixta_48185197_M-200x200.jpg" class="attachment-size1 size-size1 wp-post-image" alt="" srcset="https://min-web.com/wp-content/uploads/2019/03/pixta_48185197_M-200x200.jpg 200w, https://min-web.com/wp-content/uploads/2019/03/pixta_48185197_M-150x150.jpg 150w, https://min-web.com/wp-content/uploads/2019/03/pixta_48185197_M-120x120.jpg 120w" sizes="(max-width: 200px) 100vw, 200px" /></a> <div class="desc"> <p class="category"><a href="https://min-web.com/category/design-development/wordpress/" style="background-color:#222222;">WordPress</a></p> <h4 class="title"><a href="https://min-web.com/wordpress-use-with-smartphone/" name="">【超簡単】スマホ1つでWordPressを利用する方法</a></h4> <p class="excerpt">WordPressを使う際、スマホ(スマートフォン)だけでWordPr…</p> </div> </li> <li class="clearfix num2"> <a class="image" href="https://min-web.com/wordpress-make-search-function/"><img width="200" height="200" src="https://min-web.com/wp-content/uploads/2019/03/pixta_49723814_M-200x200.jpg" class="attachment-size1 size-size1 wp-post-image" alt="" srcset="https://min-web.com/wp-content/uploads/2019/03/pixta_49723814_M-200x200.jpg 200w, https://min-web.com/wp-content/uploads/2019/03/pixta_49723814_M-150x150.jpg 150w, https://min-web.com/wp-content/uploads/2019/03/pixta_49723814_M-120x120.jpg 120w" sizes="(max-width: 200px) 100vw, 200px" /></a> <div class="desc"> <p class="category"><a href="https://min-web.com/category/design-development/wordpress/" style="background-color:#222222;">WordPress</a></p> <h4 class="title"><a href="https://min-web.com/wordpress-make-search-function/" name="">WordPressの記事検索機能を簡単に作る方法【初心者向け】</a></h4> <p class="excerpt">Wordpressで制作したWebサイトはコンテンツの更新が簡単なので…</p> </div> </li> <li class="clearfix num3"> <a class="image" href="https://min-web.com/wordpress-no-login-allowed/"><img width="200" height="200" src="https://min-web.com/wp-content/uploads/2019/03/pixta_39829844_M-1-1-200x200.jpg" class="attachment-size1 size-size1 wp-post-image" alt="" srcset="https://min-web.com/wp-content/uploads/2019/03/pixta_39829844_M-1-1-200x200.jpg 200w, https://min-web.com/wp-content/uploads/2019/03/pixta_39829844_M-1-1-150x150.jpg 150w, https://min-web.com/wp-content/uploads/2019/03/pixta_39829844_M-1-1-120x120.jpg 120w" sizes="(max-width: 200px) 100vw, 200px" /></a> <div class="desc"> <p class="category"><a href="https://min-web.com/category/design-development/wordpress/" style="background-color:#222222;">WordPress</a></p> <h4 class="title"><a href="https://min-web.com/wordpress-no-login-allowed/" name="">WordPressにログインできない原因12シーンとその対処法</a></h4> <p class="excerpt">Wordpressは専門知識がなくても簡単にWEBサイトを作成できるた…</p> </div> </li> <li class="clearfix num4"> <a class="image" href="https://min-web.com/wordpress-paragraph/"><img width="200" height="200" src="https://min-web.com/wp-content/uploads/2019/03/pixta_46031148_M-200x200.jpg" class="attachment-size1 size-size1 wp-post-image" alt="" srcset="https://min-web.com/wp-content/uploads/2019/03/pixta_46031148_M-200x200.jpg 200w, https://min-web.com/wp-content/uploads/2019/03/pixta_46031148_M-150x150.jpg 150w, https://min-web.com/wp-content/uploads/2019/03/pixta_46031148_M-120x120.jpg 120w" sizes="(max-width: 200px) 100vw, 200px" /></a> <div class="desc"> <p class="category"><a href="https://min-web.com/category/design-development/wordpress/" style="background-color:#222222;">WordPress</a></p> <h4 class="title"><a href="https://min-web.com/wordpress-paragraph/" name="">WordPress(ワードプレス)の改行・段落作成における注意点</a></h4> <p class="excerpt">Wordpressで記事を作成する際、見やすさや読みやすさを意識して作…</p> </div> </li> <li class="clearfix num5"> <a class="image" href="https://min-web.com/wordpress-google-analytics/"><img width="200" height="200" src="https://min-web.com/wp-content/uploads/2019/03/pixta_47722359_M-200x200.jpg" class="attachment-size1 size-size1 wp-post-image" alt="" srcset="https://min-web.com/wp-content/uploads/2019/03/pixta_47722359_M-200x200.jpg 200w, https://min-web.com/wp-content/uploads/2019/03/pixta_47722359_M-150x150.jpg 150w, https://min-web.com/wp-content/uploads/2019/03/pixta_47722359_M-120x120.jpg 120w" sizes="(max-width: 200px) 100vw, 200px" /></a> <div class="desc"> <p class="category"><a href="https://min-web.com/category/design-development/wordpress/" style="background-color:#222222;">WordPress</a></p> <h4 class="title"><a href="https://min-web.com/wordpress-google-analytics/" name="">3分で完了!WordPressでGoogleアナリティクスを導入する方法</a></h4> <p class="excerpt">この記事では、wordpressでサイトを作成した人向けにgoogle…</p> </div> </li> <li class="clearfix num6"> <a class="image" href="https://min-web.com/wordpress-twitter-embed/"><img width="200" height="200" src="https://min-web.com/wp-content/uploads/2019/03/pixta_47924013_M-200x200.jpg" class="attachment-size1 size-size1 wp-post-image" alt="" srcset="https://min-web.com/wp-content/uploads/2019/03/pixta_47924013_M-200x200.jpg 200w, https://min-web.com/wp-content/uploads/2019/03/pixta_47924013_M-150x150.jpg 150w, https://min-web.com/wp-content/uploads/2019/03/pixta_47924013_M-120x120.jpg 120w" sizes="(max-width: 200px) 100vw, 200px" /></a> <div class="desc"> <p class="category"><a href="https://min-web.com/category/design-development/wordpress/" style="background-color:#222222;">WordPress</a></p> <h4 class="title"><a href="https://min-web.com/wordpress-twitter-embed/" name="">WordPressにTwitterフィードを埋め込む方法[SNS連動]</a></h4> <p class="excerpt">WordpressのブログでTwitterのブログを引用・共有したいと…</p> </div> </li> </ol> </div> <h3 id="comment_headline">コメント</h3> <div id="comment_header"> <ul class="clearfix"> <li id="comment_switch" class="comment_switch_active"><a href="javascript:void(0);">コメント ( 0 )</a></li> <li id="trackback_switch"><a href="javascript:void(0);">トラックバック ( 0 )</a></li> </ul> </div><!-- END #comment_header --> <div id="comments"> <div id="comment_area"> <!-- start commnet --> <ol class="commentlist"> <li class="comment"> <div class="comment-content"><p class="no_comment">この記事へのコメントはありません。</p></div> </li> </ol> <!-- comments END --> </div><!-- #comment-list END --> <div id="trackback_area"> <!-- start trackback --> <ol class="commentlist"> <li class="comment"><div class="comment-content"><p class="no_comment">この記事へのトラックバックはありません。</p></div></li> </ol> <div id="trackback_url_area"> <label for="trackback_url">トラックバック URL</label> <input type="text" name="trackback_url" id="trackback_url" size="60" value="https://min-web.com/wordpress-fixed-page/trackback/" readonly="readonly" onfocus="this.select()" /> </div> <!-- trackback end --> </div><!-- #trackbacklist END --> <fieldset class="comment_form_wrapper" id="respond"> <div id="cancel_comment_reply"><a rel="nofollow" id="cancel-comment-reply-link" href="/wordpress-fixed-page/#respond" style="display:none;">返信をキャンセルする。</a></div> <form action="https://min-web.com/wp-comments-post.php" method="post" id="commentform"> <div id="guest_info"> <div id="guest_name"><label for="author"><span>名前</span>( 必須 )</label><input type="text" name="author" id="author" value="" size="22" tabindex="1" aria-required='true' /></div> <div id="guest_email"><label for="email"><span>E-MAIL</span>( 必須 ) - 公開されません -</label><input type="text" name="email" id="email" value="" size="22" tabindex="2" aria-required='true' /></div> <div id="guest_url"><label for="url"><span>URL</span></label><input type="text" name="url" id="url" value="" size="22" tabindex="3" /></div> </div> <div id="comment_textarea"> <textarea name="comment" id="comment" cols="50" rows="10" tabindex="4"></textarea> </div> <div id="submit_comment_wrapper"> <p style="display: none;"><input type="hidden" id="akismet_comment_nonce" name="akismet_comment_nonce" value="15b558cbfb" /></p><p style="display: none;"><input type="hidden" id="ak_js" name="ak_js" value="154"/></p> <input name="submit" type="submit" id="submit_comment" tabindex="5" value="コメントを書く" title="コメントを書く" alt="コメントを書く" /> </div> <div id="input_hidden_field"> <input type='hidden' name='comment_post_ID' value='770' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </div> </form> </fieldset><!-- #comment-form-area END --> </div><!-- #comment end --> <!-- banner2 --> </div><!-- END #main_col --> </div><!-- END #main_contents --> <p id="copyright">Copyright ©  <a href="https://min-web.com/">ミンウェブ -みんな使えるWeb活用術</a> All rights reserved.</p> <div id="return_top"> <a href="#header_top"><span>PAGE TOP</span></a> </div> <!-- facebook share button code --> <div id="fb-root"></div> <script> (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.async = true; js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.5"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script> <script type='text/javascript' src='https://min-web.com/wp-includes/js/comment-reply.min.js?ver=5.0.4'></script> <script type='text/javascript' src='https://min-web.com/wp-includes/js/wp-embed.min.js?ver=5.0.4'></script> <script async="async" type='text/javascript' src='https://min-web.com/wp-content/plugins/akismet/_inc/form.js?ver=4.1'></script> </body> </html>