WordPressのウィジェットのドロップダウン表示がおかしい

2016年8月21日カテゴリー : WordPress コメント : 0

　WordPress を使ってブログを運営するような人は気合を入れて更新をしておられると思うので、カテゴリーやアーカイブが縦に長くなっていることと思います。細かいことを気にしない人ならよいのですが、記事の本文よりサイドバーが長くなるのが気になったので、ウィジェットをドロップダウン表示にしてみようと調べたことをまとめておきたいと思います。

20160821_1

ウィジェットをドロップダウン表示にするのは簡単

　ウィジェットの管理画面に移動し、「ドロップダウン表示」にチェックを入れるだけなので簡単です。

どのように表示されるのか確認してみましょう。

20160821_3

ドロップダウンメニューの隣に妙なものが表示されてしまっています。

管理画面でタイトルを入力してどのように表示されるのかを見てみましょう。

20160821_4

どうやらタイトルが二重表示されてしまっているようですね。

20160821_5

　ネットで検索すると解決策がいくつかでてきますが、1年以上たっても修正されていないようです。変な仕様だな。

回避方法

　ドロップダウンメニューの重複タイトルは label タグでクラスが screen-reader-text に設定されているので、スタイルシートに次のように追記すれば余計な表示を抑えることができます。

.screen-reader-text {
    display: none;
}

.screen-reader-text {

display: none;

}

あとはドロップダウンメニューをカスタマイズするだけです。プラグインで解決する方法もあるようですが、こちらの方が簡単です。

20160821_6

カテゴリーのデフォルトのテキストは変更できる

　カテゴリーをドロップダウンで表示するとデフォルトのテキストが「カテゴリーを選択」になっていますが、このテキストは変更することができます。例えば、WordPress を使って商品紹介ブログを運営している場合、「商品から選択」のような表示にしたいことがあるかもしれません。

　function.php を開いて次のように追記してください。

<?php
function change_category_dropdown_title($cat_args) {
    $cat_args['show_option_none'] = __('商品から選択');
    return $cat_args;
}
add_filter('widget_categories_dropdown_args', 'change_category_dropdown_title');
?>

<?php

function change_category_dropdown_title($cat_args) {

$cat_args['show_option_none'] = __('商品から選択');

return $cat_args;

}

add_filter('widget_categories_dropdown_args', 'change_category_dropdown_title');

デフォルトのテキストが変更されます。

20160821_7

アーカイブのデフォルトのテキストは変更について

　ここでアーカイブのデフォルトのテキストも変更できるのではないかと考えるかもしれませんが、これが結構難しかったりします。ネット検索したり、WordPress のコアファイルを検索したりしたのですが、widget_categories_dropdown_args フィルターフックの引数である show_option_none のようにデフォルトテキストを変更するパラメータが存在しません。

　wp-includes/widgets/class-wp-widget-archives.php ファイルの 71 ～ 97 行目を見ると理由がわかります。

//class-wp-widget-archives.php

$dropdown_args = apply_filters( 'widget_archives_dropdown_args', array(
    'type'            => 'monthly',
    'format'          => 'option',
    'show_post_count' => $c
) );

switch ( $dropdown_args['type'] ) {
    case 'yearly':
        $label = __( 'Select Year' );
        break;
    case 'monthly':
        $label = __( 'Select Month' );
        break;
    case 'daily':
        $label = __( 'Select Day' );
        break;
    case 'weekly':
        $label = __( 'Select Week' );
        break;
    default:
        $label = __( 'Select Post' );
        break;
}
?>

<option value=""><?php echo esc_attr( $label ); ?></option>
<?php wp_get_archives( $dropdown_args ); ?>

//class-wp-widget-archives.php

$dropdown_args = apply_filters( 'widget_archives_dropdown_args', array(

'type' => 'monthly',

'format' => 'option',

'show_post_count' => $c

) );

switch ( $dropdown_args['type'] ) {

case 'yearly':

$label = __( 'Select Year' );

break;

case 'monthly':

$label = __( 'Select Month' );

break;

case 'daily':

$label = __( 'Select Day' );

break;

case 'weekly':

$label = __( 'Select Week' );

break;

default:

$label = __( 'Select Post' );

break;

}

<?php wp_get_archives( $dropdown_args ); ?>

　アーカイブのデフォルトのテキストは $dropdown_args[‘type’] の値を switch 文によって分岐して決定されるため、widget_archives_dropdown_args をフィルターフックしてもカスタマイズできないことがわかります。

　どうしても変更したい場合には function.php に次のように追記します。アーカイブのデフォルトのテキストが「月を選択」だった場合を想定してください。

<?php
function change_archive_dropdown_title($text) {
    if ($text === '月を選択') {
        $text = '月を選択してよーん';
    }
    return $text;
}
add_filter('gettext', 'change_archive_dropdown_title');
?>

<?php

function change_archive_dropdown_title($text) {

if ($text === '月を選択') {

$text = '月を選択してよーん';

}

return $text;

}

add_filter('gettext', 'change_archive_dropdown_title');

　WordPress は最初に英文で Web ページを出力した後、wp-content/languages/ja.po を使って日本語に変換しています。gettext フィルターフックは translation 関数で翻訳されたテキストを取得できますが、上のソースコードはその中から「月を選択」の部分を抜き出して文字列を置き換えたものです。

　ただし、この方法は他の部分で「月を選択」という翻訳が存在した場合にそれも置き換えてしまうため、あまりよい方法とは言えないと思います。がんばって調べている途中で気づいたのですが、アーカイブのデフォルトのテキストなんぞは「月を選択」や「年を選択」ぐらいしか必要でないので、カスタマイズする方法がないのかもしれません。

　無理に表示を変更して WordPress をクラッシュさせてしまうぐらいなら、最初から用意されているものを素直に使ったほうが無難かも？カスタマイズ前によく検討してみてください。