このレインドロップステーマは、色、背景、枠線、グラデーション等のスタイルが、すべてヘッダーに埋め込まれています。
この事で、htmlソースは、見られたもんじゃありません。
その理由と、ユーザーの方のカスタマイズについて考えていこうと思います。
なぜ、ヘッダーに埋め込まれているのか?
このテーマは、ワードプレス本体からインクルードをしないように作っているから、そうなってしまうのです。
自分でテーマをカスタマイズする人は、WordPress以外のphpで、
<?php /* * 外部ファイルで、ワードプレス関数を使う */ require_once( dirname(__FILE__) . '/wp-load.php' ); ?>
などとすれば、WordPress 関数を自由に呼び出したりすることができますが、
公式テーマは、セキュリティを下げる可能性があるために、requireなどのPHP関数を使った呼び出しが禁止されています
しかし、配布を目的にしないで、利用するという場面では、このようなカスタマイズは、ごく一般的に行われていることでしょう。
マルチサイトでなければ、index.phpと同じ階層に
<?php error_reporting(0); require_once( dirname(__FILE__) . '/wp-load.php' ); if(function_exists('get_option')){ header('Content-type: text/css'); $raindrops_options = get_option("raindrops_theme_settings"); echo $raindrops_options['_raindrops_indv_css']; } ?>
とすることで、外部スタイルを作成できます。
マルチサイトの場合は、テーマファイルの階層で、
e.g lib/design.php
<?php include_once("../../../../wp-load.php"); header('Content-type: text/css'); $raindrops_options = get_option("raindrops_theme_settings"); echo $raindrops_options['_raindrops_indv_css']; ?>
このような形で、スタイルシートの表示ができることを確認できたら、仕上げです。
functions.phpを開き raindrops_embed_meta関数を探します。
/** * insert into embed style ,javascript script and embed tags from custom field * * * * */ function raindrops_embed_meta($content){ $result = "";; global $post; $raindrops_gallerys = '.gallery { margin: auto; overflow: hidden; width: 100%; } .gallery dl { margin: 0px; } .gallery .gallery-item { float: left; margin-top: 10px; text-align: center; } .gallery img { border: 2px solid #cfcfcf;max-width:100%; } .gallery .gallery-caption { margin-left: 0; } .gallery br { clear: both } .gallery-columns-2 dl{ width: 50% } .gallery-columns-3 dl{ width: 33.3% } .gallery-columns-4 dl{ width: 25% } .gallery-columns-5 dl{ width: 20% } .gallery-columns-6 dl{ width: 16.6% } .gallery-columns-7 dl{ width: 14.28% } .gallery-columns-8 dl{ width: 12.5% } .gallery-columns-9 dl{ width: 11.1% }'; $css = $raindrops_gallerys; //$raindrops_options = get_option("raindrops_theme_settings"); //$css .= $raindrops_options['_raindrops_indv_css']; $css .= raindrops_warehouse('_raindrops_indv_css'); $background = get_background_image(); $color = get_background_color(); if(!empty($background) or !empty($color)){ $css = preg_replace("|body[^{]*{[^}]+}|";,"";,$css); } if(empty($css)){ $css = "cannot get style value check me"; } $css = str_replace(array("\n","\r","\t",'&"','--'),array("","","";,'""',''),$css); if (is_single() || is_page()) { if(have_posts()){ while (have_posts()) : the_post(); if(RAINDROPS_USE_AUTO_COLOR !== true){ $css = ''; } $css .= get_post_meta($post->ID, 'css', true); if (!empty($css)) { $result .= '<style type="text/css">'; $result .= "\n/*<![CDATA[*/\n"; $result .= $css; $result .= "\n/*]]>*/\n"; $result .= "</style>"; } $javascript = get_post_meta($post->ID, 'javascript', true); if (!empty($javascript)) { $result .= '<script type="text/javascript">'; $result .= "\n/*>![CDATA[*/\n"; $result .= $javascript; $result .= "\n/*]]>*/\n"; $result .= "</script>"; } $meta = get_post_meta($post->ID, 'meta', true); if (!empty($meta)) { $result .= $meta; } endwhile; } }else{ if(RAINDROPS_USE_AUTO_COLOR == true){ $result .= '<style type="text/css">'; $result .= "\n/*<![CDATA[*/\n";; $result .= $css; $result .= "\n/*]]>*/\n"; $result .= "</style>";; } } echo $result; return $content; }
以下の行をコメントアウトすれば、ヘッダーに埋め込まれなくなります
$css .= raindrops_warehouse('_raindrops_indv_css');
ので、後は、
</head>の直前に
スタイルシートを呼び出せば終了です。
<link rel="stylesheet" href="外部ファイル化したスタイルのuri" media="all" />
Aside
この関数の、もともとの仕事は、シングルページで、cssという名前のカスタムフィールドを作れば、スタイルをヘッダーに自動的に埋め込んだり、metaという名前のカスタムフィールドに、metaタグブロックを埋め込んだり、javascriptという名前のカスタムフィールドで、スクリプトの埋め込みを行うためのものです。
これらの結果は、wp_head()が実行されるタイミングで埋め込まれるので、</head>の直前にlink エレメントを埋め込むというのは、本来の目的から行くと、ちょっとというところがあります。
実際問題公式テーマという観点では、wp_head()は</head>の直前になければならないというルールがあります。
その場合は、wp_enqueque_style()関数を使ってみてください。