【Craft CMS】インストール〜アイキャッチ用のフィールドを作って表示してみた

Craft CMS

2018.01.04

今年もお年玉をあげる親戚の子供がいないので、貰う（貰いたい）立場で行こうと思うyanagimachiです。

さて、昨年から徐々に盛り上がっているCraft CMS界に潜り込もうと意気込んでいたのですが、用事があったり仕事があったりと全然イベントに参加できずに触るタイミングを逃していました。ということで2018年の今年からちょっとずつ初めていきたいと思います。
超初心者なので、変なところがあったらTwitterやFacebookで教えていただけると幸いです。

インストールしよう！

yanagimachiのローカルマシンはMacのSierraなので普通はMAMPの環境を使ってインストールするところなのですが、ちょっと趣向を変えてまずは「Local by Flywheel」の環境にインストールを試みました。
昨年の年末に「Local by Flywheel」を入れたところなのですが、便利すぎて震えますね。次からWPの案件は、ローカルではこれ使おうかなって思ってます。

「Local by Flywheel」の環境にインストールしてみた

参考：Local by Flywheel を使ってCraft CMSをローカル環境に構築する - Qiita

しかし、スタートの画面がなんかおかしい。
画像やアイコンフォントが表示されません。
いつもなら関内にいるバックエンドエンジニアに聞くところですが、今日は忙しそうなので自分で解決したいところです。
なので、MAMPの環境にインストールに変更しました。

「MAMP」の環境にインストールしてみた

参考：ローカル環境（MAMP）に Craft CMS をインストールする \| BUN:Log

すんなりインストールできました。　　

アイキャッチのカスタムフィールドを追加する

Craft CMSではデフォルトでニュースの投稿ができるので、そこにアイキャッチのカスタムフィールドを追加してみたいと思います。

アセットの作成

管理画面の設定＞ファイル管理をクリック

「新しいアセット・ソース」をクリック

設定を入力します

名前：管理画面での表示名なので、画像としました
ハンドル：システム用の名前で英数字でつけておく必要がありそうなのでimgとしました
ファイルシステムのパス：ローカルのMAMPで行ったので、

/Applications/MAMP/htdocs/public/assets/img

としました。このフォルダを作っておきます。
※サイトとしては、htdocsの中のpublicをルートとしています。
URL：/assets/imgに画像を置きたいので

http://localhost:8888/assets/img

としました。
問題なければ「保存」をクリックします。

フィールドの追加

管理画面の設定＞フィールドをクリック

「新規フィールド」をクリック

設定を入力します名前：アイキャッチをアップするのでアイキャッチにしました
ハンドル：テンプレート用の名前で英数字でつけておく必要がありそうなのでeyecatchにしました
フィールドタイプ：ファイルをアップするので「ファイル管理」にしました
アップロードを単一のフォルダに限定しますか?：チェックしました
ロケーションをアップロードする：先ほど作ったアセットの「画像」を選択します
許可されるファイルの種類を制限しますか？：こちらにチェックして「画像」にもチェックを入れます

問題なければ「保存」をクリックします。

フィールドを追加する

設定＞セクションをクリック

News＞入力タイプを変更してくださいをクリック

Newsをクリック

スクロールをすると「フィールドのレイアウトをデザインする」という項目があるので、DEFAULTのアイキャッチをCONTENTにドラッグ＆ドロップして、「保存」をクリックします

管理画面に表示されたかチェック

管理画面＞エントリ＞Newsですでに登録された「We just installed Craft!」をみてみます。無事表示されました。

画像をアップロード

先ほど表示されたアイキャッチの「アセットを追加する」をクリックします

「アップロード」をクリックして画像をアップロードします

アップロードされた画像を選択して「選択」をクリックし、保存をクリックします

アイキャッチを表示する

今回はニュースの詳細に表示したいので、以下のファイルに記述を追加します。

/Applications/MAMP/htdocs/craft/templates/news/_entry.html

テンプレートではeyecatchという名前で呼び出すので以下のようになります。 ALTはh1と同じタイトルを入れることにしました。

{% for asset in entry.eyecatch %} //entryのeyecatchというアセットの
<p><img src="{{ asset.url }}" alt="{{ entry.title }}" /></p> //urlを呼び出す　ALTにはタイトルを入れる
{% endfor %}

無事表示されました。