絵本一覧 サイトマップ

ワードプレスで固定ページを作って、メニューやウィジェットを整えよう!

ワードプレスで固定ページを作ってメニューやウィジェットを整えよう!
当サイトは広告収入を得て運営しております

前回の記事で、

  1. ロリポップ!でレンタルサーバーを契約
  2. ムームードメインで独自ドメインを取得
  3. ワードプレスをインストール
  4. 無料テーマのCocoonを入れる

ここまでの流れを書きました。

これでブログを始められますが、記事を書く前に見た目をもう少し整えたい!という方もいると思います。

今回は、「固定ペ―ジ」の作り方、メニューやウィジェットの設定方法を解説します♪

― スポンサーリンク ―
― スポンサーリンク ―

最初にやっておこう!パーマリンクの設定

記事を書く前に、やって欲しい作業があります。「パーマリンク」の設定です。

パーマリンクとは

パーマリンクってなに…?

Answer

ページの個別のURLであり、(基本的に)ずっと変わらないURLです。

当サイトのURLは、https://www.akaeho.net

この記事のURLは、https://www.akaeho.net/wp-page-menu-widget/

「wp-page-menu-widget」の部分が、「パーマリンク」です!簡単だね!^^

(基本的に)とカッコ書きにしたのは、別に変えようと思えば変えられるから。

でも、後から変えると大変。1ページごとに自動転送(301リダイレクト)の設定が必要になります。うまく行かないと、検索エンジンの評価が下がることもあります。

パーマリンクを投稿名に設定する

ワードプレスのパーマリンクは、「日付と投稿名」が初期設定になっています。

URLの構造は「西暦/月/日/タイトル/」。

設定パーマリンク設定で、「投稿名」を選択→変更を保存をクリックします。

パーマリンク設定-投稿名

投稿画面でパーマリンクを編集する

「投稿名」に設定すると、タイトル欄に入れた文字列が、そのままURLになります。

パーマリンク編集
クラシックエディタ

日本語もそのままURLになります。が、アルファベットで入力し直す方がいいです。

というのも

https://www.akaeho.net/%E5%BD%93%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6/

↑これ、何か分かりますか?

実は、このURLと同じなんです↓

https://www.akaeho.net/当サイトについて/

日本語をURLに含めること自体はOK。

でも、例えばTwitterなどで記事をシェアすると、URLとして表示されるのは、英数記号に変換された文字列となってしまうんです(「エンコード」といいます)。

ちょっと見づらいですよね(^-^;

なので、最初からアルファベットに直しておきましょう。

パーマリンク編集
クラシックエディタ
グーテンベルクエディタ

編集」→アルファベットで入力→「OK」で、パーマリンクを変更できます。

グーテンベルクエディタ(今現在のエディタ)の場合は右側の「URLスラッグ」からでも変更可能です。

固定ページの作り方

固定ページってなに?

投稿と何が違うの?

固定ページとは

以下のようなページのこと。パーマリンク用の英語も付けておきます。ご参考にどうぞ♪

主なパーマリンク例
  • ホーム(home)
  • 当サイトについて(about)
  • プロフィール(profile)
  • お問い合わせ(contact)
  • よくあるご質問(faq)
  • サイトマップ(sitemap)
  • プライバシーポリシー(privacy-policy)
  • ご利用規約(terms)

これらの中から必要なページを作ればOK。

記事を書くのが「投稿」、サイト運営上必要なページは「固定ページ」で作る、と覚えておけば、とりあえず大丈夫。



ホーム(フロントページ)を作る場合

「あかえほ」ではホーム(フロントページ)を作っています。

デフォルトの状態では、新着記事一覧がトップページになります。ホームを作るかどうかはお好みでOK。ただし、作る場合はちょっと設定が必要です。

まず、固定ページ新規作成で、あなたのブログのトップページを自由に作りましょう!

パーマリンクは「home」にします。

固定ページ-ホーム
クラシックエディタ

こまめに「下書きとして保存」を。完成したら公開をクリック。

「https://あなたの独自ドメイン/home/」というURLのページができました。

このままだと、「home」というパーマリンクが無いと、“ホーム”にたどり着けません。

そこで、「home」を“ホーム”(フロントページ)であるとワードプレスに認識させます。

フロントページの設定

設定表示設定で、「ホームページの表示」→「固定ページ」を選択

ホームページ:「ホーム」を選択

※自分がつけた固定ページのタイトルが、ここに表示されます。

下にスクロール→変更を保存

これで、独自ドメインにアクセスすると“ホーム”(フロントページ)が表示されるようになりました!

フロントページ

Cocoonをお使いの方へ

  • ホーム(フロントページ)のSNSボタンは消したい!
  • でもホーム以外のページには付けたい!

という方は、以下のコードを「カスタムCSS」にコピペし、更新してください。

.sns-share, .sns-follow{display:none;}

「ホーム」というタイトル文字も消したい!という場合は、以下のコードを。

.entry-title{display:none;}

「カスタムCSS」という項目は、編集画面を下にスクロールするとあります。

Cocoon-カスタムCSS

このカスタムCSSはCocoon独自機能です。

このページにのみ適用できる装飾のようなものです。



「当サイトについて」と「プロフィール」はひとまとめでもOK

サイトの説明や自己紹介のページです。

文字数が少ないなら、「当サイトについて」というページの中に「プロフィール」という見出しを作り、自己紹介を兼ねてもOK。

見出しとは

ん?見出しって…?

見出しブロックを追加で使用できます。

クラシックエディタでは、「段落 ▼」というプルダウンから。

見出しタグ選択画面

見出しを使うと、読者にとっても見やすく、検索エンジンにとっても文章構造を理解しやすいページになります。

ワードプレスの場合、「見出し2」から使います。

ワードプレスではページタイトルが「見出し1」に設定されています。

本文の中で「見出し1」を使うと構造がおかしくなるんです。

見出しをいくつか付けたい場合は、まずは「見出し2」だけ使っていれば問題ないです。

お問い合わせフォームを設置する

ワードプレスには、お問い合わせフォームを簡単に設置する機能があります。

ブロックエディタの中から、「お問い合わせ」や「Form」を検索して選べばOK。

そのまま何も弄らなくても、最低限お問い合わせフォームとして成立します。項目は編集可能です。

※お問い合わせの転送先をgmailに設定している場合は、以下の設定をしないと受信できない場合があるようです。

サイトマップを設置する

テーマCocoonを使っている方は、ショートコードで簡易的なサイトマップを設置できるようになりました。

Cocoon以外の方は、いろんな方法があると思いますが、手っ取り早いのはプラグインを使う方法です。

ここでは「PS Auto Sitemap」というプラグインをご紹介します。

プラグイン新規追加で、検索窓に「PS Auto Sitemap」と入力します。

サイトマッププラグイン

今すぐインストール」→「有効化

次に、固定ページでサイトマップページを作ります。

PS Auto Sitemap

ビジュアル/テキスト→「テキスト」をクリック。テキストモードに切り替えます。

以下をコピペし、公開ボタンをクリックします。

<!-- SITEMAP CONTENT REPLACE POINT -->

公開ボタンを押した後、アドレスバーを見てください。

アドレスバーでページIDを確認

URLの中に「post=数字」という文字列があります。この数字をメモしてください。

設定PS Auto Sitemap

PS Auto Sitemap設定画面

先ほどメモした数字を、「サイトマップを表示する記事」欄に入力→変更を保存

サイトマップが出来上がりました!

サイトマップ

設定PS Auto Sitemap→「スタイルの変更」でデザインを選べます♪



プライバシーポリシーは後回しでもOK

固定ページの一覧の中に、最初から「プライバシーポリシー」の下書きがあります。

中を見ると雛形になっていて、書き変えて使えるようになっています。

が、今は何もせず、公開しなくてOK。

個人ブログにプライバシーポリシーって必要なの?

個人ブログでプライバシーポリシーが必要になるのは、主に以下の場合。

これらのサービスを利用する場合、「プライバシーポリシー」に必要事項を明記する必要があります。

Googleアナリティクス・サーチコンソール

アクセス解析などを行い、サイトの改善に役立つ無料ツールです。

慌てて設定しなくていいです。ブログを始めてから1~2ヶ月経過して、10~20記事くらい書いてからで大丈夫。

プライバシーの開示に関するポリシーアナリティクスヘルプ

Googleアドセンス

クリック型の広告です。審査に合格すれば設置できます。ブログを収益化できる代表的なサービスです。

コンテンツ ポリシー 必須コンテンツAdSenseヘルプ

Amazonアソシエイト

通販サイト・アマゾンの、成功報酬型の広告(アフィリエイト)です。審査に合格すれば設置できます。

Amazonアソシエイト・プログラム運営規約Amazonアソシエイト

いずれのサービスも、できたてホヤホヤのブログに設置するような代物ではありません。今はスルーでOK。よって本記事では解説もしないので悪しからず。

ご参考までに、当サイトのプライバシーポリシーはこちら

参考にしていただいて構いません。が、完全にコピペしてしまうと、あなたのサイトがコピーサイトと認定され、ペナルティを受ける可能性があります。

メニューの設定方法

固定ページができたら「グローバルメニュー(ナビ)」を設定しましょう!

「グローバルメニュー(ナビ)」は、当サイトで言うならピンクの帯のこれ↓

グローバルメニュー

早速、設置してみましょう!

なお、テーマCocoonバージョンです。他のテーマを使っている方はご参考程度に。

外観メニュー→「メニュー名」にお好きな名前を入力→メニューを作成

メニュー作成

グローバルメニューに追加したい固定ページを✔→「メニューに追加

メニューに追加

固定ページ以外もメニューに追加できます。

メニュー構造」に固定ページが追加されます。ドラッグして順番を入れ替えます。

メニュー構造

一番上にあるメニューが、グローバルメニューの一番左に来ます。

「メニュー設定/メニューの位置

ヘッダーナビ」・「モバイルヘッダーナビ」に✔→メニューを保存

メニューを保存

お好みで細かい設定もできます。サイトを見てみましょう。

グローバルメニューが設置されました!

グローバルメニュー

★Cocoonの場合は、Cocoon設定ヘッダー→「グローバルナビメニュー色」で、帯色や文字色を変更できます。

グローバルメニュー-Cocoon

ウィジェットの追加/削除

ウィジェットとは、

  • サイドバーやフッターにプロフィールを載せたり
  • 新着記事・人気記事などを表示できる

ミニメニューのようなもの。

以下の6つのウィジェットが、サイドバーに最初から設置されています。

  1. 検索
  2. 最近の投稿
  3. 最近のコメント
  4. アーカイブ
  5. カテゴリ―
  6. メタ情報

ウィジェットを追加できる場所(ウィジェットエリアと呼びます。)は、テーマによってかなり違います。

Cocoonはこんな感じ↓

ウィジェットエリア-Cocoon

これ、かなり多いです。

すごく便利なんですが、最初はどこを使えばいいか分からないと思います。

まずは「サイドバー」、「フッター左/中/右」/「フッター(モバイル用)」あたりから設定してみましょう。

ウィジェットを追加する

試しに、

  • 「フッター左」に「プロフィール」
  • 「フッター中」に「新着記事」
  • 「フッター右」に「人気記事」

このようにウィジェットを入れてみます。

ドラッグ&ドロップでも、追加したい場所をクリックしてで選択してもOK。

動画でどうぞ。↓

※ロリポップユーザーの方の場合、カスタムHTML/広告ウィジェットを使おうとすると、セキュリティの関係で保存できないと思います。

ロリポップのユーザー専用ページ→セキュリティ→WAF設定で、お使いのドメインのWAFを無効にしてください。

10分後くらいに設定が反映されるので、保存できるようになるはずです。

これ以外にも、保存できない/403エラーになる等の場合は、WAFを無効にすると大体解決します。

なお編集が完了したら、WAF設定はまた有効にしておくことを強くお勧めします。

ウィジェットを削除する

ウィジェットの削除は簡単です。

削除したいウィジェットを選んで、「削除」をクリックするだけ。

ウィジェットの削除

初期設定のウィジェットのうち、「最近のコメント」と「メタ情報」は、削除していいと思います。

特に「メタ情報」は、読者にとって全く必要ないウィジェット。しかも、不正ログインの原因にもなり得ます。

「メタ情報」ウィジェットは消しておくのが無難です。

最後に

お疲れさまでした!

  • パーマリンクの設定
  • 固定ページの作成
  • メニューの設定
  • ウィジェットの追加/削除

かなり駆け足で書かせていただきました。

ここまで来れば、あとはどんどん、記事を書くのみ!思う存分、ブログライフをお楽しみください♪

最後までお読みいただき、ありがとうございました。

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