WordPress Theme Raindrops

Raindrops1.410では、レスポンシブサイドバーと呼ぶ　指定したブラウザ幅に連動したサイドバーを折りたたみ機能を提供します

設定方法

カスタマイザー / 外観 /レイアウトとサイドバーの項目に、設定項目が追加されます。

オレンジの枠線で囲まれた部分が新しく追加されたコントロールです。

デフォルト設定では、

デフォルトサイドバーのレスポンシブサイドバーは、有効になっていません。

エキストラサイドバーは、レスポンシブサイドバーが有効になっています。

機能の特徴

サイドバーの折り畳みを有効にする（または、しない）設定と、ブレークポイント（サイドバーの折り畳みが発生する、ブラウザ幅の指定）を設定できます。

実際の表示例

デフォルトサイドバー、エキストラサイドバー両方を、レスポンシブサイドバー設定したのが以下の画像です。

プライマリーメニューの両端のハンバーガーアイコンをクリックすると、サイドバーを表示します。

Demo

この変更の効果

従来Raindropsは、ブレークポイントが640pxだけで、モバイルと、PC表示を切り替えてきましたが、

これだけですと、コンテンツの領域が制限されて、エキストラサイドバーの幅設定を、大きくすると、640px近傍では、非常に見づらくなっていました。

このため、指定したブラウザ幅で、サイドバーを折りたたむことで、閲覧のしやすさを確保しようと考えました。

レスポンシブサイドバーを使いたくない場合は

カスタマイザーで、Responsive Default Sidebar、Responsive Extra Sidebar、の項目で no を選んでいただくと、従来通りの動作になります。

Raindrops1.410では、IE8　以下のブラウザの表示を　簡易表示に変更します。

従来は、IE8以下のブラウザに対しては、通常のレスポンシブレイアウトと異なる　フルードレイアウトで表示してきましたが、

スティキーメニュー、フレックスレイアウトなど、一般化している新しい機能の追加に対応が困難になってきています。

IE8以下のブラウザでは、簡易表示機能にて、コンテンツの表示を行っていくことにしました。

簡易表示機能の詳細については、「簡易表示機能」を参照してください。

簡易表示を行いたくない場合

raindrops/lib/vars.php 317行付近の以下の記述を見つけていただき

/**
 * No support IE8
 * Showing fallback style.
 * @since 1.410
 */
$http_user_agent = filter_input(INPUT_ENV,'HTTP_USER_AGENT');
		
if( preg_match( "|(MSIE )([0-9]{1,2})(\.)|si", $http_user_agent, $regs ) && isset( $regs[2]) && absint($regs[2]) < 9 ) {

	$raindrops_fallback_human_interface_show = true;
}

$raindrops_fallback_human_interface_show = true;

　のtrue をfalse　に変更してください。

Raindrops1.404では、従来からあるピンナップエントリーウィジェットを使ってグリッド表示が出来るようになります。

ピンナップエントリーウィジェットで新しくできるようになる事

このようにGrid形式で、投稿を表示できるようになります。

表示を実現する方法

この画像サンプルの場合、600px核の画像を、配置中央 ( aligncenter )で、それ以降サンプル文字列を記述した　3つの投稿を作成します。

ピンナップウィジェットの、設定パネルは上記のようになっており、サンプル画像を表示している状態です。

オレンジの枠線部分が、新しく追加された項目です。

タイトル（Title）は、グリッド表示のグループタイトルで、ディスプレイタイプ（Display Type）グリッドを選択した場合のみ表示します。

ディスプレイタイプ（Display Type）を選択していただくと、見本画像のようにグリッド表示します。

これらの各投稿には、動画や、スライドシェア等の　Oembed メディアなども表示できます。

<!–more–>を使っていただくと、それ以降は埋め込みには表示されません