コンテンツフィールドにクラスを追加（リンク）

<a>リンクとテキストで構成されるフィールドのタグにクラスを追加したい。（これはLinkタイプのフィールドです。）フィールドの名前はcontent.field_c_button_linkです。

テンプレートファイルに、次のようなものを追加します。

{{ content.field_c_button_link.0.addClass('button blue') }}

クラスを適切に追加するにはどうすればよいですか？

Patrick Schefferの答えによれば、CSSクラスを追加できるフィールドの設定を見ましたが、見つかりませんでした。これは、リンクフィールドで編集できるもののスクリーンショットです。

これは私が見つけた解決策ですが、使用するのは本当に便利ではありません...小枝テンプレートから直接のもののような、より良い解決策が本当に欲しいです。

function template_preprocess_field(&$variables, $hook) {
  $element = $variables['element'];
  if ($element['#name'] == 'field_c_button_link') {
    $variables['items'][0]['content']['#options']['attributes']['class'][] = 'button';
  }
}

これを実現する最も簡単な方法は、これら2つのモジュールのいずれかを使用することです。

1. リンククラス -リンククラスモジュールは、フィールドタイプリンクの新しいウィジェットフォームを提供します。このウィジェットを使用すると、エディターは、コンテンツにリンクされたフィールドLinkにクラスを追加できます。

2. リンク属性 -リンク属性ウィジェットは、Drupalコアにあるリンクフィールドに追加のウィジェットを提供します。このウィジェットにより、ユーザーはリンクに属性を設定できます。

さらに、モジュールはデフォルトのメニューリンクコンテンツリンクフィールドを変更してこのウィジェットを使用し、メニューリンクにも属性を持たせることができます。

id、クラス、名前、ターゲット、rel、accesskey

2つのいずれかが有効になったら、特定のリンクフィールドの[フォーム表示の管理]の下にある[リンク]フィールドにウィジェット設定を設定できます。

参照用の添付画像を参照してください。

これが設定されたら、コンテンツ作成時に表示されるフィールドにスペースで区切られた各クラスを入力します。

コンテンツタイプ（admin / structure / types / manage / your_contenttype / fields / field_c_button_link）でそのリンクフィールドを編集する場合、フィールドExtra CSS-classesがあります。

ただし、ここで入力したクラスは、「field_c_buton_link」で作成されたすべてのリンクに適用されます。特定の場所にクラスを追加する場合は、hook_preprocess_field]またはtheme_linkをご覧ください。

編集：

Drupal 8にはtheme_preprocess_fieldもあります。だから私はあなたがこのようなことをすることができると思う：

function template_preprocess_field(&$variables, $hook) {
  $element = $variables['element'];
  if ($element['#name'] == 'field_c_button_link') {
    $variables['attributes']['class'][] = 'button';
    $variables['attributes']['class'][] = 'blue';   
  } 
}

私はこれをテストしていませんので、この作業を行うためには調整が必要だと思います。

上記のトニーフィスラーの答えに追加するには、Drupal 8.1.2で確認する必要がありました 、クラスを追加するために名前ではなく#field_name。これは私のために働くものです。

function yourthemename_preprocess_field(&$variables, $hook) {
  $element = $variables['element'];
  if ($element['#field_name'] == 'field_link') {
    $variables['items'][0]['content']['#options']['attributes']['class'][] = 'blarg';
  }
}

これは、上のクラスが必要な場合です <a>タグ。提供されるリンククラスソリューションは簡単ですが、試したときは、aのラッパーへのクラスにのみ適用されました。したがって、たとえばBootstrapを使用している場合、リンククラスモジュールは機能しません。

[ リンク]フィールドにクラスを追加できるプロジェクトリンククラスを使用できます。ウィジェットを「クラスとリンク」に設定する必要があります。スクリーンショットをご覧ください。

フィールドテンプレートを使用して小枝でこれを行うには（ie field--field-c-button-link.html.twig）

通常、フィールドテンプレートは次を使用してリンクをループします。

  {% for item in items %}
    {{ item.content }}
  {% endfor %}

ただし、これを次のように変更できます。

  {% for item in items %}
    <a class="btn btn-secondary btn-lg m-1" href="{{ item.content['#url'] }}">{{ item.content['#title']}}</a>
  {% endfor %}

リンクのタイトルとURLを別々に処理します。

リンクフォーマッタをオーバーライドする独自のフォーマッタを簡単に作成できます。このモジュール（Link）があるのがわかりましたが、フォーマッタの設定としてではなく、フィールドレベルで設定できるため、このモジュールを使用することをお勧めします。しかし、クラスを追加できるリンク用に独自のフォーマッタを作成したい人にはこれが役立つと思いました。

namespace Drupal\mymodule\Plugin\Field\FieldFormatter;

use Drupal\Core\Form\FormStateInterface;
use Drupal\Core\Url;
use Drupal\link\LinkItemInterface;
use Drupal\link\Plugin\Field\FieldFormatter\LinkFormatter;

/**
 * Plugin implementation of the 'link' formatter.
 *
 * @FieldFormatter(
 *   id = "link_with_class",
 *   label = @Translation("Link with Custom Class"),
 *   field_types = {
 *     "link"
 *   }
 * )
 */
class LinkClassFormatter extends LinkFormatter {

  /**
   * {@inheritdoc}
   */
  public static function defaultSettings() {
    return parent::defaultSettings() +
    ['class' => ''];

  }

  /**
   * {@inheritdoc}
   */
  public function settingsForm(array $form, FormStateInterface $form_state) {
    $elements = parent::settingsForm($form, $form_state);

    $elements['class'] = array(
      '#type' => 'textfield',
      '#title' => t('Class on Link'),
      '#default_value' => $this->getSetting('class'),
    );

    return $elements;
  }

  /**
   * {@inheritdoc}
   */
  public function settingsSummary() {

    $summary = parent::settingsSummary();

    $settings = $this->getSettings();

    if (!empty($settings['class'])) {
      $summary[] = t('Class(es) on button = "@classes"', array('@classes' => $settings['class']));
    }

    return $summary;
  }

  /**
   * {@inheritdoc}
   */
  protected function buildUrl(LinkItemInterface $item) {
    $url = parent::buildUrl($item);

    $settings = $this->getSettings();

    if (!empty($settings['class'])) {
      $options = $url->getOptions();
      $options['attributes']['class'] = $settings['class'];
      $url->setOptions($options);
    }

    return $url;
  }

}

まだバグがないかテストしていますが、これを.themeファイルに配置すると、フィールドの名前がす​​べてのフィールドのクラスとして追加されます。これはDrupal 8.2用です。

function mytheme_preprocess_field(&$variables, $hook) {
  $variables['attributes']['class'][] = $variables['element']['#field_name'];
}

スタイリングを簡単にするために、すべてのテーマに含めるべきもののようです。

他のすべてのソリューションは、フィールドラッパーにクラスを追加します。これは<a>タグ自体にクラスを追加します：

/*
 * Implements hook_preprocess__HOOK().
 */
function hook_preprocess_field(&$variables) {
  $classes = [
    'button',
    'blue'
  ];
  $variables['items'][0]['content']['#url']->setOption('attributes', ['class' => $classes]);
}

ここに簡単な解決策があります-

function THEME_preprocess_file_link(&$variables)
{
  $variables['attributes']->addClass(array('your_custom_class'));
}