2021/06/17 (更新日: 2023/03/21)

【画像１２枚で解説】My Snow Monkeyを使って本番環境のサイトを直接編集する方法【Snow Monkey】

Snow Monkey

PR ※当サイトではアフィリエイト広告を利用しています

こんにちは、かんです(»@minimal_kan)
WordPressをメインにWEB制作をしています。»プロフィールはこちら

My Snow Monkeyを使ってカスタマイズしたい人

「My Snow Monkeyってなんだろう、、聞いたことはあるけどどうやって使うんだろう、、本番環境で編集する方法はないかな、、。」

本記事では、こういった疑問を解決します。My Snow Monkeyを使って、FTPからファイルを編集する方法を画像付きで紹介していきます。

この記事を読む事で出来ることは下記になります。

本番環境でサイトを直接編集する方法
VsCodeを使ったカスタマイズができる
My Show Monkeyの使い方が分かる

カスタマイズの幅を広げたい

おそらくSnow Monkeyを使ってサイトを作っていく上で、多くの方がこのように思っているのではないでしょうか。

追加CSSだとカスタマイズがやりにくい
もう少しオリジナリティが欲しいな
エディタでカスタマイズができたら楽なのになぁ

こういったことを実現するためにもMy Snow Monkeyでカスタマイズが必要になるので、できるようにしておきましょう。また、今回の流れが分かればローカル環境でも同じようにエディタを使って編集ができるようになります。

My Snow Monkeyについて

ざっくりな説明になってしまいますが、My Snow Monkeyというのはプラグインであり、これを使う事でSnow Monkeyテーマを大幅にカスタマイズをすることができます。

本来であれば、基本的なテーマのカスタマイズについては、下記の方法があります。

直接テーマエディターを編集する
子テーマを作って編集
追加CSS

大体はこの３つだと思います。ですが、こういった方法だと、アップデートした際に不具合を起こしたり、テーマを切り替えるときにデザインが崩れるといった問題が発生します。これらについてもSnow Monkeyの製作者であるキタジマさんも言及しています。

先ほど、My Snow Monkeyはプラグインだと書きましたが、こちらであればプラグインを有効化するか、しないかで設定を決めることができる上、管理もずいぶんと楽になります。

いくつかのカスタマイズ方法がありますが、My Snow Monkeyであれば、カスタマイズがしやすくなる、管理が楽になるといったメリットが大きいのでぜひ使っていきましょう。

My Snow Monkeyでできること

My Snow Monkeyで、できることは以下になります。

VsCodeなどのエディタを使ったカスタマイズができるようになる
アクションフック、フィルターフックが使えるようになる
PHPやJavaScriptなどが使える

他にもありますが、このような感じだと思います。My Snow Monkeyでカスタマイズができるようになると、制作の幅がグッと広がるのでぜひチャレンジしてみてください。
例えば、以下の通りです。

もっと早くコーディングしたい
ナビバーをもっと装飾したい
フッターに情報を追加したい
アニメーションを使いたい

こういったことは、My Snow Monkeyを使えばすべて実現できるようになります。

My Snow Monkeyを設定方法の紹介

ここからMy Snow Monkeyを設定していきますが、流れは以下の通り。
最初のうちは、FTPの操作など少し難しく感じるかもしれませんが、画像を使って解説していくので慣れていない方でも大丈夫です。

公式からMy Snow Monkeyのプラグインをダウンロード
ファイルの準備、追加
FTPソフトを使ってアップロードして、直接編集する

準備するものは以下になります。

My Snow Monkeyでカスタマイズしたいサイト
FTPソフト（個人的にはCyber duckがおすすめ）

»Cyber duckの使い方はこちら
今回の方法は、本番環境での方法になるので、まだサーバーの契約など済ませてない方は今のうちに済ませておきましょう。

エックスサーバーにアクセスする
※前提として、Snow Monkeyのテーマを有料購入した方に限るので注意

それでは１つ１つ見ていきましょう。

公式からMy Snow Monkeyのプラグインをダウンロード

Snow Monkeyの公式HPからダウンロードします。

ログイン→ダウンロード→「my-snow-monkey.zip」をダウンロード

この流れでプラグインをダウンロードします。ダウンロード先はいったんデスクトップでOKです。

次にデスクトップに保存した「「my-snow-monkey.zip」」を解凍します。ダブルクリックをすれば、１つ新しいフォルダが出現するはずです。現時点での構成はmy-snow-monkey.phpとREADME.mdファイルのみです。

VsCodeを開き、先ほどの解凍した側の青いフォルダを開きます。

フォルダごとVsCodeのアイコンにドラッグ&ドロップしても開くことができます。こちらの方が時間短縮に繋がるのでおすすめです。

VsCodeでファイルを追加する

CSSのカスタマイズはstyle.cssで行います。なので、my-snow-monkey.phpと同じ階層にstyle.cssファイルを作成していきます。CSS以外のカスタマイズについては、my-snow-monkey.phpに記述してカスタマイズします。

style.cssのファイルを作成します。最初はまだ空っぽのままでOKです。

my-snow-monkey.phpにコードを記述する

my-snow-monkey.phpにstyle.cssを読み込むためのコードを記述します。

my-snow-monkey.phpの一番下に記述


// 実際のページ用の CSS 読み込み
add_action(
	'wp_enqueue_scripts',
	function() {
		wp_enqueue_style(
			'my-snow-monkey',
			untrailingslashit( plugin_dir_url( __FILE__ ) ) . '/style.css',
			[ Framework\Helper::get_main_style_handle() ],
			filemtime( plugin_dir_path( __FILE__ ) )
		);
	}
);

// エディター用の CSS 読み込み
add_action(
	'after_setup_theme',
	function() {
		add_editor_style( '/../../plugins/my-snow-monkey/style.css' );
	}
);

下記のように貼り付ければOKです。