oEmbed Gist 1.1.0

oEmbed Gistをアップデートしました。

http://firegoby.theta.ne.jp/wp/oembed-gist

今回のアップデートでは、JavaScriptが無効のユーザーに対して<noscript>を出力するよう修正しました。

この修正に対してパッチを送付いただいた、Alex Kingさんにお礼を申し上げます。

なんかこのAlex KingさんはWordPress界では有名な人らしく。

うぉ!みやさんが、Alex King に褒められとる! - oEmbed Gist Plugin for WordPress : alexking.org http://t.co/6v7TqAL via @alexkingorg

みたいなリアクションがあったので、

ところでだれ?

と、きいたら教えてくれました。

@miya0001 Crowd Favorite のチーフオフィサーの人ですよ~。プラグイン開発者でもあるから、デンバーのまがりん、みたいな感じ? 日本ではモバイルプラグインで有名だったので、デンバーのゆりこさんみたいな感じ?

まがりんとゆりこさんを足して2で割ったような感じ?

たしかにすごそう…w

WordPressで固定ページにも投稿フォーマットを有効にしてページごとに違うスタイルを適用する。

WordPressの投稿フォーマットを使用すると、投稿毎に異なったスタイルを適用することができるので、超便利です。

しかし、この便利な投稿フォーマットはデフォルトでは固定ページで使用できません。

代わりに固定ページではページテンプレートというのが使用できますが、テンプレートファイルを作ったりCSSを書いたりするのが面倒だったので、固定ページで投稿フォーマットを有効にしてみました。

以下は、テーマファイルのfunctions.phpに記述して下さい。

ステップ1: 固定ページの投稿画面上で投稿フォーマットを有効にする。

管理画面側で投稿フォーマットを有効にするには以下の1行をfunctions.phpに記述するだけでオッケーです。

add_post_type_support('page', 'post-formats');

たったこれだけで以下のように投稿フォーマット選択用のメタボックスが追加されました。

固定ページの一覧画面でも以下のような感じで投稿フォーマットが表示されます。

ステップ2: 投稿フォーマットに応じたclass属性を出力する。

密かにステップ1の作業だけでclass属性が出力されることを期待したのですが、残念ながらこの部分はsingleページかどうかの条件分岐の中に入っていたので、フィルターフックでclass属性を追加する必要があります。

以下のソースをテーマのfunctions.phpにコピペして下さい。

add_filter("body_class", "my_body_class");
function my_body_class($classes) {
    if (is_page()) {
        global $post;
        $fmt = 'page-format-'.get_post_format($post->ID);
        $classes[] = $fmt;
    }
    return $classes;
}

ここまでの作業が完了したら、固定ページ上で任意の投稿フォーマットを選択して、実際のページ上のbody要素にpage-format-asideなどのclass属性が追加されたことを確認して下さい。

あとは、CSSをゴニョゴニョするだけです。

WordPressでプラグインなしで画像にパスワードをかける

試してないのですが、以下のように.htaccessで制御する記事を海外のブログで見つけたので、メモがわりに書いておきます。

この方法を使用するとプラグインを使わなくてもアップロードファイルにパスワード保護をかけられるので、SNS系のシステムなどを構築するのに便利かもしれません。

方法はとてもシンプルで、以下のソースを.htaccessに記述するだけです。

試してないのであしからず。

ATNDのURLをコピペするだけでイベントを記事に挿入できるWordPressプラグイン

リリースパーティだとか、キャンプだとかビーチだとかベンチだとか、夏になってからイベントが盛りだくさんの今日この頃。

リクルートさんがやってるイベント開催支援ツールATNDに登録されたイベントのURLをコピペするだけでWordPressの記事内に表示出来ちゃうというイベント主催者様御用達のプラグインを作りました。

まだアルファ版レベルなので、仕様変更があると思いますので、ご理解いただける方のみご利用ください。

使い方

  • ATNDのイベントのパーマリンクをコピーしてWordPressのエディター上にペーストしてください。
  • あとは、保存ボタンをクリックするだけです。
  • CSSは自力でご用意下さい。

仕様

  • イベント用のデータはATND APIから取得しHTMLを生成したあと、3600秒キャッシュします。
  • キャッシュ時間はURLの末尾にhttp://atnd.org/events/9999#6000のようにハッシュリンクで指定できます。
  • テンプレート及び時間のフォーマットにはフィルターフックがありますので、テーマのfunctions.phpなどでカスタマイズできます。
    • atnd_template – テンプレートのフィルターフック
    • atnd_date_format – 日時のフォーマットのフィルターフック

今後について

以下の機能を実装した後、公式ディレクトリに登録します。

  • Googleカレンダーに登録するためのリンクを設置
  • その他のAPIとのマッシュアップ(最寄り駅の表示とか)

このバージョンをダウンロードした方でも、公式ディレクトリ掲載後は自動アップデートが適用されます。

あとフィードバックを募集中です。

HTMLの改善案とかこれとマッシュアップしたら便利だよとか。大歓迎します。

ダウンロード

アルファバージョンをダウンロード

サンプル

ATND上のデモイベントを以下に掲載しています。デモイベントに登録された内容がh1から始まったりしてるので、ちょっとバランスが変です。

ATNDデモイベント(タイトル)

このイベントはATNDのデモです。実際に開催されることはありませんが、自由に参加/キャンセルをしてみてください(サブタイトル)

SAMPLE: イベントの概要を編集しましょう。

ここでは通常のHTMLの他、 Textile記法 でも記述することができます。

Textile記法について

Textile記法では、*太字* や 斜体取消線 など、HTMLを使わずに簡単に書くことができます。

うまく動かない場合は、記号の前後に半角スペースが入っているかを確認しましょう

  • 箇条書き
    1. でも
    1. 書くことが
  • できます

記法については、 こちら を参考にしてください。

プレビューについて

概要のプレビューについては PREVIEW ボタンを押してみてください。グレー地部分に変換内容が表示されます。

タイムテーブル

時間 発表者 タイトル
19:00 – 19:30 Aさん Aについて
19:30 – 20:30 Bさん Bについて
20:30 – 21:00 Cさん Cについて

場所

MTL(デモ)
住所: 東京都中央区銀座7-2-6 リクルートアネックス1ビル B1F(デモ)

講演概要

Aについて
  • 出演
    • Aさん
    • 概要
  • 「A」の生まれた背景・概要・利点などの紹介

Bについて
  • 出演
    • Bさん
    • 概要
  • 「B」の生まれた背景・概要・利点などの紹介

日時2012年02月28日15時00分 - 2012年02月29日14時30分
参加者 / 定員48名 / 48名 (補欠者: 803名)
会場MTL
住所東京都中央区銀座7-2-6 リクルートアネックス1ビル
URLhttp://atnd.org/
主催者knjko
更新2011年10月09日05時32分

 

WordPressで”抜粋”をmeta要素のdescriptionに使用する。

WP Total Hacksプラグインを使うとページでも”抜粋”が利用出来るようになります。

それならばということで、metaタグのdescriptionにこの抜粋を使えるようにしようということになりました。

以下のソースをテーマのfunctions.phpにコピペすると、抜粋に入力したテキストが<meta name=”description” content=”…” /> として出力されます。

SEOはそれほど詳しくありませんが、本文を自動的に切ったりするより、自分でテキストを入力した方がSEO的にはいいよね。そうだよね!

そういえば、WordPress3.2での初投稿です!

WordPressによるサイト構築テクニック – カスタムヘッダー機能を使ってロゴ画像を変更できるようにする。

昨日の続きです。

WordPressにはカスタムヘッダーという機能があります。

この機能を使うと以下のようにヘッダーの画像をブラウザからアップロードしてトリミングしたりすることができます。

とても便利な機能ですよね。

ですが、今回制作したサイトでは、この部分は選択した記事の投稿サムネールをスライド表示しているため使いませんでした。

でも、こんな便利な機能をオフにしておくのは、もったいない。

というわけで、このカスタムヘッダー機能を利用して、サイト上部のロゴ画像を変更できるようにするためのテクニックをご紹介します。

このテクニックを使用すると、Googeのようにイベントなどに合わせてロゴを変更できますので、とっても便利です。

完成後のイメージ

カスタムヘッダーを使用したロゴの設置結果は以下のような感じです。

管理画面は以下のような感じ。

ロゴ画像を新規にアップロードできることに加えて、あらかじめ用意した画像の中から選択することもできます。
(この例ではクリスマスシーズン用のロゴをあらかじめ用意しています。)

テーマのfunctions.phpへの記述

カスタムヘッダーを使用するための要点は以下のとおりです。

  • カスタムヘッダーを有効にする。
  • カスタムヘッダー用の画像の幅と高さを設定する。
  • デフォルトのロゴを設定する。
  • その他のデフォルト画像を設定する。
  • テキストを非表示にする。

これらを実現するためのfunctions.phpに記述するべきソースは以下のような感じです。

// デフォルトのロゴまでのURL
define('HEADER_IMAGE', get_bloginfo('stylesheet_directory').'/img/logo.png');

ロゴ画像の幅と高さ
define('HEADER_IMAGE_WIDTH', 380);
define('HEADER_IMAGE_HEIGHT', 80);

// 今回は使用しないので''としておく
define('HEADER_TEXTCOLOR', '');

// カスタムヘッダーを有効にするための記述
add_custom_image_header('', 'my_admin_header_style');

// その他のロゴ画像を配列で指定する。
register_default_headers( array(
        'Merry Christmas' => array(
            'url' => get_bloginfo('stylesheet_directory').'/img/xmas.png',
            'thumbnail_url' => get_bloginfo('stylesheet_directory').'/img/xmas.png',
            'description' => 'クリスマス用ロゴ'
        ),
    )
);

// 管理画面用のスタイルの設定。多くの場合以下のままでいい。

function my_admin_header_style() {
?>
<style type="text/css">
/* Shows the same border as on front end */
#headimg {
    background-repeat: no-repeat;
}
</style>
<?php
}

ここまでの作業で管理画面側の作業は終わりです。

テーマのheader.phpにロゴを設置する。

実際のサイトのほうにロゴを設置するには、テーマファイルの中のheader.phpを編集します。

今回制作したサイトでは以下のような感じです。

header_image()関数をコールすればカスタムヘッダーで指定された画像までのURLを取得できます。

<h1>
  <a style="background-image:url(<?php header_image(); ?>);" href="<?php echo home_url('/'); ?>">
    <?php bloginfo( 'name' ); ?>
  </a>
</h1>

あと、style.cssには以下のような感じ。

これはお好みでどうぞ。

#header h1 a
{
    width: 380px;
    height: 80px;
    display: block;
    background-repeat: no-repeat;
    overflow: hidden;
    text-indent: -9999px;
}

以上でカスタムヘッダー機能を応用したロゴ画像の設置は終了です。

カスタムヘッダーもロゴ画像も両方とも使いたい!

ヘッダー画像もロゴも管理画面からアップロードしたい時は、@jim0912さんがいい方法をブログに書いてくれてます。

http://www.warna.info/archives/885/

ロゴ画像のリサイズが出来ないのですが、両方同時に使う場合にはおすすめです。

WordPressによるサイト構築テクニック – トップページをウィジェット化する

お客様から快く承諾を頂いたので、最近公開したお客さんのサイトでやってることを本日から何回かに分けてざくっと紹介します。

南紀串本リゾート大島

テーマについて

条件によっていろいろですが、今回はtwenty tenテーマの子テーマとして作成しました。

twenty tenはテーマフレームワークとしてもよく出来ているので、個人的に気に入ってます。

トップページをウィジェット化するメリット

トップページをウィジェット化するメリットはメンテナンス性です。

他のページと違ってトップページは、キャンペーンやイベントなどに応じてタイムリーにコンテンツを変えていきたいという要望が少なからずあります。

そんな時に。メインコンテンツの部分もサイドバーウィジェットで構成すると、お客様でも柔軟なカスタマイズが可能になりますので、細かいことをあまり言われなくなります。(笑)

トップページをウィジェット化するための手順

たとえば、Twenty Tenの子テーマでトップページをウィジェット化するのはとても簡単です。

まず、テーマのfunctions.phpに以下のソースをコピペしてください。

register_sidebar( array(
    'name' => 'Home Widget Area',
    'id' => 'home-widget-area',
    'description' => 'The HOME widget area',
    'before_widget' => '<div id="%1$s" class="home-widget-container %2$s">',
    'after_widget' => '</div>',
    'before_title' => '<h2 class="widget-title">',
    'after_title' => '</h2>',
));

次にloop-index.phpというファイルを作成して以下のソースをコピペするだけです。

<?php dynamic_sidebar('home-widget-area'); ?>

以上でトップページ内のメインループ部分がウィジェット化されました。

独自のウィジェットを準備

トップページのメインコンテンツ部分をウィジェット化するのはとても簡単ですが、デフォルトのウィジェットではいろいろと心細いですよね。

そのため、以下のようなウィジェットプラグインを自作してインストールしています。

CSSやJavaScriptはデザインに合わせてゴニョゴニョする感じです。

ウィジェットプラグインは、WordPressプラグインの中でも簡単な部類に入りますので、興味がある人は自作しちゃいましょう。

http://firegoby.theta.ne.jp/archives/2303

WP Total Hacks 0.4.0 とWordPress3.2で変わったことで気がついたこと。

WP Total Hacksをアップデートしました。

今回のアップデートはWordPress3.2への対応です。

ホントは新しい機能を実装したものをリリースする予定だったのですが、ビジュアルエディターまわりの処理が3.1と3.2の間で、互換性が無くなってしまったため、後始末に手こずりました。

このブログでも自作プラグイン上でビジュアルエディターを設置する方法について解説させていただきましたが、もう過去の遺物です。

以下では本来の趣旨とはちょっとかわりますが、WordPressプラグイン開発から見たビジュアルエディターなどの変更点についてご説明します。

3.2で変更されたビジュアルエディター関連の関数

自作プラグインでビジュアルエディターをつけることはあんまりないと思いますが…

wp_tiny_mce() と the_editor() 内の処理が大幅に変更された。

本来ならソースを上げて説明したいところですが、めんどくさいので省略します。

従来のWordPressではビジュアルエディターを出力するためのtiny mce用の設定をwp_tiny_mce()で出力して、そのあとでthe_editor()でビジュアルエディター用のHTMLを出力するという流れでした。

しかし、3.2以降ではthe_editor()のみで最低限必要な処理が出力されるようになり、wp_tiny_mce()をthe_editor()とあわせて実行するとJavaScriptやHTMLのコンフリクトが発生します。

どうやらカスタマイズしたエディターを出力するためのパラメータをwp_tiny_mce()やその他のフックでゴニョゴニョしなければならないようです。

ですが、もともとデフォルトのままだったので、今回はそのへんは追っかけていません。

前画面モード

WordPress3.2から追加された”なんちゃらかんちゃらモード”(フルスクリーンのあれですw)は、the_editor()実行時にフルスクリーン用のHTMLを出力するのですが、悲しいことにこのHTMLにはフックがありません。

なので、自作プラグイン側で the_editor() する際には以下のような感じで、フルスクリーン用のtinyMCEプラグインを解除する必要があります。

add_filter('tiny_mce_before_init', array(&$this, 'tiny_mce_before_init'), 999);

public function tiny_mce_before_init($init)
{
    $init['plugins'] = str_replace(
        array('wpfullscreen',',,'),
        array('', ','),
        $init['plugins']
    );
    return $init;
}

ちなみに上記のソースをそのまま使うと記事などの投稿画面でもボタンが消えちゃいますので、以下のページを参考に適切な条件分岐などをしましょう。

http://firegoby.theta.ne.jp/archives/2236

jQueryのバージョンアップによる変更

jQueryの1.6から $(‘foo’).attr(‘checked’); は、$(‘foo’).prop(‘checked’); に書き換えてねという情報を聞いていたんですが、その後1.6.1が再度リリースされて、従来の $(‘foo’).attr(‘checked’); でも動くようにしたよんということだったので、完全にタカをくくっていました。

実際にWordPress3.2に同梱されているjQueryは1.6.1なので、オッケーと思っていたんですが、実際には動きません。

というわけで、.attr(‘checked’) を、もし自作テーマなどで使用しているなら、.prop(‘chekced’) に変える必要があります。

WordPressでGoogle Libraries API上のjQueryを使う。

WordPressには、jQueryが同梱されているので、テーマのfunctions.phpに以下のように記述すればテーマ側でも簡単にjQueryがロードされます。

wp_enqueue_script('jquery');

でも、この方法だとjQueryのバージョンがWordPressに依存してしまうので、互換性の問題が生じたりする可能性があります。

そんな場合は、functions.phpで以下のように記述することで、テーマ側だけ別のバージョンのjQueryを使用しつつ、GoogleのCDNを使ってプチ高速化もできちゃいます。

add_action( 'init', 'jquery_register' );
function jquery_register() {
    if ( !is_admin() ) {
        wp_deregister_script( 'jquery' );
        wp_register_script(
            'jquery',
            'https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js',
            false,
            null,
            true
        );
    }
}
wp_enqueue_script('jquery');

テーマのfunctions.phpに書いてあるので、is_admin()の条件分岐は不要だと思いますが、プラグインとして書き直すことも多いので、念のため記述しておきました。

こうしておけば、管理画面ではWordPress同梱のjQueryが使用されます。

以下のような要望もありますので、これはWP Total Hacksに実装する予定ですが、UIにてこずっております。^^

@miya0001 Microsoft 提供か Google API 提供か選べると吉。あと、jQuery のバージョンも。