WordPress Theme Raindrops 1.283, boots 1.283.0

Raindrops1.283, boots1.283.0 をレビュー申請しました。

チャイルドテーマの、互換性を向上するためのアップデートと、不具合の修正です。


boots テーマは、Raindropsテーマの子テーマで


( ワードプレスのチャイルドテーマというと、一般的には、ホルダーに、style.css を追加するシンプルなものがだと思います )


公式テーマとしてのチャイドルテーマは、アップデートしずらい(チャイルドテーマをユーザーはたぶん上書きしているから)



なので、親テーマのアップデートの時に、チャイルドテーマの不具合を、Fix出来たり、もう一歩進めて、チャイルドテーマ独特のレイアウトやオプションの値を持たせることが出来るテーマとして作っているのですが、



そういった作り方を試していると、やれ、変更が反映しないとか、親テーマに機能をどんどん追加していくと、うまく動作しないといった問題が出てきます。



手がかからないという点では、style.cssを追加したぐらいの、チャイルドテーマの方が扱いやすい面もあり、なかなか手が付けられていないでいましたが、やっと手を入れることが出来ました。



何かをやり始めると、最初のうちは、「お”~すごいじゃん」みたいなことも、時間が経過すると、複雑すぎるとか、手間がかかりすぎるとか、たくさん出てきます。



やめてしまう事は、簡単ですが、うまく自分をだましだましやっていくと、結局面倒くさかっただけなんだなぁ なんて思い当たる。



WordPress Theme Raindrops1.280 html in excerptの使い方

まだ、レビューの結果は出ていませんが、次期バージョン1.280での概要表示機能について説明します。


Raindropsテーマ1.280に html in excerpt という概要表示の見せ方を変更する機能を追加しました。




html in excerptは、通常の概要表示とは、何が違うのか?



WordPressの標準の概要表示機能の仕組み



WordPressの投稿作成ページには、タイトル、本文、抜粋の入力項目があります。


抜粋項目に、入力が行われていない場合、


抜粋( 概要 )は、投稿本文から、html要素を取り除き、そのうえで、英語の場合は、単語数をカウントし、指定単語数に達するまで表示したら、表示を停止します。


日本語環境で利用する場合、単語数でカウントして表示を停止する事が困難なため、WP Multibyte Patch等で日本語環境では、指定文字数で切り詰めた表示を行うといった事が、行われています。


いずれにしても、概要表示は、html要素を除去して、一定の文字数(または、単語数)で丸めて表示する機能という事が言えます。


この概要表示を行うメリットは、


  • ループページでの、表示スピードの向上
  • レイアウト枠の中に、納まりがいい

といった事になります。

デメリットは、

  • htmlタグが除去されることによって、文字列と、段落要素だけしか表示されない。
  • 投稿フォーマット、画像などの表示ができなくなる。
  • 音声プレイリスト、ギャラリー表示が出来ない

等々、最新のワードプレスで実装された機能の多くは表示できなくなる


投稿フォーマットや、プレイリスト等では、文字列が省略されることが結構あるのではないかとも思います


このような場合には、タイトルだけといった事も起こってくるでしょう。


以下のスクリーンショットを見てみてください。



全文を表示した場合



f:id:tenman:20150327113614j:image



WordPressの概要表示


f:id:tenman:20150327113615j:image


Raindropsの html in excerpt


f:id:tenman:20150327113616j:image



html in excerptは、

<img src="http:example.com/image.jpg" alt="sample image" />

<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>

のように、テキストの前方に記述された要素は、常に表示されます

<img src="http:example.com/image.jpg" alt="sample image" />

<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>

<img src="http:example.com/image.jpg" alt="sample image" />

のような構造の場合は、文字列の切りつめが終了してしまった場合は、後方の画像は表示されません


といった、従来の WordPressの概要文よりも、ソフトに働くという特徴があります。


どちらか、もちろん選択することが出来る機能です。














WordPress Theme Raindrops1.278-1.280

先日 Raindrops1.280のレビュー申請を行った。


Raindrops1.278の申請中に、いくつかのバグが見つかったためです。


Raindrops1.278は、概要文の見直し柔軟なサイトタイトルの表示の変更のために、いくつかのアイディアを絞り出しました。


概要文の見直しのメインは、htmlを含んだ概要文の出力が可能になったという点です。


htmlをキープした状態で文字列を取り出しその文字列の長さが一定のところまで表示し、html要素は補完してやるという仕組みです。


html in excerptと呼んでいるこの機能を使うメリットは、概要文で google fontsが表示できたり、画像などを含めることが出来るという点で、よりコンテンツの内容を表現しやすくなったという点です。



WordPressの、日本で制作されているテーマには、公式、非公式を含め 多くのテーマで共通した特徴があります。



それは、ループページの表示パターンです



そのパターンとは

投稿タイトル

概要文

概要文の続きを読むリンク

左側に、アイキャッチ画像が含まれていることも多いわけですが、



ループページに、概要文を掲載する事で、本文を表示するより、ページのロード時間はだいぶ短縮できます。



過去、「ワードプレスの表示は、もさっとしていて長い時間がかかる」などと揶揄されてきましたが 「 そういう部分に対する日本的工夫 」なのかもしれないと私は考えています。




Raindropsも単純な概要表示や、概要続きを読むリンクも実装し、見慣れたスタイルの実装が簡単になるのではないかと思います。

Raindropsテーマでは、表示スピードの向上のために、Quick Cache プラグイン( 改名して、zenCache )の使用をお勧めしています。


このプラグインは、テーマにインストーラがありますので、そちらでインストールして利用していただくと、最低限の日本語訳等、テーマでチューンナップが自動的に行われます。



サイトタイトルの表示変更の、最も重視した点は、google fontsを CSSクラスを記述するだけで、自動的に反映させるという機能です。位置の変更 文字サイズの変更も付加的な機能として実装しました。

Raindropsテーマは、従来より投稿内で、自由にグーグルフォントを指定する機能がありましたが、今回の修正では、@import ルールを使ったフィルタ制御で実装しました。


関連して、メインメニューのメニュー設定のCSSクラス欄にグーグルフォントのクラスを記述すると、メニューもgoogle fontsが適用されるようになっています。



今回、スクリーンショットも変更してみました。



f:id:tenman:20150326102645p:image


サイドバーに、Youtubeなどが見えますが、これは、テーマのピンナップウィジェットを使ったもので、本文に動画メディアがあれば、それも表示できますし、アイキャッチ画像や、添付画像をランダムに表示する設定もできるものです。



投稿タイトルの、色やフォントも、投稿内の投稿専用のCSSエディタと、グーグルフォントクラスの併用で、style.cssの編集などを行わずに、スクリーンショットの内容が実現できます。




ヘッダー画像内タイトルも、テーマカスタマイザーの設定を変更して実現しています。






WordPress Theme Raindrops1.277

昨日、Raindrops1.277のレビュー申請を行いました。


このところ、wordpress.org のテーマディレクトリは、サイトのリニューアルが行われ、これらの作業の関連か、申請からレビューまでの待ち時間が大幅に伸びつつあります。




定期更新のテーマが、130ぐらい滞留したのをピークに、現在は70程になり、少し落ち着いてきたようなので、アップデートしました。




今回の更新は、言語にフォーカスしています。




日本語環境での利用で、元号を使った日付表現の設定が可能になりました。(カスタマイザーのドキュメントの項目から、)




また、日本語と日本語以外(ブラウザの言語設定に依存)の表現を可能にする、CSSクラスを追加しました ( この機能は、実験的なものです )




RTL言語用のスタイルシートを追加しました。




その他にも、レスポンシブ設定でヘッダー画像が二段階に表示される問題を、現時点で可能な限り修正したり、




フッタテキストをより簡単にカスタマイズできるように修正したり、細かな修正を行ってもいます。




今回特別大きな変更として、外部化していたスタイルシートを、ヘッダー内に埋め込むように変更しました。




1.265で外部ファイル化し、「より望ましい形になった」ぐらいに思っていたのですが、実際に外部ファイル化してみるとやはり問題が見えてきて、また、戻すことにしました。




一番大きな問題は、パフォーマンスに影響を及ぼす点でした。



詳細は、テーマの改善方針の誤りについてを見てください。




他にも、プラグイン等の影響によって、外部スタイルが404になったり、トップページにリダイレクトされる問題も、散見されたりしました。




このようなことから、デフォルトの設定は、スタイルをヘッダーに埋め込む形に戻しました。( 外部ファイル化する事も、設定の変更で可能です )




外部ファイル化するために、template_redirect を使ったわけですが、この機能は、デフォルトテーマや、プラグイン(例えば、jetpackCSS Editor等、)を含め様々な場面で使用されています。




サイトの応答速度に影響を与える事があるかもしれません。




アップデートは、必ずしもユーザーに、「良くなった」と実感させられるかどうかは、解かりません




翌日からだれも見向きをしてくれなくなる事もあるでしょう




更新には、勇気も必要です。こんかいも、ビビりながらのアップデートになりました。










WordPress Theme Raindrops1.276

昨日、Raindrops1.276 のレビュー申請を行った。


今回のアップデートは、痛恨のバグフィックスのためのアップデートになりました。



今回のバグは、アーカイブページのタイトルが表示できなくなるという、大きなバグでした。



毎回行っている、ユニットテストは 念入りにやったつもりでいたのですが、全く関係がないアーカイブに、変更の影響が出ているとは、想像もしていませんでした。



1.275の変更では、html構造の変更も伴っていたため、アップデート初日は、問題が出ないかと戦々恐々としていましたが、直接関係するクレームもなく、安心しきっていました。



この問題が発覚する契機は、意外なところにありました。



ユーザーから、「アップデートしたらプラグインのタイトルがエスケープされて、タグごと表示されてる。」という苦情でした。


プラグインが、タイトルを単純にエスケープしてしまう事は、以前から経験していて、「タイトルには、必ず文字列だけが入っているとは限らないんだから、ケアしてほしいと以前から思っていたので」


「それプラグインの問題なんだけど、エスケープされた文字列を削除するフィルタつければ、治るんじゃないかと思うよ。」と、コードを書いて渡した。




その時は、あまり深く考えていなくて、それでなんとかなるだろうと思っていた。




少し時間が出来、「テストもしないで、たぶんはないだろう、再現テストやるべきだよ 自分!」



ユーザーのサイトで使っているプラグインを、インストールして検証してみた。



「 あれ、治らない。 えっ 直らない? なに、直らない! 」



すったもんだした挙句、何とか対応できた



結果が見えたので、1.276の本来のアップデートの主眼 「カテゴリーにフォーカスしたアップデートの作業」を進めた。




カテゴリーっていうのは、どんな風に表示するのがいいのだろうか? 改めて考える




例えば、パンくずリストを表示していたとしても、あるカテゴリを表示した時に、そのカテゴリの子カテゴリに移動するすべが、「ないじゃー、ないの」



あるカテゴリアーカイブを開いた時に、個別の投稿と同じようにカテゴリリストを表示する 意味ってあるんでしょうか? もうすでにカテゴリは選択されているんだから、、、



で、 カテゴリーアーカイブでは、タイトルの下に、親子関係がわかる ナビゲーションリンクを追加、



表示される個別投稿では、その投稿に割り当てられたカテゴリをそのまま表示するのではなく、カテゴリの親カテゴリ、子カテゴリに繋がっていけるように、親カテゴリ、子カテゴリをだけを表示するように変更した。



そういう変更は、実際上 意味があるんだろうか、とか、確認するために、Raindropsの開発用のサイトではなく、一般のWEBサイトを嗅ぎまわる事にした。



この嗅ぎまわる過程で、あれ、アーカイブがおかしい という悪夢を見ることになった。



狼狽しながら、テスト、テスト、また テスト。




プラグインの表示不良と、アーカイブの表示不良は、根っこが同じだったのです。





カテゴリの件は、ここまででストップして、 えいやっ、レビュー申請。





プラグインの問題を指摘してくれた方は、



「もぅ、もうこれからテーマのアップデートしないからな、、、」と言い放つ、凹む。





謙虚にいこう、思い込み、知ったかぶり、何の役にも立たない。




WordPress Theme Raindrops 1.275

先ほど、Raindrops 1.275 のレビュー申請を行いました


今回のアップデートは、「アイキャッチ画像と、個別投稿のカスタマイズ性の向上 」にフォーカスしたアップデートです。



アイキャッチ画像のテーマでの使われ方としては、ほとんど内容のないコンテンツを、適当に自動的にアイキャッチ画像を割り当てるようなプラグイン等との併用で、「少ない労力、かっこいいWEBページ 一丁上がり テク」として使われたりもしていそうですが、主眼は、コンテンツの差別化です。



Raindropsテーマでは、アイキャッチ画像が使われている場合は、indexページ等では、アイコンを表示するに過ぎませんでした。



デフォルトテーマ等を見ていくと、Twenty Twelve以降では、indexのようなループページでも、大きなサイズで表示しています。



更には、シングルページでは、アイキャッチ自体を表示しないといったスタイルのhuemanのようなテーマも人気を博しています。




Raindropsでは、投稿毎にアイキャッチのサイズを変更するCSSを記述したりする事は、従来から可能でしたが、一歩進めて、テーマカスタマイザーでアイキャッチ画像のサイズやレイアウトを指定すると、自動的に適用する仕組みを追加する事にしました。




それと、htmlの構造も、若干、変更しました。


この若干の変更は、投稿毎のCSS記述の柔軟性を大きく向上させます。


f:id:tenman:20150216121319g:image

上記の投稿の左側に 赤いボーダーが見えますが、

.raindrops-pub-new{
 border-left:6px solid red; padding-left:1em; 
}

この赤いボーダーは、投稿後 3日間経過すると、表示されなくなる強調線です。工夫次第で、強調用の設定をいろいろ作れるでしょう。

post_class()が出力するクラスと連携した、タグやカテゴリ、いろいろな指定ができるようになります。

WordPress Theme Raindrops 1.272

先ほど、Raindropsテーマ1.272のレビュー申請を行いました。


今回のアップデートの メインテーマは、 「アーカイブページを考える」です。


投稿やページといったメインのコンテンツとは異なり、月次アーカイブ、カテゴリアーカイブ等のページは、コンテンツを一覧表示できればそれでよし、というテーマは少なくありません。


Raindropsテーマでも、全体の設定として、2カラム 3カラム表示を設定したり、投稿固定ページで、各投稿やページ毎に1カラム表示や2カラム、カラータイプを独自に指定する方法は従来からありましたが、


アーカイブページで、カラム数を変更 例えば(カテゴリアーカイブなら2カラムや1カラムで表現する) といった機能はありませんでした。


Raindropsテーマは、3カラムがベースですが、カテゴリアーカイブや、日付アーカイブなどで、なぜトップページと同じメニュー列を持っていなければいけないの、なぜ、変更できないの?


と問われれば、「アーカイブの事あんまり考えたことなかったんです。」と答える他はない




今回のアップデートでは



1.カテゴリやタグなどの説明文が存在したら、ヘッダーの meta要素 name属性 description の値として埋め込む



詳細:機能の停止や、出力文字数の変更について

関連記事:ブログタイトルの文字長と概要文について





2. 各種アーカイブは、それぞれ独立して、レイアウトの変更が出来るように、テーマとして準備を整える


archive customize


3.個別投稿毎にしかレイアウトを指定できなかったものを、例えば、画像表示のページだったら、1カラムで表示可能にできるようテーマの準備を整える


フィルタを条件付きで適用する事で、ある特別なカテゴリだったら1カラム、特定のタグだったら2カラム、などといった条件によってレイアウトを変更することが出来るようになります。


customize raindrops







といった事が、テンプレートに少しカスタマイズを加えるだけで可能になりました。






TOP