データベースに接続できません

TORIYAMAHONPOS WordPressのまめ知識

  • WordCrab Tokyo 2012

    wordcrab2012年3月11日、マイクロソフト品川本社のセミナールームをお借りして開かれたWordCrab Tokyoに参加してきた。アジェンダは、

    • 新作スクープ!WordPress 3.4
    • WordPressでYahoo!APIを使ってみよう!
    • プラグインカスタマイズを始めた理由、カスタマイズで良かった点・苦労した点
    • 【漫談】PHP Ninja開発の裏側+α

    に加えてライトニングトークという濃い内容だった。
    来月には出てきそうな新バージョンは、テーマプレビューやテーマ検索が改良されている。テーマレビューが急に厳しくなったのはこのためだろうか?デフォルトテーマはミニマルでカスタマイズしやすそうなTwenty Twelveとなる。また翻訳機能が改善されて、フロント側とadmin側で翻訳ファイルが分かれるそうだ。早く使ってみたい!

    さて、いつもの勉強会であるところのWordBench Tokyoと見せかけて、今回の目的はカニを食べる会だった。同会場で行われた懇親会は福井直送のカニに湧き上がった。越前カニおいしい~行ってよかった!

  • 画像のためのテンプレート

    imageテーマを作成する際のオプション的なテンプレートのひとつに、image.phpがある。添付画像を単独で表示するものだ。
    例えばWordPressのデフォルト機能であるショートコードgalleryは、投稿ページの画像一覧をクリックすると画像ごとの詳細ページを見ることができる。とりあえずはsingle.phpが使用されるので、image.phpを用意することで単独画像のタイトル、キャプション、説明、コメントなど詳細を表示することができる。
    bodyタグには”.single-attachment”などのクラスが付加される。これを利用してスタイルを変えることもできる。せっかくだからサイドバーを取り払って、画像を大きく見せるのもよい。

    つくってみたのがこのページ

  • テーマレビュー

    WordPress.orgに申請していたテーマの審査結果が、今朝方戻ってきた。
    提出から3週間もたっているので通過かと思ったら、11項目もの指摘で「不承認」だった。テーマの申請は2回目だし、最新規約も熟読したしたつもりだったから落ち込んでしまう。レビューコメントを読むと、いつのまにそんなに厳しくなっていたの?と泣きたくなったり、必須なら規約に明記して欲しいとむくれたり・・・でもここまで細かくレビューしていただけるのは、やはりありがたい。

    1. テーマURIが不適切。デモサイトが日本語だから???ではないだろうけど、分からない。
    2. 説明文でスペルと文法に問題がある。き、きびしぃ・・・grammarなどいまさらどうすれというのだ?
    3. ライセンスの表記が足りない。以前は「WordPressに準ずる」でよかったが。
    4. 翻訳に使用するテキストドメインは小文字の必要がある。そ、そうなの!?
    5. ドキュメントファイルがない。推奨とあるけど、必須らしい。
    6. テーマで使用している画像のライセンス表記も必要とのこと
    7. h1とh2が同じ文字サイズではだめ。
    8. 記事内のページリンクでフロートをクリアすべき。
    9. 最大幅の定義が実際と異なる。適当だった
    10. タイトルがない記事で一覧からページに移動できない。ごもっとも
    11. function.phpで定義する関数の接頭語は、小文字が望ましい。
  • レスポンシブWebデザインに挑戦

    レスポンシブWebデザインを知ったのは2011年秋ごろ、WordBench埼玉での勉強会だ。それまでは通常のテーマの他に、携帯向けにはKtai Style、スマホ向けにはWPTouchというプラグインを使用して表示を切り替える手法を取っていた。WordPressとしてはスタンダードといえども、デバイス別に3種類のテーマを作成する必要がありメンテナンスがおっくうになりがちだ。プラグイン独自の仕様や相性に泣かされることもあった(英語が分からないだけだけど・・・)
    レスポンシブWebの考えをWordPressに取り入れれば、ひとつのPC用テーマで複数デバイスへの対応が可能になる。WordPressでは最新テーマ「TwentyEleven」が対応しているという。表示幅をどんなに変えようとも、コンテンツは常に画面内にきれいに流し込まれ読みやすい。そういうことだったのか!とすぐに飛びついたものの、テーマとして完成させるには半年ほどかかってしまった。

    Media Queries
    レスポンシブWebを実現するにはCSS3でMedia Queries という手法を使う。完成形のCSSを定義した後に、画面幅が一定ピクセル以下になったらカラムを減らしたり、余白や文字を小さくしたりと、HTMLを変更しないままCSSだけで段階的に適応していく。具体的には公式テーマの「TwentyEleven」の動作やコードを観察するのがよい。

    IE対応
    IE8以下ではMedia Queriesが使えない。その場合でも以下のJavaScriptライブラリを使うとよい。なんとIE6まで対応できてしまう。
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>

    スマホ対応
    レスポンシブWebなテーマが完成したので本ブログに適用した。さっそくスマホから確認してみると、なんということかPCとあまり変わらない表示!?わざわざ幅1000px、800px、650px、450pxと4段階も対応したというのにトホホ・・・。Twenty Elevenとの違いをチェックにかかったところ、HTMLのhead内に記述忘れがあった。レスポンシブとかいう前にこれ重要!
    <meta name="viewport" content="width=device-width" />

    晴れて、PCから見てもスマホから見ても(たぶんiPadも?)いいかんじ!

  • 複数のサイドバーを作成する

    本ブログは3カラムのデザインでサイドバーが2つある。現状、sidebar.phpにまとめて記述してしまっているが、左と右をそれぞれのテーマファイルに分けることもできる。例えば、
    ・sidebar-left.php
    ・sidebar-right.php
    の2ファイルに分けて記述し、index.phpなどからは以下のように呼ぶ。

    get_sidebar('left');
    get_sidebar('right');

  • 不特定多数のカスタムフィールドを取得する

    例えば”hoge”というキー名のカスタムフィールドの値を取得するには、以下となる。
    get_post_meta($post->ID, "hoge", true);

    キー名が不特定多数であるかないか分からない場合もある。そんなときは、以下の方法で任意の投稿に関するすべてのカスタムフィールドを取得することができる。

  • 投稿へのコメントを許可する

    先日の投稿画面の不要なボックスを削除でディスカッションの欄を非表示にしたはいいものの、これでは投稿へのコメントが不許可になってしまうことがわかった。運用上、投稿へのコメントを強制的に許可しておかねばならない。

    これにはwp_insert_post_data というアクションフックを利用する。更新される事前の投稿データがくるので、このタイミングで修正することができる。

    [PHP]
    add_action( ‘wp_insert_post_data’, ‘my_wp_insert_post_data’, 10, 2 );

    function my_wp_insert_post_data( $data, $postarr ) {

    if ( $data[‘comment_status’] == ‘closed’) {
    $data[‘comment_status’] = ‘open’;
    }

    return $data;
    }
    [/PHP]

    もう何年もWordPressを使っているというのに、知らないアクションフックが毎日でてくる。

  • 投稿画面の不要なボックスを削除

    nippiWordPressのバージョンが上がるごとに複雑化するダッシュボードである。できることが増えて便利な反面、ユーザには分かりづらくなってくる。ダッシュボードにログインすると「ワーッ!」ってなっちゃうというのだ。
    mixi日記レベルと思っていたWordPressの更新作業であるが、ユーザはそんな気持ちをかかえていたのか。ダッシュボードが地味すぎるのがダメなのか?このように訴えるクライアントが続けて2件あったため、なんとかしようと思い立った。

    そこで思い出したのが、年末に見せていただいた「WordCamp Tokyo アンケート集計サイト」だ。投稿画面を大胆にカスタマイズして、アンケート集計に撤したものである。そこにはチェックボックスとラジオボタンが並び、本文フィールドは消えていた。見たときには、こんなことができるんだ!使い道がわからないけどなんかかっこいい!ぐらいに思っていた。いざ、アレを使うとき。

    まずは、投稿画面の抜粋やディスカッション、サイドバーのカテゴリ、タグなどわかりずらくて不要と思われるボックスを削除する。削除のタイミングは、ボックスを追加する際と同じアクションフッック add_meta_boxes を利用する。

    [PHP]
    add_action(‘add_meta_boxes’, ’my_add_meta_boxes’, 10, 2 );

    function my_add_meta_boxes($post_type, $post) {
    $meta_boxes = array(
    ‘side’ => array( ‘tagsdiv-post_tag’, ‘categorydiv’, ‘durationdiv’, ‘postimagediv’, ‘formatdiv’ ),
    ‘normal’ => array( ‘trackbacksdiv’, ‘commentstatusdiv’, ‘commentsdiv’, ‘postexcerpt’, ‘postcustom’, ‘slugdiv’, ‘authordiv’, ‘revisionsdiv’ )
    );

    foreach ( $meta_boxes as $position => $boxes ) {
    foreach ( $boxes as $box ) {
    remove_meta_box( $box, $post_type, $position );
    }
    }
    }

    [/PHP]

    かなりすっきりした!
    さらに本文フィールドを消す場合には、別のアクションフック init を利用する。

    [PHP]
    add_action( ‘init’ , ‘my_remove_post_editor_support’ );

    function my_remove_post_editor_support() {
    remove_post_type_support( ‘post’, ‘editor’ );
    }
    [/PHP]

    こうなるともうなんでWordPressでやるの?って感じになってくる。好きだからよいのだ。

    参考にしたのは、
    WordCamp Tokyo アンケート集計サイトの舞台裏 | Simple Colors

  • WordCamp Tokyo 2011

    Wapuu本日、品川シーサイド楽天タワー2号館にて開催されたWordCamp Tokyo 2011に参加してきた。開催されるたびに規模が大きくなるWordPressのイベントである。今回はユーザー/ブロガートラック、デザイナートラック、テクニカルトラックという3種類のセッションが並行して進むなか、時間帯ごとに好きのを選べる形式となった。
    私が選んだのは、

    • アンカンファレンス: WordPress の疑問をみんなで分かち合おう(テクニカル)
    • 早く・良いものを作るための、WordPressサイト構築ワークフロー(デザイン)
    • WordPress の動作原理詳説(テクニカル)
    • WordPress の現在とこれから(キーノート)
    • 実践!オリジナルテーマで作る、スマホサイト&マルチスクリーンサイト(デサイン)
    • WordPress ハイパフォーマンスチューニング Reloaded
    • WordCamp Tokyo 2011 公式サイト制作チーム パネルディスカッション(デサイン)

    ブログツールとはいえいろんな使い方を思いつくものだな、と刺激を受ける。そして
    悩むことといえばお客さんとのコミュニケーションだったり、速度の問題だったりと共感することが多いのも興味深かった。

    最後のライトニングトークでは登壇の機会を戴いた。人前で話すことが苦手なうえ準備も不十分で悔いが残るものの、よい経験でした。聞いてくださった皆様ありがとうございます!
    »WP-Furigana ふりがなを自動入力するプラグインの資料はこちら
    (Web用に修正を加えました)

  • コメント関連で使ってみたプラグイン5つ

    コメント関連で使ったことがあるプラグインをメモ

    • Quick Comments
      画面遷移せずにコメント投稿できる、というのはユーザからけっこう要望をいただくインタフェースだ。なぜならWordPressでコメントした際のエラー表示があまりにしょぼくて見たくないからである。このプラグインを使うと、コメントの入力チェック、エラー表示、表示までの一連の作業がAjaxで行われる。ただ最近のコメント階層や、コメントの並び順に対応していないため、使う機会が減った。とても残念、国産だから対応してくれないかしら?

    • Ajax Comment Posting
      やはりコメント投稿をAjax処理してくれるプラグインだ。エラー表示がLightBox風に表示されるのが好みでない。(画面の真ん中にマウスを持って行ってOKボタンを押すのがめんどい) あとログインしているのに名前の入力が必須となっているのは設計ミスだろう。名前欄がないのでコメント投稿できなくなり、すぐに捨て去った。こんなのも公式プラグイン?

    • Comment Validation
      JavaScriptでチェックできる範囲のエラーが、送信ボタンの下に表示される。コメントが早過ぎたり、重複などのコアなエラーは素画面が表示されるのが不満だ。これも名前とメールアドレスの入力を必須にしていないにもかかわらず、名前欄が必須のエラーとなる。そこさえ直せばこの中では無難といえる。

    • Comment Image
      写真関連の掲示板を頼まれたので、これを使って画像も投稿できる掲示板を実現しようとしている。ファイル参照欄は自動で挿入する形式と、特定の箇所に自力で設置する方式が選べる。掲示板のみで使いたいので後者でやってみた。アップロードされた画像はプラグインのフォルダに保存される模様だ。そのためマルチサイトに未対応となっている。コメント欄のCSSを工夫すれば楽しくなりそう!

    • WP Ajax Edit Comments
      投稿してしまったコメントを、一定の期間内であれば修正できるプラグインだ。コメント欄で使える10のWordPressプラグイン | Webクリエイターボックスで知った。おもしろい!こんなことができるなんて思いつきもしないから、探しもしなかった。

    このなかですぐに使ってみたいと思ったのは、Comment ImageとWP Ajax Edit Commentsだ。どちらもWordPressにはないけど、あったら良いなという機能を実現している。冒頭に挙げたAjaxを使ったコメント投稿はぜひ欲しい機能だけど、コメントが複雑化してきたため対応が難しいのだろうか。なかなか思ったとおりのが見つからない。