• カテゴリー別アーカイブ 予告
  • 予告:Raindrops1.459 関連投稿が表示されるようになります。

    Raindrops1.459で、個別投稿ページで「関連投稿の表示機能を追加します」

    この機能は、デフォルトで表示されますので、プラグイン等で関連投稿を表示している場合は、停止してください。

    関連投稿を表示するに至った経緯

    Raindropsテーマに関連するサイトを、いくつか運営していたのですが、ある時期にサーバーの負荷が高めで推移してしまい。レンタルサーバーで帯域制限がかかるようになった時期がありました。

    関連投稿を表示するプラグイン、アクセス解析や購読ランキングのプラグインを使用していましたが、これらの使用をあきらめることになりました。

    これに代わる、負荷があまりかからない、簡単な関連投稿を表示する機能が必要で、テーマで実装する事にしました。

    とても、簡単なものですので既に、関連投稿表示のためのプラグイン等をご利用中の方には、物足りなさもあるかと思います。

    カスタマイザーの設定で、機能を簡単に停止する事もできますので、ご判断ください。

    関連投稿の表示ロジック

    関連投稿の表示は、最近の投稿、投稿で設定されたカテゴリーの記事、投稿で設定されたタグの記事を表示します。

    デフォルトカテゴリーしか設定されていない場合、最近の投稿を、関連投稿として表示します

    カテゴリーがデフォルトカテゴリー以外に1件設定されている場合、そのカテゴリー一覧を指定件数表示します。

    カテゴリーが、デフォルトカテゴリー以外に複数件設定されている場合、カテゴリーの中から、カテゴリーカウントの最も多いカテゴリーの一覧を指定件数表示します。

    カテゴリーの他に、タグが設定されている場合、タグのカウントと、カテゴリーのカウントを比較して、カウントの多いカテゴリまたはタグの一覧を表示します。

    カテゴリーカウント、タグカウントの最も多いもので比較して、同じカウントなど、比較ができない場合は、カテゴリーの総数と、タグの総数を比較して、多い方の一覧を表示します。

    いずれも、一覧には、個別投稿記事を含みません。

    このロジックは、カスタマイザーの関連投稿セクションの「関連性のキー」が自動の場合に適用されます。カテゴリーやタグとの関連性で、表示を設定する事もできます。

    表示方法の設定

    カスタマイズ/外観/関連投稿 セクションで、表示方法の設定が出来ます。


  • 予告:Raindrops1.436 ヘッダー画像に、添付画像、アイキャッチがセット可能

    Raindrops1.436では、ヘッダー画像に、投稿のメディアからアップロードした画像や、アイキャッチ画像をセットできる機能を追加します。

    アイキャッチ画像

    特定の条件下で、ヘッダー画像に指定することが出来ます。

    その条件とは、「 カスタマイザー / 外観 / アイキャッチ画像 / シングル(投稿、ページ)」が「隠す」を選択されている場合

    アイキャッチ画像を設定後、下書き保存ボタンを押すと(まだ、ajax対応していませんので、下書きボタンなどを押して編集中のページをリフレッシュする必要があります)

    featured-image-to-header

    「この投稿のカスタムヘッダー画像」の項目で、アイキャッチ画像を選択するとヘッダー画像として表示されるようになります。

    添付画像

    投稿のメディアの追加から画像をアップロードし、「下書きとして保存」ボタンを押すと アップロードした画像が、「この投稿のカスタムヘッダー画像」の画像一覧に追加されますので、その画像をクリックして(クリックすると、画像下にグリーンの線が表示されます)保存していただくと、ヘッダー画像に指定した添付画像が表示されます。
  • Raindrops1.417 input要素をp要素で囲う処理を停止します。

    CSS3を使う事で、CSSだけでイベントを処理するような事が 兄弟セレクタと、:checked 擬似クラス セレクタを組み合わせることで、比較的簡単にできるようになっており、最近、そういった事例の紹介等も増えています。

    現状では、input要素が自動的にp要素で囲まれる処理がwpautop関数により行われるため、投稿内でこのようなカスタマイズを行う上での障害になる可能性があります。

    このような事から、inputをp要素でラップする処理を停止する事にします。


  • 予告:Raindrops1.415にclear-1~clear-3クラスを追加します。

    Raindrops1.415では、投稿本文用に clear-1, clear-2, clear-3クラスを追加します。

    新規追加クラスの追加理由

    WordPressでは、投稿にメディアを追加する事が簡単にできますが、これらメディアを追加した場合 多くは左寄せや右寄せ等のfloatスタイルが設定されます。

    実際に、画像要素を追加した場合の表示は以下のようなものです。

    header-leaf.jpg

    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.

    clearクラスを追加して、フロートを解除した場合の左上の画像との位置関係はこのようになります。フロートを解除した このp要素と画像との位置関係を調整しようとしても、marginの設定は出来ません。これは、おかしな挙動ではなく正常な働きで、marginが有効に働くためには、以下のようなソースが必要になります。

    例1

    このようにすると以下のように表示されます。
    header-leaf.jpg

    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.

    clearクラスを追加して、フロートを解除した場合の左上の画像との位置関係はこのようになります。フロートを解除した このp要素と画像との位置関係を調整しようとしても、marginの設定は出来ません。これは、おかしな挙動ではなく正常な働きで、marginが有効に働くためには、以下のようなソースが必要になります。

    例2

    clear クラスにmargin-top:3emを追加したものが以下です
    header-leaf.jpg

    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.

    clearクラスを追加して、フロートを解除した場合の左上の画像との位置関係はこのようになります。フロートを解除した このp要素と画像との位置関係を調整しようとしても、marginの設定は出来ません。これは、おかしな挙動ではなく正常な働きで、marginが有効に働くためには、以下のようなソースが必要になります。 以上のように、フロート要素に続く clearクラスが追加された要素は、そのままだとマージンの調整をすることが出来ないという問題に対応する事が必要と考えました。 ブロック要素で囲むことで対応する事が基本的な解決ですが、これをクラスを追加するだけで見た目を調整できるようにするというのが今回の変更です。

    clear-1の適用例

    header-leaf.jpg

    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.

    clear-2の適用例

    header-leaf.jpg

    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.

    clear-3の適用例

    header-leaf.jpg

    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. 以上 clearクラスを適用した場合に、上部フロートメディアとの間隔をコントロールする新しいクラス clear-1,clear-2,clear-3の概略を紹介させていただきました。 活用を検討しただけますようお願いします。

  • Raindrops1.415 カテゴリー、タグの自動色分け機能を追加します。

    raindrops-1-415

    この機能は、サイドバーカテゴリウィジェット、各投稿のカテゴリリンクに、それぞれに色を割り当てるものです。

    カテゴリーの投稿数の多いものから、赤、少なくなるにしたがって 緑 青とそれぞれのカテゴリーが色分け表示されるようになります。

    この機能の有効無効を切り替える方法

    管理パネル/外観/カスタマイズ で カスタマイズページを開きます。

    カスタマイザーの 外観/投稿 下から2番目の Enable Color-coded category, Enable Color-coded Post Tag で有効無効を切り替えることが出来ます。

    投稿の特性に応じたカスタマイズのヒント

    WordPressは、もともとブログのコンテンツを表示するために最適化されたCMSですが、実際の利用場面では、投稿の日付よりもカテゴリなどとの関係性が強い記事を扱っている場合も少なくないと思います。

    日付や制作者よりも、カテゴリーやタグを目立たせたいという場合には、カテゴリーや投稿日のブロックを移動して、目的によりフィットする表示方法を選択することが出来ますので、併せて活用していただくといいと思います。

    投稿の投稿日や、カテゴリーの位置を置き換える方法

    同じく、カスタマイザーの外観/投稿 で「投稿者や日付のブロックの位置」、「投稿の下部にある、カテゴリやタグを表示するブロックの位置」 で設定できますのでご活用ください

    表示例

    posted-in-first

  • Raindrops1.414 個別投稿毎のCSSラッパークラスを追加可能に変更します

    Raindrops1.414では、個別投稿毎のarticle要素の親要素内にCSSクラスを追加できる仕組みを追加します。

    この変更によって、投稿をカテゴリーごとに投稿全体のデザインを変更したり、特定の投稿投稿全体にスタイル指定されたに特別なデザインを追加するといった事が可能になります。

    従来からある投稿CSSエディタの限界

    従来より、レインドロップステーマは、個別投稿毎にスタイルエディタが付属しており、投稿毎のスタイルを指定することが出来ます。

    例えば、CSS Noteは、Raindropsのチャイルドテーマを利用しており、投稿毎のスタイルは、ほとんどこのスタイルエディタを使って記述したものです。

    このようなエディタを使ってボタンとか、投稿本文内で使用する要素のスタイルであれば簡単なのですが、スタイルをいちいち書かなければらないという面倒くささがありました。

    投稿全体にわたる特別なスタイルをあらかじめCSSクラスで指定しておき必要な投稿で適用するという事が出来ると、さらに便利になりそうです

    このため、raindropsの記法に変更を加えることにしました。

    従来は、color_type,とcol属性だけでしたが、

    下のようにclass属性を追加可能にします

    このクラス属性がある場合 article の親要素にクラスを追加します。

    例えば、こんな感じです。

    リスト表示(ループ時)


    個別投稿

    フィルターを使ったクラスの追加を可能にします。

    以下は、functions.phpに追加するフィルターの例です。

    上記の記法が使われていない投稿にクラスを追加します。

    以下のフィルターは、カテゴリースラッグが unit-test である場合にクラス rd-card testを追加する例です。

    コンディショナるタグを使う事で、ある特定の投稿の親要素にクラスを追加して、特別なスタイルで表示可能であることを理解いただけると思います。

    このようなカスタマイズを行った場合、投稿エディタ(ビジュアルエディタ)の幅がカスタマイズに即したサイズにならないという問題があります。

    ビジュアルエディタの幅は、Raindrops内で計算された値で表示されますので、場合によっては エディタの表示幅を変更する必要が出てくるかもしれません。

    raindrops_content_width フックや editor-style.cssでのスタイルの変更が必要になる場合もあります。

    Raindrops1.414では、カスタマイズのサンプルスタイルとして お試し用に rd-card クラスを追加します。以下のスタイルです。


  • Raindrops1.411minified CSS,JS自動読み込み機能を追加

    Raindrops1.411で圧縮CSS,JSの自動読み込みをサポートします

    Raindrops1.411では、以下の4つのグローバル変数を追加します。

    この変数に値を設定していただくことで、親テーマ,チャイルドテーマで 圧縮されたCSS、JSの自動読み込みを行います。

    デフォルトでは、以下のようにセットされています。

    デフォルトでは、fonts.cssの テーマ直下にある圧縮ファイル fonts-min.css が存在する場合には、style-min.css を読み込みます。

    カスタマイズする場合は、functions.php(親テーマまたはチャイルドテーマ) の先頭に、これらの変数と値を記述してください。

    $raindrops_load_minified_css_js が false の場合は、圧縮ファイルは読み込みません。 $raindrops_minified_files_js_dir,$raindrops_minified_files_css_dir に 半角英数 - がセットされている場合は、テーマ直下の

    指定されたディレクトリ内に fonts-min.cssが存在する場合それを読み込みます。


    をセットした場合は、

    テーマホルダー/min-css/fonts-min.css が存在する場合、それを読み込みます。

    ( min-css等の名称にディレクトリセパレータ等は使用できません )

    圧縮ファイルは、テーマに添付されません。ユーザーの皆様の必要性に応じて作成してください。