stinger5のサイドバーにある邪魔な「NEW POST」をウィジェット化して動かせるようにする

stinger5のサイドバーに標準でついている「NEW POST」ですが、固定されているので邪魔になったりします。とはいえ消してしまうのも忍びない・・・というわけで、ウィジェット化して動かせるようにしちゃいましょう。

サイドバーから一旦除外する

まずはサイドバーから削除しましょう。

stinger5のテーマ内「sidebar.php」13～16行目が該当部分です。

<!-- 最近のエントリ -->
<h4 class="menu_underh2"> NEW POST</h4>
<?php get_template_part('newpost');?>
<!-- /最近のエントリ -->

「<?php get_template_part(‘newpost’);?>」はテーマ内のphpファイルを読み込むための関数です。これが実行されると、テーマファイル内の「newpost.php」が実行されるようになっています。

というわけで「NEW POST」がサイドバーからなくなったのでスッキリしました。

ウィジェット化

それでは先程のコードをウィジェット化してしまいましょう。

テーマ内の「functions.php」を開き、わかりやすいところ。最上部か最下部などに以下のコードを追記します。

class new_post extends WP_Widget {
function __construct() {
parent::__construct(
'new_post', 
'NEW POST', 
array( 'description' => 'stingerのNEW POST', ) 
);
}

public function widget() {
echo '<h4 class="menu_underh2"> NEW POST</h4>';
get_template_part( 'newpost' );
}
}

add_action( 'widgets_init', function () {
register_widget( 'new_post' );
} );

「function __construct()」でウィジェットの説明、「public function widget」で出力されるウィジェットの内容、「add_action( ‘widgets_init’, function ()」でウィジェット自体をwoldpressに登録するコードとなっています。各部を適当に変更して自分のオリジナルウィジェットにもできるかと思います。色々試してみてください。

実働確認

コードを追記したらウィジェット画面へ移動して実際に動作するか確認します。

しっかりと登録出来ています。オプション機能は無いのでそのまま保存して実サイトで動作確認をします。

広告の下に「NEW POST」が移動していますね。しっかりと動作しているのが確認できました。これでデザインの幅がかなり広がりましたね！