「Snow Monkey + Shifter で手軽に安全なサイトを作ろう #JP_GetShifter, #wpsnowmonkey」をやってみた

この記事は Snow Monkey Advent Calendar 2020 24日目の投稿です。これで私の今年のアドベントカレンダーはお納めです。メリークリスマス!を気持ちよく言いたいと思います。

私の個人ブログの WordPress テーマも Snow Monkey に変えたいなぁと思っていた矢先、先日の @gatespace_k さんによる「Snow Monkey + Shifter で手軽に安全なサイトを作ろう #JP_GetShifter, #wpsnowmonkey」を見て、よし!やってみようと思い立ったのがきっかけでした。

厳密に言うと、私の個人ブログはすでに「Shifter」なので「Shifter の WordPress テーマを Snow Monkey に変更して、手軽に安全なサイトを作ろう #JP_GetShifter, #wpsnowmonkey」を行いました。

なんで WordPress テーマを変えたかったの?

  • 100% GPL のテーマにしたかった
  • デザイン全体は今のテーマでも基本的に問題はないが、記事感覚やレイアウトなど細かい調整作業がしづらいと感じていた
  • 有料テーマにそろそろ変えたかった
  • 有料テーマにするならコミュニティがアクティブかつ参加しやすい国産のテーマに変えたくなった
  • とりあえず、テーマを変更するだけでよしなにでき、直感的な操作も可能、かつそれ以上のこともしたい場合はできるようなテーマにしたかった
  • 使ってて、安心できるテーマにしたかった

なんで Snow Monkey にしたの?

変えたいと思う理由の条件を全部満たしているテーマは他にもあり、正直迷うところではありました。なので、これはテーマを変更する第一歩かもしれませんし、使い続けてみてずっとこのままかもしれません。

そんな、他にも条件を満たすテーマがある中で選んだ決めてとしては「好み」でした。Snow Monkey のカルチャーやデザイン、ユーザー、コミュニティといったところが主な理由です。それらが「好きだな」と思った点で決めました。また、好きな赤色がテーマカラーなという点もポイントです。

それでは、テーマ変更をやってみたいと思います。
Snow Monkey をご存知でない方は、Snow Monkey Advent Calendar 2020 8日目 @megane9988 さんの「Snow Monkey テーマのすごいと感じるところ」を読むととてもわかりやすいかと思います。Shifter については、Shifter Advent Calendar 2020 1日目 @seijiakatsuka さんの「初めての Shifter 2020年版」に概要が記載されてますので読んでもらえたらと思います。

やったこと

  • 参考ブログ「Snow Monkey + Shifter で手軽に安全なサイトを作ろう #JP_GetShifter, #wpsnowmonkey」をいったん読んで流れを確認する
  • 参考ブログの手順動画をいったん見て、必要なポイントをチェックする
  • WordPress に Snow Monkey のテーマを新規インストールする
  • 参考ブログに記載の以下手順、1〜8のうちの5〜8をやる
    1. Shifter へログイン
    2. サイトを選んで WordPress を起動
    3. Shifter の WordPress に投稿や固定ページをすでに作ってある
    4. メディア(画像)類もアップロード済み
    5. テーマを Snow Monkey に切り替えてウィジェットや見た目を調整
    6. ランディングページ(TOP)を Snow Monkey Blocks を使って作成
    7. 完成したら WordPress を終了して Shifter で Generate(デプロイ)
    8. 完了後サイトが公開される

テーマ変更前はこちら

*WordPress テーマ:Ashe

テーマ変更に伴う Shifter の安心ポイント

Create Backup でもしもの時も安心!

*画像A

私は Shifter の Tier1 ユーザーです。Tier1 以上には自動で WordPress のバックアップが取得できるので、何かあった時は戻すことができるので安心です。

静的化したデータの中から選んで公開できるから安心!

*画像B

Shifter にログインし、編集するサイトの WordPress を立ち上げ、編集を行い、WordPress を公開します。その後 Shifter で静的化を行うため、書き出し作業(Generate)を行います。静的化に書き出されたデータは Shifter の管理画面に一覧として表示されます。一覧の中から一般公開したいものを選び、公開(Publish)ができます。すぐに取り下げたい時にワンクリックで別のバージョンを選ぶことができるので安心です。

また、*画像A にある「Auto Publish」は、書き出しと同時に一般公開するかどうかをチェックする項目です。こちらの設定をオフにすることで、チェックをしてからワンクリックで公開することができます。

テーマを変えても異常なし!PHPエラーレポートでクイックチェック!

Shifter の管理画面には、PHP エラーのレポートが表示されるようになっています。エラーが出た場合には確認してトラブルシューティングに役立てることができます。

今回は、エラーなし!異常なし!さくっとテーマを変えても問題ないことがわかって嬉しいです。

デフォルトのままのデザインでもOK!カスタマイズで必要な要素を調整するだけでとりあえずできる!

テーマを有効化しただけで公開できるレベルでした。カスタマイズで左のメニューを一通りチェックし、ぽちぽちとチェックを入れ、右側のビュー画面を見ながら調整することができました。

私の場合、個人ブログなのでトップページは固定ページを作成せずともそのままの状態で使うことができました。そのため、ヘッダー画像が必要なウィジェット、メニュー、レイアウト調整をノーコードでいったんぽちぽちと設定をするだけで一通り行うことができました。

おまけ

このサイトの検索機能は「Algolia」で設定していました。
普通に考えれば、テーマを変えても問題なくそのまま機能は使えるはずとは思っていましたが、やはり問題なくそのままの機能を引きついで、何も設定をし直さなくても素直に使うことができました。
ちょっと個人的にテンション上がったことなのでおまけで書いてしまいました。

Algolia については、「Algolia を自分のブログ(静的化した WordPress サイト)にデフォルト設定のまま入れてみたよ」で紹介しています。とても便利に使えるのでおすすめです。

完成!

憧れのリッチなパネル型!シンプルなカラム構成!すごく嬉しいです。

私はカスタマイズに慣れていないので、慣れている方なら10分どころかそれ以下であっという間にテーマによるデザイン変更ができると思います。
また、アートディレクションやデザイン設計がしっかりお持ちの方ならもっと早いかと思います。私の場合は、触りながら手探りで機能を確かめながらやってしまっているので普通の Web 制作者では時間のかからないところにかかってしまいました。

最後に

少し触っただけ&ノーコードでできたのですが、もう少し調整したいところがあるので続きは積極的にコミュニティに参加したり、ユーザーの皆さんの文献を読んだりして、せっかくなのでもっと欲張って個人ブログをカスタマイズしてリッチにしていきたいと思います!

直近では、検索窓の位置とサイズをどうにかしたい、ファビコンを付けたい、SNS ボタンを修正したい、ヘッダーの色を反転させたい、、、など細かいところですが少しずつ仕上げていきたいと思います。(公開しながらですけど)

もっと Snow Monkey + Shifter を!ということで、共催ミートアップ「Snow Monkey ミートアップ 〜Shifter について知ろう〜」が1月に開催されます。
ぜひこちらで会いましょう!

それではまた。Ciao!! Hasta Luego!!