WordPressでブログをスタートして1ヶ月を過ぎました。
無料テーマの「Cocoon」から思い切って有料テーマの「JIN」に変更しました。
装飾がキレイでたくさん!
使っている人が多い。(わたしの好きなブロガーさんもJIN)
初心者にはよくわからないSEO対策がバッチリ!
カスタマイズのサイトがたくさんある。
悩みますよね〜。
清水の舞台から飛び降りる気持ちで有料テーマにチャレンジしました。(大げさ)
が、テーマを変えると、思った以上にやらないといけないことがあり、
本当に戸惑いました。
初心者のわたしが、初心者のあなたに向けて変更時の設定の解説をしていきたいと思います。
CocoonからJINに変更したメリット
きれいなレイアウトで読みやすい
おしゃれ!
かわいいボックスや見出しが使える
動きのあるボタンも!
ページ読み込み時にヘッダーやカラムに動きをつけることができます
マニュアルもたくさん。
利用者が多いため わからないことがあったときやアレンジの方法がたくさん。
一度の購入で複数サイトでの使用可能
デモサイトをみると、おしゃれでかっこいいスタイルがたくさん。
CocoonからJINへと移行のデメリット
Cocoonはほんとに無料とは思えないくらいたくさんの機能がついていて、
正直Cocoonでいいかもと思っています。
吹き出しや囲みボタン、ボックスなど。
吹き出しがショートコードなのが地味に面倒(これが一番のネック!)
ピックアップのランダム表示機能がない
外部リンクのブログカードが作れない
ブロックエディター(Gutenberg)に対応していない
cocoonより重い
プラグインいっぱい入れないとダメ
まずはバックアップ
データのバックアップはテーマを移行するしない関係なく絶対にやっておいた方がいいです!
サーバーでバックアップをとる
プラグインでバックアップをとる
サーバーでバックアップを取る
サーバーでのバックアップに関しては、自動でバックアップをとる設定になっているものが多いです。
わたしが使っているエックスサーバーは自動バックアップ機能がついています。
プラグインでバックアップをとる
『BackWPup』というプラグインを使います。
覆面先生のブログ講座に詳しく解説されています
CocoonからJINにテーマを変える方法
JINをダウンロード
メールアドレスの登録
カード情報を入力し購入
メールでJINのダウンロードURLとパスワードが送られてくるのでURLから入りパスワードを入力
データダウンロード
WordPressのダッシュボードからテーマ項目からJINのダウンロードファイルをアップロードし有効化
JINの子テーマをアップロードし有効化(
ここでつまづく)
子テーマのダウンロード
どこにあるかわからず、ウロウロ。
親テーマの中のファイルの中を探したりしましたが、
JINの公式ページにありました。
もう少し頑張りましょう!
まずは、子テーマのダウンロードページへ
Google系の再設定
まず、それぞれの「トラッキングコードを取得」します
Googleアナリティクスの設定
Googleサーチコンソールの設定
googleアドセンスの設定
*「手動広告」を設定したい場合はこの作業は必要ないです。
プラグインの設定方法
All in One SEO Packの停止
JINでは「All in One SEO Pack」が「非推奨プラグイン」となっていました。
なので一応停止にしておきましょう。
新たに入れておくプラグイン
- 編集画面設定→Classic Editor
- 吹き出し設定→AddQuicktag
- 目次設定→Table of Contents Plus
新しくJINの作者が開発した「Rich Table of Contents 」というプラグインもあります。 めちゃきれいな目次ができます!おすすめ!
ヘッダー画像の設定
ヘッダー画像の作り方はこちらを参考に♪
サイトデザインを選ぶ
ヘッダー画像を使いたい方は、まずヘッダー画像が使えるデザインに指定します。
「ヘッダーデザインの選択」から9つのデザインの中で(ヘッダー画像あり)の中で好きなスタイルを選ぶ。
左下のパソコン、パッド、スマホのマークを押すとデモ画面になるので参考にしてください。
選択したら上にある公開ボタンを。
ヘッダー画像を設定
続いて、ヘッダー画像を設定します
JINのヘッダー画像推奨サイズは幅2400px以上。縦は指定はありません。
このブログのヘッダーも2400✕500pxです。
フッターメニューの設定
スマホでブログを見る人のほうが多いので、スマホで利用しやすいようにフッターメニューも変更。
これがないと、HOMEに飛べないなど不便です。
まずは公式マニュアルの基本設定を参考に、
メニュー作成しましょう。
表示したいメニューを選び、表示したい記事にチェックしメニュー項目を追加。
アイコン設定
③の「説明の項目」にコードを貼ります(またもやここで引っかかる)
公式ページにあるFontoAwesome(フォントオーサム)より取得したコードをコピペします。
なぜ?
とりあえず、公式HPページのアイコンリストからコードをコピペしたらなんか大丈夫でした。なぞ。
先程の設定の③説明部分にペーストすればOK!
ブログカードの設定
ブログカードとはこれ
ブログカードは「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」
①のところに「わかりやすい名前」②先程作った吹き出しショートコードをコピペ ③全てにチェック(一番右にチェック入れると全てにチェックが付きます)
【まとめ】CocoonからJINへ移行した感想
とにかくテーマを変更すると、いろいろ手を加えないといけないこともあります。
しかし、有料テーマにすることで、メリットもたくさんあるので
ここを乗り越えたら、大丈夫。
まだ「JIN」を使い始めたばっかりですが、
ブログが可愛くなったので、モチベーションUPです。
また、カスタマイズ方法がたくさんあるので、ちょこちょこ変更を楽しみたいと思います。
また、カスタマイズ方法で良いものがあれば紹介したいと思っています。
お疲れさまでした。
マニュアルを読んでもわからない場合や、
自分では全く解決できない場合は、ここで質問してみると良いです。
JIN公式ホームページ
ではでは素敵なブログになるよう応援しています!