かんろぐ Written by kan

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

CODE Snow Monkey WordPress

人気記事【無料サポート付】サーバー開設からWordPressの始め方をサポート

こんにちは、かんです(»@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

大体はこの3つだと思います。ですが、こういった方法だと、アップデートした際に不具合を起こしたり、テーマを切り替えるときにデザインが崩れるといった問題が発生します。これらについても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の操作など少し難しく感じるかもしれませんが、画像を使って解説していくので慣れていない方でも大丈夫です。

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

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

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

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

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

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

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

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

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


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

次にデスクトップに保存した「「my-snow-monkey.zip」」を解凍します。ダブルクリックをすれば、1つ新しいフォルダが出現するはずです。現時点での構成は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です。

FTPを立ち上げる

まだ、現時点ではstyle.cssに記述しても反映されていません。
次にFTPを立ち上げます。おすすめソフトはCyber duckです。初心者の方でも分かりやすく扱えるのが特徴なので、何を使えばいいか分からなかったこちらを使っておけば大丈夫です。
※リンク

  • 新規接続→サーバー、ユーザー名、パスワードを入力→接続


※「非セキュアなFTP接続」というアラームが出たら、続けるを選択すればOKです。

プラグインをアップロード

これでFTPソフトとサーバーの接続をすることができました。ここからMy Snow Monkeyのファイルを入れていきます。

次に下記の順番で、フォルダを展開していきます。

  • 利用したいサイトのURL→public→wp-content→plugins

  1. カスタマイズしたいサイト名
  2. public_html
  3. wp-content
  4. plugins

「Plugins」と同じ階層に、先ほど取っておいたファイルをドラッグ&ドロップで移動させます。

成功すると、Wordpress本体側にプラグインが追加された状態となります。

WordPress本体側でプラグインの有効化をする

次に用意していただいた、カスタマイズしたいサイトを開きます。
そして下記の流れで設定画面まで進み、有効化をしましょう。

  • ダッシュボード→プラグイン→プラグインのアップロード→「有効化」をクリック。


※ダブルクリックをするとバグが発生しやすいので気をつけましょう

これでサイト側の準備はOKです。

もう一つの方法も紹介

先ほど、FTPに接続してドラッグ&ドロップでファイルを追加しました。

もう一つの方法として、先ほどのVSCodeでファイルやコードを追加したこのファイルを、圧縮してZip形式にします。

カスタマイズしたいサイトを用意します。そして下記の画面まで進みましょう。

  • ダッシュボード→プラグイン→新規追加→プラグインのアップロード

「ファイルを選択」に先ほど圧縮したZipファイルをドラッグ&ドロップでアップロードします。またはファイルを選択をクリックすれば、ドキュメントが開くので特定のファイルを選択してもできます。

アップロードが終わったら、「有効化」をすれば、先ほどと同じように設定をすることができます。

  • Zip形式にしたファイル→Wordpressの環境でアップロードするために必要
  • Zip形式にする前のファイル→FTP接続後でアップロードするために必要

どちらの方法でも問題ないので、お好きな方を選んで設定してみてください。ここまでくれば、準備OKです。

実際にVisual Studio Codeでカスタマイズする

再度、FTPに接続されている状態で、My Snow Monkeyのフォルダを開きます。
先ほどと同じ流れです。

  • 利用したいサイトのURL→public→wp-content→plugins→My Snow Monkey

ここで編集したいファイルを選択します。Style.cssとmy-snow-monkey.phpの両方を選択しておきましょう。

  • Style.cssとmy-snow-monkey.phpを選択した状態で右クリック→エディタで編集→「Visual Studio Code」を選択する


ここでVisual Studio Codeが出てこない場合は「環境設定」でVisual Studio Codeを追加する必要があります。

VsCodeで編集してみる

ここでようやくVsCodeから直接編集できるようになりました。お疲れ様でした。
まずは、実際に試してみましょう。


body{
  background-color: red;
}


このソースコードをstyle.cssにコピペをして、サイトを更新してみます。反映されていれば、OKです。

これで、サーバーにアップされているサイトを直接カスタマイズすることができました。

いかがでしたか?以上が、My Snow Monkeyの設定方法です。

これで本番環境で直接編集する方法や、VsCodeを使ってカスタマイズ、My Show Monkeyの使い方までの流れが分かったかと思います。

Snow Monkeyのカスタマイズ記事一覧

この記事がイイなと思ったらシェアお願いします\(^^)/

合わせて読みたい記事

人気記事【無料サポート付】サーバー開設からWordPressの始め方をサポート