投稿者: jim912

リリースされてないけど WordPress 4.0 対応（になるかもしれない）プラグインを作ってみた

インストール時の言語選択
インストール時の言語選択

WordPress 4.0 の beta1 が先日発表されましたね。beta1以降は、バグフィックスのみとなり、新しい機能などは盛り込まれないので、よほど致命的なバグがない限り、ほぼこのままということになるでしょう。

どこらへんが変わったかは、おでさんの「WordPress 4.0 ファーストプレビュー」を見てもらうとして、なんと言っても、表示言語をインストール時に選択することで、言語専用のパッケージが基本的に不要になる（残るのかな）ことが一番の変わった点だと思います。

これは、インストール時にインストールするバージョンに対応した翻訳ファイルのリストをオンラインで取得して表示し、選択した言語の翻訳ファイルをインストール時にダウンロードして適用するような仕組みになっています。

select-wplang

また、「一般設定」画面において、マルチサイトには以前から存在していた「サイトの言語」の選択がシングルインストールにおいても利用できるようになり、インストール済みの言語を選べるようになっています。

で、１つ気になったのが、せっかくオンラインから翻訳ファイルを入手する仕組みがあるのに、インストール時しか言語を入手するインターフェースがなさそうだということです。

幸い 4.0 をインストールする際に利用される wp-admin/setup-config.php には、翻訳ファイルの取得やインストール方法も書いてあったので、これを参考に管理画面から翻訳ファイルを追加できるプラグインを作ってみました。

https://github.com/jim912/WP-Language-Plus

wp-lang-plus

added-langs

追加したい言語にチェックを入れて、下部の Install ボタンをクリックすると、翻訳ファイルを追加できるようになっています。

StaticPress でリンク切れの場合はファイルを作らないようにする

一旦、空のファイルを作って、直後に消すようにするという方法です。

add_filter( 'StaticPress::put_content', 'empty_404_content', 10, 2 );
add_action( 'StaticPress::file_put'   , 'unlink_empty_static_file' );
function empty_404_content( $content, $code ) {
	if ( $code == 404 ) {
		$content = '';
	}
	return $content;
}


function unlink_empty_static_file( $file_dest ) {
	if ( file_exists( $file_dest ) && is_file( $file_dest ) && filesize( $file_dest ) === 0 && is_writable( $file_dest ) ) {
		unlink( $file_dest );
	}
}

WordPress3.9 でビジュアルエディターのブロック要素をカスタマイズする

3.8までは、配列のキー名が theme_advanced_blockformats でしたが、3.9からは、block_formats になり、指定の仕方も単なるカンマ区切りから、表示名=タグ という指定となり、セミコロン区切りに変わっています。
※ 指定値の最後にはセミコロンは不要です。

function custom_editor_settings( $initArray ) {
	$initArray['block_formats'] = 'Paragraph=p;Address=address;Pre=pre;Heading 3=h3;Heading 4=h4;Heading 5=h5;Heading 6=h6';
	return $initArray;
}
add_filter( 'tiny_mce_before_init', 'custom_editor_settings' );

wp39-tinymce-block_formats

SaCSS with WordBench Sapporo, Late2013 参加レポート

sacss-late2013-title

12月14日、札幌で開催された「SaCSS with WordBench Sapporo,Late2013」に参加、登壇して来たので、その時のことを振り返って見たいと思います。

まず、SaCSS ですが、公式サイトにもあるように

『SaCSS（サックス）』は札幌で主にコーダー（マークアップエンジニア）やWebデザイナー向けに、HTMLやCSS、JavaScriptなどフロントエンドの内容を中心に、ほぼ毎月セミナー・勉強会を開催している団体です。

SaCSSは「Sapporo.CSS」もしくは「Sapporo Coding Study & Seminar」を省略した形で、参加者に「サックス」の愛称でよばれております。

と、フロントエンド寄りのWeb系技術セミナーであり、札幌のWeb制作者のコミュニティー形成のような役割も担っている感じです。（違ってたらゴメンなさい）

今回の「SaCSS with WordBench Sapporo,Late2013」の前週にも、「SaCSS Special4 Frontrend in Sapporo」なども開催したり、WordCamp Tokyo 2012 にブース出展もしてくれたり、OSCにも参加するなど、非常に活動が盛んなことも特徴のひとつですね。

個人的には、Vol.24 に参加して以来、毎年1度はおじゃましていて通算３回目の参加となります。

まさか、ここに戻ってこようとは。。
出発直後の窓から。

さて、そんな札幌行きですが、いきなりのトラブル。
定時より少々遅れて飛び立ったフライトですが、青森上空で新千歳空港除雪作業のため、待機するというアナウンスが、そして、待てども待てども着陸できず、結局、燃料不足のため、3時間以上飛び回ったあげくに成田空港に引き返すということに。

天候次第では、北海道行き自体を諦めなければならないかもとも思いましたが、翌日は天候も持ち直し、なんとか確保した羽田発の便で無事行くことができました。

後から得た情報だと、13日の札幌は、雪で自動車の前が見えなくなるほどの大雪だったそうで、それなら飛行機が飛ばないのも致し方ないのかもですね。

WordPressの表示ロジックを理解する Extends
WordPressの表示ロジックを理解する Extends

セミナーでは、「WordPressの表示ロジックを理解する Extends」という内容でお話させていただきました。
この話は、手を変え品を変えで何度も話している内容なのですが、案件レベルでWordPressを扱う際には、是非身につけていただきたい内容です。原理や仕組みを理解することによって、カスタマイズしたい場合は、どこを変更すれば良いか、思い通りに動かない場合は、どこをチェックすれば良いかの見当がつくようになり、課題や問題を早期に解決できるようになるはずです。

WordPressの教科書2とWordPressデザインのメソッドを参加者プレゼント
WordPressの教科書2とWordPressデザインのメソッドを参加者プレゼント

翌日は、バスツアーで支笏湖へ

20131215_112031_original

4G5A3044_original

お世話になりっぱなしでしたが、楽しい２日間を過ごすことができました。本当に、ありがとうございます。

また、来年にも行きたいですな。

20131214_144314

4G5A2957

4G5A2959

管理画面でジェネリコン（Genericons）を使ってみる #wpacja2013

    WordPress Advent Calendar 2013 も残すところあと僅か、しまっていきますぞ。

    bokettch-title

    ごく一部で多大な人気を誇る？プラグイン「Stop the Bokettch」ですが、レスポンシブ化され、メニューやツールバーのアイコンもWebフォント化された WordPress 3.8 では、ツールバーに表示されるべき画像アイコンが表示されず、ちょっとおまぬけな表示になってしまっていました。さらに、1px はみ出てるし。。（まさにぼけっち）

    old-tool-bar-in-bokettch

    また、モバイル端末の画面幅だとアイコン自体も非表示となってしまうことに。。

    old-mobile-admin-bar

    このままでは、さすがに情けないので、ようやく重い腰をあげて WordPress 3.8 に対応することにしたのでした。

    3.8 でアイコンが表示されないという情報は、前から得ていたので Webフォントで使えそうなものがないか探していたのですが、ジェネリコン（Genericons）に、ちょうどよいのがあったので、これを使うことに。
    ※ Genericons は、WordPress.com の運営元でもある Automattic が開発しているアイコンフォントで、デフォルトテーマの Twenty Thirteen や Twenty Fourteen でも採用されています。

    genericons-sample

    参考にしたのは、以下の２記事

    まずは、Genericons を表示できるようにフォントを読み込まなければなりません。が、これは結構簡単で、ダウンロードした Genericons に含まれている genericons.css を読み込むだけで大丈夫です。さらに、wp_enqueue_style を使っておけば、他のプラグインなどで同じCSSを利用する場合でも、重複して読み込んでしまうことを避けることができます。

    wp_enqueue_style( 'genericons', $this->genericons_dir_url . 'genericons.css', array(), '3.0.2' );

    CSS が読み込めたら、他のツールバーで表示されているアイコンを参考にCSSの指定を追加していきます。Genericons のサイトで表示したいアイコンをクリックして、「Copy CSS」をクリックすると、CSSで指定すべきコードをコピーすることができるようになっているので、これを利用するのが便利です。

    copy-css

    font-family プロパティで Genericons を指定し、さらにアイコンの表示位置やサイズを調整して完成。

    #wpadminbar #wp-admin-bar-bokettch-notice .ab-icon:before {
	font-family: 'Genericons';
	content: '\f446';
	color: white;
	font-size: 1.2em;
	top: 1px;
}

    さらに、モバイル端末でも表示されるようにメディアクエリーの指定を追加

    @media screen and (max-width: 782px) {
	#wp-toolbar > ul > li#wp-admin-bar-bokettch-notice {
		display:inline;
	}
	#wpadminbar #wp-admin-bar-bokettch-notice .ab-icon:before {
		font-size: 1em;
		top: 4px;
	}
}

    WordPress 3.7 以前では、元と同じ表示されるようにしたかったので、まずは、バージョン判別用の関数を作成

    private function is_admin_responsive() {
	return version_compare( '3.8.*', get_bloginfo( 'version' ), '<=' );
}

    最終的に、この条件分岐タグを使って、genericons.css の読み込みと、吐き出すCSSをバージョンによって変更するようにしています。詳しくは、ソース嫁

    修正後のツールバーの表示は、こんな感じ。

    updated-adminbar

    アップデートした Stop the Bokettch のダウンロードは、公式ディレクトリからどうぞ。

    こんな形で、プラグインのメンテナンスはそれなりに面倒なときもあったりしますが、自分の興味が尽きない限り続けていきたいと思います。そして、同じように地道にメンテを続けているプラグインの作者さんたちにも惜しみない賛辞を。

    さて、あとアップデートすべきプラグインの数は。。。

    orz

    明日の WordPress Advent Calendar 2013 は、Stop the Bokettch プラグインのタイトルにもなったぼけっちこと、うぇぶるじょんさんが、読まなければ損するとってもお役に立つ内容をお送りするぞ！？