Cocoonユーザーさんに
やりたいカスタマイズがあれば、お問い合わせよりお待ちしてます。
または検索窓に『Cocoon ○○ カスタマイズ』など入力してください。

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

スポンサーリンク

テーマCocoonファイルをサーバーへアップロードする方法

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

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

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

スポンサーリンク
スポンサーリンク
  1. 初めてWordPressにCocoonをインストール・導入する方法
  2. Cocoonテーマのアップロードに失敗したとき
    1. 子テーマ導入で『親テーマが見つからず』アップロードが失敗!
      1. 親テーマにテーマ本体ファイルが格納されているから
  3. 目的のフォルダーはすでに存在して、アップロードできない
    1. WordPressは親テーマを使う人もいる
    2. 親テーマの更新が来たときは、管理画面で更新できる
  4. 自分でダウンロードしたCocoonZIPフォルダについて
    1. フォーラムで修正してもらった『開発版親テーマmaster.zip』とは
    2. Cocoon公式ページよりダウンロードした親テーマとは
    3. 旧バージョンのCocoon親テーマ
  5. 個別アップデートは、FTPソフトを使ってアップロード
    1. 1.cocoon-master.zipフォルダを解凍
    2. 2.cocoon-masterフォルダをFTPソフトでアップロードする場所
    3. FTPソフトでアップロード。画像を見ながら一緒にやる❦
      1. ダウンロードしたCocoonのバージョンを確認したい
  6. テーマの更新でキチンと表示されていない場合
    1. スタイルが効いてない。ファイルの読み込みがうまくいってないとき
    2. 何故かエラーが発生し画面が真っ白になる場合
  7. 表示がオカシイ・反映されてないとき、キャッシュの削除
    1. Cocoonのキャッシュを削除
    2. サーバーのキャッシュを削除
      1. エックスサーバーのキャッシュはCocoonと相性が悪い!
    3. プラグインのキャッシュを削除
  8. 困った時は検索して、それでも不明ならフォーラムへ
  9. さいごに

初めて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 Childが有効になっている状態で、これから子テーマを使ってくださいね。

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

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

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

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

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

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

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

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

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

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

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

テーマのページに戻る

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

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

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

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

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

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

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

ちなみに。

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

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

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

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

WPメッセージ:パッケージを展開しています… テーマをインストールしています… 目的のフォルダーはすでに存在しています。 /home/account/bibabosi-rizumu.com/public_html/wp-content/themes/cocoon-master/ テーマのインストールに失敗しました。

画像は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親テーマです。

  • 他サイトは問題なく動くけど、質問者さんの環境では問題が出る場合など…
    • フォーラムへ投稿する
    • わいひらさんが環境を考慮し修正した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ファイル解凍例

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

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!

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

ダウンロードした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だと分かります。

テーマの更新でキチンと表示されていない場合

極まれにあるのですが、更新でテーマの表示がおかしくなったとき、親テーマのアップデート中に、不備が時々発生したばあい。

  • styleがキチンと反映していない・ファイルの読み込みがうまく出来てないなど
親テーマ最新バージョンをFTPソフトでアップデートしてください。
  • ただFTPでアップしなくても、再読み込みで反映する時もある。
    • 利用環境的に読み込みが失敗してなければアップデートを試す

ほかのケースは次。

  •  何故かエラーが発生し画面が真っ白になる場合
    1. プラグインとテーマの干渉の可能性
    2. プラグイン同士が急に干渉しだした可能性
    3. WordPressのバージョンとプラグイン環境があわなくなった

などなど…考えられます。

3に関してはプラグインが長らくアップデートされてないかも知れません。アップを待つか、プラグイン作成者さんに問い合わせるか、現状バージョンにあったプラグインを探すなど。

上記1.2の対処法の詳細は以下をどうぞ❦

スタイルが効いてない。ファイルの読み込みがうまくいってないとき

サーバー側で上手くスタイルを読み込めなかっただけ。などもあります。その場合はキャッシュを削除すればOK!後述。

それでもダメなら、アップデートがうまく完了できなかった可能性を考えて、FTPソフトでアップロードしてください。

何故かエラーが発生し画面が真っ白になる場合

  • プラグインとテーマの干渉の可能性
  • プラグイン同士が急に干渉しだした可能性

などを特定するため、エラーメッセージを表示します。

LINKWordPress初心者でも、真っ白になった画面を復元!エラーコードを表示させる2つの方法

表示させたらエラーメッセージをコピーして、メモ帳・メールなどどこでも良いのでメモとしてペーストして記録し、エラーメッセージを非表示にすべく設定を元に戻します。

それぞれ導入しているプラグインも違うので自分の環境で起こったエラーの原因を特定する為、以下のように原因を特定してください。

2次災害を防ぎたいので、落ち着いて対応してくださいね。

LINKCocoon親テーマのバージョンアップでWordPress公開ページでエラー!原因の調べ方

表示がオカシイ・反映されてないとき、キャッシュの削除

キャッシュが残っている可能性をチェックするため、キャッシュの削除をしてください。

キャッシュの種類は以下3種類+ブラウザです。

  • テーマ
  • サーバー
  • プラグイン

Cocoonのキャッシュを削除

cocoonのキャッシュ削除画面

『Cocoon設定』より、『キャッシュ削除』を行ってください。すべてのキャッシュを削除する場合は一番上。

サーバーのキャッシュを削除

利用サーバーによってはページのキャッシュを残し、高速化する機能が有効な場合があります。サーバーのキャッシュを削除してください。

サーバー名 キャッシュ 削除 など任意のキーワードで検索すれば、具体的な方法が分かりますよ。

エックスサーバーのキャッシュはCocoonと相性が悪い!

エックスサーバー:高速化:右真ん中

エックスサーバーの高速化、mod_pagespeed設定はCocoonでさまざまなエラーが出ているのでOFFにしておきます。

エックスサーバー:サーバーパネルにログインしてチェックする。

  • 高速化対策が行われているCocoonとは、相性が悪い

Cocoonならエラーが出ると、すぐに対応してくれるのが大きなメリットです。また色んな高速化対策が行われているので、mod_pagespeed設定はずっとOFFでOK!

画像の貼り替えを行っただけで、画像が表示されたり表示されなかったり…とお困りの方はmod_pagespeed設定のONが原因でした。困る事が多いかと思います。

プラグインのキャッシュを削除

キャッシュ系・圧縮系など高速化を行っている場合など、プラグインの設定画面より、キャッシュの削除を行ってください。

困った時は検索して、それでも不明ならフォーラムへ

検索して対処しようにも、どうしてもわからない事はあるので、Cocoonフォーラムで助けてもらうのも手です。

質問するときは、以下詳細な情報を伝えると解決が早いと思われます。

  • Cocoon設定・テーマ情報
  • 不具合が出ているページのURL
  • どの場所でどんな不具合があるか、エラーメッセージを添える
    • 運営者さんしか知らない環境で、どんな状態か伝えるため

必要な情報+環境を提示すれば、テーマ製作者さんの負担がほんのりでも減るし、時間を割いて見てもらうので『チェックしてもらいやすい』よう上記を伝えてみてはいかがでしょうか。

  • 例え1度で、伝わりきれなくっても、気持ちは伝わるものですから^^

不具合であればその書き込みは助かるでしょうし、不明点なら他の人が検索から『なるほど!』と参考になる事もあります。

勇気がいるし、書き込むのにも時間もかかりと思いますが、解決できればいいと思ってこそのフォーラムでもあると思いますよ。

LINKCocoon フォーラム|Cocoon

さいごに

色んな便利機能がどんどん増えますので、自分にあった機能や使うと便利!と思う機能などさまざまあります。Cocoon情報はFeedly・メール・SNSなどでチェックして時間があるとき確認したいですね。

それからWordPress運営は、思わぬところでエラーが出る場合があります。

カスタマイズをしてなくても、プラグイン同士のエラーやWordPress本体ファイルとプラグインのエラーなどもあるので、バックアップをとって復元できるようにFTPソフトの使い方はチェックしてくださいね。

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

カスタマイズしたい場合はテスト環境を作るのも手ですよ。

LINKWordPressサブドメインでテスト環境を作る2つの方法

それでは。かうたっくでした。

Comments

個人情報の取り扱いについてはリンク先をご確認ください。

ご了承・ご理解いただいた上でコメントお待ちしております?

トップへ戻る