web-dev-qa-db-ja.com

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

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

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

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

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

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

screenshot

entities8themingnavigation
15
maidi

これは私が見つけた解決策ですが、実際に使用するのに便利ではありません...私は本当にtwigテンプレートから直接何かをするような、より良い解決策を求めています。

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

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

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

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

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

id、class、name、target、rel、accesskey

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

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

enter image description here

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

6
Prerit Mohan

コンテンツタイプ（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';   
  } 
}

私はこれをテストしていないので、これを機能させるためにいくつかの調整を行う必要があると思います。

4
Patrick Scheffer

上記のTony Fislerの回答に追加するには、Drupal 8.1.2で、クラスを追加するためにnameではなく＃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=を使用している場合、リンククラスモジュールは機能しません。

3
Chris Bauer

リンクフォーマッターをオーバーライドする独自のフォーマッターを作成するのは簡単です。このモジュール（ 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;
  }

}
2
oknate

twigでこれを行うには、フィールドテンプレートを使用します（つまり、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を別々に処理する。

2
sdmeyers

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

2
flocondetoile

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

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

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

0
Will

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

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

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

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