Drupal CMS 2.0.0 に移行してみた

Drupal

はじめに

Drupal CMS 2.0.0 が 2026年1月28日に公開されて、自鯖をどうしようか思案していた。新たに Drupal Canvas がページビルダーとして標準になって、テーマも これまでお世話になった Olivero から Canvas 対応の Byte が標準になったから、このタイミングで自鯖も Byte に切り替えることにした。

 

コンテンツタイプの一本化

Canvas をテストサイトで試しているなかで、これまではコンテンツタイプを Drupal 用、Proxmox 用などと複数作っていたところ、Canvas でコンテンツタイプごとのレイアウトを準備するのは骨が折れることが判った。

具体的には、blog というコンテンツタイプに応じたテンプレートとして、下画像のように全文 template と Card template の２つが予め用意されているが、このテンプレートを他のコンテンツタイプにコピーする UI が用意されていない。なので、これまでのように同じようなコンテンツタイプを複数用意したい場合でも、都度、コンテンツタイプごとにテンプレートを作る必要がある。しかも、全文 Template はコンテンツタイプに紐付けられるものの、Card Template に至ってはどうやって追加すれば良いのかもわからない。

テンプレート

 

そこで、この際なので記事は全てコンテンツタイプ blog に統一して、タグ「カテゴリー用」「一般用」で整理することとした。
難点としては、記事を書くときに都度、内容に応じたイメージ画像やタグ（カテゴリー）を選択する必要があること。今更 WordPress に戻りたくないし、仕方がないから妥協することにした。

 

インストール後にやったこと

タクソノミー

WordPress でいうところのカテゴリー用（Tags-Menu）と、一般的なタグ用（Tags）の２つのボキャブラリーを用意した。カテゴリー用のボキャブラリーには Drupal や Proxmox など、これまでコンテンツタイプに相当するターム（タグ）を追加した。かつ、イメージ画像とともに、記事を書くときの必須フィールドに設定した。

タクソノミー

 

コンテンツの URL

日付と記事タイトルになるように設定した。
管理画面の「環境設定＞検索とメタデータ＞URL エイリアス」から Blog コンテンツ、タグ、それから追加したタグ（メニュー用）について、右端のドロップダウンリスト（初期値は複製）から編集をクリックして、それぞれ下画像のようなパターンを設定した。

パターン

 

ここではまだ慌てて一括生成をせずに、設定タブから「URL エイリアスを生成する前に翻訳を行う」を OFF にしておく。

設定

 

以上が済んでから一括生成タブを実行する。まだ記事もターム（タグ）も何も無ければこのまま進めて問題ない。

 

ページの編集

インストール直後のページで残したのは Home、About、Page not foun の３つ。あとはバッサリ削除した。コンテンツは全て削除した。

それから Home の右上の編集ボタンをクリックして Canvas でページを編集、左サイドメニューのレイアウトをクリックして不要なブロックも全て削除した。最終的には下画像のとおり最近の投稿のブロックを表示させることにした。

レイヤー

 

最近の投稿のカード表示数は、Blog: Latest blog posts をクリックしたときに表示される右サイド画面で変更する。下画像では６件の新着記事を表示することになる。他にも Section や Text など、左サイドでクリックして右サイドで編集・設定という流れ。

ブロック設定

 

各ページ共通のヘッダー、フッターもここで編集する。レイヤーまたは直接編集画面のヘッダーをダブルクリックすると編集が可能となる。
コンテンツタイプのテンプレートも同じように Canvas で編集する。

 

メニューの作成・編集

管理画面の「サイト構築＞メニュー」で編集する。このサイトの場合は最初から用意されている「メインナビゲーション」「Secondary navigation」「Social」「Secondary navigation」の４つを編集して使用している。

  • メインナビゲーション
    ヘッダーに配置して Tags-Menu のタームに応じた /drupal や /proxmox などを設定。
  • Secondary navigation
    画面右下の Login、Logout 用。/user/login と /user/logout の２つのリストを設定しておけば、ユーザーのログイン状態に応じてどちらか一つだけ表示される。
  • Sosial
    画面左下に設置されているアイコンメニューで Mastodon を追加。その他は気にしてない。
  • Secondary navigation
    画面左下のメニューでプライバシーポリシーなどを配置。

 

タームで表示する画面レイアウトの設定

Views のタクソノミータームを編集することでカードの配置などを設定する。
このサイトの場合、フォーマットはレスポンシブグリッド、表示はコンテンツ view mode | Card としている。
レスポンシブグリッドの設定は、カラムの最大数＝３、最小のグリッドセル幅＝100 px でいい感じになった。

 

タグ用のブロック

Views でタグ一覧を表示するためのブロックを作ってフッターの一番上に配置した。フィルターにタクソノミータームのボキャブラリ（Tags）を指定することで、メインナビゲーションとは別の一般的な用途のタグを表示させている。
ブロックを作ると Canvas の左サイド画面でブロックの追加（＋）をクリックしたときに、最下段に下画像のような Views ブロックが表示される。画像ではタグ（フッター用）になっているけど名称は適当。

ブロック

 

ブロックの設定は、レスポンシブグリッドで最大８カラム、最小のグリッドセル幅は 100 px としている。

 

コードブロックの水平スクロールバー

Canvas の左サイド画面で Code をクリック、下画像のように Global CSS として CSS を記述することで水平スクロールが可能となる。

CSS

 

コードはこちら。

/* コードブロックの外枠を制御 */
pre {
  background-color: #eaf4fc; /* 背景色（任意） */
  padding: 15px;
  border-radius: 4px;
  overflow-x: auto; /* 横方向に溢れた場合にスクロールバーを表示 */
  white-space: pre; /* 改行を禁止し、そのまま表示 */
  word-wrap: normal; /* 単語の途中での改行を防止 */
}

code {
  display: block; /* code要素をブロック化してスクロールを安定させる */
  width: 100%;
}

 

画像のアップロード方法

記事のイメージ画像は、再利用できるようにメディアとしてアップロードした画像を使用している

記事内のインライン画像は都度アップロードしているが、初期状態だとツールバーに「パソコンから画像をアップロード」のアイコンが無いと思う。管理画面の「環境設定＞コンテンツ作成＞Text formats and editors」をクリックして、Content の右端の設定をクリックするとツールバーや各種フィルターの設定が可能なのでよしなに。HTML タグに制限があると不便かもしれない。

 

コンテンツ一覧の並び替え

投稿日で並び替えたいから Views のコンテンツにフィールドを追加して、フォーマットの設定でデフォルトの並び順などを変更した。

 

ロゴ画像、お気に入りアイコンの変更

テーマの設定で画像をアップロードする。

 

One Time Password

現状ではパスキーの決め手となるようなモジュールが見当たらなかったので One Time Password を利用している。ブラウザで /user/1/two-factor-auth にアクセスして QR コードをGoogle Authenticator 等で読み取る。

 

絶対パスを相対パスにSQLで変換

インライン画像のリンクで絶対パスを設定している場合、サイトの引っ越しなどで不便。これを /sites/default/files/inline-images のように相対パスにするため、https://jisaba.life/ を / に置き換える。普段から相対パスにしていれば問題ない。

UPDATE `node__field_content` 
SET `field_content_value` = REPLACE(`field_content_value`, 'https://jisaba.life/', '/') 
WHERE `field_content_value` LIKE '%https://jisaba.life/%';

 

おわりに

テーマ Byte の細かなところ、例えば Card に投稿日を表示させる、検索フォームを小さくする等の修正が今後の目標。子テーマを作るのが良いのか、それとも Canvas でコードを追加するのが正しい作法なのか、わからないことだらけなのでボチボチ調べてみよう。

あと、このままでは SEO 的に全くダメな移行なので、記事コンテンツについて旧 URL から新 URL への 301 Redirect を次のとおり Apache の VirtualHost 設定ファイルに追記した。.htaccess だと Drupal のアップデート等のタイミングで消えてしまう。

<VirtualHost *:443>
    ServerName jisaba.life
    DocumentRoot /var/www/jisaba.life/web

    # これにより .htaccess の処理よりも先にリダイレクトが評価されます
    RewriteEngine On

    # 1. /仮想化/proxmox/コンテンツ -> /blog/コンテンツ
    RewriteRule ^/?仮想化/proxmox/(.*)$ /blog/$1 [R=301,L,NE]

    # 2. /設定/(カテゴリ)/コンテンツ -> /blog/コンテンツ
    RewriteRule ^/?設定/(drupal|nextcloud|その他|mastodon|apache|日常)/(.*)$ /blog/$2 [R=301,L,NE]
    # ---------------------------------
      
    <Directory /var/www/jisaba.life/web>
      Options FollowSymlinks Includes
      AllowOverride All
      AddType text/html .html
      Require all granted
    </Directory>
    ...
    ...

 

それから、異なるコンテンツタイプ間での記事コンテンツの移行も「DB 接続による Migrate モジュール」または「CSV 経由の Feeds モジュール」で実行したほうが良いと思う。
このサイトは記事数が少ないから記事一つ一つをコピペでも問題ないけれど :-)

 

関連記事