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

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

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

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

インストールしよう!

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

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

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

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

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

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

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

アセットの作成

管理画面の設定>ファイル管理をクリック 20180105_yanagimachi_03.png

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

設定を入力します 20180105_yanagimachi_05.png

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

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

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

http://localhost:8888/assets/img

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

フィールドの追加

管理画面の設定>フィールドをクリック 20180105_yanagimachi_06.png

「新規フィールド」をクリック 20180105_yanagimachi_07.png

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

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

フィールドを追加する

設定>セクションをクリック 20180105_yanagimachi_09.png

News>入力タイプを変更してくださいをクリック 20180105_yanagimachi_10.pngのサムネイル画像

Newsをクリック 20180105_yanagimachi_11.png

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

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

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

画像をアップロード

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

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

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

アイキャッチを表示する

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

/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 %}

無事表示されました。 20180105_yanagimachi_16.png


ishidaや私がたまに投稿しているNunjucksと記述が似ているので、すぐに慣れることができそうです。
次からは他のタイプのフィールドを追加したり、画像の表示を変えたり、テーマをいじったりしてみようと思います。

  • このエントリーをはてなブックマークに追加

この記事を読んだ人にオススメ