このレインドロップステーマは、色、背景、枠線、グラデーション等のスタイルが、すべてヘッダーに埋め込まれています。
この事で、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
raindrops_embed_meta関数のお仕事
この関数の、もともとの仕事は、シングルページで、cssという名前のカスタムフィールドを作れば、スタイルをヘッダーに自動的に埋め込んだり、metaという名前のカスタムフィールドに、metaタグブロックを埋め込んだり、javascriptという名前のカスタムフィールドで、スクリプトの埋め込みを行うためのものです。
これらの結果は、wp_head()が実行されるタイミングで埋め込まれるので、</head>の直前にlink エレメントを埋め込むというのは、本来の目的から行くと、ちょっとというところがあります。
実際問題公式テーマという観点では、wp_head()は</head>の直前になければならないというルールがあります。
その場合は、wp_enqueque_style()関数を使ってみてください。
