【WordPress】STORKからJINへテーマ変更する手順をわかりやすく解説

「WordPressテーマをSTORKからJINに載せ替えたいけど、手順がわからない…。移行方法、注意点など知りたいな」

といった方に向けて、「STORK」から「JIN」にテーマ変更する手順を解説します。

当ブログもSTORKからJINへ移行したばかりなのですが、複数の記事を参考にしながら不具合なく載せ替えることができました。

今回は、スムーズに「STORK→JIN」に移行するための手順、注意点などをまとめたので、載せ替えを検討中の方はぜひ参考にしてください。

目次

STORKからJINへ【準備編】

まずは準備編として、↓の6つの手順を踏んでいきます。一つずつ解説していきますね。

  1. 「JIN」を購入
  2. 着せ替え機能を使うためのプラグインをダウンロード
  3. デザインを選択、ダウンロード
  4. STORKで使用していたCSSコードを保存
  5. JIN「子テーマ」のダウンロード
  6. JINテーマの有効化

    ①「JIN」を購入

    JINのテーマをまだ持っていないという場合は、↓の公式サイトからダウンロードしておきましょう。

    JIN公式サイト

    ②着せ替え機能を使うためのプラグインをダウンロード

    テーマ購入が完了したら、着せ替え機能を使用するためのプラグイン「Customizer Export/Import」をダウンロード、有効化します。

    ③着せ替えデザインを選択、ダウンロード

    次に、デモサイトのダウンロードページへ飛んで、8つのデザインから好みのデザインを選びます。

    選択したら、「スタイルをダウンロード」をクリックし、「jin-demo〇〇.dat」ファイルをDL。

    デモサイト一覧

    ちなみに当ブログは、「デモサイト3」を使用しています。

    ④STORKで使用していたCSSコードを保存

    STORKで使用していたCSSコードは、メモ帳にて一時保存しておきましょう。

    ⑤JIN「子テーマ」のダウンロード

    最後に、↓のページからJIN「子テーマ」をダウンロードします。

    JIN「子テーマ」のダウンロード

    ⑥テーマの有効化

    さて、いよいよ「JIN」のテーマをブログへインストールし、「STORK」からの載せ替えを行います。

    手順は以下の通りです。

    • 「外観」>「テーマ」>「新規追加」から「JIN」のテーマ『jin.zip』をインストール
    • 子テーマ『jin-child.zip』をインストール
    • 『jin-child.zip』を有効化

    ※有効化するのは子テーマの「jin-child.zip」の方なので、くれぐれも間違えないようにしてください!

    載せ替えが完了したらカスタマイズへ!

    CSSコードをまるっとペースト

    先ほど一時保存したSTORKの追記CSSコードを、JINの「追記CSS」にてそのまま貼り付けます。

    着せ替えデザインのインポート

    続いて、カスタマイズメニューの最下部にある「エクスポート/インポート」にて、あらかじめダウンロードしておいたデザインファイルをインポートします。

    「ファイルを選択」にて「jin-demo〇〇.dat」を選択し、インポートボタンをクリックしたら着せ替え完了!

    あとは好みのデザインにカスタマイズ

    カスタマイズでの初期設定は以上となります。

    その他細かいデザインの変更などは、「JIN」の公式マニュアルを参考にしながら設定してください。

    「JIN」公式マニュアル

    記事内のショートコードを正常に表示させる

    STORK使用時に、記事内で「枠」や「ラベル見出し」などのショートコードを使用していた場合、それらを「JIN用」に置換させる必要があります。

    現在のままだと、それらショートコードはただの文字列となって表記されているはずです。

    これらを、一括でJIN用のデザインに置換させる方法があるので、その手順を説明します。

    ①functions.phpをバックアップ

    まずは、JINテーマの「functions.php」のバックアップを取っておいてください。

    functions.phpファイルは「wp-content/themes/jin-child」から取得できます。

    ②functions.phpにコード追記

    バックアップをとったら、functions.phpに以下のコードを追記します。

    そのままコピー&ペーストでOKです!

    ③CSS追加

    このままだと、関連記事の下に余分なスペースが入ってしまうので、CSS追記で対処します。

    カスタマイズの追加CSSにて、以下コードをコピペしてください。

    これでショートコードの置換は完了です。
    正しく表示されているかチェックしてみてください。

    ここで何らかのエラーが起きていたら、バックアップした元コードを張りなおしてください。

    まとめ

    ワードプレステーマの載せ替えって大変なイメージがありますよね(+o+)

    エラー出たらどうしよう…みたいな。

    とはいえ、正しい手順に沿って載せ替えできれば、案外数十分ほどで設定が完了します。

    「STORKからJINに移行したいけど、なんとなく難しそう」とためらっている方は、ぜひ上記手順に沿って実践してみてください。

    改めて、JINの使い勝手の良さはピカイチです。

    これまではCSSをいじらなければ使えなかった枠、吹き出しなんかも、JINならショートコードから一撃で出せちゃいます。

    カエレバ・ヨメレバも専用の洗練されたデザインのものを使用できますし、フォントサイズの変更機能などもデフォルトで備わっています。

    載せ替えは多少時間がかかりますが、1度設定を終えてしまえば後がかなり楽になりますよ(^^ゞ

    純粋な執筆作業に集中したいという方はぜひ!

    STORKからJINへの載せ替え手順の解説でした。

    SHARE

    AUTHOR

    ワークスペースのモノ・コト、ガジェットを使いこなすための「ヒント」を発信 。月間20万PVのデジタルマガジン『LOPYLOG』運営。Yahoo! JAPAN、ライフハッカー[日本版]等でもガジェットクリエイターとして活動しています。

    ▷ 運営者について
    ▷ お問い合わせ

    目次