知っておくとちょっと得する WordPress 3.4の7+1ポイント

20120701WordBenchTokyo.001

2012年7月1日に渋谷にある GMO さんの会場をお借りして、WordBench 東京 at GMO を開催しました。この記事は、その際に発表させていただいた『知っておくとちょっと得する WordPress 3.4の7+1ポイント 』を記事化し、フォローアップを追加したものです。

なお、最近 Retina 的な MacBook Pro を購入したところ、Google Chrome Dev さんが Retina に対応しておらずスクリーンショットの多くがボケボケしております。あらかじめご了承ください( ;∀;)

ショートカット

自己紹介

20120701WordBenchTokyo.003

毎度の自己紹介から。Mighty-works のタモツのナイスアドバイスで、『速習デザイン WordPress 3.x』の執筆協力を追加しました。

20120701WordBenchTokyo.006

8bitOdyssey の facebook ページもやっています。WordBench に登壇する方は、いいねしてください、ってお願いする方が多いので、ぼくもやってみました。

20120701WordBenchTokyo.007.a

ぜひいいねしてください!

20120701WordBenchTokyo.007.b

20120701WordBenchTokyo.007.c

Twitter はこちらです。よろしければフォローを!というところで、自己紹介終了です。本題いきます!

WordPress 3.4 Green

20120701WordBenchTokyo.008

20120701WordBenchTokyo.009

20120701WordBenchTokyo.010

3月11日に、マイクロソフトさんの会場をお借りして WordCrab Tokyo を開催しました。そこにもおいでくださった方はいらっしゃるでしょうか(注:けっこういらっしゃいましたw)

20120701WordBenchTokyo.011

3月のことを覚えている人は忘れてください。すいません、すいません。あまりかぶらない内容にしましたが、一部かぶっています。

WordPress 3.4 にまだしていない方向け

20120701WordBenchTokyo.012

ご自分の管理されているコンテンツを WordPress 3.4 にまだアップグレードされていない方はいらっしゃるでしょうか。(注:ほとんどいらっしゃいませんでしたw)

20120701WordBenchTokyo.013

20120701WordBenchTokyo.014

WordPress 3.4 知っておくとあんしん・便利なリンク集という記事を公開しています。アップグレードの際にトラブルを起こしていたプラグイン等も 3.4 に対応してきており、トラブルの事例も耳にしなくなりましたが、これからアップグレードされるという方はぜひ一度ご覧いただけると幸いです。

さて今日のお題です。

20120701WordBenchTokyo.015

という内容でお話したいと思います。

投稿編集画面からのコメントが可能に

20120701WordBenchTokyo.016

まずは投稿編集画面からのコメントについて。

20120701WordBenchTokyo.017

各記事にコメントがつくと、この部分にコメントが表示されますが、ここに「コメントする」のリンクがつくようになり、

20120701WordBenchTokyo.018

記事から直接コメントに返信できるようになりました。

これまではダッシュボードのコメントウィジェットからもクイック返信できましたが、これからは記事からもできるようになった、ということです。

Twitter の埋め込みが可能に

20120701WordBenchTokyo.019

これまで Twitter の埋め込みというと、Blackbird Pie などのプラグインを使っていたかと思いますが、これからは WordPress の本体だけで埋め込むことができます。

20120701WordBenchTokyo.020

このようにコンテンツ入力欄に表示したい Twitter のステータス URL を貼り付けるだけ。

20120701WordBenchTokyo.021

フロントエンド(ブログ)にはつぶやきだけではなくて、フォローボタンや返信、リツイートなども表示されます(コモモさん、つぶやき借りました。すいません、すいません)。

20120701WordBenchTokyo.022

注意点は、一行には Twitter の URL だけを貼り付けること。<p></p>タグなどで囲んでしまうと、oEmbed が働きません。

PS disable auto formatting のように wpautop の挙動を変えるプラグインが動作していると、うまく Twitter を埋め込めませんでした。対応してくれないかなぁチラッチラッ。

画像キャプションの HTML 対応

20120701WordBenchTokyo.023

続いて画像キャプションの HTML 対応についてです。

20120701WordBenchTokyo.024

キャプションありの画像にリンクを貼ってみましょう。

20120701WordBenchTokyo.025

キャプションの文字を選んで、リンクボタンを押しました。

20120701WordBenchTokyo.026

とまぁ、このようにキャプションにリンクが貼れました。

20120701WordBenchTokyo.027

というわけで、3.4 からは画像のキャプションに HTML が使えるようになりました。引用した画像の著作者(注:ちょしゃくしゃ、この言葉を選んだのは失敗でした。壇上で噛みました(;_;))へのリンクはもちろん、strong タグなどで強調表示をすることも可能です。

3.3 までは自分で HTML を書かなければいけませんでした。

単語カウントから文字でのカウントへ

20120701WordBenchTokyo.028

さて、次に単語カウントから文字でのカウントができるようになったというお話。3.3 まではこれができなかったので、WP Multibyte Patch で対処していました。

20120701WordBenchTokyo.029

ためしに、コンテンツ入力欄に「一二三四五…」と10文字書いてみたところ、ちゃんと文字数が10とカウントされています。

20120701WordBenchTokyo.030

意地悪いことに、さきほど書いた「一二三四五…」に半角と全角のスペースを混ぜても文字数は10のまま。全角・半角スペースはカウントできないようです。

20120701WordBenchTokyo.031

これは、文字カウントを改善するためのスレッド( trac のチケット)ですが、

20120701WordBenchTokyo.032

tenpura さんはとても紳士的な方なので、こんな言い方はしませんが、「スペースカウントできてないよ」とコメント。

20120701WordBenchTokyo.033

それに対してコミッターは「3.4としてはチケットを閉じて、3.5向けに新しく作るから」ということで、3.4としては不十分な対応となってしまいました。

このあと、中国の方が「正しく文字数をカウントできていない」というこのチケットの目的は達成できていない、と食い下がってくれたのですが、結局持ち越しになってしまいました。東アジア圏の悲願達成は 3.5 に!

20120701WordBenchTokyo.034

というわけで、カウントできていないスペースの問題は WP Multibyte Patch で対処がされています。詳しくは tenpura さんのサイトの WP Multibyte Patch 1.6.1 | EastCoder; をご覧ください。

wp_is_mobile 関数の導入

20120701WordBenchTokyo.035

注:当日のセッションでは直前の星野さんの内容と丸かぶりしたため大幅にこの項目を省きましたが、ほんとうだったらこうしゃべってたはずバージョンでお届けします。

続いて、wp_is_mobile 関数の導入です。

20120701WordBenchTokyo.036

wp_is_mobile はモバイル端末向けの条件分岐タグです。この関数を使うことで、PC 向けと、モバイル向けとコンテンツを出し分けることができます。

3.3 までにあった $is_iphone の代わりとなるものだと思われます。

20120701WordBenchTokyo.037

3.4以降に限定されますが、以下のように書くことができます。

20120701WordBenchTokyo.038

この関数は、/wp-includes/vars.php で定義されています。その一部を抜粋したものがこのスライドになりますが、デバイスのユーザーエージェントを読み取って、Mobile、Android、Silk/、Kindle、BlackBerry、Opera Mini というキーワードが含まれていたら、モバイル端末と判定するようになっています。

20120701WordBenchTokyo.039

ただし、この判定の仕方だと、iPad(UA は Mobile Safari です)も Android タブレット(UA は当然 Android。Chrome for Android でも Mobile Safari がヒットします)もモバイル端末と判定されてしまいます。

たしかにモバイルかもしれないけれど、iPad や Android タブレットにいわゆるスマートフォンコンテンツを表示したい、と考える人はあまりいないと思いますので、vars.php を参考に独自で関数を定義したほうが良いのでは、と思います。

テーマカスタマイザー

20120701WordBenchTokyo.040

続いてテーマカスタマイザーについてです。

20120701WordBenchTokyo.041

20120701WordBenchTokyo.042

20120701WordBenchTokyo.043

20120701WordBenchTokyo.044

テーマをリアルタイムにプレビューし、リアルタイムにカスタマイズすることができます。どんどん増えるカスタムメニューも(カスタマイザー API を使うことで)サイドバーに格納することができます。また、3.4 正式版になって管理バーから直接テーマカスタマイザーに移動できるようになりました。

テーマをカスタマイザー対応にしよう、そうしよう

20120701WordBenchTokyo.045

ということで、ここで少しデモをしてみたいと思います(注:Twitter でライブコーディングがはじまるのかな?とつぶやきをいただきましたが、そんな大したものでなくてサーセン!)。

(注:なお、Twitter でいくらか質問をいただいてたみたいですが、デモで使用していたエディターは Sublime Text 2 になります。monokai カラースキームがデフォルトになっていて、階層化も縦線でみやすく、ぼくのお気に入りです!)

20120701WordBenchTokyo.046

自分の作ったテーマあるいは利用しているテーマでテーマカスタマイザーを利用できるようにしてみたいと思います。

ここでは例として toolbox テーマを用いました。また開発者でない方でもできるように基本は Twenty Eleven からのコピー&ペーストをします。というわけで、セキュリティ面等の検証はしておりませんので、あくまで学習用だと思ってください。

20120701WordBenchTokyo.047

とりあえずダウンロードしてきたテーマにコードを追加するのはあまりよろしくないので、子テーマを作ります。

テーマディレクトリに子テーマ用のディレクトリ(ここでは toolbox_child としました)を作成。コメントに template: toolbox を追加した style.css を作成し、管理画面のテーマの管理で、子テーマを適用します。

20120701WordBenchTokyo.048

子テーマが適用されました。

20120701WordBenchTokyo.049

カスタマイザーに収納される項目はこのスライドの通りで、「サイトとキャッチフレーズ」と「固定フロントページ」はどのようなテーマでもデフォルトで表示されるようになっています。

20120701WordBenchTokyo.050

20120701WordBenchTokyo.051

20120701WordBenchTokyo.052

続いてナビゲーションの追加について。

20120701WordBenchTokyo.053

toolbox テーマではデフォルトで表示されるようになっていますが、以下のようなコードを子テーマの functions.php に追加することで表示されます。つまり、カスタムメニューを追加すれば、カスタマイザーにも表示されるわけです。

より詳しくは:Function Reference/register nav menus « WordPress Codex 

20120701WordBenchTokyo.054

追加されたカスタムメニューを選ぶことができます。

続いて、背景画像と背景色の追加について。

20120701WordBenchTokyo.055

これには

を追加します。Twenty Eleven 1.4 の functions.php 106〜111行目にも同様の記述があります。

3.3 までは add_custom_background(); というものが使われていましたが、これは 3.4 から非推奨になりました。

より詳しくは:Custom Backgrounds « WordPress Codex

20120701WordBenchTokyo.056

背景画像の項目が追加されました。

20120701WordBenchTokyo.057

何度も大曲さんにネタになってもらって恐縮ですが、背景画像を貼ったり…

20120701WordBenchTokyo.058

背景色を選択できるようになりました。これで保存して公開すれば、ブログのフロントエンドもこの背景画像/色の設定になります。

20120701WordBenchTokyo.059

さらにさらに、ヘッダーテキスト色とヘッダー画像です。

これは一般に

を追加することで表示されるようになりますが、Twenty Eleven 1.4 の functions.php 116〜145行目に以下のような記述があるので、こちらをそのまま子テーマの functions.php へとコピー&ペーストさせてもらいます。

ただし、これだけではテキスト色は変化しない上にエラーが表示されてしまいますので、次のステップに進みます。

なお、3.3 までにヘッダー画像用の関数として用意されていた add_custom_image_header は 3.4 からは非推奨となっています。

より詳しくは:Custom Headers « WordPress Codex

20120701WordBenchTokyo.060

Twenty Eleven 1.4 の functions.php 212〜327行目に以下の記述がありますので、こちらもコピー&ペーストします。

これでエラーが消え、テキスト色が変化するようになります。

※このままだと関数名の衝突を避けるためにつけている識別子の名称が twentyeleven のままですので、気になる方は toolbox_child などに置換してしまいましょう。そのままでも一応動きます。

20120701WordBenchTokyo.061

色を選ぶと…

20120701WordBenchTokyo.062

このように色が変化しました!

20120701WordBenchTokyo.063

続いてヘッダー画像を挿入できるようにします。

子テーマに header.php を用意して、親テーマの header.php を上書きしてしまいたいので、toolbox テーマの header.php をコピーして、子テーマのディレクトリに置きます。

次に、Twenty Eleven 1.4 の header.php 78〜113行目に以下の記述があるので、こちらを、子テーマの header.php の67行目にコピー&ペーストします。

20120701WordBenchTokyo.064

ヘッダー画像をアップロードしてみると、ちゃんと表示されました!

20120701WordBenchTokyo.065

完成\(^o^)/

20120701WordBenchTokyo.066

ワンモア、ということで

20120701WordBenchTokyo.070

本記事として公開しました!お付き合いありがとうございました!

知っておくとちょっと得する WordPress 3.4の7+1ポイント” への41件のコメント

  1. ピンバック: 2012年7月1日(日)に「WordBench東京 at GMO」を開催しました。 at WordBench 東京

フォームは コメントしてほしそうに こちらを見ている……!