SWELL公式サイト

【JINからSWELLへテーマ変更】注意点とバックアップの手順とやり方【解説】

この記事のまとめ

JINにしたけど、Twitterやブログカスタマイズで「SWELLのサイト」見てると、「SWELLに変えてみたいな〜」や、「とはいえ、作業大変そうだなー」って思うことありますよね。。

あいうえおLIFE

ぼくもテーマ変更するときのデメリット気になって、半年くらい悩んでいました笑

今回、最大の準備をして、JINからSWELLにテーマ変更致しました!

なので、特に下記の内容でお悩みの方には、必読な記事。

  • JINからSWELLにテーマ変更しようと思うけど、どんな手順?
  • バックアップ取るといいと聞いたけど、具体的には?
  • SWELLに引き継いで、なるべく楽してサクサク記事書くの再開したい

テーマ変更の具体的やり方は下記。

本記事は、テーマ変更前にするべき現状サイトのメモの取り方です。

いきなりテーマ変更をする時のデメリット
  • デザインがもしも気に入らなかったときの復旧ができない
  • テーマ変更すると、サイドバーやウィジェットを引き継がない可能性あるので、現状サイトに近づけようとしても復旧できない
  • サイトの説明文や、各SNSの入力内容が引き継がれないので、メモないと再設定が手間
  • JINからSWELLにする際の不要プラグインや、見直したいプラグインを検討できない

ぼくの場合、cocoonからJINにした際に「いきなり変更」して、上記のデメリットに遭遇。

10個の手順は1時間

今回の記事では、読者の方が2の舞にならないように、現状サイトのバックアップを細かくとる手順や内容を執筆。

実際に、ぼくが本記事の10個の手順をとってから、SWELLへテーマ変更することで、すぐに現状サイトに近づけたまま記事に取り掛かることが出来ました。

JINからSWELLにテーマ変更したい人に役立つ記事になっていますので、最後までお読みください。

バックアップのメモは、Googleドキュメントがオススメ。

もくじ

1:バックアップをとる

バックアップ
バックアップをとる
あいうえおLIFE

テーマ変更後、元の状態に戻したいときの準備をします。

FileZila(FTPソフト)か、バックアッププラグインでとる

  • バックアッププラグイン:BackWPup
  • FTPソフト:プラグインなども復旧する必要もあったので、【サイト名】→【public_html】→【wp-content】へと進み、ダウンロード(プラグインなど不要の場合は、wp-themesをダウンロードしておく)

上記で、エックスサーバーのphpmyadminのログイン情報確認できないときは、こちら(エックスサーバーの"phpmyadmin"にログインする方法|Xserver)。

2:投稿→カテゴリで、カテゴリごとの説明文をメモ

上記の固定ページのAbout(紹介記事)で、下記のカテゴリ説明文が反映するようにしていました。

WordPress

WordPressをいじりながら問題解決に至ったブログなどを紹介しています。備忘録が誰かの役に立つと嬉しいです。

あ「愛情」

目に見える健康や目に見えない自然治癒力の原動力 大自然や家庭の中で育まれる愛が1番のリソース(源)です!

い「生きがい」

ここは人それぞれです!趣味や好きなことが当てはまります

う「運動」

自転車で言えば前輪です!カラダを動かすことが、酸素など全てを送り届けます

え「栄養」

自転車で言えば後輪が「食事」。日本人なら主食はお米ですが、糖質脂質の取りすぎに気をつけ、ビタミン・ミネラルを積極的に取り、代謝を促進しましょう

お「温活」

カラダを温めること。体温が1度上がるだけで、免疫力が20%〜30%上がります。お灸や、温熱療法、お風呂にゆっくり浸かるというホットライフ

健康のススメ

あいうえおLIFEでの健康づくりの基本的なハウツー。本来あるべき姿、病気の原因に迫る、生活習慣の改善法「あいうえおLIFE」という流れです。

SWELLでは、下記のようなバナーをブログパーツで作成しました。

健康のススメ

3:固定ページのメモ

固定ページは、テーマ変更後も引き継ぐので、SWELL変更後の方向性や修正箇所を考えておく。

①About:JINオリジナルアイコンを使っていた文字列を削除する予定。

②サイトマップ:PS Auto Sitemapはそのまま使用する。

③トップページ:JINでサイト型トップページを作っていたが、SWELLのブロック機能で作成できるので、作り直さず、現状のトップページをスクショしてメモ。

  • Chromeでトップページを開く→【⌘+option+I】→【⌘+shift+P】→【fullと入力】

使っていたトップページを書き換えるので、JINオリジナルアイコン使っている部分やショートコードで呼び出している部分はそのままにしておく。

④プライバシーポリシー:そのまま。

⑤人気記事1週間版:JINのデフォルト機能で、人気記事の設定が使えなかったので、WordPress Popular Postsのプラグインを使っていた。

  • 固定ページに週間の人気記事ランキングを作成して、スマホのフッターメニューに設定していた
  • SWELLでも、デフォルトで人気記事ランキング使えるが、週間ランキングはできないので、使用を停止

⑥記事一覧ー投稿ページ:SWELLでもサイト型にすれば、投稿ページが必要なので、継続使用する。

⑦お問い合わせ:contact form7のショートコードで作っていたが、WPFormsに変更していく

4:CTAのメモ

使っていなかったので、なし。

SWELLでは、ブログパーツ機能使ってCTA設定できます。

  • ブロックエディタ完全対応!
  • 他テーマからの移行プラグイン完備!
  • マニュアル公式サイト+フォーラムで安心サポート!
¥17,600(税込)
カスタマイズ簡単で時短可能

5:広告管理

SWELLでは、記事下と関連記事下は、ウィジェットで設定するようになります。

JINの広告設定
  • 【最初の見出し2の上に表示される広告】→JINのH2見出し上の記事内広告メモ
  • 【記事下】と【関連記事下】には、それぞれ設置。

JINでは、広告管理の箇所がありましたが、SWELLになると、”SWELL設定”という箇所からアドセンスコードを入力します。

6:HTMLタグ設定

ここはJINだと、サーチコンソール、アナリティクスの必要記述箇所。

あいうえおLIFE

SWELLは、SEO SIMPLE PACKというプラグインを入れて設定することになるので、メモ必須。

7:Advanced Ads

JINでは、初めのH2見出しだけだったので、拡張していました。

設定

各H2見出し上に設定していた。

8:外観

SWELL
Designed by vectorpouch / Freepik
あいうえおLIFE

このパートが1番メモしておくこと多いですが、読者のためにも頑張りましょう。

STEP
①カスタマイズ

a.基本設定

テーマ変更すると、大事なサイトの特徴部分の記述も消えることがあるので、メモするべし。

  • SEO用タイトル:あいうえおLIFE 【健康のススメ】
  • SEO用サブタイトル:健康づくりの秘訣
  • ディスクリプション:このサイトでは、あいうえおをキーワードに健康づくりをしていきます。趣味や、運動、食事なども、健康に関わるコンテンツですので、併せてあいうえおLIFEとして発信していきます。お役に立てれば嬉しいです。ライフハックしながら時代の流れに乗って、豊かに便利に楽しく生きましょう。

b.カラー設定

テーマ変更すると、引き継がない可能性があるので、テーマ変更前のテーマカラーや、リンク色など再現したい時は、メモ推奨。

  • テーマカラー:#0e9de4
  • サイトやタイトルの文字色:#2e1a03
  • リンクの色:#1111cc
  • リンクにマウスオーバー色:#1a3dff
  • サイト内の文字色:#333333

c.SNS設定(OGP)

テーマ変更と、着せ替えデータ読み込むと消えるので、メモするべし。

d.メニュー

テーマ変更すると、引き継がない可能性あるので、メモするべし。

①SPハンバーガーメニュー

  • フロントページ
  • トップページ
  • About
  • YouTube
  • 記事一覧
  • 人気記事【1週間版】
  • サイトマップ

②スマホのフッターメニュー

  • HOME
  • 記事一覧
  • 人気記事
  • MENU

③スマホスライドメニュー

  • トップページ
  • 記事一覧
  • 紹介
  • 人気記事
  • コロナ
  • 鬼滅の刃
  • ビタミン
  • JIN
  • サイトマップ
  • お問い合わせ

e.ウィジェット

①サイト内検索

よくある検索窓を設置して、キーワード検索に対応させていた

②プロフィール

運営者情報で、自己紹介を作っていた(HTMLを書いて、内容を増やしていました)

  • プロフィール名 :あいうえおLIFE
  • 肩書き :CARP×登録販売者×動画編集

③ナビゲーション

元ネタはぽんひろさんのボックスナビ

アイコンは、JINオリジナルアイコンなので、SWELLアイコンか、Fontawesomeに切り替える

④最近の投稿:新着記事

とりあえず新しいものから読みたい読者向けに設置していた

⑤WordPress Popular Posts:よく読まれている記事

ブログ内で人気の記事を表示することで、検索需要の高い記事への注目を増やしていた

⑥カテゴリー:カテゴリー

カテゴリーの表示で、関連情報を探しやすく表示

⑦タグクラウド:検索キーワード

タグの一覧を表示することで、サイト内のキーワードの見える化をしていた

⑧アーカイブ:アーカイブ

年月ごとに記事数の表示をしていた

⑨カスタムHTML

トップページへ戻るボタン

<div class="t-aligncenter"><span class="color-button01-big"><a href="https://aiueolife.com">トップページへ</a></span></div>

⑩カスタムHTML

1週間のランキングへ飛ぶボタン

<div class="t-aligncenter"><span class="color-button02-big"><a href="https://aiueolife.com/popularposts/"><small>1週間のランキングへ</small></a></span></div>

f.追加CSSのメモ

SWELLにしてから不要になるものは削除する予定

STEP
②ウィジェット

8の外観①カスタマイズのe.ウィジェットで済

STEP
③メニュー

8の外観①カスタマイズのd.メニューで済み

STEP
④テーマエディター

function.phpのバックアップ

  1. JINオリジナルトップページで、記事呼び出しのカスタマイズをしていた
  2. ハンバーガーメニューのウィジェット化をしていた

9:プラグイン

  1. Advanced Ads:WordPress 内の広告を管理・最適化
  2. Autoptimize:CSS、JS、画像、Google フォントなどを最適化することでサイトの応答を高速化します。
  3. Contact Form 7:お問い合わせフォームプラグイン。シンプル、でも柔軟。
  4. EWWW Image Optimizer:NextGEN Gallery や GRAND Flagallery を含む WordPress 内の画像のファイルサイズを縮小します。 jpegtran, optipng / pngout, および gifsicle を使用しています。
  5. Google XML Sitemaps:This plugin improves SEO using sitemaps for best indexation by search engines like Google, Bing, Yahoo and others.
  6. JIN専用デザインプラグイン「CARAT」:JIN専用デザインプラグイン「CARAT」です。JINの新しいデザインの可能性を広げるためにデザインやアニメーションに特化したプラグインを作りました。
  7. Native Lazyload:Lazy-loads media using the native browser feature.
  8. PS Auto Sitemap:Auto generator of a customizable and designed sitemap page.
  9. Rich Table of Contents :「RTOC -Rich Table of Contents-」は誰でも簡単に目次の作成を行うことができる日本発の目次生成プラグインです。
  10. SiteGuard WP Plugin:SiteGuard WP Pluginは、WordPressにインストールするだけで、セキュリティを向上させることができます。SiteGurad WP Pluginは、管理ページとログインに関する攻撃からの防御に特化したセキュリティプラグインです。WAF ( SiteGuard Lite )の除外ルールを作成する機能もあります。( 使用するにはWAFがWebサーバーにインストールされている必要があります )
  11. Useful Blocks:痒いところに手がとどく、便利なブロックを集めたプラグインです。
  12. WordPress Popular Posts:人気な投稿をサイト上に表示するカスタマイズ豊富なウィジェットです。
  13. WP Revisions Control:Control how many revisions are stored for each post type
  14. ZEBLINE:スクロールでラインアニメーションが表示されます。
  15. ウィジェットのロジック:WordPress の is_home 条件分岐タグでウィジェットをコントロールする

上記のプラグインの変更または削除(停止)予定

②Autoptimize、③Contact Form 7、④EWWW Image Optimizer、⑥プラグイン「CARAT」、⑦Native Lazyload、⑨Rich Table of Contents、⑩SiteGuard WP Plugin、12WordPress Popular Posts、14ZEBLINE

10:記事のディスクリプションのメモ

SEO SIMPLE PACKをプラグイン導入して、SWELL CHILD有効化する前に有効化しておけば、JINの記事投稿編集画面でディスクリプション入力しておけば、引き継げますよ。

例:【投稿】→【投稿一覧】→
【必読!】嫌われる勇気・幸せになる勇気【アドラー心理学をマコなり社長が解説!】のタイトルをクリックして、編集画面に入ったら1番下のディスクリプションへ。

ディスクリプション例

本記事は、マコなり社長のYouTube動画30分を10分程度で読めるようにまとめました。アドラー心理学は論理性も高く、見える世界や感覚が一変するのは間違い無し。7つの習慣で言えば、「インサイドアウト」につながり、主体的な勇気ある人生になりますよ。

あいうえおLIFE

記事ごとにディスクリプション入力してない場合は、SWELLにテーマ変更後でも大丈夫ですよ。

まとめ | JINからSWELL引き継ぎ前にアナログでメモ

JINSWELL注意点

今回は、「JINからSWELLにテーマ変更しようと思うけど、どんな手順?バックアップ取るといいと聞いたけど、具体的には?SWELLに引き継いで、なるべく楽してサクサク記事書くの再開したい」というお悩みについてお答えしました。

いきなりSWELLをダウンロードして、テーマを有効化するのは100%後悔しますので、下記の手順で現状サイトをアナログでメモをとるのがオススメでしたね。

バックアップ手順10
  1. バックアップをとる
  2. 投稿→カテゴリで、カテゴリごとの説明文をメモ
  3. 固定ページのメモ
  4. CTAのメモ
  5. 広告管理
  6. HTMLタグ設定
  7. Advanced Ads
  8. 外観
  9. プラグイン
  10. 記事のディスクリプションのメモ

手間ですが、10個の手順を踏み、サイトの細かいとこまでバックアップをとることで、SWELL変更後の再設定も早くなります。

SWELLならではの、ブロックエディタ完全対応でサクサク記事を書き始められますよ。

あいうえおLIFE

急がば回れですね。。。

SWELL公式ページにいくと、ブロックエディタでの使い心地が見れます。

それでは、今日はここまで読んでいただきありがとうございます!

関連記事【14個の手順】JINからSWELLへテーマ変更(移行・乗り換え)のやり方

\ 乗り換えプラグイン完備 /

ブロックエディタでの書きやすさNo.1

もくじ
閉じる