第2回 【WordPress】 テーマ「Cocoon」を導入する

WordPress GCP

1. 第2回 【WordPress】 テーマ「Cocoon」を導入する

Cocoon。とても良いテーマに巡り会ったと思っています。

環境:Debian 9 php 7.0 Apache 2.4.25 MySQL 5.7 Cocoon

WordPress

一般的に何か発信するとしたら、名の知れているブログサイト。広告収入を得られる訳でもなく、挑戦する気も起きない感じです。とはいえ、ブロガーというのは広告収入を得て記事を書いているし、どうやっているんだろうというところからスタートしました。

広告収入を得ているブロガーという人たちを調べてみると、WordPressというツールを利用しているんだなと。ではそれに従って、WordPressを使ってみようと。

WordPressにはテーマというものが必要で、デザイン性や機能性がそれぞれに違いがあるということも調べてみると分かったことでした。私は始めるにあたって、ものすごく素人だったから、デザイン性や機能性よりも使い方を紹介しているサイトが沢山あるものを探しました。

そこで出会ったのがCocoonというテーマ。

Cocoon

無料であるにもかかわらず、デザイン性も機能性も兼ね備えているそうな。パソコンでもスマホでも同じコードで書かれているレスポンシブデザイン。実際に利用している人たちのサイトを見てみると、見る側が見やすい。ふむふむ。

そして、個人で開発している。いやぁー個人かーー

と思いながら開発者のサイトに訪れてみるとフォーラムというものがあり、ユーザーが質問したり、不具合を報告したり、それに対する対応がものすごく早い。ユーザー同士でも解決し合ったりしてるし。たまんねぇなと。

無料で、見やすくて、対応が早い。完成度が高いっていうことだなと判断して「Cocoon」というテーマに決定。

「GCP(Google Cloud Platform)」で「WordPress」を運用して「Cocoon」というをテーマで導入したら、挑戦する気が起きるし、何より自分自身も楽しいんじゃないかと。

では早速インストール

手順の流れ
  • 親テーマ
    パソコンにダウンロード

  • 子テーマ
    パソコンにダウンロード

  • 親テーマ
    WordPressにアップロード

    インストール

  • 子テーマ
    WordPressにアップロード

    インストール

  • 子テーマ
    WordPressで有効化

1.1 親テーマをパソコンにダウンロード

Cocoonテーマのダウンロードページ

テーマのダウンロード
Wordpressテーマ「Cocoon」の親テーマと子テーマのダウンロードページです。

親テーマのダウンロードをします。

1.2 子テーマをパソコンにダウンロード

子テーマのダウンロードします。

1.3 親テーマをWordPressにアップロード

「WordPress管理画面」「外観」「テーマ」の順番にクリックし次へ進みます。

1.4 WordPressのテーマ画面

新規追加をクリックして次へ進みます。

1.5 テーマを追加する画面

「テーマのアップロード」ボタンを押して次へ進みます。

1.6 親テーマをアップロード

ダウンロードした親テーマをアップロードする方法は2種類。

  • ファイル選択からアップロード
  • ファイルをドラッグしてアップロード

1.7 親テーマをインストール

アップロードが完了したら「今すぐインストール」をクリックします。

1.8 親テーマインストール完了

親テーマがインストール完了してから次へ進みます。

「テーマのページに戻る」をクリック。

注意点

普通、注意点なんかないはずですが、せっかちな私は親テーマがインストール完了する前に、子テーマをインストールしようとしたことがありました。WordPressが壊れました。アクセスできなくなります。

1.9 子テーマをWordPressにアップロード

新規追加をクリックして次へ進みます。

1.10 テーマを追加する画面

「テーマのアップロード」ボタンを押して次へ進みます。


1.11 子テーマをアップロード

ダウンロードした子テーマをアップロードする方法は2種類。

  • ファイル選択からアップロード
  • ファイルをドラッグしてアップロード

1.12 子テーマをインストール

アップロードが完了したら「今すぐインストール」をクリックします。

1.13 子テーマインストール完了

子テーマがインストール完了してから次へ進みます。

「テーマのページに戻る」をクリック。

1.14 子テーマをWordPressで有効化

画面右側の「Cocoon Child」にマウスを持っていくと「有効化」ボタンをクリックできるようになります。

「有効化」をクリックして次へ進みます。

1.15 子テーマの有効化が完了

「Cocoon Child」の画像左下に「有効」と表示されていれば有効化が完了です。

1.16 親テーマと子テーマの関係

最初の頃、「親テーマ」と「子テーマ」の何が違うのか良くわからずにマニュアルに従っていましたが、長く付き合い始めて独自にカスタマイズするようになると、その違いが分かってきました。

親テーマ:
更新が行われ最新の状態が保たれる。そのため、親テーマのファイルでカスタマイズを行なってしまうと、更新する際にファイルが上書きされて、カスタマイズする前の状態に戻ってしまう。

子テーマ:
独自にカスタマイズしたファイルが親テーマより優先して適用される。カスタマイズしたい時に、「子テーマフォルダにファイルがない」けど、「親テーマフォルダにファイルがある」そんな時があります。

その時のカスタマイズ手順として、

  1. 親テーマのファイルをパソコンにダウンロードして保存します。
  2. カスタマイズ用に編集したファイルを子テーマのフォルダにアップロードします。

こうすることによって、テーマが最新の状態に保たれ、かつ、独自のカスタマイズも反映された形のWordPressが運用できるようになります。

自信たっぷりに書いていますが、私の解釈が合っていればの話ですけど。


次は、第3回です。


【コメント】 ※「メールアドレス不要」