【コピペ】WordPressでTwitterウィジェットを自作する

WordPressにTwitterのタイムラインをウィジェットとして埋め込みたいことがある。Twitterの公式サイトから埋め込みコードを作成し貼り付けるのが一般的な方法。しかし、それではひと手間かかるので、TwitterIDを入力するだけでTwitterタイムラインをウィジェットとして実装できるようにした。

完成品

下記画像のようになる。TwitterIDを入力するだけで、自身のタイムラインが表示されるようになる。

実装方法

実装方法は簡単。functions.phpにウィジェット追加用のコードを貼り付けるだけだ。CSSの編集はご自身の環境に合わせて編集願う。

functions.phpに記述

class TwitterWidgetItem extends WP_widget {

  function __construct() {
    parent::__construct(
      'twitter_widget_id001',
      'ツイッタータイムライン',
      array( 'description' => 'Twitterのタイムラインを表示します' )
    );
  }

  public function widget($args, $instance) {

    $dest_title = !empty($instance['setting_title']) ? $instance['setting_title'] : "";
    $dest_twitter_id = !empty($instance['setting_twitter_id']) ? $instance['setting_twitter_id'] : "";

    echo '<div id="twitter-widget">'.$args['before_widget'];
    echo $args['before_title'].$dest_title.$args['after_title'];
    echo '<a class="twitter-timeline" data-height="500" data-theme="dark" href="https://twitter.com/'.$dest_twitter_id.'?ref_src=twsrc%5Etfw">Tweets by '.$dest_twitter_id.'</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>';
    echo $args['after_widget'].'</div>';

  }

  public function form($instance) {

    $dest_title = !empty($instance['setting_title']) ? $instance['setting_title'] : "";
    $dest_twitter_id = !empty($instance['setting_twitter_id']) ? $instance['setting_twitter_id'] : "";
?>
    <p>
      <label for="<?php echo $this->get_field_id('setting_title'); ?>">タイトル</label><br>
      <input id="<?php echo $this->get_field_id('setting_title'); ?>" name="<?php echo $this->get_field_name('setting_title'); ?>" type="text" value="<?php echo esc_attr($dest_title); ?>">
    </p>
    <p>
      <label for="<?php echo $this->get_field_id('setting_twitter_id'); ?>">TwitterのID(@を抜いたもの)</label><br>@
      <input id="<?php echo $this->get_field_id('setting_twitter_id'); ?>" name="<?php echo $this->get_field_name('setting_twitter_id'); ?>" type="text" value="<?php echo $dest_twitter_id; ?>">
    </p>
<?php

  }
  public function update($new_instance, $old_instance) {

    $instance = array();
    $instance['setting_title'] = !empty($new_instance['setting_title']) ? $new_instance['setting_title'] : "";
    $instance['setting_twitter_id'] = !empty($new_instance['setting_twitter_id']) ? $new_instance['setting_twitter_id'] : "";

    return $instance;
  }

}

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

簡単な解説

public function widget

“public function widget”で、ウィジェットを表示するときのHTMLなどを記述。入力したtwitterIDを”$dest_twitter_id”に代入して、それを適切な場所に配置。

public function form

“public function form”で、設定画面の表示をHTMLなどで記述。入力した値が適切な値に代入されるように指定する。

public function update

“public function update”で、設定画面で入力した値を更新する処理を指定する。

add_action

最後にadd_actionとして、定義したウィジェット関数を読み込ませる。

まとめ

Twitterウィジェットなんて公式サイトから設定してやりなさい!と言えばそこまでだが、ちょっとした親切がよかったりするのである。

共有する

このエントリーをはてなブックマークに追加

コメントをする

メールアドレスが公開されることはありません。
*のついている項目は必須です。


*