サイトマップ

赤ちゃんに絵本はまだ早い?
絵本を、もっと身近に。
無料の絵本で気軽に読み聞かせ。

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

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

ちびこママです!
icon-twitter Chibiko_mama

前回の記事で、ロリポップ!でレンタルサーバーを契約し、ムームードメインで独自ドメインを取得し、ワードプレスをインストールして無料テーマのCocoonを入れる所までを書きました。

ワードプレスで趣味ブログを始めよう!【ロリポップ×ムームードメイン】

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

そこで今回は、記事を書き始める前に設定しておきたいことをシェアしたいと思います♪

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

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

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

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

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

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

 

もう少しだけ詳しく説明すると、ページの個別のURLであり、(基本的に)ずーっと変わらないURLのこと。なるべくシンプルで、何のページなのかが分かりやすい文字列が最適。

サイトマップのページなら、https://www.akaeho.net/sitemap/となっていると分かりやすいでしょ?

(基本的に)とカッコ書きにしたのは、別に変えようと思えば変えられるんです。でも、後から変えると色々と大変なので。他サイトからリンクいただいてる場合とか、検索エンジンの評価が下がるとか。

 

さて、ワードプレスのデフォルトのパーマリンク設定では、「日付と投稿名」が選択されていて、URLの構造は「西暦/月/日/タイトル/」になります。

設定→パーマリンク設定より、「投稿名」を選択して、変更を保存ボタンをクリックしてください。

permalink

 

「投稿名」に設定すると、固定ページや投稿を新規作成する際、タイトル入力欄に入れた言葉がそのまま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」で、パーマリンクを変更できます。

固定ページの作り方

固定ページってなに?

投稿となにが違うの?

固定ページとは・・・

ズバリ、以下のようなページのことです。パーマリンク用の英語も付けておきますので、ご参考にしてください。

  • ホーム(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ってなに?って説明はここでは割愛します。ザックリ言うとこのページにだけ適用する装飾のこと。

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

サイトの説明や自己紹介のページになります。「あかえほ」は一応、創作絵本サイトです。(え?笑)

当サイトについて
「あかえほ」はちびこママが運営する無料の創作絵本サイトです。赤ちゃんから幼児向けの絵本をご提供しています。

ページの中身がスカスカだと寂しいので、文字数が少ない場合は、「当サイトについて」というページの中に「プロフィール」という見出しを作って、自己紹介も兼ねてしまうのもアリですよ。

見出しとは

ん?見出しって…?

見出しは、編集画面の「段落 ▼」というプルダウンから選んで設定します。

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

ワードプレスの場合、固定ページや投稿の中で使う見出しは「見出し2」からスタートします。

というのも、ワードプレスではページタイトルが「見出し1」に設定されているので、本文の中で「見出し1」を使うと構造がおかしくなるんです。

見出し3~6までありますが、とりあえず今は気にしなくてOK。(長文を書いたり、見出し2の中でさらに細かく分けたい場合に使います。)

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

 

見出しについてもっと詳しく知りたい方は、サルワカさんのサイトを読んでみてくださいね。

【HTML】見出しタグの使い方:h1〜h6はどう使い分ける?
h1やh2などの見出しタグの「意味」と「正しい使い方」を分かりやすくまとめました。

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

こちらの記事を見てワードプレスの初期設定までしていただいた方は、「Jetpack」というプラグインを入れてもらったと思います。

ワードプレスで趣味ブログを始めよう!【ロリポップ×ムームードメイン】
ロリポップ!とムームードメインの申し込み・契約の流れ、ワードプレスのインストール手順と初期設定、無料のおすすめテーマ「Cocoon」の導入方法を写真や動画で詳しく解説します。

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

お問い合わせフォームを追加」ボタンをワンクリックドン!以上です。(笑)

項目は編集可能。

 

お問い合わせフォームだけのページを作ってもいいですが、ちょっと寂しい感じになってしまうので、「当サイトについて」などのページにくっつけても良いと思います。

サイトマップを設置する

ページ数が少ないうちは特に必要ないと思いますが、投稿が10記事を超えたら設置しておくといいでしょう。

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

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

 

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

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

 

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

ビジュアル/テキストの部分で「テキスト」をクリックし、テキストモードに切り替えます。

 

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

<!-- SITEMAP CONTENT REPLACE POINT -->

 

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

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

 

設定PS Auto Sitemapを開きます。

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

 

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

 

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

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

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

中を見てみると雛形になっていて、必要に応じて書き変える仕様になっています。

が、とりあえず今は特に何もせず、公開もしなくてOK。

 

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

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

これらのサービスを利用する場合には、「プライバシーポリシー」に必要事項を明記する事が必須となっています。

 

Googleアナリティクスとサーチコンソールは、アクセス解析などを行い、サイトの改善に役立つ無料ツールです。

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

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

 

Googleアドセンスは、クリック型の広告です。審査に合格すれば設置することができます。ブログを収益化できる代表的なサービスです。

必須コンテンツ - AdSense ヘルプ

 

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

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

 

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

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

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

メニューの設定方法

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

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

 

これ以上の説明は割愛!早速設置していきましょう!

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

 

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

 

グローバルメニューに追加したい固定ページを✔して、「メニューに追加」をクリック。

固定ページ以外もメニューに追加できるけど、まだ無いと思うので今はスルー。

 

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

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

 

「メニュー設定」の「メニューの位置」で、「ヘッダーナビ」と「モバイルヘッダーナビ」に✔を入れ、メニューを保存

細かい設定もできますが、ここでは割愛。サイトを見てみましょう。

 

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

 

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

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

ワードプレスで言うウィジェットとは、サイドバーやフッターにプロフィールを置いたり、新着記事や人気記事を入れたりできるミニメニューのようなもの。

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

  • 検索
  • 最近の投稿
  • 最近のコメント
  • アーカイブ
  • カテゴリ―
  • メタ情報

 

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

Cocoonだとこんな感じ。

これ、かなり多いです。

すごく便利なんですが、最初はどこがどこだか分からないと思うので、まずは「サイドバー」、「フッター左/中/右」/「フッター(モバイル用)」あたりから設定すると良いと思います。

ウィジェットを追加する

試しに、

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

このようにウィジェットを入れてみます。ドラッグ&ドロップでもOKだし、追加したい場所をクリックで選択、でもOK。

動画でどうぞ。↓

読者目線で、「ここにこのウィジェットがあると便利だな~♪」と想像しながら設置してみましょう^^

ウィジェットを削除する

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

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

 

デフォルトでサイドバーに入っているウィジェットの内、「最近のコメント」と「メタ情報」は削除していいと思います。

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

なぜデフォルトで入っているのか分かりませんが、とにかく「メタ情報」ウィジェットは消しておきましょう!

最後に

ここまでたどり着いた皆様、本当にお疲れさまでした!(*´ω`)

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

これらの事を、かなり駆け足で書かせていただきました。

大変でしたよね(笑)でも、あなたのブログ、かなりカッコよくなったんじゃないでしょうか?^^

・・・え?まだ装飾し足りない?(笑)それはまた、別の記事でm(_ _)m

 

それでは、ブログライフ、楽しんでください♪最後までお読みいただき、ありがとうございました。