単一ページ/ノードにCSSを追加する方法はありますか？

drupal.stackexchange https://drupal.stackexchange.com/questions/126

  •  16-10-2019
  •  | 
  •  

質問

私は大きなクレイジーなスタイルのシート（おそらく将来の質問に関連する可能性があります）をクリーンアップしています。特定のノードまたはページにカスタムCSSを追加する最良の方法を疑問に思っています。

特に、私の職場のホームページはパネルページであり、さまざまなスタイリングがあります。現在、CSSはメインテーマスタイルシートに含まれています。

「これがノードfooである場合、foo.cssを追加してください」と言う方法はありますか？は CSSインジェクター 私が探しているものは何ですか？

私 そうかもしれない これを他のノード/セクション/などに一般化することに興味がありますが、現時点ではこの1つのアイテムを処理したいだけです。

私がやったこと。

私はZenサブテーマを使用しており、実際にTemplate.phpを介して読んでいることで発見されました。以下のコードは私が必要としていたことを正確に行いました：

if (drupal_is_front_page()) {
  drupal_add_css(path_to_theme() . "/foo.css", 'theme','all'); 
}

（ストックZen Template.phpファイルの80行、fwiw。）

役に立ちましたか？

解決

これは私がコードで行うようなことですが、それは私が転がす方法だからです。

Template.phpでは、次のようなものが必要になります。

function MYTHEME_preprocess_node($vars) {
  if (drupal_get_path_alias("node/{$vars['#node']->nid}") == 'foo') {
    drupal_add_css(drupal_get_path('theme', 'MYTHEME') . "/css/foo.css");
  }
}

Fooを独自のコードに関連する値に置き換えます。

他のヒント

あなたはを見ることができます ノードあたりのコード モジュール。これでも取り上げられています ブログ投稿.

aを作成します 環境 ページ/セクションには、次に使用します コンテキスト資産 その指定されたコンテキストのために、CSSおよび/またはJavaScriptをロードするモジュール。

環境：

コンテキストを使用すると、サイトのさまざまな部分のコンテキスト条件と反応を管理できます。各コンテキストは、サイトの「セクション」を表すものと考えることができます。各コンテキストについて、このコンテキストがアクティブであるようにトリガーする条件を選択し、このアクティブなコンテキストに反応するDrupalのさまざまな側面を選択できます。

条件は、ページの読み込み中にチェックされている一連のルールと考えて、どのコンテキストがアクティブであるかを確認してください。アクティブなコンテキストに関連する反応はすべて発射されます。

コンテキスト追加資産：

コンテキスト追加アセットを使用すると、これを行うことができます。コードを作成せずにこれをすべて実行できるように、使いやすいUIがあります。 ctoolsを使用するため、これらはすべてエクスポート可能です。

それが少量のCSSである場合、ノードに基づいてCSSセレクターを作成し、テーマのCSSにCSSを含めることを検討している可能性がありますか？ Drupal 7はbody.page-node-nodeidセレクターを提供し、Zen for Drupal 6は同様のボディCSSクラスを提供します。

カスタムモジュールを作成し、hook_preprocess_node（）を使用して、ノードIDに基づいてスタイルシートを選択的にロードできます。

これが例です：

function MYMODULE_preprocess_node($vars) {
  $nid = 3;
  if (arg(0) == 'node' && is_numeric(arg(1)) && arg(1) == $nid) {
    drupal_add_css(drupal_get_path('theme', 'MYTHEME') . "/foo.css");
  }
}

mymoduleをモジュールの名前に置き換え、MythemeをCSSファイルを含むテーマの名前に置き換えます。

CSSスタイルを追加する基準がノードの一部のプロパティから依存する場合、実装します MYTHEME_preprocess_node(&$variables);関数に渡された値の1つはです $variables['node'] （そうではないことに気付く $variables['#node']).

MYTHEME_preprocess_node(&$variables) {
  if ($variables['node']->nid == 3) {
    drupal_add_css(drupal_get_path('theme', 'MYTHEME') . "/foo.css");
  }
}

基準がノードプロパティから依存しない場合、実装します MYTHEME_preprocess_page(&$variables); $variables['node'] 表示されているページがノードページの場合、ノードオブジェクトが含まれています。 Drupal 6では、プロセス関数も取得します $variables['is_front'], 、しかし、Drupal 7では、同じ変数が渡されません。ページがフロントページであるかどうかを知る必要がある場合は、使用する必要があります drupal_is_front_page().

MYTHEME_preprocess_page(&$variables) {
  if ($variables['is_front']) {
    drupal_add_css(drupal_get_path('theme', 'MYTHEME') . "/foo.css");
  }
}

それを行う管理者に基づいた方法のために私は CSS モジュール。追加できるフィールドを追加します CSS に node/add と node/edit ページ。

CSS：

CSSモジュールは、ノード作成ページのCSSフィールドである十分な権限と有効なノードを持つユーザーに追加されます。

ユーザーはCSSノードフィールドにCSSルールを挿入する場合があり、それらのルールはノード表示に解析されます。

これにより、CSSの経験豊富なユーザーは、ノードのコンテンツの複雑なCSSベースの設計を作成する可能性があります。

重要： CSS編集許可は、信頼できるユーザー（管理者）にのみ指定される必要があることに注意してください。この許可を持っている悪意のあるユーザーは、サイトの設計を破り、セキュリティの問題（XSS）も導入する可能性があります。

codepernode 素晴らしいですが、 CSSインジェクター インストールが簡単です（ライブラリは必要ありません）。このモジュールにより、コンテンツマネージャーは、PHPコードや情報ファイルにまったく触れずに、特定のページにCSSを動的に追加できます。 15777インストールは間違っていません - これはこのモジュールが機能する社会的証拠です。 CSSは、通常のキャッシュシステムでもキャッシュされています。

すでにパネルを使用しているため、ホームページパネルの各領域のパネルスタイルとしてCSSを追加する方が簡単かもしれません。そこにカスタムマークアップを定義し、サイト全体で再利用できます。

また、ホームページのページマネージャーバリアントルールの一般的なセクションに移動することもできます。ここには、現在のパネルのみにCSS IDとルールを追加するためのセクションがあります。

注：これはすべてD7にあるため、このアプローチは、以前のバージョンよりもパネルによってよりよくサポートされている可能性があります。

/ * BARTIKテーマを使用してコンテンツタイプに基づいてCSSを追加する例 */

function bartik_preprocess_node(&$variables) {
if(!empty($variables['node'])) {
    if($variables['node']->type == 'my_custom_content_type')
    {
      drupal_add_css(drupal_get_path('theme', 'any_theme_name') . "/css/foo.css");   
    }
  }
  // Some other code here
}

'template.php'ファイルにこれを追加してみてください。 

function mytheme_preprocess_page (&$variables)
{
  if (drupal_is_front_page()) {
    drupal_add_css(drupal_get_path('theme','mytheme'). '/css/front.css');
  } 
}

「Mytheme」をテーマディレクトリの名前に置き、「/css/front.css」をパスに置き換えます。

他のページから「front.css」ファイルを変更するには、「template.php」に追加してみてください。

function hook_css_alter(&$css) {
  if (!drupal_is_front_page()) {
    unset($css[drupal_get_path('theme', 'mytheme') . '/css/front.css']);
  }
}

繰り返しますが、「mytheme」をテーマディレクトリの名前に置き換えます。

フロントページから「styles.css」を設定する必要がある場合は、これら2つのコードを組み合わせるだけです。

フロントページに「styles.css」なしで「front.css」が必要であると仮定しましょう。コードは次のようになります：

function mytheme_preprocess_page (&$variables)
{
  if (drupal_is_front_page()) {
    drupal_add_css(drupal_get_path('theme','mytheme'). '/css/front.css');
  } 
  else {
    drupal_add_css(drupal_get_path('theme','mytheme'). '/css/styles.css');
  }
}

function hook_css_alter(&$css) {
  if (drupal_is_front_page()) {
    unset($css[drupal_get_path('theme', 'mytheme') . '/css/styles.css']);
  }
  else {
    unset($css[drupal_get_path('theme', 'mytheme') . '/css/front.css']);
  } 
}

また、「Mytheme」を交換してください。

これが役立つことを願っています。

touching template.phpを完全にスキップして、テーマの.infoファイルに別のアイテムを追加するだけでした

あなたのスタイルシートが入っているとします css/foo.css.

これは、Theme_name.infoファイルの外観です。

name = Theme Name
...
stylesheets[all][] = css/foo.css

その後、メインのスタイルシートでキャッシュすることで利益を得ます。これはあなたのホームページのためであると思っているので、理にかなっています。

Drupalアプローチは別として、HTML5ボディの中に短いCSSだけが必要な場合、CSSスコープ属性があります。見る https://stackoverflow.com/a/4607092/195812

このソリューションは、コードの編集とより多くのモジュールのインストールを避けます

ボディタグにページノードを印刷できます

<body page-node-26419 ...>

その後、制限できます 

body.page-node-26419 {
    background: red
}

これは、わずかな迅速な変更に役立ちます

ライセンス： CC-BY-SA と 帰属
所属していません drupal.stackexchange
scroll top