はじめに
「Cocoon」はフリーで使えるWordPressのテーマだ。
「Cocoon」には前から興味があったのだが、当サイトで2020年10月現在使用している標準テーマ「Twenty Sixteen」がさすがに4年前の製品で古くなってきたので、別のテーマに乗り換えることを検討していて、その候補として試しに使ってみようと考えた。
今回はあくまでも試用が目的なので、本番用サーバーにインストールするのではなく、Windows上に構築したローカル環境にインストールすることにした。
インストール先のローカル環境は、以下の記事で作成したものを使用することにした。
ダウンロード
まずは「Cocoon」のモジュールを手に入れよう。
下記のURLが「Cocoon」配布サイトとなるので、そちらへ移動しよう。
すると、以下のような画面が表示されるはずだ。
ここで「ダウンロード」ボタンを押下すると、以下の「テーマのダウンロード」ページへ遷移する。
直ちにダウンロードが始まるわけではない。
親テーマのダウンロード
「テーマのダウンロード」ページを下にスクロールしていくと、「親テーマのダウンロード」というセクションが見つかる。
まずはここで、親テーマをダウンロードしよう。
「親テーマ」というのはWordPressで言うところの「テーマ」と何ら変わりがない。
後述の子テーマと区別するために便宜上「親テーマ」と呼んでいるだけに過ぎない。
今はそのあたりは気にせずにダウンロードを実施しよう。
ダウンロードを実施するには、以下の「”Cocoonテーマ”をダウンロード」ボタンを押下すればよい。
以上で、親テーマのダウンロードは完了だ。
なお、当記事執筆時点での親テーマのファイル名は「cocoon-master-2.2.4.5.zip」になっていた。
子テーマのダウンロード
続いては子テーマをダウンロードしよう。
この作業は必ずしも必要ではないが、テーマのカスタマイズを行う場合には必須となるので念のために実施しておくことにする。
子テーマとは、言うなればカスタマイズ用に親テーマを複製したコピーのようなものだ。
子テーマをダウンロードするには、さらにページを下にスクロールする必要がある。
すると、以下のような「子テーマのダウンロード」というセクションが現れるはずだ。
ここで「”Cocoon子テーマ”をダウンロード」ボタンを押下すれば、子テーマをダウンロードできる。
以上で、子テーマのダウンロードは完了だ。
なお、当記事執筆時点での子テーマのファイル名は「cocoon-child-master-1.1.2.zip」になっていた。
インストール
続いて、「Cocoon」のインストールを実施しよう。
まずは、インストールの対象となるWordPressへログインして管理画面を表示しよう。
今回は、ローカル環境上でインストールを試す予定なので、ローカル環境上のWordPressへログインした。
以下は、ローカル環境上のWordPressでダッシュボードを表示させた様子だ。
記事は3件投稿済みの状態となっていて、ログインには「manager」という名前のユーザーを使用している。
ここで、左側のツールバーから「はけ」のようなアイコンを選択すると、下図のような黒地の「外観」サブメニューが現れる。
ここから「テーマ」を選択しよう。
すると、テーマの管理画面が表示される。
ここで、画面上部にある「新規追加」ボタンを押下すればテーマをインストールすることができる。
なお、この画面は現時点でのテーマのインストール状況によって表示が変化するので、必ずしも下図の通りではないが、「新規追加」ボタンの位置などは概ね変わらないものと想定してよい。
親テーマのインストール
最初に親テーマをインストールしよう。
上記の画面で「新規追加」ボタンを押下すると、以下のように画面が「テーマを追加」の画面に切り替わる。
先ほどダウンロードしたファイルをアップロードするための画面だ。
ここでは「テーマのアップロード」ボタンを押下しよう。
すると、「テーマのアップロード」ボタンの少し下に「参照…」ボタンが現れる。
このボタンがアップロードするファイルを選択するためのボタンとなる。
今度はこの「参照…」ボタンを押下しよう。
「参照…」ボタンを押下すると、Windowsのファイル選択画面が表示される。
ここで、先ほどダウンロードした「親テーマ」のファイルを選択しよう。
「親テーマ」のファイルを選択すると、ファイル選択画面が閉じられ、再び「テーマを追加」の画面が前面に表示される。
「参照…」ボタンの右側に「今すぐインストール」ボタンが現れるので、今度はこのボタンを押下しよう。
「今すぐインストール」ボタンを押下してしばらく待つと、以下のような画面に切り替わる。
「テーマのインストールが完了しました。」と表示されていれば正常だ。
以上で、親テーマのインストールは完了だ。
子テーマのインストール
子テーマのインストールは、基本的には親テーマのインストールとそれほど違わない。
違いはインストールするファイルくらいで、手順もほとんど同じだ。
まずは、親テーマをインストールした時と同様に、最初に「テーマ」の画面を開こう。
画面にはインストール済みのテーマとして「Cocoon」が追加されているはずだ。
子テーマのインストール方法は、親テーマの場合と同じだ。
画面上部の「新規追加」ボタンを押下しよう。
続いて「テーマを追加」の画面で、「テーマのアップロード」ボタンを押下しよう。
すると「参照…」ボタンが表示されるので押下しよう。
Windowsのファイル選択画面では、先ほどダウンロードした「子テーマ」のファイルを選択しよう。
続いて「今すぐインストール」ボタンを押下しよう。
しばらく待つと、以下のような画面が表示される。
「テーマのインストールが完了しました。」と表示されていれば正常だ。
以上で、子テーマのインストールは完了だ。
テーマの有効化
WordPressのテーマはインストールしただけでは使えない。
使えるようにするには「有効化」のプロセスが必要だ。
テーマを有効化するには、再度テーマの管理画面を表示しよう。
テーマの管理画面を表示させるには、前述の通り、左側のツールバーから「はけ」のようなアイコンを選択し、サブメニューから「テーマ」を選択すればよい。
すると、以下のような画面が表示される。
「Cocoon」の親テーマと子テーマが新たにインストールされているのが分かるだろう。
ここで有効化するべきなのは、「子テーマ」の方だ。
「親テーマ」は特に理由がなければ有効化をせずに、そのままにしておくのがおすすめだ。
理由はいくつかあるのだが、WordPressではこのやり方がおすすめとなっているようなので、今はその方針に倣っておけば問題ないだろう。
続いて、マウスのカーソルを「Cocoon Child」の上に移動しよう。
すると、以下のように「有効化」ボタンが現れるので押下しよう。
以下のように「新しいテーマを有効化しました」と表示されたら成功だ。
「Cocoon」の子テーマ「Cocoon Child」が有効になったことが分かるだろう。
以上で、テーマの有効化は完了だ。
サイトのイメージ
この状態でサイトを表示してみたところ、以下のように表示された。
画面の最下部にメニューバーが表示されているが、画面の幅が狭い場合はサイドメニューなどが隠されてここにアイコンが表示されるようだ。
ここでは、試しに「サイドバー」というアイコンを押下してみた。
すると、以下のようにサイドバーがオーバーラップして表示された。
スマートフォンのように画面が狭い場合に、メニューが折り返されて下の方に表示されるのはよく見るが、このようにオーバーラップで表示される仕掛けは少し目新しい。
検索ボックスや最近の投稿、最近のコメント、カテゴリーなど、通常のブログで使うような項目は、一通りサイドメニュー上に用意されているようだ。
ちなみに、WordPressの標準テーマ「Twenty Twenty」を使ってサイトを表示させると、以下のようになった。
どちらのテーマも何の設定もしていない状態で使用しているため、今は見やすさや美しさに欠けていることをお断りしておく。
ただ、これを見る限り、最新の投稿を先頭に表示するなどの考え方は、あまり違わないようだ。
なお、「Twenty Twenty」の方にもサイドメニューが表示されていないが、画面を下にスクロールして行ったところ、以下のようなメニューが現れた。
まとめ
「Cocoon」のインストール方法と有効化の方法を紹介した。
ざっと見た印象では、WordPressの標準テーマと同等の機能は備わっているようだ。
「Cocoon」のメリットやデメリットについては、もう少し詳細に見ていく必要があるようだ。
当記事の記載はここまでとし、「Cocoon」の使用感については別記事にて紹介する予定だ。