興味のある所からお読み下さい
ウィジェット化のメリット
過去記事の内容を修正、追記したことをユーザーに通知したい時があります。ですが、WordPress には新着記事の通知ウィジェットはありますが、過去記事の修正通知をする機能がありません。
前回記事で書いた、記事の公開日と更新日を判定して、新しい日時順に公開記事と更新記事を「新着・更新記事」として一緒に表示する方法を、サイドバーに表示できるよう、ウィジェット化しました。
ウィジェットの作り方
ウィジェットの基本形
ウィジェットは「初期化処理」、「表示処理」、「設定の更新処理」、「設定用フォーム」の４つのメソッドから構成されます。
１行目の「My_Widget」は WordPress の WP_Widget クラスを継承するウィジェット名（任意の名前）で、最終行でこの My_Widget を WordPress に登録します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
class My_Widget extends WP_Widget { function __construct() { //コンストラクタ。初期化処理 } function widget($args, $instance) { ?> <div class="widgetContent"> // ウィジェットの表示処理を記述 </div> <?php } function update($new_instance, $old_instance) { // ウィジェットの設定の更新処理を記述 return $new_instance; } function form($instance) { // ウィジェットの設定用フォームを記述 } } add_action('widgets_init',create_function('', 'return register_widget("My_Widget");')); |
一番シンプルなウィジェットの例
基本形の内「初期化処理」と「表示処理」のみを使い、「初期化処理」でウィジェット管理画面に表示されるウィジェットボックスの名前を定義し、「表示処理」に ”これはサンプルページです。” を出力するコードを記述した、一番シンプルなウィジェットです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// 一番シンプルなウィジェットの例 class My_Widget extends WP_Widget { function __construct() { parent::__construct(false,'僕のウィジェット'); //ウィジェットボックスの名前 } function widget($args, $instance) { ?> <div class="widgetContent"> <?php echo 'これはサンプルページです。' ?> </div> <?php } } add_action('widgets_init', create_function('', 'return register_widget("My_Widget");')); |
上記ウィジェットを子テーマの「function.php」に追加しフッターエリアに表示した例です。
新着・更新記事ウィジェットの作成
最新の新着・更新記事のウィジェット化
ウィジェット管理画面からタイトル、表示数を設定し、それを出力する処理を追加します。参考にさせて頂いたのは、Simplicity の libフォルダーにある widget.php です。
下のコードをコピーして、あなたの function.php に追加し、サイドバーに設定すれば、このウィジェットが使えるようになります。変更箇所は以下の３ヵ所です。
- ７行目：「僕のウィジェット」はウィジェットボックスの名前、「直近の新着・更新」はそのボックスの下に表示される説明文です。あなたの好きな名前と説明文に変更します。
- 31行目：サムネイル画像は、WordPressの初期設定で100×100（thumb100）が作られていますので、CSSでそれを75×75に縮小し左寄せにして利用しています。
サムネイル画像が表示されない時は、この名前「thumb100」を変更してください。 - 25行目、31行目：表示を統一するため、人気記事表示ウイジェット「WordPress Popular Posts」の class：「class=”wpp-list”」（リンク表示）と「class=”wpp-views」（日付のサイズ縮小・イタリック表示）を流用しています。
「WordPress Popular Posts」を使用してない時は、class指定が無効となりますので、CSSで調整してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
/////////////////////////////////////////////////// //僕のウイジェット(My_Widget)の追加 /////////////////////////////////////////////////// class My_Widget extends WP_Widget { function __construct() { //ウィジェットボックスの名前と説明文 parent::__construct(false,'僕のウィジェット',array('description' => '直近の新着・更新')); } function widget($args, $instance) { extract( $args ); //タイトル名を取得 $title_new = apply_filters( 'widget_title_new', $instance['title_new'] ); //表示数を取得 $entry_count = apply_filters( 'widget_entry_count', $instance['entry_count'] ); if ( !$entry_count ) $entry_count = 5; //表示数が設定されていない時は5にする ?> <h4><?php if ($title_new) { echo $title_new; //タイトルが設定されている場合は使用する } else { echo '新着・更新記事'; } ?></h4> <div class="widgetContent"> <!-- ここから --> <ul class="wpp-list" style="margin:20px 0 65px -18px"> <?php global $post; /* グローバル変数$postの宣言 */ ?> <?php $myposts = get_posts(array('numberposts'=>$entry_count,'orderby'=>'modified')); foreach($myposts as $post) : setup_postdata($post); /*$mypostsに読み込んだデータを1記事セット */ if (get_the_time('Ymd') < get_the_modified_time('Ymd')) {$msg='を更新しました';} else {$msg='を公開しました';} ?> <li style="clear:both;"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumb100',array('alt'=>get_the_title(),'style'=>'border-radius:10px;width:75px;height:75px;float:left;margin-bottom:13px;')); ?><?php the_title(); ?></a> <?php echo $msg; ?> -<span class="wpp-views"><?php the_modified_date('Y/m/d'); ?></span></li> <?php endforeach; ?> <?php wp_reset_postdata(); /* 取得したデータのリセット */ ?> </ul> <!-- ここまで --> </div> <?php } function update($new_instance, $old_instance) { $instance = $old_instance; $instance['title_new'] = strip_tags($new_instance['title_new']); $instance['entry_count'] = strip_tags($new_instance['entry_count']); return $instance; } function form($instance) { if(empty($instance)){ $instance = array('title_new' => null, 'entry_count' => null); } $title_new = esc_attr($instance['title_new']); $entry_count = esc_attr($instance['entry_count']); ?> <?php //タイトル入力フォーム ?> <p> <label for="<?php echo $this->get_field_id('title_new'); ?>"> <?php echo('新着・更新記事のタイトル'); ?> </label> <input class="widefat" id="<?php echo $this->get_field_id('title_new'); ?>" name="<?php echo $this->get_field_name('title_new'); ?>" type="text" value="<?php echo $title_new; ?>" /> </p> <?php //表示数入力フォーム ?> <p> <label for="<?php echo $this->get_field_id('entry_count'); ?>"> <?php echo('表示数（半角数字、デフォルト：5）'); ?> </label> <input class="widefat" id="<?php echo $this->get_field_id('entry_count'); ?>" name="<?php echo $this->get_field_name('entry_count'); ?>" type="text" value="<?php echo $entry_count; ?>" /> </p> <?php } } add_action('widgets_init', create_function('', 'return register_widget("My_Widget");')); |
Simplicity子テーマへの組み込み
Simplicity子テーマの「function.php」末尾に上記コードを追加します。組み込み方はこちらを参考にしてください。
子テーマの「function.php」に組込むことで、親テーマの影響を受けずに管理ができるので楽です。
ウィジェットの動作確認
「外観」→「ウィジェット」でウィジェット設定画面を開きます。今回作成した「僕のウィジェット」が「利用できるウィジェット」に追加されています。
後は、通常のウィジェットと同様に、表示したいウィジェットエリア（サイドバーエリア）にドラッグ＆ドロップで移動させればOKです（タイトルと表示数の設定が可能です）。
設置が終ったら、ページを開くとサイドバーに最新の「新着・更新記事」が表示されます。
新着・更新記事ウィジェットの機能追加
今回作成した「新着・更新記事のウィジェット」に、人気記事ウィジェット「WordPress Popular Posts」の閲覧数（テンプレートタグ）を使って、
- 「閲覧数」の表示
- 「更新記事（更新日順）」or「新着記事（公開日順）」のどちらを表示するか、をウイジェットから選択できる「表示モード」を追加
- 「投稿更新日時」と「閲覧数」の表示／非表示をウイジェットから設定
を行える機能を追加します。
「WordPress標準の新着記事」や「Simplicityの新着記事」には、記事の閲覧数を表示する機能がないので、閲覧数を表示したい場合は、こちらを使うと簡単です。
ウィジェットのラジオボタンおよびチェックボックスの ON/OFF で「表示モード」の選択と「投稿更新日時」「閲覧数」の表示・非表示の切り替えが行えます。詳細はこちらを参照してください。
WordPress 関連 おススメ記事
- インストール
- 設定・カスタマイズ
- 使い方
- エラー対処
- バックアップ・復元
- データベース
- ウィジェット
- ショートコード
- プラグイン
