Linked Field
任意のフィールドを特定のURLにリンクさせることができます。フィールドベースのリンク先とトークン置換をサポートするカスタムリンク先の両方に対応しています。
linked_field
インストール
composer require 'drupal/linked_field:8.x-1.7'
概要
Linked Fieldは、任意のフィールド出力を指定したリンク先へのクリック可能なリンクに変換する機能を追加する強力なモジュールです。テーマを修正したりカスタムのフィールドフォーマッターを作成する必要なく、任意のフィールドの表示設定を構成してコンテンツをアンカータグでラップできます。
このモジュールは、既存のフィールドフォーマッター設定にサードパーティ設定を注入することで動作します。Entityを表示する際、Linked Fieldはフィールドのレンダリングプロセスをインターセプトし、フィールド出力をアンカータグでラップします。このアプローチにより、特別な統合を必要とせず、任意のフィールドタイプと任意のフォーマッターで動作します。
リンク先は2つの方法で設定できます:同じEntity上の別のフィールド(LinkフィールドやURLを含むテキストフィールドなど)を選択する方法、またはDrupalのTokenシステムをサポートするカスタムリンク先を入力する方法です。後者を使用すると、[node:url]トークンを使用してフィールドをEntityの正規URLにリンクするなど、Entityのプロパティに基づく動的なリンクが可能になります。
このモジュールは、サイト管理者が設定可能なHTML属性を定義できる管理インターフェースも提供します。デフォルトでは、title、target、class、rel属性が提供されますが、YAMLベースの設定インターフェースを通じて追加の属性を追加できます。
Features
- カスタムテーマやコード開発なしで、任意のフィールド出力をURLにリンク
- 2種類のリンク先タイプ:フィールドベース(LinkフィールドやテキストフィールドなどのフィールドからURLを取得)とカスタム(トークンをサポート)
- [node:url]や[node:field_custom_link:uri]などの動的URLを可能にするカスタムリンク先でのトークン完全サポート
- title、target、class、relを含む設定可能なHTML属性とカスタム属性のサポート
- テキストノードをアンカータグでラップし、画像やピクチャーを特別に処理するインテリジェントなDOM処理
- 既存の属性と設定値を組み合わせる際にclassとrel属性をマージして重複を除去
- 元のフィールド出力をトークン置換された値で上書きするカスタムリンクテキストオプション
- セキュリティ脆弱性を防ぐためのすべての出力に対するXSSフィルタリング
- 設定インターフェースでTokenブラウザを使用するためのTokenモジュールとの統合
- 他のフィールドフォーマッターの後に実行されることを保証する高いモジュールウェイト(100)による適切な出力修正
Use Cases
画像フィールドをカスタムURLフィールドにリンク
画像フィールドと「External URL」というLinkフィールドを持つコンテンツタイプがあります。画像をクリックすると外部URLに移動するようにしたい場合、画像フィールドの表示を設定します:「このフィールドをリンク」にチェック、タイプで「フィールド」を選択、フィールドドロップダウンから「External URL」を選択します。これで画像はLinkフィールドのURLを指すアンカータグでラップされます。
フィールドをEntityの正規URLにリンク
タイトルや説明フィールドをNodeの全文ページにリンクしたい場合、フィールドの表示を設定します:「このフィールドをリンク」にチェック、タイプで「カスタム」を選択、リンク先に「[node:url]」を入力します。フィールド出力がNodeの正規URLにリンクされます。
リンクフィールドにCSSクラスとtarget属性を追加
リンクフィールドを新しいタブで開き、特定のCSSクラスを付けたい場合、リンクフィールド設定の詳細設定セクションでTargetに「_blank」、Classに「external-link」を入力します。生成されるアンカーにこれらの属性が含まれます。
トークンを使用したティーザーリンクの作成
ティーザー表示モードで、本文の要約をカスタムtitle属性付きで全文記事にリンクしたい場合、本文フィールドを設定します:リンクを有効化、カスタムリンク先に「[node:url]」を使用、Title属性に「[node:title]についてもっと読む」を設定します。要約に説明的なリンクツールチップが付きます。
関連Entityへのリンク
著者プロフィールへのEntity Referenceフィールドを持つ記事があります。著者名の表示をプロフィールページにリンクしたい場合、「[node:field_author:url]」のようなトークンでカスタムリンク先タイプを使用して、参照先の著者の正規URLにリンクします。
カスタムHTML属性の追加
サイトでアナリティクス用にリンクに「data-tracking」属性が必要な場合、/admin/config/linked_field/configに移動し、YAML設定に新しい属性を追加します:「data-tracking: {label: トラッキングID, description: アナリティクストラッキング識別子}」。この属性がすべてのLinked Fieldの詳細設定に表示されるようになります。
Tips
- 設定インターフェースで便利なTokenブラウザを使用するためにTokenモジュールをインストールしてください
- 属性設定の編集時にシンタックスハイライトを使用するためにYAML Editorモジュールをインストールしてください
- Entityの正規ページへのリンクには「[entity:url]」トークンを使用してください - 「entity」を実際のタイプ(node、user、taxonomy_term)に置き換えてください
- classとrel属性は値をインテリジェントにマージするため、既存のフィールド属性と設定値を組み合わせることができます
- リンク先として使用されるLinkフィールドの場合、モジュールはLinkフィールドからのtargetなどの属性を保持し、設定値とマージします
- 詳細設定のテキストオプションは、フィールド出力を完全にトークンテキストに置き換えます - 「続きを読む」リンクに便利です
- トークン置換が正しく解決されることを確認するため、Tokenモジュールのトークンブラウザを使用して最初に単独でテストしてください
Technical Details
Admin Pages 1
/admin/config/linked_field/config
フィールドをリンクする際に設定可能なHTML属性を管理するための設定ページです。属性はYAML形式で定義され、それぞれにオプションのラベルと説明があります。設定された属性は、フィールドフォーマッター設定の詳細設定セクションに表示されます。
権限 1
Hooks 4
hook_field_formatter_third_party_settings_form
すべてのフィールドフォーマッター設定にLinked Field設定フォームを追加します。チェックボックス、リンク先タイプの選択、フィールド/カスタムリンク先入力、属性設定フィールドを作成します。
hook_field_formatter_settings_summary_alter
表示管理に表示されるフィールドフォーマッターサマリーにLinked Field設定の概要を追加します。リンク先、設定された属性、カスタムテキスト(設定されている場合)を表示します。
hook_entity_display_build_alter
リンクラッピングを適用するためにEntity表示出力を処理するコアhook。フィールドを反復処理し、Linked Field設定を確認し、リンク先を解決し、フィールド出力をアンカータグでラップします。
hook_help
ヘルプページでモジュールのヘルプテキストを提供します。
Troubleshooting 6
Linkフィールドは既にアンカータグを出力するためブラックリストに登録されています。モジュールは二重ラッピングを防止します。代わりに、Linkフィールドのネイティブ表示オプションを使用するか、他のフィールドをLinkフィールドの値にリンクしてください。
特定のフィールドタイプのみがリンク先として使用できます:link、string、list_float、list_string。これらのタイプのフィールドをコンテンツタイプに追加するか、トークンを使用したカスタムリンク先タイプを使用してください。
TokenブラウザのためにTokenモジュールがインストールされていることを確認してください。角括弧を使用した正しいトークン形式を使用しているか確認してください。Entityタイプがトークンタイプと一致していることを確認してください(例:Nodeには[node:url]、ユーザーには[user:url])。
内部パスには「internal:/」プレフィックスを付けてください(例:「internal:/about-us」)。「/about-us」や「about-us」のような相対パスは自動的に変換されますが、明示的なinternal:プレフィックスが推奨されます。
/admin/config/linked_field/configのモジュール設定で属性が定義されていることを確認してください。YAML構文が有効であることを確認してください。空の属性値は出力にレンダリングされません。
Linked Fieldは他のモジュールの後に実行されるように高いモジュールウェイト(100)を持っています。別のモジュールやテーマがLinked Fieldの処理後にフィールド出力を上書きしていないか確認してください。設定変更後はすべてのCacheをクリアしてください。
Security Notes 5
- すべての出力はXSS攻撃を防ぐためにXss::filterAdmin()を通じてサニタイズされます
- DOM操作中にHTMLエンティティは適切にエンコードおよびデコードされます
- トークン置換はDrupalの安全なTokenサービスを使用します
- URL検証により、不正なまたは潜在的に危険なURLを防止します
- モジュールはDrupalの権限システムを尊重します - 「administer linked_field」権限を持つユーザーのみが利用可能な属性を変更できます