2016/12にWordPress4.7には、「投稿の属性」によるテンプレートの機能が拡張、カスタマイザーには、カスタムCSSが追加、画像のalt属性の取り扱い方法の変更、
WordPress4.8では、テキストウィジェット等のウィジェットの機能の刷新、htmlコードウィジェット、メディアウィジェット、ビデオウィジェット
Wordpress4.9では、コードエディタの追加、ギャラリーウィジェットの追加、カスタマイザーのデザインスケジュール機能の追加 等々
テーマが対応すべき変更がたくさん行われました。更に、来年は Gutenbergプロジェクト(ワードプレスのエディタの刷新）がコアの実装を目標に活発な議論が進んでいるようです。
Raindropsも、テーマに直結するたくさんの変更に応えるべく、手探りをするように新機能への対応に追われた一年でした。テーマ独自の機能については、ベーシックな部分にフォーカスして、改善を行ってきました。
主な変更
raindrops_in_the_loop_loop_[番号] アクションフック
アーカイブなど、投稿をループ表示するページで、コンテンツの差し込みを指定した場所に行う事がメインのアクションフック
この変更の背景には、ここ数年のWEBサイトの傾向がモバイルサイトを対象として、従来のサイドバー+メインコンテンツというレイアウトから、1カラムのレイアウトを持つサイトに移行する傾向が見えてきたため、従来サイドバーに表示していたようなコンテンツを、ループ内に表示するといったカスタマイズのニーズに対応するものでした。
equal-height クラス
テーマのグリッド表示で、横並びの高さをそろえるクラス。
今年は、flexやgridが実用化して、年初には、必要と思っていましたが、年末には、古ぼけたものに感じるのは、私だけではないと思いますが、クラスを指定するだけイコールハイトにできるので、パターンを覚えていただけると、便利かもしれません。
1/3
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.
1/3
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.
trancate
行数を制限して表示するクラス
コンテンツが多いページでは、どうしてもある程度の面積にコンテンツをまとめなければならないといった事があります。この機能は、段落要素を指定した行数分だけ表示するためのクラスです。
the_excerptのような関数の出力が、レスポンシブで縦長に表示されて困るような場合に便利だと思います。
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 class="trancate" data-rows="5">lorem....</p>
mark
淡い色でマーカーぽい背景を作るclass
HTMLの強調というとアンダーラインだったりしますが、蛍光マーカーみたいな感じで強調する方法も最近よく見られるようになってきました。WEBサイトの記事のアクセントにいかがでしょうか
Lorem ipsum dolor sit amet,
<mark class="info f16">Lorem ipsum dolor sit amet, </mark>
mark 要素クラスと、汎用のmark-** クラスのテスト Raindropsテーマ – CSS note
raindrops_filter_page_column_control フィルター
カスタム投稿で、カラム数を設定するためのフィルター
Raindropsテーマは、カスタム投稿タイプでも特にテンプレートを追加することなく基本的な表示が行えるように実装していますが、レイアウトに関しては、カスタマイザー等で設定を持っていないので、PHPのフィルターでカスタマイズが出来るようにフィルターを作成しました。
カスタマイザー バーチカルリズム機能
本文内タイトルと段落間隔の調整
日本語ブログの場合は、段落間を広げて読みやすくしたいという根強い要望があります。そのような要望に応えられるよう実装しましたが、果たして使ってくれてる人はいるのでしょうか？
ヘッダー画像の自動トリミング
ヘッダー画像に、ブラウザ高さよりも高い画像がセットされた場合に、自動的にブラウザ高さでトリミング
レインドロップステーマは、ヘッダー画像を自由なサイズにすることが可能ですが、ブラウザの高さを超えるような縦長画像をアップロードした場合、すごくスクロールしないと本文にたどり着けません。
こんな場合は、ブラウザ高さで端折ってヘッダー画像をを表示する事にしました。
投稿本文内のtarget=”_blank”が指定されたリンクにrel=“nofollow noopener noreferrer”を追加
セキュリティ配慮の変更です。
カスタマイザー 関連投稿表示機能
投稿下部に、関連投稿をタグ、カテゴリーを比較して自動抽出
カスタマイザー 縦書き機能
日本語環境の場合、縦書きを有効にする
実際にどれぐらいの人が、縦書きをしたいと思っているか測りかねるところもありますが、今年になって、一般的なブラウザで何とか縦書き表示が実用的になってきましたので、実装しました。
縦書き有効の場合、縦書きの場合のスタイルだけ設定するための、body.witing-mode-mix-article横書きに切り替えた時だけようのクラス、body.writing-mode-standard-article
を追加
カスタマイザー ベースフォントサイズ見直し
ベースフォントサイズはRaindropsは13pxで小さめですが、最近大きくなりつつあるフォントサイズ違和感なく、レイアウト崩れなく対応のため、見直し
文字サイズを違和感なく変更するというのは、テーマにとっては難しい課題でした。機能そのものは従来からありましたが、工夫を重ねて実装してみました。
フィードバックを待ち焦がれる機能です。
特定のベースフォントサイズに対してのみスタイルを有効にするための、body.rd-basefont-[13-20]を追加
gutenberg 用のスタイル
gutenberg pluginの新エディタを使った場合のフロントエンドスタイルを、実装しました。これは、流動的
エディタの入力方法の変更は、テーマに大きな影響を与えます。従来簡単にできていたものが、出来なくなったり、操作方法に戸惑うユーザーも多く発生しそうです。グーテンベルグの機能ボタンなどに対応した、スタイルを整備するために始めました。
テーマが来年も生き延びられるかどうか、内心ドキドキです。
日本語環境で、デフォルト文字詰め可能なフォントに変更
Chromeの場合、noto_sans_jpを使っています。レスポンス等気に入らない場合はcssで変更してください。
文字詰めというのは、日本語の括弧の前後の空白などを制御して、きれいに文字を表示するテクニックですが、一部のブラウザで表示に問題がある事も確かです。安定した機能ではありませんが、チャレンジしています。
モーダルボックス タブボックス
raindropsのモーダルボックスに、youtube等の動画を再生中にボックスを閉じても、再生が続く問題を解消しました。