WordPress管理画面でDatepickerを使う

プラグインを作成してWordPressの管理画面に追加したページで、日付入力フィールドにjQueryのDatepickerを使いたい。

プラグインフォルダに追加して自分で登録しようと思っていたら、そもそもWordPressではjQueryを使っているので、わざわざそんなことをしなくていいらしい。

まず、wp-includes/script-loader.php で使いたいスクリプトの登録名を確認する。
Datepicker なら、'jquery-ui-datepicker' となっている。

プラグインで管理画面に追加したページだけでスクリプトを読み込む場合は、以下のようにする。

add_action('admin_menu', 'add_dashboard');

function add_dashboard() {
    $hook_suffix = add_submenu_page( $parent_slug, $page_title, $menu_title, $capability,    $menu_slug, $function );
    add_action("admin_print_scripts-".$hook_suffix , 'my_plugin_admin_scripts');
    add_action("admin_head-".$hook_suffix , 'my_plugin_admin_css');
}

// 使用したいスクリプトを読み込む
function my_plugin_admin_scripts() {
    wp_enqueue_script('jquery-ui-datepicker');
}

// スクリプトで使用するCSSを読み込む
function my_plugin_admin_css() {
　　wp_enqueue_style( 'my_plugin_admin-style', $plugin_url . '/my_plugin_admin.css' );

}

Datepicker のスタイルについては、ThemeRoller から別途ダウンロードして、上記my_plugin_admin.css のように読み込む。

たまにしか使わないので、日付書式の設定と初期値の設定方法もメモ
<script>
jQuery(document).ready(function($) {
    $('.term-datepicker').datepicker();
    $('.term-datepicker').datepicker("option", "dateFormat", "yy/mm/dd");
<?php if(isset($search["term"])) :?>
    $(".term-datepicker").datepicker("setDate", "<?php echo $search["term"];?>");
<?php endif;?>
});
</script>

WP_List_Tableで、絞り込み検索を表示させる

今回は、WP_List_Table クラスを extends して作成したクラスで、「絞り込み検索」を表示させる。

日本語Codexによると、months_dropdown( $post_type ) というメソッドがあるので、参考にした。

以下のメソッド

display_tablenav( $which )

テーブルナビゲーションをテーブルの上部または下部に出力します。display()の中で呼び出されるため、明示的に呼び出す必要はありません。

内で、次のメソッドが呼ばれている。

extra_tablenav( $which )

一括処理とページネーションコントロールの間に追加のコントローラーを出力したい場合はオーバーライドしてください。

ということで、作成したクラスに以下を追加する。

<?php
function extra_tablenav( $which ) {
      if('bottom' == $which) return; // テーブルの上部だけ表示する
?>
      <div class="alignleft actions">
      <?php $this->providers_dropdown();?>
      <input type="submit" name="filter_action" id="post-query-submit" class="button" value="絞り込み検索">
      </div>
<?php
}

function providers_dropdown() {
   $provider = isset( $_GET['provider'] ) ? (int) $_GET['provider'] : 0;
?>
  <label for="filter-by-provider" class="screen-reader-text">種別で絞り込み</label>
  <select name="provider" id="filter-by-provider">
      <option<?php selected( $provider, 0 ); ?> value="0">すべての種別</option>
       <option<?php selected( $provider, 1 ); ?> value="1">Twitter</option>
       <option<?php selected( $provider, 2 ); ?> value="2">Facebook</option>
       <option<?php selected( $provider, 3 ); ?> value="3">Google</option>
   </select>
<?php
}
?>

当然、実際のデータ絞り込みは、例えば、

prepare_items($_GET['provider'] )

などのように、prepare_items にクエリー変数を渡して、処理を行う。
まあ、$_GETはグローバル変数なんだから、わざわざ渡さなくてもいいけど。

WordPress管理画面の絞り込み検索をカスタマイズする

WordPressにカスタム投稿を追加しても、管理画面の一覧で「絞り込み検索」ができるのは「日付」だけだったのですが、これもカスタマイズできるということなので、やってみました。

タクソノミーで絞り込み検索する場合の例

カスタム投稿を survey 、タクソノミーを jobtype とすると、

add_action('restrict_manage_posts', 'restrict_listings_by_jobtype');
function restrict_listings_by_jobtype() {
    global $typenow;
    if ($typenow == 'survey') {
        $taxonomy = 'jobtype';
        $jobtype_taxonomy = get_taxonomy($taxonomy);
        wp_dropdown_categories(array(
            'show_option_all' =>  "すべての{$jobtype_taxonomy->label}",
            'taxonomy'        =>  $taxonomy,
            'name'            =>  $jobtype_taxonomy->name,
            'orderby'         =>  'term_order',
            'selected'        =>  $_GET[$jobtype_taxonomy->query_var],
            'hierarchical'    =>  $jobtype_taxonomy->hierarchical,
            'depth'           =>  3,
            'show_count'      =>  false,
            'hide_empty'      =>  true,
        ));
    }
}

add_filter('parse_query', 'convert_jobtype_id_to_taxonomy_term_in_query');
function convert_jobtype_id_to_taxonomy_term_in_query($query) {
global $pagenow;
  global $typenow;
  if ($pagenow == 'edit.php') {
  $filters = get_object_taxonomies($typenow);
  foreach ($filters as $tax_slug) {
    $var = &$query->query_vars[$tax_slug];
    if ( isset($var) && $var>0)  {
    $term = get_term_by('id', $var, $tax_slug);
    $var = $term->slug;
    }
  }
  }
  return $query;
}

 参考

• WordPressのカスタム投稿タイプ利用時、管理画面でカテゴリの絞り込みをできるようにする

カスタムフィールドで絞り込み検索する場合の例

カスタム投稿を {my-post-type} 、カスタムフィールドを {gender} とすると、

add_action('restrict_manage_posts', 'restrict_listings_by_gender');
function restrict_listings_by_gender() {
global $typenow;
$selected = array();
if ($typenow == '{my-post-type}') {
echo '<select name="filter_gender">';
echo '<option value="">すべての性別</option>';
$selected[$_GET['filter_gender']] = 'selected';
echo '<option value="male" '. $selected["male"] . '>男</option>';
echo '<option value="female" '. $selected["female"] . '>女</option>';
echo '</select>';
}
}
add_filter('parse_query', 'gender_query');
function gender_query($query) {
global $pagenow;
global $typenow;
if ($pagenow == 'edit.php' && $typenow == '{my-post-type}' && $_GET['filter_gender']) {
$query->query_vars[ 'meta_key' ] = '{gender}';
$query->query_vars[ 'meta_value' ] = $_GET['filter_gender'];
}
return $query;
}

デフォルトで表示されている投稿日付で絞り込み検索を非表示にする

カスタム投稿を {my-post-type} とすると、

add_action( 'load-edit.php' , 'custom_load_edit' );
function custom_load_edit() {
add_filter( 'disable_months_dropdown' , 'custom_disable_months_dropdown' , 10 , 2 );
function custom_disable_months_dropdown( $false , $post_type ) {
$disable_months_dropdown = $false;
$disable_post_types = array( '{my-post-type}' );
if( in_array( $post_type , $disable_post_types ) ) {
$disable_months_dropdown = true;
}
return $disable_months_dropdown;
}
}

WordPress管理画面の投稿一覧項目のカスタマイズ

WordPressにカスタム投稿を追加して管理画面で一覧ページを表示させると、タイトルと日時または、たまに（？）作成者が表示されるが、他の情報が表示できないのかと思っていたら、簡単にカスタマイズできるらしい。

まず、投稿の場合は、manage_posts_columns、
カスタム投稿の場合は、manage_edit-（カスタム投稿slug）_columns というフィルターフックを使用してカラムを追加する。

function add_custom_column( $columns) { // 列を追加 $columns['(new_column)'] = '（表示列名）'; // 列を削除 unset($columns['date']); return $columns; } add_filter('manage_edit-（カスタム投稿slug）_columns', 'add_custom_column');

または、

function add_custom_column( $columns) { $columns = array( 'cb' => '<input type="checkbox" />', 'title' => 'タイトル', '(new_column)' => '（表示列名）', 'date' => '日時', ); return $columns; } add_filter('manage_edit-（カスタム投稿slug）_columns', 'add_custom_column');

次に、例えば、カスタムタクソノミーを、追加した列に表示させる場合は、 manage_posts_custom_column というフックを使用する。

function add_custom_column_id($column_name, $id) {
if( $column_name == '(new_column)' ) {
echo get_the_term_list($id, '(カスタムタクソノミーslug)', '', ', ');
}
}
add_action('manage_posts_custom_column', 'add_custom_column_id', 10, 2);

なお、追加した列の幅を制御したい場合は、Add Admin CSS プラグインが便利だ。

参考

• 投稿一覧の項目を追加・削除・並び替える方法
• 管理画面の投稿一覧にカスタムタクソノミーの列を表示させる方法

さくらインターネットのFTPサーバーにWindows7エクスプローラーのFTP機能でアップすると文字化け

さくらインターネットのマネージドサーバーでは、ファイル共有できるWebDAVが利用できる。

Windows7からは、まあまあ問題なく利用できるようなのだが、MacのFinderから使用しようとすると、頻繁にエラーが発生し使い物にならない。Mac OSXのWebDAVクライアント機能には問題があるようだ。

仕方なくMacでは、WebDAVクライアントとしても使用できるCyberduckから今年の4月位まで使用してもらっていたのだが、6月になって再度使用しようとしたら接続できないとのこと。
発生するエラーは、Interoperability failure Handshake alert: unrecognized_name である。

https://trac.cyberduck.io/wiki/help/en/howto/dav
上記ページによると、The virtual host setup by the hosting provider is most possibly misconfigured. It must accept TLS connections with SNI (Server Name Indication) extension (RFC 4366).
とある。

http://d.hatena.ne.jp/ttshiko/20121103/1351927402
また、上記ページによると、Java7からSNIがデフォルト有効になったとあり、こちらでも、Java6を使用する古いバージョンのCyberduck(Ver. 4.2.1等)では接続できることを確認している。

さくらインターネットでSNI SSLの提供を開始したのが同年2月4日とのことで、当該サーバーに設置したドメインにSNI SSLを設定したのが同年3月24日頃だったので、こりゃあ間違いなくSNI SSL関連の影響に違いないと思いサポートに連絡したのだが、

JAVA 7ではデフォルトの設定で、HTTPS通信時にSSL証明書の有無に関わらず、
SNIを確認する動作となっており、こちらがCyberduckとサーバー間の接続の際に
エラーを発生させているようでございます。

しかしながら、弊社では個々のWebDAVクライアントソフトの動作保証はしておらず、
また、マネージドサーバーという特性上、お客様個別にApacheの仕様等変更も
承っておりません。

こちらでは、４月くらいまで使用できていた環境そのままで何の変更もしていないのだが・・・。

仕方がないのでFTPサーバーで代替する。

Windows7のエクスプローラーにはFTP機能があるので、それほど違和感なく使用してもらえるだろうと思って安心していたのだが・・・。

しばらく運用していると、日本語ファイル名がたまに文字化けしていることが多くなってきた。以前Macで作成した圧縮ファイルをWindowsで解凍すると文字化けすることがあったので、それをそのままアップロードしたんだろう位に思っていたのだが、どうもそれだけではないらしい。

https://support.microsoft.com/en-us/kb/2416991/ja
上記ページによると、「Windows エスクプローラーの FTP 機能では UTF-8 エンコーディングを使用するためのネゴシエートを FTP サーバーとの間で行いますが、UTF-8 エンコーディングを使用した場合、文字コード変換が正しく機能しないため、この現象が発生します。」とのこと。
「この現象を回避するには、FTP サーバーで、UTF-8 の許可設定を無効にしてください。」だそうだ。

さくらインターネットのコントロールパネルをみても、そのような設定は見当たらない。
サポートに連絡したら、そもそも

恐れ入りますが、弊社サーバでは日本語を利用したファイル名及び
フォルダ名は、対応しておりません。

だそうだ。Webサーバーを管理するための使用なら、まあ困らないよね。

たかがファイル共有だとどこかでバカにしてましたが、簡単じゃないね。