Drupal テーマ（Tara）適用と基本コンテンツ作成

こちらの続きシリーズです。

https://qiita.com/JQinglong/items/7ce6e09ef06950dcaf79

テーマの選択肢も、正直、WordPress に比べて寂しいなと思ってしまいますが、Tara というのが、まあよいかなと思ってインストールしました。

初期状態だと寂しい状態なので、整備していきます。

## homepage slider

まずは、テーマの大きな特徴である、ホームページのスライダーです。

ドキュメントはこちら。

https://www.drupar.com/tara-theme-documentation/how-manage-homepage-slider

下の方にサンプルがあるので、あまり問題ないですね。

## welcome block

順に、次は、その直後の welcome メッセージ。

https://www.drupar.com/tara-theme-documentation/how-create-homepage-welcome-block

ドキュメントでは、「カスタムブロックライブラリ」を追加するとなっていますが、初期状態でもようこそのメッセージは表示されているので、さらに追加するとどうなるか。

手順としては、「カスタムブロックライブラリ」を作成して、「ブロックレイアウト」の「Homepage Content」にブロック配置ですね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77307/bdbf4247-7e20-5bb3-ea94-b80b4e76edd2.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77307/9ae6caaf-4883-d4eb-530f-0ca0df5b3125.png)

こんな感じで下に追加されるんですね。
とすると、元々のようこそメッセージを消したい。

https://www.drupar.com/tara-theme-documentation/how-create-homepage

まずは、「コンテンツを追加」から、内容空で「基本ページ」を作成。その際に、「URLエイリアス」は「/home」を指定。

その上で、サイトの基本設定
サイト/admin/config/system/site-information

こちらで、「デフォルトのフロントページ」を指定することになっており、初期値は「/node」が設定されている。
これを「/home」に変更。それだけだとタイトルが表示されてしまうので、その設定を変更。

サイト構築　＞　ブロックレイアウト
サイト/admin/structure/block

そこの、コンテンツ　＞　Page title の設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77307/3a2cbe3a-9159-78ee-f69c-5d94c8989e4f.png)

ページ欄に

```
<front>
```

を記載して、「一覧にあるページで非表示」にチェックを変更。
これで消えました。

## トップページへのその他のコンテンツブロックの追加

Taraのデモページを参考に、その他のブロックを追加していきます。

https://www.drupar.com/tara-theme-documentation/homepage-services-block

https://www.drupar.com/tara-theme-documentation/homepage-projects-block

手順は、welcome block と同じで、カスタムブロックを作成して、「ブロックレイアウト」の「Homepage Content」にブロック配置です。

カスタムブロックのお手本が記載されているので、それを参考にすれば、同じようなブロックが作れます。

なお、homepage-services-block の方のお手本を参考に追加してみましたが、再度編集画面を開くと、一部改変されてしまい、アイコン部分などは消されてしまうので、ちょっとイマイチですね。

こんな感じでブロックを作成すると、

```html
<div class="services">
	<div class="service">
		<i class="fa fa-laptop" aria-hidden="true"></i>
		<h3>Software</h3>
		<p>気の向くままに、アプリ開発を行なっています。</p>
		<a class="button" href="#">read more</a>
	</div> <!--/.service one -->
	
	<div class="service">
		<i class="fa fa-camera-retro" aria-hidden="true"></i>
		<h3>Art</h3>
		<p>芸術作品、工芸品など、コンピュータから離れた芸術作品を産み出していきます。</p>
		<a class="button" href="#">read more</a>
	</div> <!--/.service two -->
	
	<div class="service">
		<i class="fa fa-book" aria-hidden="true"></i>
		<h3>Documents</h3>
		<p>文章を書き、知識を整理します。</p>
		<a class="button" href="#">read more</a>
	</div> <!--/.service three -->
</div>
```

こんな感じで表示されます。行数合わせないと格好悪いですね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77307/d6da0644-b042-cd91-ffef-025da42cf606.png)

## ソーシャルアイコン

ヘッダ、フッタに表示されている、Facebook等のアイコンのリンク設定。

https://www.drupar.com/tara-theme-documentation/how-manage-header-and-footer-social-icons

サイト/admin/appearance/settings/tara

これは各リンクを設定していくのみです。

## コンテンツ作成

上記までで一応の見た目ができました。
ここで、コンテンツを準備して、そこへのリンク等を作成することにします。
Software、Art、Document の三つのページ（基本ページというものがWordPressでいう固定ページですが、ちょっとアレンジ）と、記事（WordPressでいう投稿）を作ります。

### 記事

記事を作ること自体は、Drupal 本体の話ですが、Tara としての解説もあります。

https://www.drupar.com/basic-drupal-8-tutorials/how-create-blog-drupal-8

先に、カテゴリー（タクソノミー・タグ）を作ります。

サイト/admin/structure/taxonomy

既存の「タグ」の中に、「タームを追加」します。
名前だけ登録していきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77307/1a53f1bf-6859-7553-969d-8dba845ac8c3.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77307/553e75c4-b71b-9997-d11b-6e7e3a8d3f36.png)

上記解説にある画像のところは省略。
ビューの作成に行きます。ブログ用のビューくらいあっても良い気がしますが、ないので作ります。

サイト/admin/structure/views

「ビューを追加」で、ビューの名前に「Blog」、タイプ指定で「記事」とします。
「ページの設定」の「ページを作成する」をチェックすると、諸々初期表示されており、さらに「メニューリンクを作成」をチェックするとさらにその内容が初期表示されるので、それで保存します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77307/7ed5c9b7-71f3-fe59-62f8-3f0d61639322.png)

では、記事を作成。
メニューで「Blog」をクリックすると、一覧表示されます。

実際のサイトでご確認ください。

https://www.jq-collection.com/blog

### 記事ではないコンテンツ

基本として用意されているコンテンツのタイプは、記事のほかに、基本ページというものがあります。
しかし、これは単に文章を書くだけのデータ型なので、それはあまり面白くない。

Drupal の一つの売りは、自分でコンテンツタイプを定義するという部分かと思います。
今回は、「Software」のリンクから、開発しているソフトウェアの一覧ページを表示し、一覧から、書くソフトウェアの詳細情報を表示する、という構成を作ることにします。

大きな流れは、Drupal ユーザーガイドの、第6章 コンテンツ構造の設定 になります。
（しかし、日本語化が一部だけされている状態で、なかなか大変ですよね・・・）

https://www.drupal.org/ja/docs/user_guide/ja/content-structure-chapter.html

#### コンテンツタイプ作成

サイト/admin/structure/types

から、「コンテンツタイプの追加」。
名前を日本語で入力すると、システム内部名称もローマ字的になってしまうので、すかさず編集で変えておきます。
その他はガイドを見ながら適当に。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77307/4f761963-8fe0-dda1-3627-ee939eeb5094.png)

「保存してフィールドを管理」で、フィールドの登録画面。
Body 以外に必要な情報を追加します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77307/dd2722ca-e096-f185-b6ac-17aa68ba20b8.png)

さらに「表示管理」で、画面上ラベルの表示非表示の切り替え、どう表示させるか、などを指定できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77307/df539c5a-75ad-1dad-792c-47c81cb88543.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77307/4a50f40e-9abb-b956-a48b-d578ff2e52fc.png)

そんな感じで、コンテンツタイプが作成できます。

#### コンテンツアイテムの作成

この状態で、コンテンツ追加画面に行くと、新しいコンテンツタイプが選択できるようになっています。

サイト/node/add

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77307/633e3bfe-bc21-8b81-1be9-a56a601e3376.png)

登録してみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77307/45ad1f75-20fb-c081-7fc6-5b005f81c06b.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77307/3b713092-1233-7c59-184d-6f9cc35bdef3.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77307/aab757d1-8fc9-46bf-93fe-6b3b11bf8dc2.png)

まずは、Node に追加されるんですね。

## メニューの設定

こうしてコンテンツが登録できるようになったら、メニューと一覧を設定します。
記事の追加の作業と同じですね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77307/bd7ba043-db14-9372-8e5c-cc1f1f45dde1.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77307/7ac0a43e-a0ef-bca6-a376-eb817cd3913d.png)

だいぶ、いい感じになってきました！

https://www.jq-collection.com/