ほぼ日とWordPress

私は、ほぼ日刊イトイ新聞というホームページが好きで

たまに気が向くと読んだりしています




私は、WordPressの公式テーマを作ろうと思い立って

もう一年以上も、このたった二つのテーマを書き続けてきました



最初は、htmlのテンプレートを作るのなんかは、簡単な事だと思ってその気になったわけです。

このテーマファイルを使って、WEB制作の基本になるフレームワークにしたいと思っていました



WEBページの制作は、作るものにあわせて1から作って、また、1から初めての繰り返しです。

色の調整をするにも、何十箇所もあるスタイル指定を延々と調整し続け、挙句には、自分の作ろうと思ったイメージがどこかに吹き飛んでしまったりして、最後には、なんで、こんなに苦労した挙句に、こんなものが、、、



Raindropsというテーマでは、色を1色決めて、暗いとか明るいとか、選択するとぽっと一丁あがりというテーマを作ったわけですが、

自分の道具としては「使えないもの」になってしまいました。


そこそこいい感じでも、どこか不満が残りました




WEBページは、記事だけでなく、リンクが必ずあるので、いってみれば、テレビに映る画面と、リモコンも一緒に書かなければいけません。




次に自動的に作った配色を、管理画面からカスタマイズできる仕組みを作り始めました

出来上がると、自動化でスタイルルールの詳細度が高めになってしまい、スタイルルールを反映させるのに、かなりのテクニックがいる


スタイルの詳細度を、下げる 作業を始めるが、ゴールはまだ見えません





絶対に投げ出さないという気持ちと、コンテンツにあわせて作るのが本当なんじゃないの という気持ちが混ざり合っている時 ほぼ日をみていて


大事にしているな とか 伝わってくるな という言葉が思い浮かびました





あの、最大でも25文字幅は、読みやすくて疲れない。

コンテンツが必要とするものを妨げないテーマを作っていかなければいけないと思っている





以前から文庫本の一行の長さぐらいが読みやすいのかな などと 考えてもいましたが、そういうことをうまくサポートできるようにしたいな、などとも考えて


投稿画面にホタンを追加してみたり、ショートコードを作ったりして審査に出したが、「そういう機能は、テーマファイルでやることではないので、プラグインで対応しなさい」などと一蹴されたりもした。


確かに、テーマを変更したら、コンテンツが台無しになるような機能は、付けるべきでない等と、合点した。





英語が出来ないので、レビューアーからのメールは、理解するまでにとても時間を要したし、
英語で、自分の考えを伝えられないのであれば、英訳ボランティアを探すべきだとも言われた

とにかく、諦めないと考えて、ドンドン審査に出し続けた。



ある時、あなたのやりたい事が理解できたと言われ、それならば、こう書くべきだ。
というアドバイスをもらったりもした。


どんな場合でも、返事は来て、審査を行ってくれた



正直それは、驚きだった


あるレビューアーは、ダメだしをして、数時間後に変更したものを提出すると、翌日ぐらいには、またダメだし、という戦いのような更新が一月近く続いた事もあった

それは、ある緊張感の欠如したCSSレベルの不具合で、バッタリとレビューが途絶えた

私は、それを今も、一つのメッセージだったと思っている

バグや、改良すべき部分は、いまだにあとを絶たない




幸運な事に、このテーマを使ってくれている人もいる。

I love Raindrops なんて言われると、少しだけうれしい




今日審査に出した最新のRaindropsは、それぞれの投稿毎に、レイアウトや配色パターンを変更できる機能を追加しました。

もちろん自分用のスタイルの登録も出来ます

私は、Raindropsのテーマの説明を「試行錯誤できるWordPressのためのテーマ」としています

WordPress アコーディオンメニュー


ワードプレスのページ上部には、ホリゾンタルメニューがあります。


サイドバーにもたくさんのメニューが並ぶという事がよくあります。



ワードプレスに限らず、サイドバーのメニューの折りたたみなどというテーマは、古今東西のさまざまなCMSやblog ツールで語られてきました。



関連性の強い、例えば同じカテゴリに属するエントリーをサイドバーに表示したい、だとか子ページを表示したいといったニーズもブログを作っている人たちの間では、繰り替えされ続ける質問のようです。




ちょっとした工夫で、アコーディオン風のメニューを作る事が出来るアイディアについて、メモを残します。



jQueryを使って、2行書けば終わりの簡単なものです。

リンク先の jQueryのコードは、実際にはこのようになっています。

jQuery(".page_item").has(".children").children("a").siblings('ul').hide();
			<?php if(isset($_GET['page_id'])){ $my_id = (int) $_GET['page_id'];?>
			jQuery(".page-item-<?php echo $my_id;?>").children().show("slow");
			<?php }?>

1階層しか対応していません IDの取得はいろんな方法で出来ると思いますので、そのあたりは、それぞれに
jQueryの使い方も?ですが、、、



関連する何かを表示しようとすると、サーバサイドでクエリを使って、リストを表示するというやり方が多く行われてきたと思いますが、ちょっとした事ならjQueryを使って表示コントロールする道もあり、body_class や post_classが採用されて以降、CSSjQueryの工夫で、表示コントロールが可能になってきていると、私は感じています



WordPressのテンプレートインクルードとPHP include


ワードプレスは、例えば、index.phpというテンプレートファイルで、get_header()やget_footer(),get_template_part()等のテンプレートをインクルードするための関数があります。


一方、PHP関数は、includeやrequire等のよく利用される関数があります、違いをメモに残します。



header.php を index.phpからget_header()を使ってインクルードした場合と、requireした場合の違いについて


header.phpに書いた定数オブジェクトが、index.phpで利用できる場合は、○そうでない場合は×

header.phpに書いた変数や定数  get_header() require
変数 $var ×
オブジェクト $obj = (object) 'ciao';echo $obj->scalar; ×
クラス class foo{function do_foo(){echo "foo を実行します。"; }} ○ $ins = new foo;echo $ins->do_foo();
関数 function my_func(){return "hello";} ○ echo my_func();
定数 define("TEST_GET_HEADER","定数"); ○ echo TEST_GET_HEADER

header.php に書いた変数を、index.php global $var としても利用できません


functions.phpに書いた変数などは、また異なります
functions.phpで定義した変数は、
header.phpでは、global宣言すれば使えます。
index.phpでは、global宣言をしなくても、そのまま使えます。



追記:2012/1 WordPressのテンプレートパートファイルのインクルードの仕方は、次のようになっている模様

テンプレートパートファイルをインクルードする場合に、

<?php include (TEMPLATEPATH . '/mydirectory/template.php ?>

と記述する事も出来る

<?php get_template_part('mydirectory/template'); ?>

と記述する事も出来ます

<?php locate_template( 'mydirectory/template.php', true,true ); ?>

と記述する事も出来ます



locate_templateは、パスを走査して存在していれば、(第二引数以下の指定で、インクルード、インクルードワンスを指定します。)
インクルードしたり、boolを返す。

アクションフィルタなどはない。

サブディレクトリにあるテンプレートパートファイルをインクルードする場合には、この関数を使用する
テンプレートディレクトリ、スタイルシートディレクトリ以下のパスを走査するので、テーマの外部にあるファイルは、インクルードできない


get_template_part関数は、スタイルシートディレクトリと、テンプレートディレクトリのなかから、スラッグとサフィックスに合致するファイルを探し当てる関数。引数は$slugであり、パスを引数にしてはいけない
この関数は、
SSLチェックも行う

do_action( "get_template_part_{$slug}", $slug, $name );

アクションフックが使える



定数を使ったPHP関数のインクルードは、単にインクルードするだけで、SSLチェックも行わない。また、フックもない。
単にインクルードするだけで、locate_templateや、get_template_partといった関数を使うべきでない積極的な理由がなければ、使う理由がない。
テーマの外部にあるファイルのインクルードをPHPのインクルード関数を使って行うのは、ご法度



サブディレクトリにあるテンプレートパートファイルは、locate_templateを、そうでなければ、get_template_partを使う

WordPress3.3 進捗


Milestone 3.3 – WordPress Trac

先日、自分のワードプレステーマをアップデートした。
レビューは通過できてものの、なかなかライブにならない。


3.3の準備で、フル回転しているんだろうと思って、「3.3」が出てからになるだろうと、正直思っていた

10/4 ライブにしてくれた、なんだか申し訳ないような気持ち半分

タブインターフェース


このスニペットから始まったタブボックスの検討は、Raindrops | Raindrops 0.924 レビューの申請しました で、タブボックスの自動生成として公開しました。


ポータルサイトなどでは、必ずといっていいほど使っているタブボックススニペットを書きました
スニペットを公開します

div要素に見出しとコンテンツを追加していくと、タブの部分は、jQueryが勝手に作ってくれるというものです。

  <ul id="tab-navigation"></ul>
  <div id="tab-block">
     <div id="wrapper">
      <div class="page">
        <h3>Home</h3>
     </div>
     <div class="page">
        <h3>Portfolio</h3>
        Lorem ipsum dolor sit amet, consectetur 
     </div>
     <div class="page" >
        <h3>Links</h3>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
     </div>
      <div class="page">
        <h3>Contact</h3>
      </div>
    </div>
  </div>

(div.pageのブロックを追加していけば、タブが追加)


単体で動作するhtmlページならこれで動いてくれるのですが、例えば、ブログにこのコードを埋め込んだような場合、単体でページを表示している分には、うまく動いてくれますが、indexするページでは、複数のエントリーの中に、複数のタブボックスが並ぶということになり、二つの問題が出てきます。

一つは、同一のidアトリビュートの重複という問題です。
もう一つは、スクリプトがどっちのidに属せばいいのか判断がつかないので、リスト自体もおかしくなります。


ブログで使えるタブインターフェースは、どうすればいいのかな、という事を検討するたたき台として、
以前作った#(フラグメント識別子)付リンクと目次の自動作成 jQueryをタブ用にしたものです。




風にふかれに、





加美町の薬莱山(やくらい山:加美富士とも呼ばれるらしい)付近は、リゾート開発が行われていて、リゾートウェディングなども行われているらしい。


そのやくらいガーデンが、台風被害のために、入場料を500円を250円にしているという新聞報道に、家族の、値引きマニアの触手が動いた


それまでの労力がいかほどかかろうとも、ちょっとばかりの得をしたいという欲望に、感服する。



人間は、そういうところがないとうまく生きていけない



250円引きの欲望をかなえるために、ガソリンをガンガン消費する、ナビさえついていない3ナンバーで山道を駆け抜けることになった




ガーデンを巡ると、初老の家族連れと、若いカップルが、コントラストを放っていた。


遠くのほうでは、バイオリンの音さえ響いている






やくらいガーデンを出ると、食事のことを考え始める。




せっかくここまできたんだから、「あの、まぼろしのそばや」に行こうという気になった。というより、「いってみっかと」口走ったら、「いくべ」という事になった



私も、名前しか聞いたことがなく、


私にその店を教えてくれた人も、そこにたどり着いたことがないこのことだった

ただ、その店で修行した人が仙台で店を出していて、そこで、その店の名刺をもらっていて、いつか行きたいと語ってくれた

そのあと、私も、その店の場所をグーぐるマップで調べたのは覚えていた。




あとは、土地勘ナビゲーションで車が徐行しないとすれ違えないような道を、走らせた


この町のこんなところで、リゾート開発みたいなことやってる不動産やがいるのか、と驚いた


地元産のオーラがない数件の家屋がある 別荘地の匂いに思えた




ロッジが蕎麦屋になっている。


紫色の暖簾もない、ここが入り口ですと書いてある札を見つけ、店内に向かう。



蕎麦屋の店員さんというよりは、どっかの会社の役員の奥さんみたいなオーラが私のようなものには見えてしまう


囲炉裏のところに座る。残念だが、仕事っぷりは見えない。


親方はすぐ見てわかった 姿勢がいい。


店に気取りはなかった 


ざるそばを頼んだ


「テンカスがついてる」これはいい

 (俺と、同じセンスだとポーカーフェースで思った)



店を出ると、店を出た老婦人が「この店は、なんでも無駄にしないでやっているのね」といっていたそうだが、私も同じようなことを思っていた

ちいちゃなヤマグリを出してくれたり、下のほうの池では、たぶん岩魚を養殖している。

  
   ヤマグリなどうまいものではないけれど、季節を楽しむには十分な素材だと思う


日常では、スーパーの特売の5束入りの蕎麦を100円で購入して、ゆでて食べるし、あのヤマグリを店頭で購入することもない。
それでも、1束20円の蕎麦でも不満に思って食べることもないのは、言うもありません


その土地が持っている土着の印象は全くない



私は、この食事の短い時間の中で、いろいろな思いをめぐらすことができた


そういうことが楽しかった


店を出るとき、私の500円のスリッパは、きちんと下足箱に調えてあった



店のベランダから下を見ると、先ほど囲炉裏で食事をしていた若いファミリーが、店がおいていると思しきハンモックに子供を乗せて遊んでいた。

そういうことができる雰囲気の店なんだろう



JSON + WordPress で、スタティックなページに動的な情報を埋め込む



なにか、WordPressを、既存のWEBサイトに埋め込んだりして使いたい。という質問が目立つ気がしていて、

目立つのは、PHP関数のincludeや、file_get_contentsを使いたいというもの



自分のサイトであれば、自由なわけですが、

WordPressのコアファイルをインクルードしてくるような使い方に無防備になりすぎて、当たり前になってしまうのは、ちょっと残念でもあり、外部のhtmlに埋め込む場合などに、もっとオーソドックスな方法がないのかなと、気になり続けている。


ワードプレスには、xmlrpcやatomが使えるようになっているのですが、

投稿の編集を行うわけではないので、もっと手軽にブログの公開情報にアクセスできる
JSON APIというプラグインを利用した方法で、
編集などは行わずに、RESTサービスのようにコンテンツを受け取れる設定ができるので、試してみることにしました。



WordPress › フォーラム » JSON 形式のフィードを出力するプラグインを作りたいですでに、jQueryMobileで使ってみた人がいるようだったので、
コピペでスタート

jQueryMobileは、使ったことがなく、「流行品」であるらしきことはわかったが、どういう仕組みのものかわからず、お勉強した。



ナビゲーションリンクを表示しておいて、toggleしながら、コンテンツを表示するようなもので、html要素に属性を書いていけば、ボタン等のスタイルが自動でついてきたりする仕組みのようだった。
いろんなブラウザで、問題なく使えるというのが、ウリなのだろう

ただ、例えば、aエレメントの中に、h1が入るとか、「浦島太郎」気分になれたり、ということもあります


取りあえず、怪しいながら動くものができたので、リンクします。
(テストが不十分で、変な動きをするかも)



これなら、安全なんていうことはできなくても、テーマファイル等で、コアファイルからインクルードするようなスクリプトを書くよりは、行儀がいいかも


作ってみたけど、課題も

ブログのエントリは、現在のjQueryMobileのような構造で表示する場合は、加工が必要になり、ここの部分をどのようにするかが、動的なデータの取り扱いでは、肝になると思う。
エントリの中には、リンクもあり、そのリンクくりっくしたときには、どんなものが見えるの?ということになる。
実際には、javascriptのついたhtmlを読み込んで、どうなる?で、どうする等‥



モバイル用としてみれば、「ちょっと待て」だと思うけれども、スタティックページに埋め込む作業としては、PHPでもjQueryでも、対応もしやすい



TOP