understandard » WordPress http://www.understandard.net 雑記と HTML、CSS、WordPress について Thu, 02 Feb 2012 05:56:04 +0000 ja hourly 1 http://wordpress.org/?v=3.3.1 WordPress 3.3 ベータ 1 での変更点: 個人的まとめ http://www.understandard.net/wordpress/wp023.html http://www.understandard.net/wordpress/wp023.html#comments Mon, 17 Oct 2011 08:30:50 +0000 じゅん http://www.understandard.net/?p=788
関連投稿
]]> 10月11日に WordPress 3.3 ベータ 1 が公開されました。
現時点 ( 3.3 ベータ 1 英語版 ) での主な変更点と気になった箇所についてまとめました。

WordPress | 日本語 » WordPress 3.3 ベータ 1
http://ja.wordpress.org/2011/10/11/wordpress-3-3-beta-1/

大きな変更点は以下のとおりです。

  • メディアアップローダー
  • 管理バーの改善
  • 管理サイドバーのサブメニュー・フライアウト（横向き展開）

公式ブログでは上の3つがあげられていましたが、それ以外に気になったところをいくつか。

  • パーマリンク設定に投稿名が追加
  • 通知機能
  • レスポンシブな管理画面
  • API の改善
  • その他細かい変更

メディアアップローダー

Flash ベースのメディアアップローダーから、Plupload というオープンソースのアップローダーに変更。
Plupload の開発は、TinyMCE と同じところが作っているそうです。

メディアアップローダー Plupload

メディアの新規追加をドラッグアンドドロップでできるようになります。
今まで通りの “ ファイルを選択 ” も可能ですが、ドラッグアンドドロップでアップロードすれば、「どのフォルダーだっけ？」と悩むことがなくなるし、手間もちょっと省けると思います。
また、複数ファイルをドラッグアンドドロップでアップロードも可能です。

編集画面からのアップロード

Plupload に変わり、管理画面のボタンが変更になります。
メディアごとに分かれていたボタンが1つにまとまります。

編集画面のボタンが変更

3.3 ベータ 1 に入っている Plupload は、バージョン v1.5b でした。
公開されている最新版は バージョン 1.5.1 です。
この機能に関していくつか修正が入っているので、3.3 正式版がリリースされるときにはバージョンアップしていると思われます。

管理バーの変更

管理バー

現在のものよりも中身がシンプルになった印象。

管理画面のヘッダー部分と統合し、検索窓や外観などがメニューから外されたことで、余計に先頭からのスペースを取らないように。
また、今までフッター部分にあった Codex やフォーラムへのリンクなどがこちらに統合されています。

About This Version ( WordPress ロゴでも同じ ) をクリックすると、新機能の簡単な紹介が表示され、この記事で紹介している大きな変更点が書かれています。

3.2.1 までは、管理画面内の管理バーを使うかどうか選べましたが、3.3 からは自サイトへのリンクが管理バーに含まれているため、非表示にできなくなりました ( Ticket #17899 )。
ログイン中にサイトに表示される管理バーについては、今までと変わらず表示、非表示をプロフィールから選択できます。

管理サイドバー

管理サイドバー

3.2 ではメニューを閉じているとフライアウト式にサブメニューが表示されますが、3.3 からはメニューが開いている時にもフライアウト式でサブメニューが表示されるようになります。
目的のページにたどり着くまでにクリックする回数が減り、素早く辿りつけるようになります。

メニューを開きっぱなしにしておきたい人には不評かもしれませんが、それについては新バージョンに慣れてしまったほうがいいかと。
メニュー自体は隠れているだけなので、どうしても現行の開閉式がいいというのであれば、管理画面の CSS と JavaScript を変更すればできると思います。

パーマリンク設定に投稿名が追加

%postname% が冗長な rewrite rule をもたらさないようにするというチケット ( Ticket #16687 ) があり、選択肢に投稿名が追加されていました。

パーマリンク設定に投稿名が追加

参考: So really, don’t use just /%postname%/ as your permalink structure. | Digging into WordPress
http://digwp.com/2011/06/dont-use-postname/

という記事があったりとあまり良くないイメージだった %postname% 単体での設定ですが、3.3 からは他の基本設定と同じように使えるようになるみたいです。

通知機能

通知機能

ユーザー向けの新機能が WordPress のコアアップデートに含まれている場合、インストール時とアップデート後に一度だけ新機能をハイライト表示してくれるようになります。

この機能をオフにするにする方法は次のリンク先で紹介されています。
正式版リリース時に変更になっている可能性もあるので、使用する場合は要確認。

参考: How to Add and Deactivate the new Feature Pointer in WordPress 3.3 – Please note, WordPress, Pointer, Without, Also, JS-function – WP Engineer

レスポンシブな管理画面

Twenty Eleven でレスポンシブ・デザインが採用されましたが、今回は管理画面にもレスポンシブ・デザインが一部採用されました ( Ticket #18198 )。

レスポンシブな管理画面

ダッシュボードを開いた状態でブラウザの横幅を狭くしていくと、ダッシュボードウィジェットの横幅がだんだんと狭くなっていき、管理サイドバーが自動的に閉じます。
それ以上は特にアクションはなく、最後は横スクロールが表示されます。

これくらいしか見つけられなかったですが、他に何か見つけられた方は教えて下さい。

編集画面では重なってしまう

編集画面で試してみましたが、タイトルや本文の入力欄が狭まらず、要素が重なってしまいます。

Responsive Admin for Small Screen Devices という名前で別のチケットが切られていて ( Ticket #18655 ) 、 マイルストーンが Future Release となっているので、3.3 では対応されないかもしれません。

3.3 でどれくらい対応されるかはまだ不明ですが、今後はより一層マルチデバイス対応や様々なブラウザのサイズへの対応がされていくようです。

ウィジェット関連

テキストウィジェットでショートコードが使えるように ( Ticket #10457 )。
また、テーマを変更した際にウィジェットの中身が消えないようになったそうです ( Ticket #17979 )。

さよなら IE 7 ?

3.2 で IE 6 が管理画面非対応になり、まともに見れる状態ではなくなりました。

3.3 ベータ 1 では、フライアウトメニューのレイヤーが下にもぐりこんでしまったり、メディアアップローダーが使えなかったので、3.3 で IE 7非対応になるのかなと思っていましたが、とりあえず今回は IE 7 非対応にすることは無さそうです ( Ticket #18199 )。

フライアウトメニューに関しては、Flyout Menus Unusable in IE7 (Layering) ( Ticket #18924 )というものがあったので、ベータ 2 では直っているはずです。

メディアアップローダーに関しては、No way to upload media in IE7 (Select File doesn’t respond) ( Ticket #18918 ) というものがあったので、ボタンが消える問題は修正されそう。ただ、目玉機能の1つのドラッグアンドドロップでのアップロードはできない可能性が高いです ( たぶん IE 8 も )。

管理画面が HTML 5 に

管理画面が HTML 5 のドキュメントタイプに変更になっています ( #18202 )。

<!-- WordPress 3.2.1 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  dir="ltr" lang="ja">

<!-- WordPress 3.3 beta 1 -->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"  dir="ltr" lang="en-US">
<head>

その他細かい変更

  • テーマリポジトリーとテーマインストーラーが子テーマ対応
  • API の改善 ( メタデータ API、設定 API、エディタ API )
  • 同梱の jQuery は 1.6.4、jQuery UI は 1.8.16 に ( 3.2.1 では jQuery 1.6.1、jQuery UI 1.8.12 )
  • TinyMCE のバージョンが 3.4.2 から 3.4.5 に

最後に

WordPress 3.3 は、順調に進めば11月の終わりごろに正式版がリリースになる予定のようです。

冒頭で紹介した記事にも書いてありますが、現在はまだベータ版です。
いち早く新バージョンを試してみたい方やベータテスターとして協力したい方は、ローカル環境などの現在稼働中のサイト以外のところで試してみてください。

今回初めてベータ版について記事を書いてみましたが、書いてる途中でバグフィックスされたり、マイルストーンが Future Release に変わったり。まとめるのはリリース候補版が出てからのほうがいいなと思いました。。。

関連投稿
]]> http://www.understandard.net/wordpress/wp023.html/feed 27 サラ・キャノン「WordPress とレスポンシブ・ウェブ・デザイン」に参加してきました http://www.understandard.net/diary/diary073.html http://www.understandard.net/diary/diary073.html#comments Sun, 28 Aug 2011 09:15:18 +0000 じゅん http://www.understandard.net/?p=708
関連投稿
]]> diary073.jpg

8月19日、シラサカさんがやっている Jelly Jelly Cafe 渋谷で行なわれた、サラ・キャノン「WordPress とレスポンシブ・ウェブ・デザイン」に参加してきました。

サンフランシスコで行なわれた WordCamp で講演された際のスライドを元に進められました。
通訳は Toru さんが担当してくれました。

多様化するデバイスに対応する1つの手段としての Media Queries と、それを使用してのサイト設計についての基礎的な内容でした。
使用されたスライドは、SlideShare にアップロードされています。参考サイトや WordPress テーマのデモへのリンクが紹介されているので、それらの内容をチェックしたい方はスライドを参照してください。

Responsive Web Design – WordCamp San Francisco

WordPress 3.2からのデフォルトテーマ Twenty Eleven でも仕様されている Media Queries。
このテーマは、ブラウザサイズによってレイアウトや文字サイズが変化するように設計されています。
公式のデモが公開されているので、Twenty Eleven を使用したことがない方は、デモページを開いて、ウィンドウサイズを変えてみたり、モバイルデバイスで表示してみると Media Queries の面白さが分かるのではと思います。

デモ: The Twenty Eleven Theme | Just another WordPress.com site

WordPress テーマ以外には、以下のようなサイトが紹介されていました。

Hicksdesign: design for print and new-fangled media
Food Sense | Plant-Based Eating At Its Best

Media Queries は、Media Queries を使用したサイトのギャラリー。
上に挙げた2つのサイトを始め、かなりの数のサイトが紹介されているので、実際に Media Queries を取り入れようとしたときに参考にできるのではないでしょうか。見てるだけでも結構楽しいです。サイト名も素敵な感じです。

サラさんがおすすめしていた書籍は、A Book Apart, Responsive Web Design。
著者は、スライドに登場した Ethan Marcotte さん。
英語の内容なので、読むのがちょっと大変かもしれませんが・・・
電子書籍版は、9ドルで購入できるようです。

これ以降の内容に、Media Queries に関する説明、サンプルコードなどはないので、Media Queries について知らない方は調べてみてください。

以下、今回の感想など。

Media Queries は万能の技術なのか

僕はまだ Media Queries に関して、ちゃんと調べたり、実装したりしたことがなく、「そういうものがある」程度の認識でした。
以下については、そういった状態で参加し、感じたことです。

レスポンシブ・ウェブ・デザインは、デバイスのウィンドウサイズに合わせて、レイアウトや見た目に切り替えるデザインのこと。
見た目よりも、サイト設計という意味でのデザインが重要。

Media Queries を活用し、1つの HTML ( + CSS ) のみで様々なデバイスに対応することができる。
これだけ書かれると、魔法みたいな素晴らしい技術に思えますが、最適化するのは大変な作業になる。
デバイスが多様化しているが、可能な限り多くの検証環境でチェックしておかないといけない。
不向きなケースも出てくるはずで、何でもかんでも Media Queries で解決！というわけにはいかない。

WebDesignShock の 11 Reasons why responsive web design isn’t that cool! （英語）という記事にまとまっていますが、閲覧環境以外の環境に指定されている背景画像など不要なファイルもダウンロードしてしまったり、パソコンに比べ非力なモバイル環境で CPU とメモリを消費する画像のリサイズが必要になったり（もちろん回線速度も）と、現段階では解消されてない問題点があることを忘れてはいけない。

これらの問題を回避するためには、サイトの設計段階で色々と考えなければいけません（例えば、背景画像使わないようにするとか）。
「流行っているから」という理由でこの手法を取り入れるのではなく、どのサイトにどのような意図で組み込むかを意識したいです。
既存サイトに組み込もうというのもかなり大変な作業になるんじゃないかと思います。

ユーザーエージェントから判断するなどして、携帯用サイトとパソコン向けサイトで 別の HTML を表示するというように、デバイスによって見せ方を変えるということ自体は以前より行なわれてきた手法です。
Media Queries が出てきたからといって、今までの手法がなくなることはないと思います。
それぞれの特性を理解し、その都度最適な手法を取ればいいと思います。

個人的なことになりますが、スマートフォン向けページのズームがしにくい（というよりできない）のがすごく不便で、デスクトップ版と同じデザインで見たいと思うことがあります。
そういった場合、どちらの表示を有効にするか選べると嬉しいです。

うまくまとまってないなと思った方、すいません。。。

公演終了後はそのまま Jelly Jelly Cafe で懇親会。
電車の都合で最後までは参加できませんでしたが、最近あまりお会いできてなかった方とゆっくり話せたり、Twitter では交流があったけどお会いしたことがなかった方とお会いできたりといい夜になりました。

関連投稿
]]> http://www.understandard.net/diary/diary073.html/feed 2 WordPress 3.2が出るまでに確認すること http://www.understandard.net/wordpress/wp022.html http://www.understandard.net/wordpress/wp022.html#comments Fri, 27 May 2011 09:12:39 +0000 じゅん http://www.understandard.net/?p=607
関連投稿
]]> 本日5月27日は WordPress の8歳の誕生日ということで、時期バージョンの WordPress 3.2のことを。

必要要件の変更

6月30日のリリースを目指し開発がされている WordPress 3.2では、PHP 5.2 以上、MySQL 5.0.15以上でないと動作および3.1系からのアップデートができません。

現在の環境が3.2に対応しているかどうかは、WordPress.org 公式の Health Check というプラグインで簡単にチェックできます。

WordPress › Health Check « WordPress Plugins

同梱 jQuery のバージョン

PHP、MySQL 以外では、同梱される jQuery のバージョンが1.4.4から1.6.1に変更になるようです。
これにより、テーマやプラグインが不具合を起こす可能性があるので、こちらもチェックしておきましょう。

jQuery のバージョンアップについては、WordPress のコア開発チームのブログで書かれています。

jQuery updates in WordPress 3.2 « WordPress Development Updates

記事に書かれている内容は以下の2点について。

[property=value] というセレクターは引用符が必要

$('input[name=submit]')

という書き方ではなく、下のような書き方で。

$('input[name="submit"]')

.prop() メソッドを使う

‘selected’、‘checked’、‘disabled’ プロパティは .attr() ではなく、jQuery 1.6で新しく追加された .prop() メソッドを使うようにする。

.attr() でも動くものもありますが、下のようなコードでは期待した通りの結果にはなりません。

.attr('checked', '')

その他の変更点などは、以下の記事を参考にしてみてください。

jQuery: » jQuery 1.6.1 Released
jQuery1.6の更新内容をまとめたよ。 | Ginpen.com
jQuery1.6のattr()で困ったら、1.6.1にすればいいみたい。 | Ginpen.com

管理画面の変更

また、管理画面が若干変更になるようです。個人的な感想としてはおしゃれになったかなという感じ。
左下に移動した、メニューを折りたたむ (Collapse menu) 部分は新しいほうが分かりやすいなと思います。

wp022-1.png

バージョン3.2のスクリーンショットは以下のページにたっぷり掲載されています。
おでさんの記事には新デフォルトテーマ Twenty Eleven についても書かれています。

Upcoming Admin Style Refresh in WordPress 3.2 « tekArtist

噂の「WordPress 3.2 の新機能」を体験せよ！ | Odysseygate.com

Good Bye IE 6

WordPress 3.2から管理画面での IE 6サポートが終了となります。
IE 6で管理画面にログインするとレイアウトは崩れますが、Internet Explorer のアップデートリンクと、Browse Happy へのリンクが表示されます。これだけ崩れていると、ちゃんと使うことはできないと思います。

wp022-2.png

IE 7ではそれなりに管理画面が表示されるようですが、こちらも最新ブラウザーではないので Internet Explorer のアップデートリンクなどが表示されます。IE 6とは少し違った表示になっています。

wp022-3.png

ウェブ制作をしている方はメインブラウザーが IE 6以上でしょうし、制作者にとっては大きな問題ではないと思います。
お客さんが IE 6だけしか使用できず、Chrome や Firefox をインストールできないという場合には、管理者権限不要の Google Chrome Frame 開発者向けビルドを試してみるとか…。

ということで、WordPress の誕生日記事は以上で。

関連投稿
]]> http://www.understandard.net/wordpress/wp022.html/feed 52 SaCSS vol. 24に参加してきました http://www.understandard.net/diary/diary069.html http://www.understandard.net/diary/diary069.html#comments Thu, 19 May 2011 12:00:53 +0000 じゅん http://www.understandard.net/?p=578
関連投稿
]]> 5月14日にハムさん( @h2ham ) 主催の SaCSS vol. 24に参加してきました。
会場は、札幌市産業振興センターというところ。

sacssvol24bnr.png

参加者40名、約5時間という長丁場の勉強会。

発表資料

当日発表したスライドを加筆修正したものをスライドシェアで公開しています。
今回僕は、「WordPress を自分好みに」というタイトルで、functions.php にちょっと書き足すだけでできるカスタマイズ方法を紹介しました。

SaCSS vol. 24
View more presentations from understandard

フックについて簡単に話をしているのですが、「フックってなに？」というのは、以前自分自身が戸惑ったところでした。
コードを見ていると、すごく難しいことをやっているように見えてしまって。

今回は初心者向けの内容をということだったので、フックって怖いものじゃないんだよということを感じてもらえればと、add_filter() と add_action() の紹介のような内容になっています。

不明点や間違いなどがありましたら、こちらのコメント欄などでお知らせいただけたらと思います。

関連投稿
]]> http://www.understandard.net/diary/diary069.html/feed 2 WordPress 3.1で追加された管理バーを非表示にする方法 http://www.understandard.net/wordpress/wp021.html http://www.understandard.net/wordpress/wp021.html#comments Tue, 01 Mar 2011 07:54:39 +0000 じゅん http://www.understandard.net/?p=502
関連投稿
]]> WordPress 3.1がリリースされ、ログイン中にはサイトに管理バーが表示されるようになりました。

管理バー

この機能が不要な場合は、管理画面のプロフィール設定から表示・非表示を切り替えられます。

プロフィール設定

毎回この設定を変更するのは面倒

ユーザーが1人の場合などは一回設定をすればいいですが、複数のサイトのユーザーについて毎回管理バーを非表示にするためにポチポチしていくのは面倒です。

WordPress Codex に管理バーを非表示にする方法が書いてあったので、このサイトで試してみました。
functions.php に以下の記述を追加するだけで一括で非表示にできます。

function my_function_admin_bar(){
return false;
}
add_filter( 'show_admin_bar' , 'my_function_admin_bar');

もっと単純に以下の1文でも非表示にできました。

add_filter( 'show_admin_bar', '__return_false' );

この方法で非表示にすることはできたのですが、functions.php を更新したあとに管理画面からログアウト→再ログインしないと設定が反映されませんでした。
僕の環境だけかもしれませんが、うまくいかなかった場合はログアウト→再ログインしてみてください。

なお、管理者でログインしている場合のみ表示するようにしたい場合は以下のようにすればよいそうです。

function my_function_admin_bar($content) {
return ( current_user_can("administrator") ) ? $content : false;
}
add_filter( 'show_admin_bar' , 'my_function_admin_bar');

参照：Plugin API/Filter Reference/show admin bar « WordPress Codex

管理画面からも消し去るには

先の方法で管理バーを非表示にすることができますが、管理画面には設定項目が残っています。
ここにチェックを入れても表示されませんが、不要な項目なのでこちらも非表示にしてしまいます。

add_action('admin_print_styles-profile.php', 'disable_admin_bar_prefs');
function disable_admin_bar_prefs() {?>
<style type="text/css">
    .show-admin-bar {display:none;}
</style>
<?php
}

ちょっと強引な感じですが、表示されているメニューを display:none; で消してます。
こちらはよりいい方法が見つかれば、こちらの記事も修正したいと思います。

関連投稿
]]> http://www.understandard.net/wordpress/wp021.html/feed 15