fbpx

メニュー

WordPressの投稿編集画面に指示を書いておくとリスカが減る

高橋文樹 高橋文樹

この投稿は 11年 前に公開されました。いまではもう無効になった内容を含んでいるかもしれないことをご了承ください。

大変久しぶりの投稿です。せっかく都落ちをしてのんびり過ごす生活に入ったのですが、赤坂まで行ったり来たりすることになり、ブログを書く暇がありません。

さて、今回ご紹介するのはWordPressの投稿編集画面に指示書きをする方法です。以前紹介した一般ユーザーがバカと嘆くより早くWordPressポインターを出すとかと同じなんですが、他人に編集してもらうようなサイトを運営している場合、投稿編集方法を説明するのはとても大変です。

いきなりアイキャッチとか言われても...
いきなりアイキャッチとか言われても…

たとえば、WordPressには「アイキャッチ」という機能があり、このアイキャッチというのがなんなのかというのは使い慣れている人にはピンと来ますが、初見の人にとっては次のような疑問が浮かぶことでしょう。

  • アイキャッチとはそもそもなんであり、設定するとどうなるのか
  • 設定した画像はどのような見映えになるのか
  • アイキャッチは用意できそうにないのだが、そんなダメな私は投稿しない方がいいのだろうか
  • アイキャッチが理解できない私はもう生きていない方がいいのではないか
  • もぅﾏﾁﾞ無理。 ﾘｽｶしょ。。。

こうした入力UIをいかにわかりやすくするかという問いにはなかなか奥深いものがあるのですが、とりあえず「アイキャッチとはなんであり、設定するとどうなるのか」ということを書いておくと色々捗ります。

そんなわけで、今回は投稿編集画面に色々と説明書きのようなものを付け加える方法を紹介するのですが、主なポイントは3つです。

  1. フックをがんばって探す
  2. get_current_screenを使う
  3. 最後はJS頼み

1. アイキャッチに説明書きを追加

さて、アイキャッチとはなんなのかということをユーザーに教えてあげるために、次のような説明書きを追加するとしましょう。

アイキャッチっていうのは、本の表紙画像みたいなものだよ！　投稿したページの一番上に大きく表示されるし、検索結果でも目立つから、ぜひ設定してね！　縦横比は4:3がベストだよ。縦長の画像は横長に切り取られちゃうから注意！

では、これを書き出すフックを探します。

  1. おもむろに投稿編集画面のソースを表示する
  2. アイキャッチ設定メタボックスのIDがpostimagedivであることを突き止める
  3. wp-adminフォルダ以下のファイルで該当する文字列が含まれるファイルを検索
  4. edit-form-advanced.phpというファイルに書いてあるということがわかる
  5. なんかよくわからんが、add_meta_boxという関数が書いてある
  6. post_thumbnail_meta_boxという文字列が渡されているので、再度その文字列で検索
  7. post_thumbnail_meta_box 関数内で _wp_post_thumbnail_html が呼ばれている
  8. _wp_post_thumbnail_htmlの中身を見ていると、なにやらHTMLをリターンしている

これでようやくフックが見つかります。こんな感じですね。

return apply_filters( 'admin_post_thumbnail_html', $content, $post->ID );

ということは、ここにフィルターをかけると、 出力できそうです。テーマのfunctions.phpにこんなのを書いてみます。

// フィルターをかける
add_filter('admin_post_thumbnail_html', '_what_is_eyecatch', 10, 2);

/**
 * アイキャッチのメタボックスに説明文を追加
 *
 * @param string $content 元々表示されるはずだったHTML
 * @param int $post_id 投稿のID
 * @return string
 */
function _what_is_eyecatch($content, $post_id){
     $post = get_post($post_id);
     // もし投稿のアイキャッチにだけ表示したいとかであれば、
     // ここで if('post' == $post->post_type) とかすればOK
     return $content.'<p class="description">アイキャッチっていうのは（以下略</p>';
}

これでできました。

2. タイトルの下に説明文を追加

さて、タイトルの下に説明文を追加したりできます。タイトルの部分はぱっと見で目につくところなので、色々な利用方法が考えられます。たとえば、コンテンツの完成度（カスタムフィールドへの入力率とか）を表示するとかですね。

タイトルの下になにか表示
タイトルの下になにか表示

フックの場所自体は上と似たようなやり方で探せるのですが、問題はこのタイトル部分、フックに渡されるデータがなにもない……と思ったら、あるじゃん。$postオブジェクトが渡されてるじゃん。

do_action( 'edit_form_after_title', $post );

以前はなかった気がしたんですけどねー。WordPressは日々進化してますね。といって、3.6RCでの話ですが。

ともかく、こんな感じでフックを書けばいいですね。


// アクションを登録
 add_action('edit_form_after_title', '_your_content_status');

/**
 * タイトルの下に投稿の完成度を表示
 *
 * @param WP_Post $post
 */
function _your_content_status($post){
     if(mb_strlen($post->post_content, 'utf-8') < 400){
          // 400字に満たなかったら警告
          echo '<p class="error">400文字に満たないので読む価値がありません</p>';
     }else{
          // 400字以上あればOK
          echo '<p class="error">いずれにせよ、読む価値がありません</p>';
     }
}

条件を複雑にすれば、もっと親切な機能が作れると思います。

3. JSでタイトルを書き換える

さて、色々と試行錯誤した挙げ句、アイキャッチという名前がよくないのではないか、という結論に至ったとします。もういっそのこと、「この記事の表紙画像」とかにした方がいいとしましょう。

余談ですが、ラベルについてはクライアントからも色々突っ込まれた経験のある人は多いでしょう。「投稿」じゃなくて「記事」だとか、「公開」じゃなくて「掲載」だとか、まあそんな感じです。

こうしたラベリングにおける細かい要望というのは、ほとんど担当者の妄想なのですが、中には的を射た意見もあるので、じゃあ「アイキャッチ」を「この記事の表紙画像」にすんべ、と腹をくくります。

てっとり早いのは、Javascriptを仕込んで書き換えてしまうことです。やり方はこんな感じです。

// 管理画面にJSを読み込む関数
add_action('admin_enqueue_scripts', '_admin_screeen_helper_script');

/**
 * 読み込むJSを登録
 */
function _admin_screeen_helper_script(){
     wp_enqueue_script('admin-screen-helper', '/path/to/helper.js', array('jquery'), '1.0');
}

めんどくさいですが、我慢しましょう。で、JSの中身はこんな感じです。

jQuery(document).ready(function($){
     $('#postimagediv h3').html('<span>この記事の表紙画像</span><small>（オプション）</small>');
});

さて、これでできたことはできたのですが、たとえば、投稿（post_type = ‘post’）のときは「この記事の表紙画像」で、商品（post_type = ‘product’）のときは「メイン商品画像」にしよう、とかなってしまったとします。そういった場合、JSの側からどうやって投稿タイプを判断するのかという問題が立ち上がるのですが、get_current_screenという関数を使って渡すようにします。先ほどのソースを書き換えます。

function _admin_screeen_helper_script(){
     $screen = get_current_screen();
     if( 'post' == $screen->base ){
          wp_enqueue_script('admin-screen-helper', '/path/to/helper.js', array('jquery'), '1.0');
          switch($screen->post_type){
               case 'post':
                    $label = 'この記事の表紙画像';
                    break;
               case 'product':
                    $label = 'メイン商品画像';
                    break;
               default:
                    $label = 'アイキャッチ';
                    break;
          }
          wp_localize_script('admin-screen-helper', 'ASH', array(
               'label' => $label
          ));
     }
}

いったい何をしているかというと、まず、get_current_screenで現在の管理画面がいったい何をする画面かを取得します。admin_enqueue_scriptsはすべての管理画面で実行されるフックなので、この時点ではどの画面なのか判断がつきません。そういうとき、スクリーンAPIを利用します。

で、編集画面だったときは投稿タイプが必ず取れるので、それによってJSに渡す変数を設定しています。wp_localize_scriptは本来翻訳用の関数ですが、PHPとJSを連携させるときに割と便利です。

これでJSをこのように書き換えれば、すっきりとしたロジックになります。

jQuery(document).ready(function($){
     // wp_localize_scriptの2番目の引数がグローバルオブジェクトに
     // 登録されて、3番目の引数がJSONとしてアサインされてます。
     $('#postimagediv h3').html('<span>' + ASH.label + '</span><small>（オプション）</small>');
});

さて、というわけで、WordPressの投稿編集画面を色々いじくると明日が見えてくるかもしれないというTipsでした。WordPressもPHPもマニュアルが充実している方だとは思うのですが、そもそもマニュアルなんてみんな読まないので、いままさに入力しようとしているところに説明書きを書いておくと割と読むんじゃないでしょうか。

そういえば、WordPressにはヘルプ機能があって、APIまで整備されてるんですが、あれって使っている人いるんですかね。いくらなんでも上にありすぎじゃないでしょうか。終わり。

[429] [429] Client error: `POST https://webservices.amazon.co.jp/paapi5/getitems` resulted in a `429 Too Many Requests` response: {"__type":"com.amazon.paapi5#TooManyRequestsException","Errors":[{"Code":"TooManyRequests","Message":"The request was de (truncated...)

すべての投稿を見る

高橋文樹ニュースレター

高橋文樹が最近の活動報告、サイトでパブリックにできない情報などをお伝えするメーリングリストです。 滅多に送りませんので、ぜひご登録お願いいたします。 お得なダウンロードコンテンツなども計画中です。