ブログ運営

Cocoon からJINへ移行の設定で困っている方にやさしく解説!【WordPress初心者でもできた】

CocoonからJINへ移行

 

WordPressでブログをスタートして1ヶ月を過ぎました。
無料テーマの「Cocoon」から思い切って有料テーマの「JIN」に変更しました。

 

好きなデザインが多い。
装飾がキレイでたくさん!
使っている人が多い。(わたしの好きなブロガーさんもJIN)
初心者にはよくわからないSEO対策がバッチリ!
カスタマイズのサイトがたくさんある。

JIN装飾一覧
【3/27最新版】WordPress 有料テーマ JIN 装飾一覧 【覚書】有料テーマJINは装飾が簡単にできます。覚書と参考のために装飾のすべてのサンプルを載せました。...

 

よっしー
よっしー
価格14800円!
悩みますよね〜。
清水の舞台から飛び降りる気持ちで有料テーマにチャレンジしました。(大げさ)

 

が、テーマを変えると、思った以上にやらないといけないことがあり、
本当に戸惑いました。

初心者のわたしが、初心者のあなたに向けて変更時の設定の解説をしていきたいと思います。

はてな

CocoonからJINに変更したメリット

きれいなレイアウトで読みやすい
おしゃれ!

SEO対策ばっちり
かわいいボックスや見出しが使える
動きのあるボタンも!
ページ読み込み時にヘッダーやカラムに動きをつけることができます
マニュアルもたくさん。
利用者が多いため わからないことがあったときやアレンジの方法がたくさん。
一度の購入で複数サイトでの使用可能

デモサイトをみると、おしゃれでかっこいいスタイルがたくさん。

JIN公式サイトデモページ

 



CocoonからJINへと移行のデメリット

 

Cocoonはほんとに無料とは思えないくらいたくさんの機能がついていて、
正直Cocoonでいいかもと思っています。

吹き出しや囲みボタン、ボックスなど。

よっしー
よっしー
ほんとにありがたい。使わせていただきありがとうございました。

 

  • 吹き出しがショートコードなのが地味に面倒(これが一番のネック!)
  • ピックアップのランダム表示機能がない
  • 外部リンクのブログカードが作れない
  • ブロックエディター(Gutenberg)に対応していない
  • cocoonより重い
  • プラグインいっぱい入れないとダメ

まずはバックアップ

データのバックアップはテーマを移行するしない関係なく絶対にやっておいた方がいいです!

よっしー
よっしー
大事なデータが消えてしまうと手遅れ!
  1. サーバーでバックアップをとる
  2. プラグインでバックアップをとる

サーバーでバックアップを取る

サーバーでのバックアップに関しては、自動でバックアップをとる設定になっているものが多いです。

念のために使用している「サーバー名 WordPress バックアップ」ような検索で自動バックアップできているか確認してみてくださいね。

わたしが使っているエックスサーバーは自動バックアップ機能がついています。

 



 

 

プラグインでバックアップをとる

BackWPup』というプラグインを使います。

WordPress管理画面>新規追加>「BackWPup」検索>「今すぐインストール」クリック>「有効化}ボタンクリック

 

覆面先生のブログ講座に詳しく解説されています

CocoonからJINにテーマを変える方法

よっしー
よっしー
JINの解説は公式ページにありますが、この記事で順番にひとつずつ解説していきますのでご安心を。

JIN公式ページ

 

JINをダウンロード

  1. メールアドレスの登録
  2. カード情報を入力し購入
  3. メールでJINのダウンロードURLとパスワードが送られてくるのでURLから入りパスワードを入力
  4. データダウンロード
  5. WordPressのダッシュボードからテーマ項目からJINのダウンロードファイルをアップロードし有効化
  6. JINの子テーマをアップロードし有効化(ここでつまづく)
外観>新規追加>ファイルアップロード>有効化

 

ファイルをダウンロードする際、Macの場合ファイルをzipファイルにしてからWordPressにアップロードします。
ZIP

該当するファイルを(ここでは例なので入居前チェックと書かれているファイルですが)右クリックしメニューを出して「”ファイル名”を圧縮」をクリックすると圧縮されたzipファイルができます



子テーマのダウンロード

どこにあるかわからず、ウロウロ。
親テーマの中のファイルの中を探したりしましたが、
JINの公式ページにありました。

よっしー
よっしー
ここからは簡単!
もう少し頑張りましょう!

まずは、子テーマのダウンロードページ

ダウンロードのボタンをクリック>
ダウンロードしたファイルをWordPressに貼り付>有効化

Google系の再設定

まず、それぞれの「トラッキングコードを取得」します

Googleアナリティクスの設定

 

「管理」 > 「トラッキング情報」 > 「トラッキングコード」 > 「グローバル サイトタグ(gtag.js)」をコピー

Googleサーチコンソールの設定

 

「設定」 > 「所有権の確認」 > 「HTMLタグ」 > 「metaタグ」をコピー

googleアドセンスの設定

 

「広告」 > 「自動広告」 > 「自動広告を設定」 > コードをコピー

*「手動広告」を設定したい場合はこの作業は必要ないです。

 

Cocoonでは簡単に記事の中の好きな場所にアドセンス広告を設置する項目がありました。こちらも「JIN」に変更したら手動で設定の必要です。
自動広告であれば特に修正する必要はなし。

よっしー
よっしー
なれるまでは自動にしようと思っています。
それぞれの「トラッキングコードを取得」し
「HTMLタグ設定」 > 【head内】に貼り付ける > 「変更を保存」

プラグインの設定方法

All in One SEO Packの停止

JINでは「All in One SEO Pack」が「非推奨プラグイン」となっていました。
なので一応停止にしておきましょう。

ダッシュボード>プラグイン>「All in One SEO Pack」停止に

新たに入れておくプラグイン

  1. 編集画面設定→Classic Editor
  2. 吹き出し設定→AddQuicktag
  3. 目次設定→Table of Contents Plus
    [jin_icon_info color=”#e9546b” size=”18px”]新しくJINの作者が開発した「Rich Table of Contents 」というプラグインもあります。めちゃきれいな目次ができます!おすすめ!
プラグイン>新規追加>それぞれ検索しインストール>有効化

 

ヘッダー画像の設定

ブログ

サイトデザインを選ぶ

ヘッダー画像を使いたい方は、まずヘッダー画像が使えるデザインに指定します。

外観>カスタマイズ>サイトデザイン設定を選ぶ

「ヘッダーデザインの選択」から9つのデザインの中で(ヘッダー画像あり)の中で好きなスタイルを選ぶ。
左下のパソコン、パッド、スマホのマークを押すとデモ画面になるので参考にしてください。

選択したら上にある公開ボタンを。





ヘッダー画像を設定

続いて、ヘッダー画像を設定します
JINのヘッダー画像推奨サイズは幅2400px以上。縦は指定はありません。

[jin_icon_info color=”#e9546b” size=”18px”]2400✕500px  の方が多いかな?
このブログのヘッダーも2400✕500pxです。

そのままカスタマイズ画面の「ヘッダー画像設定」>ヘッダー画像の欄から「画像の変更」をクリック。>ヘッダー画像を選んで設定し公開ボタンでOK!
よっしー
よっしー
「【スマホ用】ヘッダー画面」も同じように変更してね。
画面にデフォルトでボタンや文字が残っていますが、「ヘッダー画面のサブテキスト」欄に最初から書いてある文字を消すのと、ヘッダー画像のボタンのリンク先を消すと、ちゃんとヘッダー画面に反映されます。
ヘッダー画面のボタンを残す場合はそのままリンク先を変更してね

フッターメニューの設定

パソコン

スマホでブログを見る人のほうが多いので、スマホで利用しやすいようにフッターメニューも変更。

これがないと、HOMEに飛べないなど不便です。

よっしー
よっしー
わたしもJINのアイコンを使って可愛くカスタマイズ。

まずは公式マニュアルの基本設定を参考に、
メニュー作成しましょう。

よっしー
よっしー
ここまできたら、もう慣れてきましたね

表示したいメニューを選び、表示したい記事にチェックしメニュー項目を追加。

アイコン設定

③の「説明の項目」にコードを貼ります(またもやここで引っかかる)

公式ページにあるFontoAwesome(フォントオーサム)より取得したコードをコピペします。

よっしー
よっしー
が、アイコンが反映しない。
なぜ?

とりあえず、公式HPページのアイコンリストからコードをコピペしたらなんか大丈夫でした。なぞ。

上のメニューバーにある「アイコンリスト」をクリック

使いたいアイコンのコード(青くマーカーをひいている部分)をコピー

先程の設定の③説明部分にペーストすればOK!

スマホのヘッダー

こんなふうにアイコンとメニューが設定できました♪

ブログカードの設定

ブログカードとはこれ

JIN装飾一覧
【3/27最新版】WordPress 有料テーマ JIN 装飾一覧 【覚書】有料テーマJINは装飾が簡単にできます。覚書と参考のために装飾のすべてのサンプルを載せました。...

 

公式HPのマニュアル

ブログカードは「URLを貼り付けるだけ」でOK!と、書かれていましてが、
な・ぜ・か・で・て・こ・な・い!

よっしー
よっしー
めちゃ調べました!

 

 

余白を取る!

  • 余白を取らずにURLを載せる
  • 改行せずにURLを載せる

この場合、ブログカードにならなかったので注意。
URLの前後改行してみてくださいね。

 

それでもなぜかできない場合!

WordPressのデフォルトのエディタはGutenbergになっています。

JINではClassicエディタ推奨で、
先程の新たにいれるプラグインにもなっています。

以前にGutenbergを少しでも使った場合は
下記のコードが記事の中にないか確認してみてください。

Gutenberg特有のコードを削除したところ、ブログカードが正常に表示されました。

テキストのタブからこのコードを見つけてください。

よっしー
よっしー
「!マーク」を探すんです

Gutenberg特有のコード

  • <!–/wp:paragraph–>
  • <!–/wp:quote–>
  • <!–/wp:heading–>
  • <!–/wp:list–>

この<!–/〇〇〇〇–>のタグがあったら消してください。
コード触るの怖いと思いますが、やってみて!

<!–/〇〇〇〇–>のタグには注意です。

ブログカード

外部リンクは非対応ですが、方法を見つけました!

ブログカードはブログ内にある記事しか対応してませんでした。
外部リンクではブログカードのリンクが表示されるだけでした。

「Pz-LinkCard」プラグインをいれるだけ。
詳しい解説はこちらの開発されたぽぽづれさんのサイトがわかりやすい!
ぽぽづれさんのサイトはこちら

吹き出しの設定

Cocoonのときはクイックタグに最初から入っていたので簡単でしたが、
JINは設定をしないといけないです。

まず吹き出しに使う画像を用意
吹き出しのショートコードを作ります。

このサイトが、簡単に吹き出し用のショートコードを作れるのでおすすめです。

吹き出しショートコードはよく使うものなので
プラグインの「AddQuickTag」に登録しておくと便利。

【登録方法】ダッシュボードのプラグイン>インストール済みプラグイン>「AddQuickTag」
①のところに「わかりやすい名前」②先程作った吹き出しショートコードをコピペ ③全てにチェック(一番右にチェック入れると全てにチェックが付きます)

よっしー
よっしー
AddQuickTagに登録しておくと、すぐにエディタに吹き出しを呼び出せて便利!

【まとめ】CocoonからJINへ移行した感想

とにかくテーマを変更すると、いろいろ手を加えないといけないこともあります。

しかし、有料テーマにすることで、メリットもたくさんあるので
ここを乗り越えたら、大丈夫。

まだ「JIN」を使い始めたばっかりですが、
ブログが可愛くなったので、モチベーションUPです。

5/17現在使って3ヶ月以上経ちましたが、カスタマイズもいろいろ加えながらブログライフを楽しんでいます。
ブログが可愛くなるとモチベーションも上がるしなにより自分のブログが大好きになりました。
超初心者のわたしにとって大変な作業でしたが、
JINに変えて本当に良かったと感じています。
2月に変えてからもJINのアップデートで装飾も増えますますパワーアップ!

また、カスタマイズ方法がたくさんあるので、ちょこちょこ変更を楽しみたいと思います。

また、カスタマイズ方法で良いものがあれば紹介したいと思っています。

よっしー
よっしー
長くなってしまいましたが、初心者がつまずくところの設定方法を解説しました。
お疲れさまでした。

 

もし途中でテーマを変更予定の人は、記事が増えれば増えるほど修正する所がでてくるので、なるべく早く変更するのがおすすめです。

 

マニュアルを読んでもわからない場合や、
自分では全く解決できない場合は、ここで質問してみると良いです。

ブログを始めるのに最適な本を集めました