WordPress Theme Raindrops 1.308-1.313

先日 Raindrops 1.316 のレビュー申請を行いました。



Raindrops1.308-1.313 までは、htmlの泥沼をどっぷりとさまよっていました。



全面的に書き換えた、メインメニューのスタイルの影響で、モバイル用のメニューの表示に影響が出てしまったり、



ラベル表示(例えば、カテゴリーアーカイブなどに付く カテゴリーアーカイブ:ほにゃらら、とか、投稿のカテゴリーにつけていたテキストラベル)を、今風のテーマではとっくに取っ払ってしまっているような部分を、カスタマイザーで、非表示にしたり、絵文字に代替したりする機能を作っていました。


配布用のテーマは、良かれと思った変更も、「なんで消したんだ」と注文が付くことも結構あるため、何らかの方法で、変更を元に戻すような工夫が必要になるため、意外と手間がかかる。


サイト全体のCSSを追加するための、サイトワイドCSSというテキストエリアも作った。



style.cssに、ちょっとスタイル追加してくれ なんて、書くと ユーザーは Not sure なんて言ってくる。テーマの更新で、消えちゃうじゃないか! みたいなことなんだけれども



その度に、チャイルドテーマのダウンロード先と使い方を 個別に説明してきたわけですが、元々チャイルドテーマを使っていない人の負担も、対応する側の負担も大きいので、作ってみた。



テーマにとって、プラグインCSSは、時々不具合を引き起こす。



最近、bbpressを使っているユーザーから、「アップデートのたびに、Raindropsがbbpressのコントラストを保持するために追加しているスタイルを削除している」という。



フィルターを追加した。( 良かれと思ってやっている事自体が障害になるなら、それは無効化できるようにしておくべきだろうと考えた )



アップデートをしながら思う、アップデートは実は、新しい大きな問題を引き起こして ユーザーが離れていくきっかけになる事がよくある。



ユーザーは、気に入ったものしか使わない。


Raindrops1.317では、コンテンツへのリンクのためのソースコードを表示する 共有リンクを data-urlを使って実装しました。(IEでは、表示しません)


レビュー 通るかなぁ?

WordPress Theme Raindrops 1.307


WordPressのテーマRaindrops 1.307が、昨日ライブになりました。


今回は、以前より修正しなくてはと思いながら、触りたくなくって延び延びになっていた。CSSやHTMLの修正を行いました。


テーマの設定部分などは、メインがPHPなので、エラーがあればそれなりに対応もできるのですが、htmlとCSSの修正は、


こっちを良くすれば、あっちがダメになるといった事が発生しやすく、検証するのに膨大に時間がかかります。


今回は、メインメニューのCSSを旧来のものを捨て、完全に書き直しをしました。


Raindropsテーマは、アクセシビリティのための キーボードによるタブ移動で、メニューが適切に動作するような設定を行う過程で 自分でも意味不明になるほどの、迷路のようなスタイル指定になっていたためです。


また、2カラム、3カラムといった レイアウトパターンから、1カラムという新しいレイアウトスタイルも 最近の更新で行っていたため、HTMLの全般的な見直し、CSSの詳細度の低下処理なども行いました。


Raindropsテーマは、いろんな複雑さと格闘しながら、最終的に 1カラムのシンプルな表示を可能にするところまで たどり着きました。


私にとっては、1カラム表示は 努力とアイディアの結晶なわけですが、たぶん、そんな風に考えるユーザーは皆無でしょう。


HTMLやCSSは簡単だけど、PHPはよくわかりません。という人が たまに いますが、私にとっては、とりわけ、HTMLやCSSは、泥沼

WordPress Theme Raindrops 1.302

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


ここのところの更新の中心にあるのは、これまでの Settings API が使えなくなり、Customizer APIを使い内妻という、テーマのレギュレーションの変更に伴うものです。



Customizer APIを平たく説明すると



f:id:tenman:20150612160000g:image




このようなプリビュー付のページで、テーマの設定は行いなさいという事になったわけです。




左のサイドバーは、PHPスクリプトで記述されていて、プリビューはjavascript で動いています。




左側の設定を変更すると、右側のプリビューが 同時に変更されて、必要な項目がすべて変更されたら、保存をして公開ボタンを押すと、この時点で初めてリクエストがPOSTされるというものです。




保存して公開ボタンを押さなければ、プリビューが変更されるだけで、実際に公開されているWEBページは何ら変更されないので、気に入るまでじっくり変更しながら お試しくださいというのが 売り




確かに、ユーザーにとっては 素晴らしい機能なのですが、実際に変更を行っていくものにとっては、WEB上にいろいろな解説や How toがあるわけでもなく結構アイディアをひねり出すのに苦労します。




何日か前、カラーピッカーのデフォルトボタンを押すと、falseが表示されるようなテーマの作りというのは、どうなんだ みたいな話がレビューチームの中で話されており、



 otto42 [5:34 AM] BTW, this is incorrect:

`'default'               => get_theme_mod( 'body_color', '#ffffff' ), // change the default to the correct color`

otto42 [5:34 AM] The default should be a default, not the current value


このようなsluckでの会話を傍聴していて、select要素は、---select--- なんてのが必ずあって、「 何にもしない 」という選択があるのに、pickerの値は、デフォルトがないとだめだというのは、腑に落ちない





等とブツブツ、していた。




そう、私のテーマは、カラーの値を空にして、帳尻をとっていて、「まいったなぁー」感があったのです。




Raindropsテーマは、基本の配色設定が、4つ 黒いのから白いのまであり、ベースカラーと言って、これらの配色設定に混色する色があり、それぞれのカラータイプごとにフォント色や、リンク色のデフォルト値を設定しろという事になると、とっても面倒王な作業になるわけです。




1.300を、この議論が始まる前に、レビュー申請して この議論をたまたま目にしたため、レビューが開始されていないのに、





カスタマイザーの配色のプリビュー更新なんて、Twentyfifteenだって、プリビュー出来る状態に仕上がっていないわけで、





デフォルト値を設定して、かつプリビューに反映できるようにする更新のアイディアなんて、どこにもない。





少しづつ、javascriptを勉強しながら、何とか動作するようになったカスタマイザーで、1.301を申請しました。





落ち着いて、考えてみると ちょっと嫌な予感




色のデフォルト値や、URLをjavascriptで、カスタマイザーに渡してしまっていた。




バリデーションしなきゃ、うまくいかない。




URL削除 




1.302 レビュー申請



レビュアーは、「なんだこいつ、イカれてんな」なんて思うんだろうなぁ




WordPress Theme Raindrops 1.295-1.296

申請していたテーマが、2週間かけて、ライブになった。

テーマオプションの、ユーザーインターフェースを Settings APIからテーマカスタマイズに変更する 大きな変更になった。

先ほど、Raindrops1.296のレビュー申請を行った。


1.291の時に紹介したループページがそれぞれ独自カラムで表示できる機能は、以下のように 恐ろしげな項目数になりました。


WordPress Theme Raindrops 1.296 column settings view


更に、投稿では、よくありがちな、日付を非表示にするとか、投稿者や、デフォルトカテゴリを非表示にする項目も追加した。

(デフォルトカテゴリは、諸事情により、デフォルトパーマリンクでは、動作しません)

WordPress Theme Raindrops 1.296 post settings


これで、ほとんどページで カスタマイザーから、1-3カラムコントロールが可能になった。従来のボックスレイアウトだけでなく、フルサイズ(full width) レイアウトも実装した。




今日テーマディレクトリを覗くと、無限スクロールだったページが、ページ毎にリンクが付けられ、ダウンロード数グラフが撤去されたページが表示されていた




しばし眺める

夕刻 グーグルグラフ復旧

WordPress Theme Raindrops 1.291

テーマディレクトリの国際化がスタートした模様です。




Dion Hulseさんのメッセージ




日本語環境で使いやすいテーマディレクトリ、プラグインディレクトリになっていくといいですね



日本語の翻訳、成績がいいみたい




Raindropsテーマは、テーマのレギュレーションが変更になったのを受けて、私は、カスタマイザーの勉強中で、先日やっと、1.291をレビュー申請しました




カスタマイザーは、javascript API と、PHP のAPIと2種類あって、従来よりテストや、問題点の洗い出しが大変そうです。




テーマのオプション設定には、カスタマイザーを使用するのが必須条件になっただけで、何をやってはだめで、何をやっていいとか ほとんど明文化されていない。




APIの使い方も、勉強しなければなりませんが、それ以上にカスタマイザーを使ったテーマオプションのUIをどのように作り上げていくか 



「いろんな絵が思い浮かんでは、いやちょっとまでよ」みたいなことを繰り返している




でも、 調子に乗って、新しい機能? も、カスタマイザーに追加してみました。




その機能とは、従来 Raindropsでは、カラムの変更が、シングル投稿やページでしかカスタマイズできなかったのですが、その範囲を広げて、ほとんどのループページで、カラムの変更ができるというものです




カテゴリは唯一積み残しになりましたが、今後サポートしたいと考えています




カスタマイズそのものは、従来の機能でカスタマイズ可能だったのですが、「テンプレートやスタイルや、フィルターなんて使わなくてもできるよ」、と追加しました



raindrops ver1.291 new customize settings



どうなるのかな、

WordPress4.2

WordPress4.2がライブになったと思っていたら、数日でセキュリティアップデートのWordPress4.2.1が出た。


WordPress 4.2.1 Security Release


私の、Raindropsテーマも先日1.286セキュリティアップデートを行いました。


add_query_arg() , remove_query_arg() 問題への対応


セキュリティ周りの話が、最近多い。


WordPress4.2のメジャーアップデートに、歩調をそろえるかのように、テーマレビューガイドラインの改定も行われた。


WordPress.org Now Requires Theme Authors to Use the Customizer to Build Theme Options


等、最近まれにみる 盛り上がりで 驚く。


要は、現行テーマは、半年以内に、現在主流のテーマオプションページを使わないで、カスタマイザーでのコントロールに切り替えなければならなくなった。


新しいテーマについては、すでにカスタマイザーでのオプションに対応していない場合は、審査が通らなくなった。


テーマレビューチームが、悪いルールを作り出した ようにも受け取られているけれども、すでにワードプレス4.2のアドミンバーで、テーマのリンクをクリックしても、テーマオプションのページに遷移する事はなく、カスタマイザーのページにリンクされるようになっているわけで、


いま、テーマオプションページへのリンクは、管理画面のサイドバーのリンクだけになっている。



川の流れは、すでに変わっているのだ。



ヘッダー画像の設定ページも、背景もカスタマイザーへのリンクに切り替わっているわけですが、



現段階では、旧来のヘッダー画像や背景画像のページがアクセスできないわけではありません。



私の関心事は、これらの設定ページは、リンクされないだけで残り続けるのか、いつの時点かで、廃止されるのかというところにありますが、その辺りは霧の中




これから、公式テーマを作ろうとする人たちは、ちょっと敷居が高い(情報が少ないので)かもしれない。




レビュー中の人たちにとっては、悲劇だろうと思う。




私も、テーマが承認されない頃、テーマは承認されていないのに、ワードプレスはメジャーアップデートする。するとレギュレーションも変わる 唖然 とした経験がある。




公式ディレクトリにホストする意思があるなら、変化を受け入れなければならない。




私は、すごいテーマを作っていても、変化を受け入れられなくて更新する事をあきらめた人たちをたくさん見てきた。




まだ、背中を見せるつもりはない


テーマ制作者からみた、WordPressテーマの選び方

ワードプレスでテーマの選び方は、結構難しく、



私もワードプレスを始めたころ、「テーマの選び方」を紹介するサイトを片っ端から参照しては、選び疲れて、呆然とした苦い思い出があります。


Googleで「公式テーマ」で検索すると、WordPress公式ディレクトリ配布テーマには絶望… なんて記事を見つけると、ついクリックしてしまい


国産テーマ絶賛なので、「やっぱ、同じ文化の中の人のもの」もいいのかなぁ、なんて思って、使っているテーマを見てみると、

/*
Theme Name:     simple-catch-child
Author:         Admin
Template:       simple-catch
*/

あれ、あれ、絶望したはずの「公式テーマ」を使っていたりして、 検索上位に表示されていても、あてにならない情報もあるんだなと思ったりする。


テーマ選びは、スクリーンショットを見ながら選ぶことになるので スクリーンショットに表示されている姿と、デフォルトでの表示が全く異なる事も多く


また、多くのテーマ制作者は、画像素材サイトの画像をビシバシ使っているので、スクリーンショットに映り込んだ画像に影響されて、「なんか、すごそうなテーマ」なんて影響もうける


日本語に対応した公式テーマは、日本語翻訳ファイルを持っているのだけれど この翻訳ファイルを持ったテーマを 検索などで探すことが出来ないという事情もある。

( 誰か知っている人がいたら、教えてくださいー )


でも、あんたは、テーマメンテしているんだから、「良いものにしていこう」と思っているんだろうから、どんなのが良いテーマかって考えたことあんでしょ どうなのよ?


と問われた時に、「なんて返事したらいいのかな???」

たぶん、しどろもどろになりながら こう答えるかな? といった点を メモに残します。


テーマユーザーは、htmlの評価用ツールを使いまくるといいよ、



今だと、モバイルフレンドリーテスト これを使わない手はない。



ワードプレスは、最終的にhtmlを出力するためのツールなので、 Markup Validation Serviceも使いましょう。



うーん、「見た目を信じちゃいけないよ」


ワードプレスには、デフォルトテーマというのがあるので、デフォルトテーマをテストツールにかけるとどうなるか?

テーマ名は、twentyeleven (2011)~twentyfifteen(2015)などに読み替えてください

この他に、私のテーマ Raindrops と、ワードプレステーマレビューチームの偉い人が作った Stargazer で、比較してみました。



同じ投稿でも、エラーは、それぞれ異なる結果

2011 13 Errors, 10 warning(s)
2012 11 Errors, 11 warning(s)
2013 7 Errors, 12 warning(s)
2014 8 Errors, 12 warning(s)
2015 7 Errors, 1 warning(s)
raindrops 6 Errors, 1 warning(s)
Stargazer 0 本文概要表示のためエラー部分が表示されない。

教訓、トップページが抜粋表示になっているテーマは、結果が実際より良く表示されやすいので、より吟味したほうがいいよー

( 投稿は、皆同じですが、プレイリスト等も含まれていますので、どんなに調整されたテーマでもエラーが出るようなコンテンツを含んでいます )



ヘッダー画像にテーマにストレスのかかる画像サイズでテストしてみる。



現在は、フレキシブルヘッダーになっているテーマが多いと思います。おすすめ設定よりもでかい画像をアップロードして正確なサイズで表示されるかどうかを調べてみます。

1920x400の画像をアップロードして、切り抜かないで画像を設定しました。

2011 切り抜かないボタン非表示
2012  960x378
2013 1080x230 レスポンシブ連続的ではない
2014 1220x480 右側に隙間 連続的にレスポンシブ
2015 切り抜かないボタン非表示
raindrops 1280X481 連続的レスポンシブ
Stargazer 1220X480 連続的レスポンシブ


少なくても、Raindropsの場合は、エラーなサイズです。





じゃ、投稿本文に書かれたOEMBEDメディアは、

2011 狭くすると下部に隙間
2012 同上
2013 同上
2014 同上
2015 同上
Raindrops 連続的に変化隙間発生なし
Stargazer 連続的に変化隙間発生なし



どうですか? デフォルトテーマでも、いろいろな違いがある事が理解してもらえると思います。



公式テーマや、個人配布テーマなら、もっと大きな違いが見えてくるはずです。



これは一例ですが、アップロードした画像等が、意図した比率で正常に表示できるかとか、htmlを正しく出力しているとかは、WEB上の外部ツールで調べるといいです。



超 地道で、面倒な作業ですが、問題のあるものを使って修正を行うよりは、まだましです 頑張りましょう というか、頑張ります

TOP