Cocoonテーマのアップロード方法！インストールなど失敗する原因・対処方法付き。超初心者さん向け❦

Cocoonカスタマイズ

2018.09.03

ダウンロードしたテーマのZIPフォルダを、WordPress管理画面の『外観』－『テーマ』よりインストールする方法
インストールしたとき、”目的のフォルダーはすでに存在しています“とメッセージが表示され、導入・反映されない理由…など
FTPでテーマをアップロード方法

WordPressテーマ：Cocoonの初心者ユーザーさんに、上記に説明を加え超本気でイロイロ説明します。

（フォーラムでわいひらさんに修正してもらった）開発版：公開される前のgithub.com/yhira/cocoon/archive/master.zipをWP管理画面テーマのアップデートからできない理由を含め、チェックしてください。

初めてWordPressにCocoonをインストール・導入する方法
Cocoonテーマのアップロードに失敗したとき
1. 子テーマ導入で『親テーマが見つからず』アップロードが失敗！
  1. 親テーマにテーマ本体ファイルが格納されているから
2. サーバーがロリポップでアップロードサイズが小さい場合
目的のフォルダーはすでに存在して、アップロードできない
1. WordPressは親テーマを使う人もいる
2. 親テーマの更新が来たときは、管理画面で更新できる
自分でダウンロードしたCocoonZIPフォルダについて
個別アップデートは、FTPソフトを使ってアップロード
テーマの更新でキチンと表示されていない場合
表示がオカシイ・反映されてないとき、キャッシュの削除
困った時は検索して、それでも不明ならフォーラムへ
さいごに

初めてWordPressにCocoonをインストール・導入する方法

画像で説明するので、手順通りに導入すれば、Cocoonの子テーマが導入できますよ。

『外観』－『テーマ』をクリックし『新規追加』を選択

テーマのアップロードを選択

『ファイルを選択』をクリック

cocoon-master.zipフォルダをPCから選択

今すぐインストールを選択

『テーマのページに戻る』をクリック

アップロードしたファイル cocoon-master.zip からテーマをインストールしています

パッケージを展開しています…

テーマをインストールしています…

テーマのインストールが完了しました。

ライブプレビュー | 有効化 | テーマのページに戻る

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

『新規追加』を選択

『新規追加』をクリックしたら、続いて子テーマを導入し、有効化させます。

テーマのアップロードを選択

『ファイルを選択』をクリック

cocoon-child-master.zipをPCから選ぶ

cocoon-child-master.zipをインストール

インストールができたら、以下の画面に。

アップロードしたファイル cocoon-child-master.zip からテーマをインストールしています

パッケージを展開しています…

テーマをインストールしています…

このテーマには親テーマが必要です。親テーマがインストールされているか確認しています。

親テーマ Cocoon *** はインストール済みです。

テーマのインストールが完了しました。

ライブプレビュー | 有効化 | テーマのページに戻る

有効化を選択。

Cocoon Childが有効になっている状態

Cocoon Childが有効になっている状態で、これから子テーマを使ってくださいね。

Cocoonテーマのアップロードに失敗したとき

何か思わぬ（ファイル関連の）不具合がでたときほか、親テーマの再アップロードを試した時に失敗した場合…など。

親テーマが失敗した場合
- 以前使用していたテーマ（またはデフォルトテーマ）を有効化する
- テーマ変更をしたくないなら、FTPソフトでアップロード※やりかたは後述
初めての導入で子テーマが失敗した場合
- 親テーマを有効化しておく

その後失敗した親テーマ（または子テーマ）の削除。管理画面『外観』－『テーマ』からZIPフォルダのままアップロードでも大丈夫。

子テーマ導入で『親テーマが見つからず』アップロードが失敗！

Cocoonは子テーマを使うように推奨されていますが、子テーマをダウンロードしたけど、失敗したのは、どうしてでしょう。。思わぬ原因があるので、チェック！

アップロードしたファイル cocoon-child-master.zip からテーマをインストールしています
パッケージを展開しています…

テーマをインストールしています…

このテーマには親テーマが必要です。親テーマがインストールされているか確認しています。

親テーマが見つかりませんでした。この子テーマを利用する前に、親テーマ cocoon-master をインストールしてください。

テーマのインストールが完了しました。

テーマのページに戻る

親テーマを『導入してこそ』の子テーマです。親テーマをまずダウンロードして、導入ください。

導入方法は初めの見出しのとおりです。

子テーマだけを導入できない理由は次。

親テーマにテーマ本体ファイルが格納されているから

Cocoon-master：親テーマ内ファイル群

子テーマには、このような膨大なファイルは格納されてません。親テーマに画像のような膨大なファイルが存在します。

はじめ親テーマを導入して、親テーマとの紐づけされた子テーマを導入・有効化
親テーマの更新で、カスタマイズが消えないよう子テーマを導入するのが正解

ちなみに。

親テーマ更新をクリックしたタイミングで、新バージョンのファイルが上書きされます。

サーバーがロリポップでアップロードサイズが小さい場合

Cocoonをはじめて導入しようと思っている初心者さんで、『ロリポップ』ユーザーの人。

レンタルサーバーの設定で2M以上あるフォルダ・ファイルを一括でアップロードができない状態です。※Cocoonの親テーマは2M以上ある。

試してみる事は、レンタルサーバーにログインして、『php.ini設定』にあるアップロードできるサイズの容量を2Mから、20Mに変更すればOK！

詳細は以下。

LINKロリポップ！ファイルのアップロードサイズupload_max_filesizeを20M以上に設定する方法

原因はたくさんありますけど、初心者さんであれば一度お試しください。

次の見出しは、以下2点。チェックしてくださいね。

今後、やってしまいがちな事
親テーマの更新方法

目的のフォルダーはすでに存在して、アップロードできない

画像はWordPress管理画面の『外観』－『テーマ』より、自分でダウンロードしたCocoonZIPフォルダを、アップロードしたら『テーマのインストールに失敗しました。』と表示されたときのスクリーンショットです。

自分でダウンロードしたCocoonを『再度アップロード』すれば、このように失敗します。

WordPressはたくさんのテーマが出回っているので、上書き防止のため考慮されてるため表示させている・『外観』－『テーマ』からのアップロードは初めて導入するときだけの入り口だと思ってください❦

その理由として次。

WordPressは親テーマを使う人もいる

親テーマでカスタマイズする人のことも考慮され作られるでしょうから、管理画面のテーマの更新でアップロードを行えないと思えば、分かりやすいかも。

子テーマの存在を知らず、親テーマをカスタマイズして使っている人にも考慮

さらに他テーマを試そうと導入する際、間違え今のテーマをアップロードが出来ちゃうと困る点もあります。

例えば子テーマがアップロードできてしまっても同じで。

頑張って書いたコードが消えた…
コピペしたデザインが全部白紙に戻っちゃった…

と、なってしまうから『もうテーマは存在してるよ。』と表示し、未然に防いでいると思えばALL OK！

ポイント

子テーマを導入有効にして、子テーマでカスタマイズを行う。
- 親テーマに更新があっても、子テーマに書いたコードは消えないので
- 親テーマだけ、最新のコードに書き換えられる

子テーマは1度導入したら、その後子テーマの更新はしません。

外観－テーマの編集から、子テーマに追記したコードが消えちゃ意味ないですから❦

親テーマの更新が来たときは、管理画面で更新できる

Cocoonは多機能ですが、汎用性のある良い機能はドンドン追加されたりします。

テーマ作成者さんの環境でチェックが行われ『更新いくよぉ』とGOを出すと、テーマを導入しているWordPress側に『更新の通知』が徐々に届くイメージです。

ちなみに詳細は以下、公式ページでどうぞ。

LINKCocoonテーマの自動アップデート機能について｜Cocoon

更新は管理画面『ダッシュボード』または『外観－テーマ』を開くとわかる❦

WP管理画面『外観－テーマ』よりCocoon親テーマ更新の通知

新しいバージョンが利用できます。今すぐ更新

このときは『今すぐ更新』をポチっとすれば、簡単に更新を完了できる感じです。

自分でダウンロードしたCocoonZIPフォルダについて

テーマの更新は『外観』－『テーマ』より、ポチっとすれば更新完了しますが、Cocoonの親テーマを個別でダウンロードした場合、FTPソフトでアップロードします。

フォーラムで修正してもらった『親テーマ（開発版）』github.com/yhira/cocoon/archive/master.zipフォルダ
都合によりCocoonダウンロードページから、親テーマをダウンロードしたフォルダ
旧バージョンに戻したいとき、ダウンロードした旧親テーマ

これらフォルダの説明からしますね。

フォーラムで修正してもらった『開発版親テーマmaster.zip』とは

例：フォーラムのmaster.zip｜Cocoonより

フォーラムでわいひらさんが貼ったリンクをクリックしダウンロードしたmaster.zip。

『最新版として公開されているバージョンの次』に出るであろう、『次の最新版（開発版・先行最新バージョン）』Cocoon親テーマです。

他サイトは問題なく動くけど、質問者さんの環境では問題が出る場合など…
- フォーラムへ投稿する
- わいひらさんが環境を考慮し修正したCocoon超最新バージョンをくれる

開発版を導入し、問題なく表示されたか確認できれば、現在Cocoonを使っている大多数の人に更新が伝えられ、新機能を搭載したテーマを安心して導入できるワケです。

質問者さんは修正されたテーマを新バージョン公開前にいち早く使えるのがメリット

Cocoon公式ページよりダウンロードした親テーマとは

現在『公開されている』最新版のCocoon親テーマ本体ファイル群

以前のバージョンでもなく、公開前の（超最新版：開発版）親テーマでもありません。

ポイント

何かがうまくいかないとき、『親テーマを再度アップロードしてみてください。』と検索で見たときだけダウンロードしてアップロードを行います。

健康な状態であれば、特に行う必要はないって事
Cocoonは導入済みだから、FTPソフトでアップロードする
- 圧縮されているフォルダを解凍してからアップロード

親テーマのダウンロードは以下ページ：見出しよりどうぞ。

LINK#親テーマのダウンロード｜テーマのダウンロード｜Cocoon

旧バージョンのCocoon親テーマ

たとえば新バージョンの機能と、使用しているプラグインやカスタマイズのバッティング：競合でエラーがでたとき。

以前のバージョンに戻しエラーが出ないか状況をチェックしたい場合など

以前のバージョンをダウンロードして、旧バージョンに戻します。

Cocoon旧バージョンに戻す方法については、以下公式ページ見出しへ。

LINK#過去バージョン｜テーマのダウンロード｜Cocoon

個別アップデートは、FTPソフトを使ってアップロード

はじめて『FTPソフト』って名前を聞いて意味不明！って人へ、説明しておきますね。

契約したレンタルサーバーには、WordPress本体（PHP・CSS・JSなど…）ファイルが格納され、その中にCocoonテーマ『ファイル一式』も入ってるワケです。

テーマフォルダをPC（スマホ・タブレット）内にダウンロードしたら、レンタルサーバーの（WordPress本体フォルダ内にある）テーマを保存する場所に上書きすることで反映されます。

どうやって上書きするの？
- 圧縮されたフォルダを解凍し、転送すればOK❦

PCからサーバーへ、サーバーからPCへ。ファイルの転送を行うのがFTPソフトです。詳細例は、以下をどうぞ

LINKFTPって何？初心者に説明！ファイルの中身とアップロードなどWordPressでの基本

PCからサーバー・サーバーからPCへ転送。これはバックアップと復元にもつながります。

WordPressファイル内を知ると理解しやすいです❦

LINK簡易的バックアップ！初心者用WordPressファイル内説明と、5秒で復元する方法

重要：FTPソフトの導入方法は以下。

LINKWordPressバックアップ、FileZillaの使い方！ダウンロード・インストール・設定方法の手順

上▲はWindows・Macでつかえ

下▼はWindowsで使える

LINK初心者へFFFTPの導入・初期設定とそのバックアップ！困ったときの対処法付き

iPhoneスマホユーザーは、検索し使えるアプリを探してください。

次は実際にファイルを転送する、詳細な工程です。

1．cocoon-master.zipフォルダを解凍

PCなどにダウンロードしたzipフォルダを解凍してください。※解凍する為のアプリを一度導入しておくと今後便利。Lhaplusなど

Windowszipファイル解凍例

解凍したフォルダは、初めのうち迷子にならないよう『デスクトップなどに置けば』分かりやすいですよ。

フォルダ名は『cocoon-master』

2．cocoon-masterフォルダをFTPソフトでアップロードする場所

FFFTP：FileZilla（FTPソフト）の左がPC側ディレクトリ（ファイル格納庫）

FFFTPソフト：左PC側

デスクトップにあるcocoon-masterフォルダをFTPソフトの左側に見えるよう、pc上のパスを指定。ウィンドウズなら以下のようなパス

C:\Users\ユーザー名\Desktop

FTPソフトの右側はサーバーのディレクトリ

FFFTPソフト：右サーバー側

FTPソフトの右側は、レンタルサーバー上にあり公開されているファイル群が入ってます。

画像の右側にある青いサーバー側の（ディレクトリ）パスについて。

/bibabosi-rizumu.com/
- 公開しているフォルダ名（サイト・サーバーによって違う）
public_html/
- サーバーによってはない。公開したディレクトリ：場所によって変わる
wp-content/themesフォルダ内にアップロードする

FTPソフトでアップロード。画像を見ながら一緒にやる❦

hoge（/public_html）/wp-content/themesフォルダ内に、PCで解凍したcocoon-masterをサーバー側へアップロードする。

PC側フォルダを右クリック・アップロード

サーバー（右）側ホストに同じフォルダがあるのは、今Cocoonを使っているから当然❦

アップロードして、上書きしちゃってOK！

これで今のバージョンから、任意のバージョンが上書きされる感じです。

バックアップ方法は以下をどうぞ。

LINK初心者向け！WordPressのバックアップ方法、記事をエクスポートする手順

ダウンロードしたCocoonのバージョンを確認したい

Cocoonのバージョンを確認はstyle.css

どのバージョンをダウンロードしたか確認するには、cocoon-masterフォルダ内にあるstyle.cssを開いてください。

@charset "UTF-8"; /* Theme Name: Cocoon Description: SEO・高速化・モバイルファースト最適化済みの無料テーマ Theme URI: https://wp-cocoon.com/ Author: わいひら Author URI: https://nelog.jp/ Text Domain: cocoon Version: 1.1.7 Tags: two-columns, left-sidebar, right-sidebar License: GNU General Public License License URI: http://www.gnu.org/licenses/gpl-2.0.html */

この場合、バージョン1.1.7だと分かります。