相変わらずの体調不良です。
毎日こんなことばっかり書いててもしょうがないので、今日はWordpressのカスタマイズについてのメモを残しておきます。
やりたかったのは、Mimir永遠1次職のたまり場のサイドバーに表示してある「過去ログウィジェット」が月ごとの一覧になってるわけですが、これが毎月どんどん増えてだらーっとしてるのをスッキリさせたいなぁ…ってことです。
このgooブログだと同じ目的の「バックナンバー」にスクロールバーが出ているので、これと同じようにしたいと思ったわけです。
いろいろ調べてスクロールバーを表示するようにする手段はすぐに分かったのですが、どこにそれを適用すればいいのかがなかなか分からなくて時間がかかってしまいました。
テンプレートはWordpressに標準で付いてくる「TwentyEleven」を使用してます。
そのテンプレートにあるスタイルシート(style.css)からwidgetについての記述を探して、次のクラスを追加しました。
.widget-scroll {
height:200px;
overflow:auto;
}
意味合いは「高さが200pxを超えたらスクロールバーを表示」です。
問題はこのスタイルシートをどこに設定すべきか？ということでした。
ブラウザに表示された状態でページソースを見てみると、TwentyElevenテーマにあるsidebar.phpに追加すれば良さそうかな？と思い、以下のようにしてみました。
<aside id="archives" class="widget">
- class=”widget-scroll”>
‘monthly’ ) ); ?>
でも残念ながら、これでは結果には反映されませんでした。
さらにいろいろ調べてみたら、どうやらテーマ内のphpではなく、/wp-includes/default-widgets.phpの方を変更すれば何とかなりそう。
sidebar.phpでやったのと同じように、Archives widget classの項目に以下のように追加しました。
追加したのはfunction widgetの中にある
- です。
- class=”widget-scroll”>
これで無事、目的通りにスクロールバーが出るようになったのですが…。
なんかこれって、いまいちスマートじゃないですよねぇ。
default-widgets.phpをテーマの方で再定義できないのかなぁ…とか思うんですよ。
まだまだWordpressについては理解が足りてなくて、やっつけ仕事ばかりになってるので、ある程度時間をかけて使いこなせるようになりたいものです。
(2013/11/16追記)
アーカイブ一覧にスクロールバーを付ける方法ですが、もうちょっとスマートな方法が見つかりました。
以下のソースを適当な名前を付けてphpファイルとして保存します。
（文字コードは UTF-8、BOMなし）
/**
* @package SpArchivesScroll
* @version 0.1
*/
/*
Plugin Name: SpArchivesScroll
Plugin URI: http://spica.rpd.jp/
Description: Hoge Hoge Hoge
Author: Spica
Version: 0.1
Author URI: http://spica.rpd.jp/
*/
function add_sparchivescroll_css() {
/* CSSの格納パス[WP-home]/wp-content/plugins/sparchivescroll/sparchivescroll.css */
$cssPath = WP_PLUGIN_DIR . ‘/sparchivescroll/sparchivescroll.css’;
/* CSSファイルが存在すれば、関数呼び出しでCSSを追加する */
if(file_exists($cssPath)){
/* CSSの格納URL */
$cssUrl = plugins_url(‘sparchivescroll.css’, __FILE__);
/* CSS登録 */
wp_register_style(‘sparchivescroll’, $cssUrl);
/* CSS追加 */
wp_enqueue_style(‘sparchivescroll’);
}
}
/* アクションフック */
add_action(‘wp_print_styles’, ‘add_sparchivescroll_css’);
class Sp_Widget_Archives extends WP_Widget {
function __construct() {
$widget_ops = array(‘classname’ => ‘widget_archive’, ‘description’ => __( ‘A monthly archive of your site’s posts’) );
parent::__construct(‘archives’, __(‘Archives’), $widget_ops);
}
function widget( $args, $instance ) {
extract($args);
$c = ! empty( $instance[‘count’] ) ? ‘1’ : ‘0’;
$d = ! empty( $instance[‘dropdown’] ) ? ‘1’ : ‘0’;
$title = apply_filters(‘widget_title’, empty($instance[‘title’]) ? __(‘Archives’) : $instance[‘title’], $instance, $this->id_base);
echo $before_widget;
if ( $title )
echo $before_title . $title . $after_title;
if ( $d ) {
?>
<select name="archive-dropdown" onchange='document.location.href=this.options[this.selectedIndex].value;'> <option value=""></option> ‘monthly’, ‘format’ => ‘option’, ‘show_post_count’ => $c))); ?> </select>
} else {
?>
}
echo $after_widget;
}
function update( $new_instance, $old_instance ) {
$instance = $old_instance;
$new_instance = wp_parse_args( (array) $new_instance, array( ‘title’ => ”, ‘count’ => 0, ‘dropdown’ => ”) );
$instance[‘title’] = strip_tags($new_instance[‘title’]);
$instance[‘count’] = $new_instance[‘count’] ? 1 : 0;
$instance[‘dropdown’] = $new_instance[‘dropdown’] ? 1 : 0;
return $instance;
}
function form( $instance ) {
$instance = wp_parse_args( (array) $instance, array( ‘title’ => ”, ‘count’ => 0, ‘dropdown’ => ”) );
$title = strip_tags($instance[‘title’]);
$count = $instance[‘count’] ? ‘checked=”checked”‘ : ”;
$dropdown = $instance[‘dropdown’] ? ‘checked=”checked”‘ : ”;
?>
<label for="<?php echo $this->get_field_id(‘title’); ?>”></label> <input class="widefat" id="<?php echo $this->get_field_id(‘title’); ?>” name=”get_field_name(‘title’); ?>” type=”text” value=”” />
<input class="checkbox" type="checkbox" <?php echo $dropdown; ?> id=”get_field_id(‘dropdown’); ?>” name=”get_field_name(‘dropdown’); ?>” /> <label for="<?php echo $this->get_field_id(‘dropdown’); ?>”></label>
<input class="checkbox" type="checkbox" <?php echo $count; ?> id=”get_field_id(‘count’); ?>” name=”get_field_name(‘count’); ?>” /> <label for="<?php echo $this->get_field_id(‘count’); ?>”></label>
}
}
add_action(‘widgets_init’, create_function(”, ‘return register_widget(“Sp_Widget_Archives”);’));
?>
今度は該当のCSSファイルを作ります。
.widget-scroll {
height:200px;
overflow:auto;
}
height:200px; の数値を変えることでスクロールの高さを調整できます。
この2つのファイルを適当なフォルダにまとめて、wp-content/plugins/ フォルダにアップロードします。
そしてWordpressのダッシュボードのプラグインで有効にすればOKです。
functions.php に登録しても同様なことができます。
