最近、そろそろこのブログのデザインに飽きてきたので、リニューアルのためにテーマをWordPressの根本に還って作り始めている。

このテーマを作ったのは2016年の初頭～夏先にかけてくらいだったっけ？

まぁ、このころは「フラットデザインいいな～」とか思っていたけど、今となってはありふれすぎてしまったので「代わり映えしないな～」というのが今の感想。

日本のサイトのデザインは海外と比べて2～3年遅れているとか昔からよく言われていることだし、遅れたものに合わせて制作していては制作期間中に一番美味しいときが過ぎ去ってしまうわけで。(旅行以外で海外行ったことない俺が言っても説得力ないけど)

あとは当時はワンオフ型のサイトを主として制作していたので、現在の作業の途中、改めて2016年版のコードを見返してみたが「既存のテーマを魔改造したのを更にカスタマイズしたの丸わかりじゃん」と今の印象。

どれだけテーマを魔改造して痕跡を消しても見る人が見ればちゃ～んとわかっちゃう不思議。

そして、「おバカなコードが多いな～」というのが、過去の自分を振り返っての自分へのダメ出しだ。

思えば、この頃はまだPHPのclassは使えれど、楽だからということでほぼfunctionを多用した手続き型のコーディングをやっていたね。

プラグインを作るとわかるけど、やっぱりPHPはクラスと関数を使い分けてこその言語。

両方共できるのでPHPの原文や大本の使い方に近いコーディングを行うWordPressは、特にクラスと関数の使い分けって大事だと思う。

 

と、まぁ過去の振り返りとご高説(草)と皮肉は置いとくとして、本題に移ろう。

modellaxでフリー配布のテーマと、今回のリニューアル用のテーマを作ってるときに「固定ページ」と「最近の投稿」のウィジェットに手を入れたかったので、WordPressのソースコードをGithubを漁って調べてみた。

 

具体的にやりたかったこととしては、以下。

• 「固定ページ」ウィジェットの大本のulタグにスタイルシート用のidやclassを挟みたい。
• 「最近の投稿」ウィジェットで記事タイトル→投稿日付となっているところを投稿日→記事タイトルの順で表示したい。

 

Githubのソースコードを、ウィジェット呼び出し用のPHPクラス名で調べたらすぐ分かった。ものの1～2分。

オープンソースってすごいね。

 

で、分かっただけでは自己完結なので、ここからソースコード貼ります。

今回はテーマのfunctions.phpに挿入する形でコードを追加しますが、自分みたいにクラスと関数がひとつのPHPファイルに混在するのが嫌な人は適宜ファイルを分けましょう。

 

固定ページウィジェットでの大本のulにidやclassを付与する

class WP_Widget_Pages_Override extends WP_Widget_Pages{
 
    public function widget( $args, $instance ) {
 
        $title = apply_filters( 'widget_title', empty( $instance['title'] ) ? __( 'Pages' ) : $instance['title'], $instance, $this->id_base );
 
        $sortby = empty( $instance['sortby'] ) ? 'menu_order' : $instance['sortby'];
        $exclude = empty( $instance['exclude'] ) ? '' : $instance['exclude'];
 
        if ( $sortby == 'menu_order' )
            $sortby = 'menu_order, post_title';
 
        $out = wp_list_pages( apply_filters( 'widget_pages_args', array(
            'title_li'    => '',
            'echo'        => 0,
            'sort_column' => $sortby,
            'exclude'     => $exclude
        ) ) );
 
        if ( ! empty( $out ) ) {
            echo $args['before_widget'];
            if ( $title ) {
                echo $args['before_title'] . $title . $args['after_title'];
            }
        ?>
        <ul id="menu-pages" class="menu-pages"> //【こいつにidやclassを付与する】
            <?php echo $out; ?>
        </ul>
        <?php
            echo $args['after_widget'];
        }
    }
 
}

WP_Widget_PagesをWP_Widget_Pages_Overrideに継承してメソッドwidgetを書き換える。

 

 

最近の投稿ウィジェットで記事タイトル→投稿日付となっているところを投稿日→記事タイトルにする

class WP_Widget_Recent_Posts_Override extends WP_Widget_Recent_Posts{
 
	public function widget( $args, $instance ) {
		if ( ! isset( $args['widget_id'] ) ) {
			$args['widget_id'] = $this->id;
		}
		$title = ( ! empty( $instance['title'] ) ) ? $instance['title'] : __( 'Recent Posts' );
		$title = apply_filters( 'widget_title', $title, $instance, $this->id_base );
		$number = ( ! empty( $instance['number'] ) ) ? absint( $instance['number'] ) : 5;
		if ( ! $number )
			$number = 5;
		$show_date = isset( $instance['show_date'] ) ? $instance['show_date'] : false;
		$r = new WP_Query( apply_filters( 'widget_posts_args', array(
			'posts_per_page'      => $number,
			'no_found_rows'       => true,
			'post_status'         => 'publish',
			'ignore_sticky_posts' => true
		) ) );
		if ($r->have_posts()) :
		?>
		<?php echo $args['before_widget']; ?>
		<?php if ( $title ) {
			echo $args['before_title'] . $title . $args['after_title'];
		} ?>
		<ul>
		<?php while ( $r->have_posts() ) : $r->the_post(); ?>
			<li> //【aタグとspan.post-dateタグを下記のように入れ替える】
			<?php if ( $show_date ) : ?>
				<span class="post-date"><?php echo get_the_date(); ?></span>
			<?php endif; ?>
				<a href="<?php the_permalink(); ?>"><?php get_the_title() ? the_title() : the_ID(); ?></a>
			</li>
		<?php endwhile; ?>
		</ul>
		<?php echo $args['after_widget']; ?>
		<?php
		wp_reset_postdata();
		endif;
	}	
 
}

WP_Widget_Recent_PostsをWP_Widget_Pages_Overrideに継承してメソッドwidgetを書き換える。

 

以上の2つをテーマのfunctions.phpに差し込み。

で、実行しなければ意味が無いので以下のコードを更に追加する。

 

上の継承内容を実行する

function theme_wp_widget_override() {
 
	// 「最近の投稿」ウィジェットのオーバーライド
	register_widget('WP_Widget_Recent_Posts_Override');
 
	// 「固定ページ」ウィジェットのオーバーライド
	register_widget('WP_Widget_Pages_Override');
 
}
add_action('widgets_init', 'theme_wp_widget_override');