Raindrops1.414では、個別投稿毎のarticle要素の親要素内にCSSクラスを追加できる仕組みを追加します。
この変更によって、投稿をカテゴリーごとに投稿全体のデザインを変更したり、特定の投稿投稿全体にスタイル指定されたに特別なデザインを追加するといった事が可能になります。
従来からある投稿CSSエディタの限界
従来より、レインドロップステーマは、個別投稿毎にスタイルエディタが付属しており、投稿毎のスタイルを指定することが出来ます。
例えば、CSS Noteは、Raindropsのチャイルドテーマを利用しており、投稿毎のスタイルは、ほとんどこのスタイルエディタを使って記述したものです。
このようなエディタを使ってボタンとか、投稿本文内で使用する要素のスタイルであれば簡単なのですが、スタイルをいちいち書かなければらないという面倒くささがありました。
投稿全体にわたる特別なスタイルをあらかじめCSSクラスで指定しておき必要な投稿で適用するという事が出来ると、さらに便利になりそうです
このため、raindropsの記法に変更を加えることにしました。
従来は、color_type,とcol属性だけでしたが、
下のようにclass属性を追加可能にします
このクラス属性がある場合 article の親要素にクラスを追加します。
例えば、こんな感じです。
リスト表示（ループ時）
<ul class="index archives front-page index">
<li class="loop-1 loop-item-show-allways">
<div id="post-37122" class="rd-card test">
...
個別投稿
<div id="post-37122" class="rd-card test"> <article class="clearfix post-37122 post ...
フィルターを使ったクラスの追加を可能にします。
以下は、functions.phpに追加するフィルターの例です。
上記の記法が使われていない投稿にクラスを追加します。
以下のフィルターは、カテゴリースラッグが unit-test である場合にクラス rd-card testを追加する例です。
コンディショナるタグを使う事で、ある特定の投稿の親要素にクラスを追加して、特別なスタイルで表示可能であることを理解いただけると思います。
他
このようなカスタマイズを行った場合、投稿エディタ（ビジュアルエディタ）の幅がカスタマイズに即したサイズにならないという問題があります。
ビジュアルエディタの幅は、Raindrops内で計算された値で表示されますので、場合によっては エディタの表示幅を変更する必要が出てくるかもしれません。
raindrops_content_width フックや editor-style.cssでのスタイルの変更が必要になる場合もあります。
Raindrops1.414では、カスタマイズのサンプルスタイルとして お試し用に rd-card クラスを追加します。以下のスタイルです。
/**
* Example style
* raindrops 1.414
* start
*/
.rd-card{
}
.rd-card article{
width:600px;
max-width:100%;
border:1px solid rgba(127,127,127,.4);
margin:2em auto;
}
.rd-card .entry-title{
padding:.6em;
}
.rd-card .posted-on{
margin:1em;
}
.rd-card .entry-content{
padding:1em;
}
.rd-card .wp-post-image{
padding:0;
}
.rd-card .entry-title + .this-posted-in{
margin-left:1em;
}
.rd-pw-doc5.rd-col-1.single .rd-card{
margin-top:1em;
}
.rd-pw-doc5.rd-col-1.single .rd-card article{
padding:0;
}