1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Drupal テーマ(Tara)適用と基本コンテンツ作成

Posted at

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

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

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

homepage slider

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

ドキュメントはこちら。

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

welcome block

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

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

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

image.png

image.png

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

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

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

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

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

そこの、コンテンツ > Page title の設定
image.png

ページ欄に

<front>

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

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

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

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

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

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

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

<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

ソーシャルアイコン

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

サイト/admin/appearance/settings/tara

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

コンテンツ作成

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

記事

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

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

サイト/admin/structure/taxonomy

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

image.png

image.png

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

サイト/admin/structure/views

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

image.png

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

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

記事ではないコンテンツ

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

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

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

コンテンツタイプ作成

サイト/admin/structure/types

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

image.png

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

image.png

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

image.png

image.png

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

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

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

サイト/node/add

image.png

登録してみます。

image.png

image.png

image.png

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

メニューの設定

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

image.png

image.png

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

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?