LAMP WordPress テーマ

WordPressで独自のサイドバーウィジェットをfunctions.phpで作成する方法

WordPressで独自のウィジェットをfunctions.phpで作成する方法

仕事などや学校の授業で、どうしても早急にWordPressでオリジナルのサイドバーウィジェットを実装する必要に迫られて、作り方が分からずに困っているということはないでしょうか？

WordPressのウィジェット自作というのは一見難しそうな印象を持ってしまいがちですが、決してそんなことはありません。

手順さえ守ってしまえば、雛形通りに組んでいくだけで、思い通りの機能が案外簡単に作れてしまいます。

今回は、そんなWordPressでサイドバーウィジェットを作るための方法を簡単な例と、カスタム投稿タイプも交えた応用的な使い方までを解説していきます。


 

 

ウィジェットとは何か

ウィジェットとはWordPressに標準で付いている機能の一つで、事前に用意されたパーツを部品のように使える機能です。

利用例としては、よくサイドバーに新着記事やアーカイブを表示するときなどに使われます。

WordPressテーマを自作する場合、ウィジェットなどの機能が『functions.php』に特定のコードを書かないと表示されない仕様になっているので注意しましょう。

 

ウィジェット機能を有効化する方法

ウィジェット機能を有効化する方法

ウィジェットを自作する場合は、まずは機能を有効化しなければなりません。

それをするためのコードを『functions.php』に記述していきましょう。

以下のコードを書くことによって上記画像のように、WordPressのウィジェットが有効化されます。

function set_widgets() {
  register_sidebar(array(
      'name' => 'サイドバー' ,
      'id' => 'sidebar',
      'before_widget' => '<div class="%2$s widget">',
      'after_widget' => '</div>',
      'before_title' => '<h2 class="widgetName">',
      'after_title' => '</h2>',
  ));
}
add_action( 'widgets_init', 'set_widgets' );

 

有効化したウィジェットを表示させる方法

今回はサイドバーウィジェットを作成することが目的なので、『index.php』と同じ階層に『sidebar.php』を用意しましょう。

そして、『sidebar.php』と『index.php』に以下のように記述することで、サイドバーウィジェットを表示することができます。

<aside class="sidebar">
    <?php dynamic_sidebar('sidebar');?>
</aside>

 

『sidebar.php』では先ほどの『functions.php』で記述した『register_sidebar』のidを記述することによってサイドバーウィジェットを読み込むことができています。

<?php get_sidebar(); ?>

 

サムネイル付き新着投稿ウィジェットを自作する方法

WordPressウィジェットを自作する以上、最低限実装できるようになっておきたい機能が、新着投稿のウィジェットかと思います。

WordPressに付いている標準のウィジェット機能でも良いのですが記事のタイトルのみ表示された状態では、見た目が味気ない印象になってしまいがなので、今回はサムネイル付きの新着記事のウィジェットの作り方について解説します。

下記コードを実行すると上のような完成イメージの状態になります。

用意するファイルが少し多くなってしまうので、ここでは最小構成で作成したファイルのみで実装したものを解説していきます。

<?php get_header();?>

<?php get_sidebar();?>
 

<aside class="sidebar">
    <?php dynamic_sidebar('sidebar');?>
</aside>
 

class News_Widget extends WP_Widget {
  function __construct() {
    parent::__construct(
      'news', 
      '自作テーマ用の新着投稿',
      array(
        'description' => '新着投稿を表示します'
      ) 
    );
  }
  function widget($args, $instance) {
    $widgetName = $instance['title'];
    $noImagePath = 'common/img/no-image.jpg';

    query_posts('posts_per_page=' . $instance['limit']);

    echo $args['before_widget'];
      if(have_posts()) {
        if($widgetName) {
          echo $args['before_title'] . $widgetName . $args['after_title'];
        }
        echo '<ul>';
        while(have_posts()) {
          the_post();

          $link = get_permalink();
          $thumbnail = get_the_post_thumbnail();
          $date = get_the_date('Y.m.d');

          echo '<li>';
            echo '<a href="' . $link . '" class="clr">';
              if(has_post_thumbnail()) {
                echo '<div class="postThumbnail">'. $thumbnail . '</div>';
              } else {
                echo '<div class="postThumbnail"><img src="' . get_template_directory_uri() . '/' . $noImagePath . '" alt="No Image"></div>';
              }
              echo '<div class="postData">';
                echo '<p class="postDate">' . $date . '</p>';
                echo '<p class="postTitle">' .  wp_trim_words(get_the_title(), 30, '....') . '</p>';
              echo '</div>';
            echo '</a>';
          echo '</li>';
        }
        echo '</ul>';
      } else {
        echo $args['before_title'] . $widgetName . $args['after_title'];
      }
    echo $args['after_widget'];
  }
  function form($instance) {
    echo '<p>';
      echo '<label for="' . $this->get_field_id('title') . '">タイトル:</label>';
      echo '<input class="widefat" id="' . $this->get_field_id('title') . '" name="' . $this->get_field_name('title') . '" type="text" value="' . esc_attr($instance['title']) . '">';
    echo '</p>';
    echo '<p>';
      echo '<label for="' . $this->get_field_id('limit') . '">' . _e('表示する投稿数:') . '</label>';
      echo '<input class="widefat" id="' . $this->get_field_id('limit') . '" name="' . $this->get_field_name('limit') . '" type="text" value="' . esc_attr($instance['limit']) . '">';
    echo '</p>';

  }
  function update($new_instance, $old_instance) {
    $instance = $old_instance;
    $instance['title'] = strip_tags($new_instance['title']);
    $instance['limit'] = is_numeric($new_instance['limit']) ? $new_instance['limit'] : 5;
    return $instance;
  }
}
function set_widgets() {
  register_widget('News_Widget');
  register_sidebar(array(
      'name' => 'サイドバー' ,
      'id' => 'sidebar',
      'before_widget' => '<div class="%2$s widget">',
      'after_widget' => '</div>',
      'before_title' => '<h2 class="widgetName">',
      'after_title' => '</h2>',
  ));
}
add_action('widgets_init', 'set_widgets');

 
カスタム投稿タイプ用の新着投稿ウィジェットを自作する方法
実務レベルでWordPressの実装をするようになってくると、どうしても既存のウィジェット機能では対応できない場面が出てくると思います。
例えば、カスタム投稿タイプを扱うWordPress実装を行った場合、既存のウィジェット機能ではデフォルトの投稿機能で書かれた記事の新着投稿しか表示されないので、そのような場合カスタム投稿タイプの新着記事をサイドバーウィジェットで表示させる方法について解説します。
もし、『カスタム投稿タイプって何？』という方は下の記事を参考にてみてください。
 
 WordPressのカスタム投稿タイプとカスタムタクソノミーを作る方法
WordPressのカスタム投稿タイプとカスタムタクソノミーを作る方法
WordPressテーマの自作をしなくてはいけない場合、標準で付いている投稿機能とは別で記事を管理したい場面があるかと思います。 例えば、デザイン会社のコーポレートサイトを作りたい場合はブログとは別で ...
続きを見る
 
class RecentPost_Widget extends WP_Widget {
  function __construct() {
    parent::__construct(
      'posts', 
      'カスタム投稿タイプ用の最新の投稿',
      array(
        'description' => 'カスタム投稿タイプ用の最新の投稿を表示します'
      ) 
    );
  }
  function widget($args, $instance) {
    $widgetName = $instance['title'];
    $limit = $instance['limit'];  
    echo $args['before_widget'];
    if($widgetName) {
      echo $args['before_title'] . $widgetName . $args['after_title'];
    }  
    $type = get_query_var('post_type');
    if($tax = get_query_var('taxonomy')) {
      $type = get_taxonomy($tax)->object_type[0];
    }
    $settings = array(
        'post_type' => $type,
        'post_status' => 'publish',
        'orderby' => 'date',
    );
    $posts = get_posts($settings);
    echo '<ul>';
    foreach($posts as $post) {
      $permalink = $post->guid;
      $title = $post->post_title;
      echo '<li><a href="' . $permalink . '">' . wp_trim_words($title, 15, '...') . '</a></li>';
    }
    echo '</ul>';
    echo $args['after_widget'];
  }
  function form($instance) {
    $default = array(
      'title' => 'recent post',
      'limit' => 5
    );
    $instance = wp_parse_args($instance, $default);
    echo '<p>';
      echo '<label for="' . $this->get_field_id('title') . '">タイトル:</label>';
      echo '<input class="widefat" id="' . $this->get_field_id('title') . '" name="' . $this->get_field_name('title') . '" type="text" value="' . esc_attr($instance['title']) . '">';
    echo '</p>';
    echo '<p>';
      echo '<label for="' . $this->get_field_id('limit') . '">' . _e('表示する投稿数:') . '</label>';
      echo '<input class="widefat" id="' . $this->get_field_id('limit') . '" name="' . $this->get_field_name('limit') . '" type="text" value="' . esc_attr($instance['limit']) . '">';
    echo '</p>';
  }
  function update($posts_instance, $old_instance) {
    $instance = $old_instance;
    $instance['title'] = strip_tags($posts_instance['title']);
    $instance['limit'] = is_numeric($new_instance['limit']) ? $new_instance['limit'] : 5;
    return $instance;
  }
}

function set_widgets() {
  register_widget('RecentPost_Widget');
  register_sidebar(array(
      'name' => 'サイドバー' ,
      'id' => 'sidebar',
      'before_widget' => '<div class="%2$s widget">',
      'after_widget' => '</div>',
      'before_title' => '<p class="widgetName">',
      'after_title' => '</p>',
  ));
}
add_action('widgets_init', 'set_widgets');

 
まとめ
今回は、WordPressで自作のウィジェットを作成する方法について解説してきましたがいかがでしたでしょうか？
オリジナルのウィジェットを作成する事によって、WordPressの知識がさらに深まったことかと思います。
ウィジェットを自作する事ができると今まで、なんとなく諦めていた、オリジナルのテーマ作成も目に見えるようになってきたのではないでしょうか？
WordPressの独自ウィジェットの開発ができると、さらに制作の幅が広がりますね。
   
 
22万本以上の見放題作品と毎月貰える1200ポイントでお得に
無料トライアル実施中！＜U-NEXT＞
 -LAMP, WordPress テーマ
Copyright© Geek-WebSite.com ,  2022 All Rights Reserved Powered by AFFINGER5.