Raindrops の htmlソースが醜悪な理由

このレインドロップステーマは、色、背景、枠線、グラデーション等のスタイルが、すべてヘッダーに埋め込まれています。

この事で、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&quot;,&quot;\t",'&amp;"','--'),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/*]]&gt;*/\n";
                $result .= "&lt;/style&gt;";
                }
                $javascript = get_post_meta($post->ID, 'javascript', true);
                if (!empty($javascript)) {
                $result .= '<script type="text/javascript">';
                $result .= "\n/*>![CDATA[*/\n";
                $result .= $javascript;
                $result .= "\n/*]]&gt;*/\n";
                $result .= "&lt;/script&gt;";
                }
                $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/*&lt;![CDATA[*/\n";;
                    $result .=  $css;
                    $result .= "\n/*]]&gt;*/\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()関数を使ってみてください。


コメントは受け付けていません。