Snow Monkeyのデザインスキンを作る簡単5ステップ

ワードプレスの国産有料テーマ、Snow Monkeyのデザインスキンのつくり方を解説します。

デザインスキンは、子テーマのプラグイン版といった感じのものです。

サンプルをダウンロード

まずは、サンプルデータをダウンロードします。公式マニュアルの記事の上の方に「ダウンロード」ボタンがあるので、そこからダウンロードして下さい。

※記事の最後の「ダウンロード」ボタンを押すと、高度なバージョンがダウンロードされるので、最初に出てくる「ダウンロード」ボタンを押して下さい。

必要のないデータの削除、フォルダ、ファイル名の変更

まず、フォルダを全部削除します。(使いたい場合は残してください。)

削除するとこうなります。

次に、フォルダ名とメインファイル名を変更します。

phpファイルの中身を書き換える

まず、メインファイルの中身を書き換えます。

デザインスキン名と説明文を書きます。

つぎに、9行目を削除します。ここでうっかりスペースなどを入れてしまうと、エラーが出るので、改行も削除します。

↓↓9行目を削除して完成したコードはこちら↓↓

つぎに、使わないコードを消します。bootstrap.phpとcustomize-control.jsの中身を全部消します。

あとは、README.mdの中身を書き換えてください。

ワードプレスにインストールして動作確認

snow-monkey-design-skin-furukawaフォルダを圧縮して、zip形式にしたら、「プラグイン > 新規追加」からデザインスキンをアップロード、有効化します。

次に「外観 > カスタマイズ > デザインスキン」から、先程作ったデザインスキンを設定します。

CSSを書いて完成させる

ここまできたら、design-skin.cssの中身を書き換えて、好きなデザインを作りましょう。

ちなみにサンプルデータのdesign-skin.cssの中身が、難易度が高いので、他の人が作ったcssを見ながらだとがわかりやすいと思います。

なれてきたら試してみたい・・・★高度な設定★

1.Snow Monkeyのレイアウトを固定する

bootstrap.phpとcustomize-control.jsにコードを書くことで、Snow Monkeyのレイアウトを固定することができます。

ここにコードを書けば、テスト環境から本番環境に移行するときに、Snow Monkeyのレイアウト設定をそのまま移行できます。

例えばヘッダーは2行で、アーカイブページにサイドバーをつけるなど、再設定する必要がなくなるので便利です。

詳しい方法は公式マニュアルの3-4 「4. カスタマイザーの設定を固定してみよう」以降をご覧ください。

2.デザインスキンで、アクセントカラーを使う

「外観 > カスタマイズ > デザイン」で設定したアクセントカラーを、デザインスキンのCSSで使う場合、phpで指定します。

詳しい方法は公式マニュアルの4-2 「PHP でスタイルを定義する」をご覧ください。

3.アップデート機能をつける

「更新」に通知を出して、ワードプレスのダッシュボードからデザインスキンをアップデートできるようにすることができます。

詳しい方法は公式マニュアルの5 「GitHub 経由でアップデートできる機能(上級者向け)」をご覧ください。