葉山のぺりです！ 今回はCocoonからJINへの引越し手順についてお伝えします。 前回はCocoonからJINへの移行で起きた悲劇とその労力の記事を書きました。今回は実際の作業です。
[blogcard url=”https://pelican-diary.com/jinmove/2974/”]
WordPressのテーマを最初に決めるときに、無料のCocoonからはじめてその後しばらくして、有料テーマに乗り換える人が多いと思います。
しかしその「しばらく」が人によって全然違う、そこに悲劇が生まれます。
私はまさに今大粒の涙を流しながら、テーマを変えている途中です。しかもまだ終わってません。130記事全てのリライトを行っています。
今まで大体２週間くらい苦しんでいます。
もし皆さんがCocoonからJINや他のテーマに乗り換えようと思っているのでしたら、記事が少ない時のほうがいいです。
20記事くらいだったら、小粒の涙で済むと思います。 記事が多い人にとってはこの引越しは、実際の引越しより辛い作業になります。
覚悟を持って引越しをスタートしましょう。 乗り越えた先には素晴らしい未来が待ってるはずです。一緒に勉強していきましょう！
JINのデザインを手に入れるために「ワードプレステーマ移行について」の勉強をしよう！
- バックアップをとる
- JINのテーマのインストール
- テスト環境を設定してJINを移行する（私は断念しました）
- 基本設定（Googleアドセンス、Googleアナリティクス、Googleサーチコンソール）等の設定
- JINの着せ替え
- JINへ必要な追加プラグイン
- JINの基本設定
- JINでの記事のリライト方法
いろいろなブロガーさんの記事を拝見して進めました。そちらのまとめ記事になります。
それでは詳しく見ていきましょう！
バックアップをとる
まずはテーマ変更の前に大事なデータのバックアップをとっておきます。やり方は2つあります。
移行の間に何か事件があったり、やはりCocoonに戻したい、など想定をしていない事態が起こる可能性があります。その時のためにバックアップをとりましょう。
- サーバーで自動バックアップ
- プラグインでバックアップ
サーバーで自動バックアップ
各サーバーバックアップ機能が用意されています。参照してぜひバックアップを取っておきましょう。
[blogcard url=”https://support.conoha.jp/w/autobackup/”]
[blogcard url=”https://www.xserver.ne.jp/functions/service_backup.php”]
プラグインでバックアップをとる
基本、サーバーでバックアップを取ったら十分かと思いますが、心配な人はプラグインでもバックアップが取れます。
いろいろなブロガーさんの記事を拝見したところ、「BackWpup」が一番良さそうです。
Hitodeさんの記事を参考にしました。めちゃくちゃわかりやすいです！
[blogcard url=”https://hitodeblog.com/how-backwpup”]
JINのテーマのインストール
JINの親テーマと子テーマをダウンロードします。公式ホームページの”いますぐダウンロード”をクリックして購入するか、Conohaであれば、JINが安く買えます。
Conohaから購入
Conohaにログイン＝＞上のWINGをクリック＝＞左のメニューバーからサイト管理をクリック。
WordPressテーマの青いボタンをクリック。そうするとConohaで買えるテーマが出てくるので、クリックして進みましょう。
メールでJINのダウンロード情報がURLから送られてくるので、データをダウンロードします。
WordPressに戻って、外観＞新しいテーマを追加（一番上）＞ファイルアップロード を押します。
ファイルをダウンロードする際、Macの場合ファイルをzipファイルにしてからWordPressにアップロードします。そうしないとエラーになります。Macでファインダー上で右クリックで圧縮を押すと、ZIPファイルができます。
その後JINの子テーマのダウンロードをします。
ダウンロードのボタンをクリック＞
ダウンロードしたファイルをWordPressに貼り付＞有効化 をします。
Word Pressでは JIN -Childを有効化します。親ではないです。
ここで有効化を押すと、CocoonからJINに移行が行われて、サイトを見ると、新しい外観になっています。
そして記事の中を見ると、びっくりします。はい、記事が壊れています。
この段階でCocoon Childを有効化するとサイトはCocoonに戻ります。
テスト環境を使ってサイトを移行する
本番環境でJINを有効化してしまうと、サイトが崩れた状態で公開し、そこから修復作業をやることになります。
それはとても見た目も悪いし、Userさんがアクセスしてくれて、このサイト壊れている！と判断してもう戻ってくれないかもしれません。
Conohaはテスト環境を用意してくれています。ただし、私はどうしてもそのサイトにログインできなくて、1日トライして諦めて本番環境での移行をしました。
その際記事を一個ずつ非表示に設定しておきました。このやり方であれば変な記事を公開しながら移行作業を続けなくても良くなります。
JINの基本設定は3時間くらいで気合いで終わらせました。
なぜテスト環境が使えなかったのかは謎のままです。いろいろなブロガーさんのJIN移行の記事を見ていても、テスト環境でやられた人の記事は見ませんでした。何か問題があるのか、私だけなのか、わかりません。
ConohaのWordpress簡単移行の記事はこちらにあります。私は何回試してもログインができませんでした。無念。
基本設定（Googleアドセンス、Googleアナリティクス、Googleサーチコンソール）等の設定
Cocoonに設定していたGoogle関連の設定は残念ながら引き継がれません。地道に設定しなおすしかないです。。
Googleアドセンス
[blogcard url=”https://www.google.com/adsense/new/u/0/pub-4992794542965709/home”]
- アドセンスで「広告」 ＝> 「自動広告」 > 「自動広告を設定」 ＝> コードをコピー
- WordPressに戻って設定の中のHTMLタグ設定＝＞head内 に広告コードを貼り付ける ＝＞変更ほ保存を押します
Google Search console
[blogcard url=”https://search.google.com/search-console?resource_id=https://hayama-navi.com/”]
「設定」= > 「所有権の確認」= > 「HTMLタグ」= > 「metaタグ」をコピー
[blogcard url=”https://pelican-diary.com/google-search/1245/”]
詳しいやり方は上記の方法を見てください！
Google Analyticsの設定
[blogcard url=”https://analytics.google.com/analytics/web/provision/#/provision”]
JINのテーマの着せ替えを行う
JINを有効化させたら、JINの着せ替えを行いました。これはオプションです。全員やらなくてもいいですが、デザインにこだわりたい人は、おすすめです。
やり方はJINの公式ガイドにあります。すごく簡単です。
[blogcard url=”https://jin-theme.com/manual/kisekae/”]
私は、JIN Demo Site７をほぼそのまま使っています。
JINに新たに入れるプラグイン
残念ながらCocoonには標準でついていた機能もJINではプラグインを入れないと動いてくれません。ここが本当にJINの最大の欠点と言えます。おかげでプラグインだらけです。そしてサイトが重くなります。
この事実を知った瞬間、Cocoonに戻りたいと思う人が続出すると思います。
が、頑張りましょう！やっぱりJINはかっこいいです。
JINに入れる必要があるプラグイン
- 編集画面設定→Classic Editor
- ウェジェット編集→Classic Widgets
- 吹き出し設定→AddQuicktag
- 目次設定→Rich Table of Contents
- ブログカード→Pz-LinkCard
本当はもっとたくさん入れましたが、上記は最低入れておかないとダメです。
Classic Editor
JINは何とCocoonで当然に使っていたブロックエディターが使えません。ClassicエディターというWordに似た外観のツールで記事を書く必要があります。
JINのページには、ブロックエディターも対応、と書いてありますが、複数の吹き出しの設定ができなかったり、メニューがブロックエディーターだと出て来なかかったり、何かと不便です。
私はまだクラシックエディター全然慣れません。クラシックエディターの方が使いやすいという人も沢山いるようなので、使いやすい面もあるのかもしれません。
ちなみにClassicエディターはアマゾンなどのリンクをはるプラグインの”ポチップ”が使えません。。ブロックエディターに切り替えて（クラシックのプラグインを無効にする）使うしかなさそうです。
クラシックエディターはインストールして有効化を押せば、記事を書くときにそのエディターが出てきます。あとは慣れるしかありません。。
Classic Widgets
JINはWidgetを設定するときも、このプラグインがないと設定ができません。できるんでしょうが、専門の知識がいるんだと思います。
CocoonではWordpressで外観＞ウィジェットを選ぶと、フッターやサイドバーに入れたい項目、プロフィールなどの情報が出てきて、それをドラックすれば良かったのですが、JINはこのプラグインがないと選択項目が出てきません。
吹き出し設定＝＞AddQuicktag
Cocoonではブロックエディターで吹き出し機能があり、吹き出しのキャラクターや吹き出しの色を事前に登録できますが、JINはその機能がなく、プラグインをインストールする必要があります。
標準で吹き出しが使えると思っていたので、吹き出しの登録機能がついていないJINが当初は信じられなかったです。
JINは”AddQuicktags”というプラグインで、キャラクターや吹き出しのコードをを登録します。 このQuicktagsというのも、Cocoonのように気軽に登録できるものではなく、ショートコードを登録しそれを呼だします。
例えば上記の黄色いボックスを表示させるのにJINではショートコードを使い、 最初、最後にコード（タグ）を配置して、ボックスを表示させます。
吹き出しも同じようになっていて、このQuicktagsは、この最初と最後のタグを登録しておいて、それを表示させるというものです。 クラシックエディター上では、キャラクターも吹き出しも見えず、下記のように表示されます。
表示された状態で見るためにはプレビューを使用します。 吹き出し機能がCocoonと違うということは、何が起こるかお分かりでしょう。はい、Cocoonで書いた記事の全ての吹き出しを書き直す必要があります。便利なプラグインは探しましたがないみたいです。誰かあったら教えてください！
手順
↓JINの吹き出しの手順書
[blogcard url=”https://jin-theme.com/manual/character/”]
Addquicktagを使った登録の仕方
１Addquicktagをインストールして有効化させます。
２吹き出しのキャラクターの画像を用意してWordpressのメディア内にインストールしておく。メディア内で吹き出しのキャラクター名を控えておく
３吹き出し生成ツールに従ってショートコードを作る。慣れれはこのサイトを使わなくてもできるようになります。
[blogcard url=”https://tools.ikunaga.net/jin-chat/”]
４ Addquickに登録
【登録方法】
ダッシュボードのプラグイン＝＞インストール済みプラグイン＝＞「AddQuickTag」（下の表参照）
１）ラベルのところに「わかりやすい名前」を登録
２）先程作った吹き出しショートコードをコピペ 開始タグと終了タグを別々に入れる。
３）ビジュアルエディターやPostなどのチェックマークを全てにチェック（一番右にチェック入れると全てにチェックが付きます）
これで登録完成。クラシックエディター上にQuicktagsというプルダウンが出てくるので、最初に吹き出しの文字をエディター上で打って、その文字を選択して、Quicktagsの項目を選ぶとショートコードで囲われます。
目次設定→Rich Table of Contents
目次もCocoonは普通に出てきましたが、JINではプラグインが必要なようです。ここまでくると、うんざりしてきますね。。だけど頑張りましょう！！
Cocoonよりも可愛い目次が出せます。
上記のプラグインをインストールして有効にしてください。
WordPressメニューにRTOC設定が出てくるので、デザインなどを決めます。そうすると記事ができると自動的に目次が出てきます。可愛いですよ。
ブログカード、外部リンク→Pz-LinkCard
- Cocoonでは内部リンクも外部リンクもブロックエディターにリンクを貼り付ければ、いい感じにアイキャッチなどの画像とともに、ブログカードを生成してくれました。
- はい、JINにはありません（涙）ここまでくると発狂したいですよね。いいですよ、発狂しましょう（笑）
- 手順は、このプラグインを入れて有効化させます。そうするとClassic Editorに下記のアイコンが出てきます。
そしてそれをクリックすると下記のような画面が出てきますので、リンクを貼りましょう。そうすると、公開後にブログカードが見えるようになります。
JINの基本設定
さて、ここからが楽しいところですね。JINの基本設定です。可愛い外観に設定していきます。[blogcard url=”https://jin-theme.com/manual/”]
問題があった点は１つです。JINのピックアップコンテンツのランディングページに画像が表示されない
私がJINに移行をしようと思った大きな理由が、下記のようなピックアップコンテンツを設定できることです。これで4つの大きなカテゴリーを生成してサブページのようにすることができます。
解決策
ピックアップコンテンツの画像を登録する、投稿＞カテゴリー＞編集で下記のようにアイキャッチを登録しますが、本文に何も書いていないと、ランディングページに画像が表示されないみたいです。
本文に何か書き込むと、あら不思議、ピックアップコンテンツのリンクをクリックした先のランディングページにも画像が現れました。
いやはや。。
JINの記事のリライト
はい、ここまでが基本設定でした。お疲れ様でした！
あとは記事のリライトを永遠に行います。クラシックエディターに慣れてない人は大変だと思います。
主に吹き出しと、枠線、外部リンクなどを書き直します。
本当に大変です。
この作業も無駄に終わらせず、昔自分が書いた記事のクオリティーを上げる作業も加えると、ただ単に無駄な時間にならないのではと思います。
タイポを修正することや、記事の構成なども変更してみるといいと思います。
まとめ
以上、CocoonからJINへの移行の方法について説明しました。本当は全てのステップ自分で解説したかったのですが無理でした。
いろいろな人が助けてくれて本当に素晴らしい世の中です。
CocoonからJINへの引っ越しは本当に大変です。諦めずに行った人だけが、JINの美しいサイトを手に入れられます。
一度決めたら引き返さない！
しつこい力💪は人生を切り開く。なんでも諦めずに続ければ、終わらないことはないです。頑張りましょう！私も引き続き頑張ります！
ぺりでした！
