web-dev-qa-db-ja.com

wp_enqueue_styleはスクリーニングだけを強制させません

私は取り組んできたテーマのスターターとしてRootsを使用しています。それから私はprint.cssファイルを生成しました、しかし、Chromeの場合、それはまだbootstrap-respond.cssクエリを使っていて、物事をいじっています。

SOに対するこの 答え は問題を説明しています、そしてそれが私が問題を抱えているものを修正したことを私は知っています（それを試しました）。

これが使われるとどうなりますか

wp_enqueue_style('roots_bootstrap_responsive_style', '/css/bootstrap-responsive.css', array('roots_bootstrap_style'), null, 'screen');

いつも出す

<link rel="stylesheet" href="/css/bootstrap-responsive.css">

見せるのに本当に必要なとき

<link rel="stylesheet" href="/css/bootstrap-responsive.css" media="screen">

W3にリストされている 他のタイプのいくつかを試してみると 、できないものもあります（テレビでは何も表示されませんが、印刷されます）。 。たとえば、私の印刷物はうまくいきます。

wp_enqueue_style('roots_print_style', '/css/print.css', false, null, 'print');

これを機能させるにはどうすればよいですか。 wp_enqueue_styleを使用せずにヘッダーでこれを実行するだけですか、それとも何かが足りないのですか？私はエラーが出ない、そしてWP 3.5.1を使う。

wp-enqueue-styletheme-roots
1
jmlumpkin

私は答えを見つけました。 Rootsには、メディアタイプとしてprint以外のすべてを制限するroots_clean_style_tag があります。

私はスクリーンを許可するために私のものを少し更新しました：

function roots_clean_style_tag($input) {
  preg_match_all("!<link rel='stylesheet'\s?(id='[^']+')?\s+href='(.*)' type='text/css' media='(.*)' />!", $input, $matches);
  // Only display media if it's print
  if($matches[3][0] === 'print'){
      $media = ' media="print"';
  } elseif ($matches[3][0] === 'screen'){
      $media = ' media="screen"';
  }
  else{
      $media = '';
  }

  //$media = $matches[3][0] === 'print' ? ' media="print"' : '';
  return '<link rel="stylesheet" href="' . $matches[2][0] . '"' . $media . '>' . "\n";
3
jmlumpkin