In writing

2012.10.29 追記:もう1個追加しました。

プラグインの導入時に気をつけなければならないのは、環境によってはパーミッションが755になったり、所有者の設定が nobody になったりしてうまく動作しない場合があります。ありました。

  • プラグインとその下層フォルダ(css, csv)は 777 にした方がいい。(プラグインフォルダは755でも良いのかも)
  • css フォルダ内に生成されるフォームごとの CSS は、自分で書き換え権限があったほうが、管理画面以外からでも編集できる。

プラグインのインストールについては割愛します。ダウンロードは下記から。

WordPress > Trust Form ≪ WordPress Plugins
参考:Trust Form-1.2を公開しました | カクニンプラスのweb日誌

元々カスタマイズを前提に作られているもののようなのですが、クラス拡張とか下手くそなので元のソースを弄ったりしています。(でも Advanced Field の使い方がわからない。これも拡張用かな?)
ご利用は計画的に、自己責任でお願いします。

1. checkbox と radio には label をつけて、radio は選択させときたいな!

元の trust-form.php を弄ります。
ユーザビリティ的には必須だと思っているので、まず第一に修正しました。1990行目のあたりかな。
checkbox と radio の出力の際、<label> ~ </label>で囲みました。

それと、radio については何も選択がない場合に一番最初の項目を選択済みに。foreach で 0 番目の項目だった場合にチェックする、という条件を入れました。これは好みというか、TPOに応じていれてください。

そうすると、こんなソースになります。

こうすると、label にスタイルを効かせることができるので、わかりやすい装飾が可能になります。

2. エラーがあった時にメッセージを表示させたい

エラーメッセージを項目ごとにしか取得できない(私が見落としているだけかも)ようなので、function を追加して使えるようにしました。

trust-form.php の1795行目辺りに下記を追加。

これをどういう時に使うかというと、trust-form-tpl-[ID].php の trust_form_show_input() 内で、

というメッセージを表示させることができます。日本語そのまま使うときは、UTF-8で保存してくださいね。

3. サブメッセージを入力欄の下に表示させたい

trust-form-tpl-[ID].php の trust_form_show_input() 内で、$html が制御しているので入れ替えてあげれば良いです。ついでに、必須項目の th にも require クラス入れたかったので、下記のようになりました。

4. URLが同じになってしまうのでパラメータを付ける

アクセス解析の際にはページ名が同じだと解析しにくいので、form の action にパラメータをつけてあげましょう。
trust-form-tpl-[ID].php を編集します。

trust_form_show_input() の form タグの

これを

とします。#trust-form はフォームを入力して次の画面に遷移した際、ページ内リンクが有効になるのであっても取っても可。

もうひとつは、trust_form_show_confirm() の form タグの

これを

とします。#trust-form については上記同様。

これで、
入力画面は 固定ページのURL となり、
確認画面は 固定ページのURL?confirm となり、
完了画面は 固定ページのURL?finish となります。

5. 郵便番号を入力したら住所を自動取得したい

郵便番号からの住所取得もできます。そう、ajaxzip3 ならね。

ajaxzip3 – 郵便番号検索API, JSONP対応 これで郵便番号のメンテナンス作業から解放されます。 – Google Project Hosting

本来は head タグ内に読み込むものなのですが、固定ページのコンテンツ内でも動きました。(とりあえず確認したのはchromeのみ)

1) 固定ページ内で、Trust Form のショートコードの前に下記のように javascript を読み込みます。

フォームがSSLになる場合はこっち↓

2) 郵便番号の項目を設定して、class に zip と入れて、その下に住所の入力項目を設定します。

3) 別途読み込んだ(※) js ファイルに下記を追加。

※別で jQuery を使ってゴニョゴニョしていることもあるので、

としてオリジナルの js ファイルを読み込んでおくと色々追加できるのでオススメです。

これで半角数字で郵便番号を入れると、住所が表示されます。ハイフンのあるなし関係ないので、結構キモチイイ。

6. 共通スタイルシートを読みこませる

Trust Form を使う際には各フォームごとの CSS が生成されるのですが、それを消しちゃって共通のスタイルを読み込ませたい場合の対処方法です。フォームのスタイルを統一しているので、増えると管理が面倒なんですよね…。trust-form.php の940行目あたりを下記のように変更します。

こうすることで特定の CSS があるものは読み込まれ、なければ front.css を読み込みます。

ContactForm 7 より癖がありますが、何より確認画面が表示されるのは素敵!どんどん使って行きたいですね。

12. 10月 2012 · [WP] 先頭固定にする記事が出てきてしまう場合の対処法 はコメントを受け付けていません。 · Categories: WEB制作 · Tags: , ,

sticky tags mean "learn me later"
今日もフォーラムのネタ。

WordPress › フォーラム » WP_Queryで先頭固定指定後、次のWP_Queryがデータを引きずってしまう

今回のフォーラムの質問は「前のデータを引き継いでしまう」という観点でしたが、実は「カテゴリーでフィルタリングしても先頭固定記事が出てきてしまう」というところにありました。

この問題に気づくまでにかなりハマって時間がかかってしまったのは、ここだけの話。SQL のリクエストは正常に帰って来てるのに、$post を var_dump すると求める記事以外にも取得してしまう…そんな風にハマってました。

結論を言ってしまうと、強制固定を解除するパラメーターを渡してやるだけ。

→ 結果:先頭固定記事>カテゴリ3以外の記事 の順で表示

ここに ignore_sticky_posts を追加すると

→ 結果:カテゴリ3以外の記事を表示

参考:テンプレートタグ/query posts – WordPress Codex 日本語版 – 4.10 先頭固定投稿引数

英語ですが、ちゃんと書いてありましたね。

参考:”この投稿を先頭に固定表示”とquery_posts() | firegoby

そして行き着くところはやっぱりこちらのサイト。いつもお世話になっています。

11. 10月 2012 · [WP] 「続きを読む」を画像にする はコメントを受け付けていません。 · Categories: WEB制作 · Tags: , ,

Arrow

フォーラムのネタができたので。

WordPress › フォーラム » the_excerpt()で「続きを読む」を画像にしたい!

やりたいこと:

  • excerpt_more で設定されている […] の部分を画像にしたい
  • マウスオーバーした時に画像を切り替えたい

1. リンク用の画像を1枚用意します

通常時とマウスオーバー時の画像を1枚にします。
つまり、高さか幅が、表示したい大きさの倍になりますね。

続きを読む を画像にするよ

上の画像の場合、16px × 16px で表示させたいので、16px × 32px で作成しました。
テーマの関係で右側に動かしたいので、右側に通常用の画像、左側にマウスオーバー時の画像を配置します。
これを readmore.png というファイル名で、テーマディレクトリの images に置きます。

2. function.php に追記します

下記のコードを追加します。

class の指定と title の指定がポイント。classはあとでスタイルを設定します。
マウスオーバー時にツールチップを出すため、titleにも「続きを読む」を入れてあります。get_the_title() を入れてもOK。

3. style.css に追記します

下記のコードを追記します。

display は inline-block にすれば行中に、 block にすれば改行して表示します。

height と width は本来表示させたい大きさを設定します。

text-indent はアンカータグ内の文字を表示させないためのものです。よく-9999px とかされてますが、適当でいいと思ってます。

.readmore:active, .readmore:hover でマウスオーバー時の挙動を設定します。

画像の例がちょっとアレかもしれないのですが、サンプルはウチのトップページで動いています。
ご質問等あればお気軽に~

09. 10月 2012 · 1 comment · Categories: ダウンロード · Tags:

ふと思い立って、今までのデスクトップピクチャの中にある壁紙では満足できなかったので、Inkscape の試運転も兼ねて壁紙を作ってみました。
11インチ用しかないですが、お気に召された方はどうぞー。

若干グランジ系のストライプ柄

 

暗めでざらっとした質感

 

ちなみに背景画像はシームレスな素材を探して下記サイトにお世話になりました。

Free High Resolution Textures – Lost and Taken – 30 Free Seamless Background Textures

※Apple、Apple のロゴ、Mac OS は、米国および他の国々で登録された Apple Inc. の商標です。

Calendar2013.06.11
パーマリンクに %post_id% を使用しているとうまくいかないため、追記しました。

参考:WordPress category archives by date « Steve Taylor
参考:WordPressで指定したカテゴリーの年別アーカイブを作成する | webOpixel

実際にこのブログに適用してみました。

パーマリンクは下記を設定しています。(カスタム構造)

http://mekemoke.jp/%year%/%monthnum%/%post_id%.html

カテゴリアーカイブは下記のような URL になっています。(「ウェブ解析」カテゴリの場合)

http://mekemoke.jp/category/waca/

日付のアーカイブは下記のような URL になっています。(2012年)

http://mekemoke.jp/2012/

ですが、2012年のウェブ解析カテゴリの記事を表示しようとすると、404 not found になってしまいます。

http://mekemoke.jp/category/waca/2012/ ←動かない

ということで、下記を functions.php に追加してください。

これで、category-○○.php を用意しなくても下記のような URL で年別+カテゴリー別アーカイブにアクセスできます。

http://mekemoke.jp/category/waca/date/2012

うまくいかない場合

function.php に追加した後、一度パーマリンクの設定をデフォルトにしてから、もう一度同じカスタム構造を設定してみてください。上記のスクリプトは、応用すればタグ別の日付表示もできるみたいですね。

以下、過去の方法。

下記のページを参考にさせていただきました。

WordPress でカスタムフィールドの日付から年別アーカイブリストを作成する | wpxtreme

カスタムフィールドの場合はこちらがオススメ

WordPress > フォーラム ≫ 年度別アーカイブは可能でしょうか?

WordPress > フォーラム ≫ 特定カテゴリの「年度別」アーカイブ

あるカテゴリーの記事を対象に、年度ごとにまとめて、アーカイブとして表示させたい場合。例として、

  • 「セミナー情報」というカテゴリーの記事タイトル(+概要)を
  • 「平成23年度」分だけ一覧表示して
  • タイトルをクリックすると該当記事に飛ぶ

ということを実現したいと思います。ポイントは下記の3つです。

  1. アーカイブって言ってるけど使うのはカテゴリー用テンプレート
  2. クエリをカテゴリーで絞り込む
  3. 関数をかませて年別を年度別にする

色々調べてみましたが、専用のカテゴリーページでクエリを書いて抽出するのが一番手っとり早かったのでご紹介します。
URLもそこそこ気持ち良くなりました。

1. カテゴリー用テンプレートを作成

category-○○.php を作ります。とりあえずは公式テンプレート (Twenty ~) をコピーして名前だけ変えておけばOK。

2. カテゴリーを設定したクエリを設定

category-○○.php のコンテンツ表示部分を下記で入れ替えます。

3. 年別を年度別にする

参考:WordPress > フォーラム ≫ 年度別アーカイブは可能でしょうか?

絞り込む対象が年以外にも入ってくるので、上記を少し修正したものを function.php に仕込みました。
ちなみに特定のカテゴリーに関わらず、すべての年別表示を年度別に変換するのでご注意ください。

4. URLにアクセスする

パーマリンク設定をしてあれば、これで特定カテゴリーの年度別のアーカイブページは、

http://www.example.com/category/○○/2011/

というようなURLになります。

5. 立ちはだかる課題

1) ページ自体のタイトルが変!

「2011 | サイト名」のようになってます。SEOも関わってくるし、気になる方は header.php をゴニョってください。

2) どうやってリンクするの?

イレギュラーなURLかと思いますので、WPの関数使うより、PHPで入れ込んでしまうのが手っとり早いです。↓こんなかんじ。

Mailing Junk back to Junk Mailers

追記 2013.03.08 : 1.9.1 の日本語バージョンを作成しました。

追記 2012.10.09 : 1.8.1 の日本語バージョンを作成しました。

追記 2012.10.03 :  1.7.1となって下記がFixされています。Thanks Peter!


WordPress は標準機能として承認機能があり、「寄稿者」で投稿した記事はすべてレビュー待ち(承認待ち)となります。この承認待ちの投稿があった場合に、メールで通知するプラグインが Peter’s Collaboration E-mails というものです。(日本語翻訳はあったようですが、古くなって更新されていないようです)

via: Version 1.9.1: Peter’s Collaboration E-mails for WordPress | Peter’s Useful Crap
公式: WordPress – Peter’s Collaboration E-mails ≪ WordPress Plugins

ダウンロード:
Peter’s Collaboration E-mails 1.9.1 日本語化ファイル(非公式)

Peter’s Collaboration E-mails 1.8.1 日本語化ファイル(非公式)

Peter’s Collaboration E-mails 1.7.0 日本語化ファイル 1.7.1 で同梱されました。

マルチサイトで動かすには、メインブログのテーブルを参照させる修正が必要でした。今はどうだろう?使ってみて動かない場合は下記を参考に修正してみてください。

参考:WordPress Peter’s Collaboration E-mailsをマルチサイトで動かす – 130単位

また、承認申請メール機能と合わせ、承認時のコメントを残せるプラグインも同じ作者(peter)のサイトにありますので、合わせて使うと良さそうです。

時間があったらこっちも翻訳してみようかな。

スマートフォン対応サイトを作るのに便利な jQuery Mobile の最新版が発表されました。新機能としては、ポップアップ、折りたたみが可能なリスト、リストの自動振り分け機能がお目見え。動作も速くなったようです。

via: Announcing jQuery Mobile 1.2.0 Final | jQuery Mobile

jQM 1.2 を使うためには、jQuery の 1.7.0以上(~1.8.2・20121003現在)が必要です。以下のように外部から読み込んでもOK。

というわけで新機能をざっくりレビュー!

1. ポップアップ機能

デモ:jQuery Mobile Docs – Popup

基本的にはダイアログと似ています。
ポップアップとダイアログの違いは、背景が(半)透明なことと、ポップアップ画面外をタップ(クリック)すればポップアップが消えること。
ダイアログは画面が暗くなり、ボタンを押さないと消えませんでした。

ポップアップは閉じるボタンでも消すことができますし、デバイスの戻るボタン(= history.back)にも対応しています。
ただ、タブでの移動はポップアップの下画面にも有効になっています。個人的には許容範囲ですが。

使い方

ポップアップで表示させたい div に data-role=”popup” 要素を追加してidを付与し、アンカータグのリンクにidを設定します。(ダイアログの使い方とほぼ同じ)

何も設定しない場合

1行のテキストを表示します。

ツールチップ表示

複数行のテキストを表示します。画面の色は data-theme で制御。

メニューを表示

リストメニューが使えます。省スペースでいいですね。

階層メニューを表示

ネストしたメニューにも対応しています。これはいい省スペース!

ログイン画面を表示

フォームもポップアップで表示できます。

ダイアログを表示

そのへんをタップすれば消えるタイプ。こっちの方が使い勝手がイイ?

写真を表示

閉じるボタンを組み合わせて使っています。これがあれば lightbox を用意しなくてもいいですね。

その他にもできること

画面に合わせてサイズを自動調整する方法もあります。

jQuery Mobile Docs – Popup images

動画や地図も表示できます。
動画には閉じるボタンついてないので、画面外をクリックしてポップアップを消すのですが、ちょっとバグってしまいました。ビックリ。

jQuery Mobile Docs – Popup iframes

右からにゅっとメニューを出すこともできます。

jQuery Mobile Docs – Popup panels

オプションでポップアップの表示場所を変えたり、表示方法(トランジション)を変えたりすることもできます。

2. 折りたたみ可能なリスト

デモ:jQuery Mobile Docs – Collapsible lists

これは嬉しい!
今まで折り畳まれたリストを表示したい時は、折りたたみコンテンツの中に入れるしかなかったのですが、リスト自体の折りたたみ表示をできるようになりました。
しかもリストの様々な表示方法を受け継いでいるので、検索やサムネイルつきのリストも使えます。
一度開いたリストを閉じることも、そのままにしておくこともできます。
アイコンやテーマも変更可能。複雑なオプションはないので、デモを見れば直感的にわかるかと思います。

3. リストの自動振り分け機能(Autodeviders)

デモ:jQuery Mobile Docs – List Autodividers

リストに data-autodividers=”true” を設定するだけで、自動的に頭文字を割り振ってくれる機能です。
日本語もバッチリ!でした。使うときはふりがなを display:none で設定しておくと良いですよ。

実行するとこんなイメージ↓

4. その他変わったこと

スタイルシート側の変更点も多いです。

1) 表示するだけ(Read-only)のリストがフラットなスタイルになって「リンクではない」という印象が強まった。

2) controlgroups で使用しているアイコンのみのボタンがタップしにくく誤動作を招いていたため、アイコンの回りの padding を大きくし、タップしやすくなった。

3) ツールバーのボタンは mini がデフォルトに。

4) fieldcontainer で使うフォームの入力欄の右側があいていたが、端までの大きさに調整された。

5) 内部のプラグインを独立させ、必要な機能だけを使えるようになった。(カスタムダウンロード)
参考:Download Builder | jQuery Mobile(1.0アルファ版)

6) jQuery 1.8 でいくつかのコードが廃止されたことに伴って jQueryMobile1.2 + jQuery 1.8 では、Blackberry 5 と iOS 3 は対応しきれない部分がある。

7) jQuery 1.6.x はサポート対象外となった。

8) 新しいプラットフォームにも随時対応!
iOS 6、Android 4.1 (Jellybean)、Tizen(日本ではあまり使われていない)、Firefox for Android、Kindle Fire HD(電子書籍リーダー)はすでに対応済み。

9) location.href を利用したXSSに対応。
参考:Masato Kinugawa Security Blog: location.hrefの盲点
参考:jQuery Mobileのlocation.hrefのバグに起因するXSSへの対応をjQuery Mobile 1.1.1に適用したビルドを作りました – へっぽこプログラマーの日記

今まで四苦八苦しながらカスタマイズして使っていたところを、スマートに対応できるようになって嬉しいですね!


02. 10月 2012 · [GS] GameSalad の自分用メモ はコメントを受け付けていません。 · Categories: アプリ開発 · Tags: ,

とりあえずメモ書きです。

  • Project Info は最初はほとんど構わなくてもいい。あとから変えられる。
  • シーンごとに Actors を作って配置する。最初は分けて考えなくてOK。
  • 画面に重力をつけたいなら Inspector の Scene > Gravity でX軸とY軸方向に設定できる。
    100がちょうどいいくらい。
  • Actors は 本体をシーンに配置すると分身になる。分身を編集するとその分身しか編集されないが、本体を編集するとすべての分身に適用される。
  • Actors にはそれが持つ性質(Group)とイベント時のルール(Rule)を決められる。
  • 何かと何かの衝突を実現したいなら、Group に Collide(衝突)の Behavior(動作)を設定してあげるだけでいい。その際、タグで対象を設定するか、特定のActor を選択できる。
  • Actor をマウスに追従させてドラッグ&ドロップするには、touch is pressed で Constain Attribute を2つ追加し、それぞれに self.Position.X To game.Mouse.Position.X と self.Position.Y To game.Mouse.Position.Y を設定すればOK。
  • 衝突した時の跳ね返りは Actor の Attributes > Physics の Bounciness を調整してやる。
  • Play Sound は音量やピッチもいじれる。.ogg に対応している。Play Music は流す音楽を決めてループさせるかどうか決めるだけ。.m4a に対応している。BGMはこっち使ったほうがいいのかな。
  • Tag は Home から Actors を開いた画面で設定できる。左画面の+でタグを設定し、Actors をドラッグしてやればOK。
  • あとは英語だけどフォーラムを見ると結構解決できる。

GameSalad 楽しいよ!

GameSalad 日本語ページ:Home – GameSalad
GameSalad クックプック(手順書等):Manuals – GameSalad

WordPress3.4から、外観→テーマ で「カスタマイズ」という項目(テーマカスタマイザー)があります。Twenty Eleven では特に使いやすくて、プレビューしながら外観を決められますね。

このテーマカスタマイザーには、function.php をいじることでオリジナルの項目を追加できます。
これについては下記のサイトが参考になります。

WordPress3.4のテーマカスタマイザーで自由度の高いテーマを作ろう | webOpixel
WordPress 3.4の新機能テーマカスタマイザーの最速レビュー | firegoby
WordPressのテーマカスタマイザーで画像と色のカスタマイズを可能にする方法 | モンキーレンチ

ただ今回、私がやりたかったのはテキストエリアの追加。そしてテキストエリアはそのままでは追加できません。
フックでは対応できそうもなかったので、WPのコアスクリプトをいじらなければならないかな…と思っていましたが、PHPのクラス拡張で対応している説明記事がありました。

via: Making a custom control for the Theme Customizer » Otto on WordPress

1. customize_register にアクションフック

ここは上記のサイトでも説明されていますので、すでに作ってあれば追加で作る必要はありません。

2. WP_Customize_Control の拡張クラスを作成

管理画面以外で WP_Customize_Control を宣言してもエラーになってしまうので、 if文で囲んだほうが良いでしょう。

WP_Customize_Control を拡張したクラスを作成し、render_content() を上書きします。これは上記 function には入れなくてOK。テキストエリアを使いたい場合は、WP_Customize_Control を拡張したクラスを使用するわけです。

3. add_section + add_setting + add_control

customize_register をフックした function に、下記のようなコードを追加します。add_control では上記と同様、if文で囲んでおいたほうが良いです。

そんなわけで、ちょっといじってできたソースが以下。

こんな感じで追加されました!

4. 設定した値の表示方法

値は下記の方法で取得できます。せっかくのテキストエリアなので、改行を有効(nl2br)にしてあります。

get_theme_mod についての参考ページ:
Function Reference/get theme mod « WordPress Codex
get_theme_mod:WordPress私的マニュアル

テーマ自体をカスタマイズしてしまえば特に必要ないかもしれない機能ですが、たとえばお客様に納品する際に、ページもある程度変更したいということがありますよね。
あとは、マルチサイトでご提供する際に、幾つかのサイトで表示したい項目が異なる場合。例えば住所とか連絡先とか。フッターで使うといい感じです。