Drupal 8の theme(テーマ) 作成方法 (超簡易版)

--広告--

ポイント

・非常に簡易的なDrupalのテーマ作成方法を説明します。

・今回は「sample」というテーマを作成します。

・あらかじめthemeフォルダ内に「custom」というフォルダを作成しておいてください。

閲覧数 1174 回

1.テーマ名(sample) ディレクトリ作成

theme/cusotmディレクトリ内に、テーマ名のフォルダを作成します。

今回はテーマ名が「sample」なので、「sample」というディレクトリを作成します。

2.  theme名.info.ymlファイルの作成

Sampleディレクトリ内に、theme名.info.ymlファイルを作成します。

今回の場合はsample.info.ymlとなります。

theme名.info.ymlにはthemeのバージョンや説明等の情報を記載します。

ファイルの中身は下記の通り記載してください。

name: Sample
type: theme
base theme: classy
description: 'Sample theme'
version: 8.x
core: 8.x
libraries:
  - sample/base
regions:
  header: Header
  content: Content
  footer: Footer

※theme名.info.ymlファイルの詳細な説明については下記をご確認ください。

Drupal 8 テーマ作成 .info.ymlファイルについて

3. theme名.libraries.ymlファイルの作成

sampleディレクトリの中に、theme名.libraries.ymlファイルを作成します。

今回の場合はsample.libraries.ymlとなります。

theme名.libraries.ymlにはthemeで使用する CSS や JavaScript を記載します。

ファイルの中身は下記の通り記載してください。

base:
  version: VERSION
  css:
    component:
      css/style.css: {}

4. cssディレクトリの作成

sampleディレクトリ内に cssというディレクトリを作成します。

こちらは利用するcssを格納するディレクトリです。

また、cssディレクトリ内に style.css というファイルを作成してください。

ここまでで、sampleディレクトリ内は下記のようになります。

sample
- css
 - style.css
- sample.infoyml
- sample.libraries.yml

ここでテーマの管理画面を見ると、アンインストール済みテーマ内に今作成している sample テーマが表示されます。

drupal8_theme_step1

5.templatesディレクトリの作成

sample ディレクトリ配下に templatesというディレクトリを作成します。

こちらはテンプレートファイルを格納するディレクトリです。

6. page.html.twigファイルの作成

templatesディレクト配下にpage.html.twigファイルを作成します。

page.html.twigとは、ページ全体のHTMLファイルです。

今回は以下のように記載してください。

<header>
    <div class="header">
      {{ page.header }}
    </div>
  </header>

  <div class="container">
    <main>
      {{ page.content }}
    </main>
  </div>

  <footer>
    <div class="footer">
      {{ page.footer }}
    </div>
  </footer>

7. node.html.twig ファイルの作成

templatesディレクトリ配下にnode.html.twigファイルを作成します。

node.html.twigとは、ページのコンテンツ部分のテンプレートファイルです。

今回は以下のように記載してください

<article{{ attributes }}>
  {{ title_prefix }}
  {% if not page %}
    <h2{{ title_attributes }}>
      <a href="{{ url }}" rel="bookmark">{{ label }}</a>
    </h2>
  {% endif %}
  {{ title_suffix }}

  {% if display_submitted %}
    <footer>
      {{ author_picture }}
      <div{{ author_attributes }}>
        {% trans %}Submitted by {{ author_name }} on {{ date }}{% endtrans %}
        {{ metadata }}
      </div>
    </footer>
  {% endif %}

  <div{{ content_attributes }}>
    {{ content }}
  </div>
</article>

 

以上でディレクトリとファイルの作成は完成です。

 

8. テーマの有効化

それでは実際に作成したテーマを有効化してみましょう。

テーマの管理画面より、sampleテーマの「インストールしてデフォルトに設定」をクリックします。

drupal8_theme_step2

インストールが完了したら、サイトのトップページに移動しましょう。

移動するとテーマが作成したsampleテーマに変わっています。

drupal8_theme_step3

非常に不恰好ではありますが、作成してテーマが反映されています。

まとめ

今回作成したディレクトリとファイルの構造は下記の通りです。

sample
- css
  - style.css
- sample.infoyml
- sample.libraries.yml
- templates
  - node.html.twig
  - page.html.twig
  

今回は必要最低限の簡易的なテーマの作り方の説明でした。

こちらを元にテンプレートの追加やcssの修正を行い、Drupalのテーマ作成をしていってください。

今後それぞれのファイルについてもう少し掘り下げて説明したいと思います。

 

カテゴリ

関連タグ

--広告--

同じカテゴリのコンテンツ

Drupalのテンプレート構造についての説明をします。

主…

ここでは「記事」「基本ページ」等のコンテンツタイプごとに

node.html.tiwgは、page.html.twigの …

ここではテーマにスタイルシートを追加する方法を説明します。

Drupalの関数をフックするためのファイル、thme名.themeについ…