Snow monkeyをいじってみた。ACFとページテンプレート追加、他

Snow monkey発売後すぐに購入してみたのですが、やっと仕事も落ち着いてきたのでいろいろと試してみました。

  • 子テーマを作ってみた。
  • 自分用のページテンプレートを作ってみた
  • カスタムフィールドを入れてみた
  • ヘッダーの中にタイトルを入れてみた。

とりあえず今回やったカスタマイズはこんな感じです。

Snow monkeyとは

  • 100% GPL
  • レスポンシブデザイン
  • SEO対策
  • 選べるレイアウト
  • HTMLコンポーネント

公式サイトに詳しく書いてあるので、ご覧ください
https://snow-monkey.2inc.org/2017/10/13/features/

あまりにも良いので、「仕事へったらどうしよ」とか思っちゃって、勧めていいものどうか・・・(/ω\)
というわけで、子テーマ作ってみた。

子テーマを作ってみました。

直接テーマをいじってしまうとテーマ更新時に元に戻ってしまうので、子テーマをまず最初に作ってみようと思いました。
というのも普段は、オリジナルテンプレートしか作らないもので、子テーマ作るの初だったので・・・。

感想:子テーマを作るのはめちゃくちゃ簡単でした。

子テーマの作り方も公式サイトにあります。

  1. 子テーマ用のディレクトリを作る。
  2. style.cssを作る。
  3. CSSを読み込ませる

手順はこれだけ。詳しくは公式にもあるのでそちらでどうぞ。

フォルダ作って、style.cssの名前変えて、functionにそれを読み込ませるだけ。
こんな感じで、子テーマは完成!5分くらいで出来た。

自分用のページテンプレートを作る

これは需要ありそう。既存のテンプレートでもほぼほぼ事足りるんですが、カスタムフィールド入れたいとかまぁいろいろとやりたいことがあったので、自分用のページテンプレートを作る事にしました。たぶん仕事とかで受注する場合はこれが出来ないと仕様に対応できないことが出てきそうな気がします。

子テーマに追加するテンプレートの場所は1カ所
ここでは仮にone-column2.phpとしておきます。

page-templates > one-column2.php

Template Name: ここの部分を書き換えます。

templates > layout > wrapper > one-column2.php

ここで内容を書き換えます。
今回はカスタムフィールドを使いたくてページテンプレートを作ったので、それも紹介します。

カスタムフィールドを入れてみた

使ったのは、advanced Custom fields(通称ACF)です。神プラグインの一つ!(笑)
ACFの使い方はコトリブログさんが一番わかりやすいですかねぇ。

http://kotori-blog.com/wordpress/advanced-custom-fields/

<main class="l-contents__main" role="main">
<?php $_view_controller->view(); ?>
<?php if( have_rows('フィールド名') ):?>
<?php while ( have_rows('フィールド名') ) : the_row();?>
<?php the_sub_field('サブフィールド名');?>
<?php endwhile ;?>
<?php endif;?>
</main>

こんな感じで<?php $_view_controller->view(); ?>
の下にカスタムフィールどおいて</main>の間に追加してみました。

ヘッダーの中にタイトルを入れてみた。

ヘッダー画像を設定するとメニューの下に画像がでると思うんですが、この中にタイトルを入れたかった。
ついでにコンテンツ内のH1は削除してみました。

templates > view > content-page.php

このテンプレートで固定ページの内容を編集できます。
<header class="c-entry__header">
<h1 class="c-entry__title" itemprop="name"><?php the_title(); ?></h1>
</header>

ここを削除か、隠します。
次にタイトルを画像の中に入れていきます。

template-parts>page-header.php

を修正します。
文字通り固定ページのヘッダー部分です。

<div class="c-page-header js-bg-parallax" style="background-image: url(<?php echo esc_url( wp_get_attachment_image_url( $thumbnail_id, 'large' ) ); ?>);">
<h1 class="header_title"><?php the_title();?></h1>
</div>

ここにthe_title()をいれて完成!あとはCSSで調整していきます。

h1.header_title{
text-align:center;
position:relative;
top:50%;
color:#fff;
transform:-webkit-translatey(-50%);
transform:translatey(-50%);
text-shadow:0 0 40px #000;
z-index:2;
}

余計なコードも入ってますので、ご自由にカスタマイズください。

まとめ

普段自分でカスタマイズまでやってるので、有償テンプレートはあまり触って事がなかったので、Snow monkeyさわれるかなーと心配していたのですが、カスタマイズもしやすかったです。
フォルダ構成が細分化されているので、php読めないとかコピペしかできないって方は若干むずかしいような?そんな気はしますが、そもそもカスタマイズしなくても十分すぎる機能がついている。

わからないこともフェイスブックのコミュニティーで開発者の北島さんが直で答えてくれます。
ご興味がありましたが、ご検討ください<(_ _)>

Snow-monkey 公式サイト>https://snow-monkey.2inc.org/

Snow-monkeyテンプレートを使った自分のサイト:http://funtalok.com/

赤ヒツジ先生~コーディングチェック~

このサービスは、コーディングのHTMLチェックではなく、デザイン通りにコーディングできているかをチェックするサービスです。