CSSクラスをビュー生成ブロックに追加する方法は?(生成されたコンテンツではなく、ブロック自体!)


8

理由はわかりませんが、ビューでは、作成したブロックに「人間が読める」CSSクラス名(ビューのマシン名など)を追加しません(生成された「コンテンツ」部分クラスを追加するだけです)。ビューエディターの「CSSクラス」部分にクラスを追加します(下のスクリーンショットを参照してください!))。
これは、通常のblock block-views、場合によってはcontextual-links-regionCSSクラスをブロックに追加し、次のような一意のID(クラスではない)を生成しますblock-views-3d8f7966168beeec655c8ead69336789(そのデルタはこの生成されたハッシュコードであるため)。
これらのクラスとID(のような.block-views-3d8f7966168beeec655c8ead69336789 { /* ... */ })のCSSルールを記述することは意味がありません。これらのクラス/ IDは、Viewsブロックを変更すると変更される可能性があるためです。

hook_block_view_alter()生成されたハッシュデルタのためにこれらのブロックを識別できない場合、の実装にいくつかのカスタムCSSクラスを追加するにはどうすればよいですか?


1つまたは2つのビューが生成したブロックにいくつかのクラスを追加するだけではやり過ぎのように感じるので、ブロッククラスを使用したくありません(BTWはモジュールをチェックしましたが、SELECT css_class, module, delta FROM {block_class}クエリはblock_class_preprocess_block()すべてをチェックするのでやりすぎのように感じますブロックが非表示の場合でも、クラスが追加されました...)。

だから私は自分のモジュールからそれを解決したいと思います。


編集

例:

マシン名と追加されたCSSクラスを含む私のビュー: 表示-マシン名とクラス

インスペクターで生成されたブロックのHTMLコード: 表示-インスペクターで生成されたブロックのHTMLコード

回答:


7

最初。マシン名が長すぎるため、「ハッシュ」があります。

次に、独自のクラスを追加して表示できます

ここに画像の説明を入力してください


あなたがビューブロックと見なしているスクリーンショットですよね?
cherouvim 2012年

いいえ-ビュー編集ページにあります-admin / structure / views / view / [youviewname]
Gaydabura '11

1
「マシン名が長すぎるため、「ハッシュ」があります。」-それはなぜ重要なのですか?私はCSSスタイルシートにルールを本当に長いクラス名にも問題なく追加できます... マークした「CSSクラス」部分は正しくありません。これらのクラスは「コンテンツ」部分にのみ生成されるためです-これは私が始めたものですと質問!そのため、コンテンツのラッパーにクラスを追加する必要があります。元の質問に貼り付けたばかりのスクリーンショットをご覧ください。
Sk8erPeter

OK。この場合、最も簡単な方法は、ブロックのカスタムテンプレートを作成することです-変更が必要です。このリンクは役に立つ可能性があります。drupal.org/node/1089656-テンプレート名の提案について説明しています
Gaydabura '11 / 10/12

しかし、この方法ではblock--views--3d8f7966168beeec655c8ead69336789.tpl.phpファイルを使用する必要があり、この場合は、でif($variables['block']->delta == '3d8f7966168beeec655c8ead69336789')条件を使用した場合と同じですhook_preprocess_block()。これを避けたかったのは、フックで人間が読める名前を使用できると思ったためです。たとえば、同じパラメーターを使用してビューを別のビューに移動したい場合、前のビューを削除しますが、同じマシン名とCSSクラスを使用しますが、生成された一意のハッシュは変更されますか?この場合、変更を失います。
Sk8erPeter 2012年

2

それは古い質問ですが、適切な答えはありません。私は同じ問題に出くわしました。私が考えることができるソリューションは、CSSの親セレクター(まだ存在しません)またはDrupalの操作でした。

CSSクラスを定義するすべてのビューブロックにラッパーCSSクラスを追加するために、hook_preprocess_blockを追加しました。これは簡単ではないので、ここにコードを配置します。すべてのビューブロックで機能しない場合があります。このコードに問題がある場合は、自由に更新して独自のバージョンを投稿してください。

例:CSSクラス「test」のビューは、CSSクラス「test-wrapper」のブロックに含まれます。

function <MY_THEME>_preprocess_block(&$variables) {
    $default_display_id = 'default';
    // Trying to access the field:
    //     $display_id =      $variables['elements']['#views_contextual_links_info']['views_ui']['view_display_id']
    //     $default_display = $variables['elements']['#views_contextual_links_info']['views_ui']['view']->display['default']->display_options['css_class']
    //     $display =         $variables['elements']['#views_contextual_links_info']['views_ui']['view']->display[$display_id]->display_options['css_class']
    if (isset($variables['elements']['#views_contextual_links_info']['views_ui'])) {
        $view_ui = $variables['elements']['#views_contextual_links_info']['views_ui'];
        if (isset($view_ui['view_display_id'])) {
            $display_id = $view_ui['view_display_id'];
            if (isset($view_ui['view']) && property_exists($view_ui['view'], 'display') && isset($view_ui['view']->display[$display_id])) {

                $default_css_class = NULL;
                if (isset($view_ui['view']->display[$default_display_id])) {
                    $default_display = $view_ui['view']->display[$default_display_id];
                    if (property_exists($default_display, 'display_options') && isset($default_display->display_options['css_class'])) {
                        $default_css_class = $default_display->display_options['css_class'];
                    }
                }

                $view_css_class = NULL;
                $display = $view_ui['view']->display[$display_id];
                if (property_exists($display, 'display_options') && isset($display->display_options['css_class'])) {
                    $view_css_class = $display->display_options['css_class'];
                }

                $css_class = $view_css_class ? $view_css_class : $default_css_class;
                if ($css_class) {
                    $variables['classes_array'][] = "$css_class-wrapper";
                }
            }
        }
    }
}


1

私にとってhook_preprocess_block()はうまくいきませんでした。(たぶん私はを介してテンプレートファイルから直接ブロックを追加しなければならなかったためですviews_embed_view()。)

ただし、次hook_preprocess_views_view()の簡単なチェックで$vars['view']->current_displayうまくいきました。

function MYMODULE_preprocess_views_view(&$vars) {
  // 'MYBLOCK' usually comes as 'block' if this view only has one
  if ($vars['view']->name == 'MYVIEW' && $vars['view']->current_display == 'MYBLOCK') {
    // here I add a class that contains the current theme's name
    global $theme;
    $theme_name = array_pop(explode('/', (drupal_get_path('theme', $theme))));
    $vars['classes_array'][] = $theme_name.'-theme';
    // but you can simply do the following as well
    $vars['classes_array'][] = 'MYSTRING';
  }
}

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.