WordPressのインストールが終わったので、ここから「のんびり研究所」のサイトを少しずつ整えていきます。
今回は、無料のWordPressテーマ「Cocoon」をダウンロードし、WordPressへインストールします。
Cocoonには「親テーマ」と「子テーマ」があります。名前だけ見ると少し難しそうですが、順番どおり進めれば大丈夫です。
このシリーズについて
- 第1回：Cocoonのインストールと公開名の設定
- 第2回：パーマリンクと画像サイズを確認
- 第3回：Contact Form 7でお問い合わせフォームを作る
- 第4回：Confirm Plus Contact Form 7で確認画面を追加
- 第5回：CM Tooltip Glossaryで用語集を作る
- 第6回：カテゴリを作って、日記と神社の記事を公開する
- 第7回：Cocoonの吹き出しを作る
- 第8回：同期パターンを使って、シリーズ案内を一括管理する
- 第9回：メニューとサイドバーを設定して記事を探しやすくする
- 第10回：Google Analytics 4を設定する
- 第11回：Google Search Consoleを設定する
- 第12回：Glossary Tooltipを試したら、日本語の文章内で反応しなかった（失敗）
- 第13回は未定です。
※実際の作業量によって、記事数や各回の内容を変更する場合があります。
Cocoonとは？
Cocoonは、WordPressで利用できる無料のテーマです。
WordPressでは、テーマを変更することで、サイト全体のデザインや記事の表示方法などを変更できます。
Cocoonには、記事の目次、吹き出し、SNSシェアボタン、関連記事など、サイト運営に役立つ機能があらかじめ数多く用意されています。
今回は、このCocoonを「のんびり研究所」のテーマとして使用します。
Cocoonのダウンロードページを探す
まずは、Googleなどの検索サイトで、次のキーワードを検索します。
Cocoon ダウンロード
検索結果の中から、Cocoon公式サイトのダウンロードページを開きます。
安全のため、URLも確認すると間違えが少ないです。
親テーマと子テーマをダウンロードする
Cocoonのダウンロードページを開くと、親テーマと子テーマをダウンロードする場所がページ下のほうにあります。
今回は、次の2つを両方ダウンロードします。
- 親テーマ
- 子テーマ
ダウンロードしたファイル名は、次のようになります。
- 親テーマ：cocoon-master.zip
- 子テーマ：cocoon-child-master.zip
ファイル名に「child」と入っている方が子テーマです。
英語の「child」には「子ども」という意味があります。そのため、テーマ名に「child」と付いているファイルが子テーマだと覚えておくと、見分けやすいと思います。
なぜ親テーマと子テーマの両方が必要なの？
ここで、少し疑問が出てきます。「子テーマを有効にするなら、親テーマはいらないのでは？」私も最初に見たときは、そう思いました。
親テーマには、Cocoonを動かすための基本的な機能やデザインが入っています。子テーマは、その親テーマの機能を利用しながら、自分で追加した設定やカスタマイズを保存するためのテーマです。
そのため、子テーマだけでは動作できません。親テーマと子テーマの両方をインストールしたうえで、子テーマを有効にして使用します。（親テーマは有効にしない）
簡単に表すと、次のような関係です。
- 親テーマ：Cocoon本体
- 子テーマ：自分で変更した内容を保存する場所
親テーマを直接変更しない理由
Cocoonの親テーマは、機能の追加や不具合の修正などによって更新されることがあります。
親テーマのファイルを直接変更していると、テーマを更新したときに、自分で変更した内容が上書きされて消えてしまう可能性があります。子テーマ側でカスタマイズしておけば、親テーマを更新しても、自分で追加した内容を残しやすくなります。
今すぐ細かなカスタマイズをする予定がなくても、後から変更したくなるかもしれません。そのため、最初から子テーマを有効にしておくことにしました。
WordPressのテーマ追加画面を開く
Cocoonの親テーマと子テーマをダウンロードしたら、WordPressの管理画面へ戻ります。
左側のメニューから、次の順番で進みます。
外観 → テーマ
テーマページを開いたら、画面左上にある「テーマを追加」をクリックします。
Cocoonの親テーマをインストールする
テーマの追加画面を開いたら、画面上部にある「テーマのアップロード」をクリックします。
続いて「ファイルを選択」をクリックし、先ほどダウンロードした親テーマを選択します。
親テーマのファイル名は、下記のものを選びましょう。
cocoon-master.zip
ファイルを選択したら、「今すぐインストール」をクリックします。
インストールが完了したら、いったんテーマのページへ戻ります。
この時点では、親テーマを有効化しなくても大丈夫です。
Cocoonの子テーマをインストールする
親テーマをインストールしたときと同じように、もう一度「テーマを追加」をクリックします。
「テーマのアップロード」から、今度は子テーマのZIPファイルを選択します。
子テーマのファイル名は、下記のものを選びましょう。
cocoon-child-master.zip
ファイルを選択したら、「今すぐインストール」をクリックします。
子テーマのインストールが完了したら、今回はそのまま「有効化」をクリックしてみましょう。
子テーマが有効になっているか確認する
WordPress管理画面の「外観」から「テーマ」を開きます。
テーマ一覧の中で「Cocoon Child」に「有効」と表示されていれば、インストールは成功です。
親テーマの「Cocoon」は有効になっていなくても問題ありません。
子テーマが有効になっていると、画面上では子テーマが使用されていますが、その土台では親テーマの機能が使われています。
Cocoon公式のインストール方法も確認できます
Cocoon公式サイトにも、親テーマと子テーマのインストール方法が詳しく掲載されています。WordPressやCocoonの画面は、バージョンアップによって表示やボタンの位置が変わることがあります。
この記事の画面と違う場合や、インストール中にエラーが表示された場合は、Cocoon公式サイトの説明も参考にしてください。
Cocoonテーマをインストールする方法（Cocoon公式サイト）
記事に表示される名前を変更する
Cocoonのインストールが終わったら、記事を書き始める前に、WordPress上で公開される名前も確認しておきます。
WordPressをインストールしたときの設定によっては、記事の作成者名として、ログインに使用しているユーザー名や本名が表示される場合があります。
ログイン用のユーザー名や本名をサイト上に表示したくない場合は、公開用のニックネームを設定しておきましょう。
ニックネームとユーザー名は別のものです
ユーザー名は、WordPressへログインするときなどに使用する名前です。
ニックネームは、記事の作成者名などとして公開するために使用できる名前です。
今回はユーザー名を変更するのではなく、サイト上に表示される名前だけを変更します。
プロフィール画面を開く
WordPressの管理画面へ戻り、左側のメニューから次の順番で進みます。
ユーザー → プロフィール
プロフィール画面には、ユーザー名、氏名、ニックネーム、メールアドレスなど、そのユーザーに関する情報が表示されています。
公開用のニックネームを入力する
プロフィール画面を下へ進み、「名前」の項目を探します。
その中にある「ニックネーム（必須）」へ、サイト上で表示したい名前を入力します。
のんびり研究所では、本名ではなく、サイト内で使用する名前を入力します。
ここでは例として、次のような名前を入力します。
のんびり研究所
ニックネームには、必ずしも本名を入力する必要はありません。
サイト名や記事の内容に合った名前、普段インターネット上で使用している名前などを設定できます。
個人情報が表示されていないか確認しましょう
プロフィール画面には、姓や名が入力されている場合があります。
本名を公開する予定がない場合は、これから設定する「ブログ上の表示名」が、本名になっていないか必ず確認してください。
ブログ上の表示名を変更する
ニックネームを入力しただけでは、記事に表示される名前がまだ変更されない場合があります。
続いて、「ブログ上の表示名」という項目を確認します。
「ブログ上の表示名」の右側にある選択欄をクリックし、先ほど入力したニックネームを選択します。
ここで選択した名前が、記事の作成者名やプロフィールなどに使用されます。
ニックネームを入力したのに選択肢へ表示されない場合は、一度プロフィールを保存してから、もう一度この画面を開いて確認してみてください。
プロフィールを保存する
ニックネームとブログ上の表示名を設定したら、プロフィール画面の一番下まで進みます。
「プロフィールを更新」をクリックして、変更内容を保存します。
「プロフィールを更新しました」と表示されたら、設定は完了です。
記事に表示される名前を確認する
すでに記事を作成している場合は、その記事を表示して、作成者名が設定したニックネームになっているか確認してみましょう。
テーマの設定によっては、記事ページに作成者名が表示されていない場合もあります。
その場合でも、投稿者ページ、プロフィール欄、検索結果、使用しているプラグインなどに名前が表示される可能性があります。
そのため、本名を公開しない予定であれば、サイトを作り始めた段階で真っ先に設定しておくと安心です。
今回のまとめ
今回は、Cocoonの親テーマと子テーマをダウンロードし、WordPressへインストールしました。
- Cocoon公式サイトから親テーマと子テーマをダウンロードする
- 親テーマは「cocoon-master.zip」
- 子テーマは「cocoon-child-master.zip」
- ファイル名に「child」と付いている方が子テーマ
- 親テーマと子テーマの両方をインストールする
- 有効化するのは「Cocoon Child」
親テーマがCocoon本体で、子テーマが自分の設定やカスタマイズを残すための場所です。子テーマを有効にしておけば、今後Cocoonをカスタマイズするときにも対応しやすくなります。
ここまでで、Cocoonを使うための準備ができました。
