WordPress Theme Raindrops

Raindrops 1.465 更新概要

今回の更新は、予告:Raindrops1.464でアーカイブページのグリッド表示 – WordPress Theme Raindropsでご案内していた、グリッドレイアウト機能です。

グリッドレイアウトを設定する場合、併せておすすめなのが、カスタマイズ/外観/アイキャッチ画像で、「投稿のアイキャッチ画像の強調設定利用の可否」を選択すると設定セクションが表示されますので、アイキャッチ画像の位置： 投稿タイトルの上部　アイキャッチ画像　サイズ：medium largeを設定していただくと、トップページのアイキャッチ画像がカード型で表示されます。

この機能は、最新の投稿を他の投稿よりも目立たさせるというのが目的の機能です。カテゴリー一覧などでも、最新の記事が含まれている場合は、カード型で表示、古い記事は、48px核のアイキャッチサイズとなり、他の記事よりも目立たせることが出来ます。

version: 1.465 Overview of Changes

Added New Presentation Grid Layout for Archives, Posts Archive
Setting
Dashboard / Appearance / Customize / Excerpt
Home Listed Entry Contents, Category Archives Entry Contents, Search Result Entry Contents
Show Excerpt with Grid Layout

Relate Settings width filter.

Apply Grid Layout another archives. ex: tag archive, post format, custom post type

functions.php

$raindrops_where_excerpts = array( 'is_tag','is_tax','is_post_type_archive' );
$raindrops_change_all_excerpt_archives_to_grid_layout = true;

is_tag for tag archive
is_tax for post format archive
is_post_type_archive for custom post type

Change Page width conditional.

//fullsize responsive
add_filter('raindrops_theme_settings_raindrops_full_width_max_width','custom_page_width_control');
//box responsibe
add_filter('raindrops_theme_settings_raindrops_fluid_max_width','custom_page_width_control');

function custom_page_width_control($page_width){

if( is_singular() ) {
return 1000;
}
return $page_width;
}

Insert Special Content in the loop

add_action( 'raindrops_in_the_loop_1','my_test',10,2);

function my_test($content,$num) {

if( is_archive() ) {
echo "<li style=\"flex-basis:100%;background:rgba(241, 196, 15,.3);\">
<div><article><h1 style=\"text-align:center\" class=\"f40 b7\">$num</h1></article></div>
</li>";
}
}

Custom Responsive Break Point

add_filter( 'raindrops_grid_break_point_small', 'custom_raindrops_grid_break_point_small' );
add_filter( 'raindrops_grid_break_point_mobile', 'custom_raindrops_grid_break_point_mobile' );
add_filter( 'raindrops_grid_break_point_desctop', 'custom_raindrops_grid_break_point_desctop' );

function custom_raindrops_grid_break_point_small($break_point){
return 640;
}
function custom_raindrops_grid_break_point_mobile($break_point){
return 1280;
}
function custom_raindrops_grid_break_point_desctop($break_point){
return 1400;
}

Filter CSS for Grid

raindrops_style_archive_grid

Known Issues

Safari: Browser Can not support Grid,Show list view,
ie11: The height of the post title is limited to 300px.
ie9: Browser Can not support Grid,Show list view,
ie8: Use Raindrops fallback view. Only readability

Raindrops 1.462 更新概要

今回の変更は

TinyMCE(投稿編集エディタ）のスタイルや、表示幅の変更です。

RaindropsテーマのCSSクラス、rd-square, rd-round, centered　クラスが、エディターに反映するようになりました。

カスタマイズ/外観/レイアウトとサイドバーの、コンテンツ幅　キープ又はフィットの設定に応じて、エディタの表示領域が変更可能になりました。

（この設定は、1カラム表示の時に効果があります。）

関連投稿の表示で、日別アーカイブのリンクの不具合が取り切れていなかった問題を修正しました。

1カラム フルサイズレスポンシブ ミニマル配色を使用した場合に、アーカイブページでのボックスシャドーを削除しました。

カスタマイザープリビューで、関連投稿の表示部分に、設定セクションへのリンクを表示するようにしました。

主に、mark要素などでの　配色クラスを追加しました。

例

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<p >Lorem ipsum dolor <span class="mark-blue">sit amet, consectetur adipisicing elit, sed do eiusmod tempor</span><span class="mark-yellow"> incididunt ut labore et dolore magna aliqua.</span><span class="mark-red"> Ut enim ad minim veniam, quis nostrud exercitation ullamco</span> laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui <span class="mark-green">officia deserunt mollit</span> anim id est laborum.</p>

<p ><span class="mark-yellow">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></p>

<div>
<mark class="notice">Lorem ipsum dolor</mark>
<mark class="alert">Lorem ipsum dolor</mark>
<mark class="info">Lorem ipsum dolor</mark>
<mark class="blue">Lorem ipsum dolor</mark>
</div>

早速ですが、バグがありました。
可能であれば、次のバージョンまで使用を控えてください。

Hotfix

style.cssのhttps://github.com/tenman/raindrops/blob/master/style.css#L7584-L7597
の部分を以下のように変更してください。
（mark.alert,mark.notice,mark.info,mark.blue,のクラス追加とpadding-top:0;padding-bottom:0;の追加です）

mark.alert,mark.notice,mark.info,mark.blue,
mark.blue, mark.yellow, mark.green, mark.red,
.mark-blue, .mark-yellow,.mark-green,.mark-red{
    -webkit-box-decoration-break: clone;
    -o-box-decoration-break: clone;
    box-decoration-break: clone;
    padding-left:.5em;
    padding-right:.5em;
    padding-top:0;
    padding-bottom:0;
    margin-left:1px;
    margin-right:1px;
    line-height:1.65;
    box-sizing:border-box;
    display:inline-block;

}

次回の更新で修正させていただきます。

mark 要素クラスと、汎用のmark-** クラスのテスト　Raindropsテーマ – CSS note

version: 1.462 Overview of Changes

Added Style for TinyMCE

for .rd-square, rd-round, centered classes

Modified css, customizer arg name, function names, langages

relate posts to related posts

Fixed Related Posts, day archive link linked wrong.

Modified TinyMCE editor content width

Customize / Presentation / Layout and Sidebars

When the value of Content Width is set to keep or fit, the width of the TinyMCE editor will also be changed accordingly.

Fixed a problem that the color scheme is not applied when the tag cloud widget is set in the footer widget area

Modified In the customizer preview, add an edit link to Related Post

Removed CSS box shadow ( full width responsive + content width:fit )

Add CSS Class for mark elements

Sorry, CSS Class for mark has BUG. Please wait next version.

Raindrops 1.461 更新概要

今回の変更は、「Raindropsがライブになりました – WordPress Theme Raindrops」で、関連投稿の、日付が正常に表示されない問題を修正しました。

version: 1.461 Overview of Changes

Fixed issue where publish date in relate posts is not displayed correctly

Raindrops1.459に、英語版で使用した場合に致命的なバグがある事がわかりました、1.460が、既にライブになっていますので、こちらをご使用ください

また、1.460に、関連投稿の投稿日が適切に表示されない問題が見つかっています。こちらについては、次回のアップデートで修正します。

Raindrops 1.459 更新概要

今回の変更は、予告していました関連投稿の表示機能の追加です。

予告:Raindrops1.459 関連投稿が表示されるようになります。 – WordPress Theme Raindrops

サファリブラウザで、ヘッダー画像に、混色フィルタを使用した場合、ヘッダー画像が表示できなくなる問題を修正しました。

 

version: 1.459 Overview of Changes

Added relate posts block in single post.

Add Customizer Section

Cusotomize / Presentation / Relate Posts

Note:Related posts are displayed by default. If it is not necessary, it can be hidden by the customizer.

Fixed Safari browser, Header image can not be displayed depending on settings