CSSライトボックスとIEのサポート


WordPress3.4から、ヘッダー画像のサイズ制限が取り払われて、アップロードした画像をそのまま使えるようになります。(テーマが対応していれば)



現在公開中のWordPress extend theme Raindrops | Raindrops,WordPress theme files | obandes,WordPress theme Enoughテーマについても、3.4の新しい機能に対応すべくテストを進めています。



Raindropsテーマで、ポストサムネールについて、寸法の制約が入ったままになっているので、せめてlightboxで原寸の画像を表示できるぐらいの機能を持たせたいと考えるようになりました。



シンプルで、コンフリクトしないライトボックスにしたいと考え、CSSのライトボックスを付けてテストをしています。



f:id:tenman:20120521144510p:image





このため、lightbox の仕組みを学ばなければなりませんでした




CSSライトボックスは、どうやって動いているのか メモに残します。




ライトボックスのDEMO


WordPress3.4 テーマカスタマイザー


WordPress 3.4の参るストーンが95%ほど完了して、公開が近づいてきています。

3.4の機能の目玉の一つにテーマカスタマイザーがあります。
テーマカスタマイザーを使うと、ブログのプリビュー画面を見ながら、背景色や、テーマオプションの変更がリアルタイムで行われるとても便利な機能です。

現在公開中のRaindropsテーマを使って、次期バージョン向けに対応するプログラムを書いています。
試してみると、とても便利な機能でした。

また、テーマファイルをローカルからアップロードできる機能も追加されているようで、さらに便利になりそうです。

f:id:tenman:20120509115443p:image:medium


WordPress3.4 テーマカスタマイザー


WordPress 3.4の参るストーンが95%ほど完了して、公開が近づいてきています。



3.4の機能の目玉の一つにテーマカスタマイザーがあります。

テーマカスタマイザーを使うと、ブログのプリビュー画面を見ながら、背景色や、テーマオプションの変更がリアルタイムで行われるとても便利な機能です。



現在公開中のRaindropsテーマを使って、次期バージョン向けに対応するプログラムを書いています。
試してみると、とても便利な機能でした。



また、テーマファイルをローカルからアップロードできる機能も追加されているようで、さらに便利になりそうです。



f:id:tenman:20120509115443p:image

超軽量ワードプレステーマ「Enough」とレスポンシブウェブ


4月に、ワードプレスの公式テーマになった、テンプレートがたった2枚だけの超軽量テーマファイルのその後と、レスポンシブウェブについてのメモ

レビューの協力をしてくれた人から、以下のような意見があった


いつもいつも、phpでプログラムを作っているわけではありません。
だから、いざテンプレートを触ろうとしたとき、またphpの入門書から復習です。
そうしているうちに、テンプレートをいじるのが嫌になります。





私自身も、ワードプレスのテンプレートをカスタマイズしようとした時に、これは大きなハードルでした。




私は制作するテーマのヘッダーテンプレートの読み込み直後に、すべてのテンプレートに以下のようなコードを置いている。

<?php 
if(WP_DEBUG == true){
    echo '<!--'.basename(__FILE__,'.php').'['.basename(dirname(__FILE__)).']-->';
}
?>

もちろん、テンプレートのカスタマイズをデバッグモードで行わない人には、見えない呪文でしかないですが、
(何年も前から使っているので いまなら、もっとよい書き方があると思います。)




テーマを制作する上で、特別に必要があってテンプレートファイルが置いているのかといえば必ずしも、そうでもない。



他の公式テーマも、大体使っているし、とか、そんな過激な事をしたら、レビュアーに拒否されるのではないか?といった迎合的な気持ちも少なからずあった


これまで、二つのテーマを、1年間にわたって本体のアップデートとレギュレーションの変化に、何とか対応できて来た



これまで、蓄えた知恵は、最軽量テーマのために使った。


テンプレートファイルをテーマになぜ追加するのか、考えてみるべきではないか と思った





今、ワードプレステーマ界隈では、レスポンシブなテーマが人気だ。

WordPress › Responsive « Free WordPress Themesは、twentyeleven テーマの週間ダウンロード数で上回った。(5/4)





しかし、私自身は、依然として懐疑的



理由1.ウィンドウサイズだけで、表示を切り替えるだけで、数多のブラウザの表示をコントロールできるなんて思ってはいけない

理由2.ユーザーの意思に関係なく、インターフェースを変更するというのはアクセシブルでない。



念のため、付け加えます。
懐疑的なので、レスポンシブなテーマを作らないという事はありません。
ニーズには、答えます。ただ、自分の疑いを意識しながら、制作を行っていくという事です 
( 昨日、ワードプレスのテーマ obandes 1.10 がライブになっています。enoughテーマは、画面のサイズによって自動的に切り替えますが、obandesは、サイドバーの表示非表示をユーザーが選べるように、やさしいレスポンシブに変更してみています )



レスポンシブウェブは、コンテンツの見せ方を画面幅に応じて変更する。と、最初のうちは理解していた


制作の過程で何百回も、(多分、何千回)みていると、「ナビゲーションの再配置のベストプラクティスのを探している」と見えてくる




そういうことが、CSSだけで完成すると考えてはいけない




では、ワードプレステーマは、私のような、「公式テーマに合格したい」一心で、猿真似のような事をやっている人間のために複雑にされてきたのだろうか?




最新作の「Enough」を使ってブログを一つ作ろうとして、自分には意外に使いづらいことに気がついた



すでに、テーマのカスタマイズになれてしまっているので、テンプレートパートファイルがないと、「メンドイ」
コピペするだけで出来るのですが、それが「メンドイ」



愕然とする




テーマ制作の経験がある人は、「公式テーマに合格したい」一心で、猿真似のような事をやっている人間が作るような、一通りのテンプレートが、そろっていたほうが、超簡単にブログを作る事が出来る






初心者なら、間違いなく飛びついたはずのテーマなのに、作り手も使いやすいかというと、そうでもなかったりします


考えた通りに事は運ばない





むしろ、Enoughテーマは、簡単に出来ているので、レスポンスが他の自分のテーマに比べて、表示がとっても速い





速さは、考えていなかった


考えた通りに事は運ばない

WordPress enough theme


Enough ライブになりました




これまで、WordPress extend theme Raindrops | Raindrops, WordPress theme files | obandesといった、ワードプレスでホスティングをしてもらう、いわゆる公式テーマを2点書いてきました。



Raindropsが公式審査を通過してから、1年になろうとしています。



Raindropsはオプションパネル上で、2カラム、3カラム、エントリーへの記述の仕方で1カラムや、エントリーにネストグリッド用のクラスを記述すれば、5カラムまでの表示コントロールが可能で、配色は、1色を指定するとその色のイメージで、4パターンのカラータイプで表現する事が出来る。一般的なテーマからすると、複雑な構成のテーマでした。



obandesテーマは、CDNとAPIを使って、どんな工夫が出来るかhtml5で試行し続けてきました。
最近になり、lessphpを搭載したりしています。
テーマにCSSプリプロセッサーをつんでいる他のテーマは まだ見たことがありません




当初、この2つのテーマ以外は制作するつもりはなく、一般的なページならこの二つで何とかなると思っていました。




両テーマに採用した、YUI(Yahoo user interface)は、うまく動作してくれましたが、時が経過する中で、最良のやり方ではなくなりつつある面を感じるようになりました。

私にとっては、何のことはない事も、利用する人にとっては、理解するのに一定の時間を要するからです。



ワードプレスのテーマとして、最大限シンプルなテーマに挑戦すべきだという気持ちが強くなり、これまでの経験を踏まえて、今までのテーマにない、シンプルなテーマを作る事にしました。



最近流行のメディアクエリには、私自身は、懐疑的でした。Windowサイズでスタイルをコントロールしても、ブラウザによって表示は、異なるというのが、経験上必ずおきるからです。


懐疑的なだけでは、そこを乗り越えられないので、その点も挑戦することにしました。




enoughというテーマは、現在 2回目の審査を通過し、3回目の審査に本日提出したところです。

header.phpや、footer.phpなどのテンプレートさえ持たない、index.php comments.phpだけで制作した公式テーマです。




もうしばらくすると、ワードプレスの管理画面からインストールできるようになると思いますので、試してみていただけるとうれしいと思っています。




WordPress 3.4


obandes 4/7 本日ライブになりました



昨日、WordPress | 日本語 » WordPress 3.4 ベータ 1のアナウンスがありました。



現在の進捗は、
Milestone 3.4 – WordPress Trac



ワードプレスといえば、テーマやプラグインが豊富で、機能やデザインを選択する事で、思い通りの高度なWEBサイトを構築できる事が、最大の魅力と思います。




今回のアップデートのために、451件もの変更が行われており、テーマ制作には欠かせないテンプレート関数も、役割を終え、非推奨関数として存在をとどめるものも、少なくありません。




ほぼ連続的に続く、改良の中で、たとえテーマと言えども、何年間もメンテナンスをしないで使い続ける事は、トラブルをじっと我慢をして待ち続ける事に等しいといえます。



ワードプレスのテーマに関して言えば、カスタマイズの自由を保ちながら、アップデートに対応し続けるという相反する課題を克服する仕組みとして、チャイルドテーマが提唱されています。



今回のアナウンスの中にも

WordPress テーマ公式ディレクトリの子テーマ登録対応

と、明記されています。



逆に言うと、ペアレントテーマを制作するものは、気合を入れて、新しいコアプログラムにシンクロして更新していかなくてはなりません。

ということで、ワードプレスにホスティングしてもらっている いわゆる公式テーマを、アップデートして、本日レビューに提出した次第

(これでいいんでしょうか? と お伺いを立てて、よさそうなら他のテーマにも展開という段取り)




上の画像は、最近サポートしたlessphpを使って、CSSが正常に再現できるかどうかをテストしたものです。
obandes | ドラえもん実物は、こちら





ところで、今回のobandesの変更は、WordPress3.4を使うと、ただのテキストエリアだったテーマオプションのCSS エディタに
tinymceをつけたので、タブとか使えるよというもの。

less入れているので、次は、使いやすさの向上




Memo:


3.4で非推奨になるテンプレート関数

  • add_custom_image_header() , add_custom_background()
    • add_theme_support()に置き換え
  • get_theme_data()
    • wp_get_theme()に置き換え


Version 3.4 « WordPress Codexより



さて、しかし新しい関数なんだから、きれいな説明書なんてない。


だから、砂粒をより分けるように、使い方を覚えなければいけない。



コレ、読むと、関数の使い方が解る。

Changeset 20212 – WordPress Trac



しかし、躓く事もある



英語が出来なくても


WordPress › Support » how to use wp_editor ?



こんな一人相撲を、取らなくてはならなくなったり、






振り向けば、バグ





お粗末


less に関する子ネタ

f:id:tenman:20120329130335p:image:medium:left

lessPHP を搭載したWordPressテーマ obandesでless を使うとこんな事が出来るよというスニペットを書いたのですが、その件について、


obandes0.99のアップデートで、それぞれの投稿から、その投稿を表示された時にだけ適用されるless スタイルを書く事が出来るようになりました。

lessという名前のカスタムフィールドを作成して、値にlessのコードを書く事が出来ます。



テーマオプションパネルのCSSエディタに、ブログ全体で使うようなmix inなどを記述しておいて、個別ページで使いまわす事が出来るよという考え方です。


CSSで、特殊なグラデーションを書いたりすると、ベンダープレフィックスを含んだスタイルルール一々書かなくてはなりません、再利用性も乏しいものですが、lessを使うと

.examples{
.bg-arrow();
.title-entry();
width:100%;
height:168px;
padding-top:100px;

}


.bg-arrow();と書くだけで、スタイルをピンポイントで充てられます。

画像を、background:url(http://....);と書く感覚で、ふくざつなCSSを使いまわせますよ。


さらに、bodyには、ブラウザ名のクラスが自動的に入ってしまうので、例示のようなやんちゃなスタイルを書いても、IEのレイアウトがぶっ飛んでしまうという事も、何とかなってしまうわけです。


ということで、obandes テーマ使ってちょーだい