前回の記事で、
ここまでの流れを書きました。
これでブログを始められますが、記事を書く前に見た目をもう少し整えたい！という方もいると思います。
今回は、「固定ペ―ジ」の作り方、メニューやウィジェットの設定方法を解説します♪
最初にやっておこう！パーマリンクの設定
記事を書く前に、やって欲しい作業があります。「パーマリンク」の設定です。
パーマリンクとは
パーマリンクってなに…？
ページの個別の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」という項目は、編集画面を下にスクロールするとあります。
このカスタムCSSはCocoon独自機能です。
このページにのみ適用できる装飾のようなものです。
「当サイトについて」と「プロフィール」はひとまとめでもOK
サイトの説明や自己紹介のページです。
文字数が少ないなら、「当サイトについて」というページの中に「プロフィール」という見出しを作り、自己紹介を兼ねてもOK。
見出しとは
ん？見出しって…？
見出しブロックを追加で使用できます。
クラシックエディタでは、「段落 ▼」というプルダウンから。
ワードプレスの場合、「見出し2」から使います。
ワードプレスではページタイトルが「見出し1」に設定されています。
本文の中で「見出し1」を使うと構造がおかしくなるんです。
見出しをいくつか付けたい場合は、まずは「見出し2」だけ使っていれば問題ないです。
お問い合わせフォームを設置する
ワードプレスには、お問い合わせフォームを簡単に設置する機能があります。
ブロックエディタの中から、「お問い合わせ」や「Form」を検索して選べばOK。
そのまま何も弄らなくても、最低限お問い合わせフォームとして成立します。項目は編集可能です。
※お問い合わせの転送先をgmailに設定している場合は、以下の設定をしないと受信できない場合があるようです。
サイトマップを設置する
テーマCocoonを使っている方は、ショートコードで簡易的なサイトマップを設置できるようになりました。
Cocoon以外の方は、いろんな方法があると思いますが、手っ取り早いのはプラグインを使う方法です。
ここでは「PS Auto Sitemap」というプラグインをご紹介します。
プラグイン→新規追加で、検索窓に「PS Auto Sitemap」と入力します。
今すぐインストール」→「有効化」
次に、固定ページでサイトマップページを作ります。
ビジュアル/テキスト→「テキスト」をクリック。テキストモードに切り替えます。
以下をコピペし、公開ボタンをクリックします。
<!-- SITEMAP CONTENT REPLACE POINT -->
公開ボタンを押した後、アドレスバーを見てください。
URLの中に「post=数字」という文字列があります。この数字をメモしてください。
設定→PS Auto Sitemap
先ほどメモした数字を、「サイトマップを表示する記事」欄に入力→変更を保存
サイトマップが出来上がりました！
設定→PS Auto Sitemap→「スタイルの変更」でデザインを選べます♪
プライバシーポリシーは後回しでもOK
固定ページの一覧の中に、最初から「プライバシーポリシー」の下書きがあります。
中を見ると雛形になっていて、書き変えて使えるようになっています。
が、今は何もせず、公開しなくてOK。
個人ブログにプライバシーポリシーって必要なの？
個人ブログでプライバシーポリシーが必要になるのは、主に以下の場合。
- Googleアナリティクス、サーチコンソールを導入する
- Googleアドセンスの広告を設置する
- Amazonアソシエイトのアフィリエイト広告を設置する
これらのサービスを利用する場合、「プライバシーポリシー」に必要事項を明記する必要があります。
Googleアナリティクス・サーチコンソール
アクセス解析などを行い、サイトの改善に役立つ無料ツールです。
慌てて設定しなくていいです。ブログを始めてから1～2ヶ月経過して、10～20記事くらい書いてからで大丈夫。
Googleアドセンス
クリック型の広告です。審査に合格すれば設置できます。ブログを収益化できる代表的なサービスです。
Amazonアソシエイト
通販サイト・アマゾンの、成功報酬型の広告（アフィリエイト）です。審査に合格すれば設置できます。
Amazonアソシエイト・プログラム運営規約│Amazonアソシエイト
いずれのサービスも、できたてホヤホヤのブログに設置するような代物ではありません。今はスルーでOK。よって本記事では解説もしないので悪しからず。
ご参考までに、当サイトのプライバシーポリシーはこちら
メニューの設定方法
固定ページができたら「グローバルメニュー（ナビ）」を設定しましょう！
「グローバルメニュー（ナビ）」は、当サイトで言うならピンクの帯のこれ↓
早速、設置してみましょう！
なお、テーマCocoonバージョンです。他のテーマを使っている方はご参考程度に。
外観→メニュー→「メニュー名」にお好きな名前を入力→メニューを作成
グローバルメニューに追加したい固定ページを✔→「メニューに追加」
固定ページ以外もメニューに追加できます。
「メニュー構造」に固定ページが追加されます。ドラッグして順番を入れ替えます。
一番上にあるメニューが、グローバルメニューの一番左に来ます。
「メニュー設定/メニューの位置」
「ヘッダーナビ」・「モバイルヘッダーナビ」に✔→メニューを保存
お好みで細かい設定もできます。サイトを見てみましょう。
グローバルメニューが設置されました！
★Cocoonの場合は、Cocoon設定→ヘッダー→「グローバルナビメニュー色」で、帯色や文字色を変更できます。
ウィジェットの追加/削除
ウィジェットとは、
- サイドバーやフッターにプロフィールを載せたり
- 新着記事・人気記事などを表示できる
ミニメニューのようなもの。
以下の6つのウィジェットが、サイドバーに最初から設置されています。
- 検索
- 最近の投稿
- 最近のコメント
- アーカイブ
- カテゴリ―
- メタ情報
ウィジェットを追加できる場所（ウィジェットエリアと呼びます。）は、テーマによってかなり違います。
Cocoonはこんな感じ↓
これ、かなり多いです。
すごく便利なんですが、最初はどこを使えばいいか分からないと思います。
まずは「サイドバー」、「フッター左/中/右」/「フッター（モバイル用）」あたりから設定してみましょう。
ウィジェットを追加する
試しに、
- 「フッター左」に「プロフィール」
- 「フッター中」に「新着記事」
- 「フッター右」に「人気記事」
このようにウィジェットを入れてみます。
ドラッグ＆ドロップでも、追加したい場所をクリックしてで選択してもOK。
動画でどうぞ。↓
※ロリポップユーザーの方の場合、カスタムHTML/広告ウィジェットを使おうとすると、セキュリティの関係で保存できないと思います。
ロリポップのユーザー専用ページ→セキュリティ→WAF設定で、お使いのドメインのWAFを無効にしてください。
10分後くらいに設定が反映されるので、保存できるようになるはずです。
これ以外にも、保存できない/403エラーになる等の場合は、WAFを無効にすると大体解決します。
なお編集が完了したら、WAF設定はまた有効にしておくことを強くお勧めします。
ウィジェットを削除する
ウィジェットの削除は簡単です。
削除したいウィジェットを選んで、「削除」をクリックするだけ。
初期設定のウィジェットのうち、「最近のコメント」と「メタ情報」は、削除していいと思います。
特に「メタ情報」は、読者にとって全く必要ないウィジェット。しかも、不正ログインの原因にもなり得ます。
「メタ情報」ウィジェットは消しておくのが無難です。
最後に
お疲れさまでした！
- パーマリンクの設定
- 固定ページの作成
- メニューの設定
- ウィジェットの追加/削除
かなり駆け足で書かせていただきました。
ここまで来れば、あとはどんどん、記事を書くのみ！思う存分、ブログライフをお楽しみください♪
最後までお読みいただき、ありがとうございました。