ワードプレス>ワードプレスのカスタムウィジェットでSNSシェアリンクを作る方法

ワードプレスのカスタムウィジェットでSNSシェアリンクを作る方法

2018年5月24日

環境:WordPress 4.6.1

 

ワードプレスで自作テーマを作っていると、ウィジェットを自作すればもっと開発効率が上がるのにな。と思うことがあると思います。

ワードプレスにはウィジェットエリアという便利な機能があるので、これを使いこなすことは自由度が高く、カスタマイズ力のあるテーマを作ることが可能になります。

 

自作テーマといっても自分専用のテーマを作るときは、カスタムウィジェットを作らずとも目的にあったテーマを作ることができますが

テーマを配布したり販売することを視野に入れると、カスタムウィジェットを作ることは大きな武器になります。

 

今回はTwitterシェアリンクを表示さるウィジェットを自作してみます。

 

 

まずはウィジェットの基本的な作り方を抑えてから実際に作っていきます。
基本的な枠組みさえ覚えてしまえば、自分だけのウィジェットが作れるようになります。

 

カスタムウィジェットの基本的な作り方

そこまで凝ったカスタムウィジェットが必要ないならば、この枠組みさえ覚えてしまえば問題がないです

 

  1. カスタムウィジェット本体を作る
  2. 実際に表示させる内容を書く
  3. 利用できるウィジェット欄での表示
  4. データベース更新処理

 

さらにこの中で最低限必要なものは、1と2だけです。

 

では実際に必要最低限な昨日でカスタムウィジェットを作ってみます。
これらは全てfunctions.phpに記載します

 

このウィジェットはシンプルと表示するだけのウィジェットです。

 



//超単純なウィジェットを作る
//WP_Widgetクラスを継承する
class Simple_Widget extends WP_Widget{

  function __construct(){
    $option = array(
      'classname' => 'simple_widget_class',
      'description' => 'シンプルにシンプルと表示するだけのウィジェットです',
    );
    //1引数:識別ID
    //2引数:ウィジェットタイトル
    //3引数:オプション
    parent::__construct('simple_widget','シンプルウィジェット',$option);
  }

  public function widget(){
    echo "シンプル";
  }

  public function form(){

  }

  public function update(){

  }

}

 

さらにこのカスタムウィジェットを登録します

 

 


// ウィジェットを登録
function register_custom_widget() {
    register_widget( 'simple_widget' );
}
add_action( 'widgets_init', 'register_custom_widget' );


 

簡単に説明するとこんな感じです

 

カスタムウィジェット本体を作る
class Simple_Widget extends WP_Widget

実際に表示させる内容を書く
public function widget()

 

利用できるウィジェット欄での表示
public function form()

データベース更新処理
public function update()

 

となっております。

特定の機能を動作させたいだけならば、public function widget()さえしっかり書けていれば問題ありません。

 

こんな感じのウィジェットが完成します。

 

見ての通りこのウィジェットはユーザーが設定する機能はありませんが、しっかりと機能するのです。これをサイドバーなどに表示させればシンプルと表示されます。

 

 

SNSシェアリンクを表示するカスタムウィジェットを自作する

今度はせっかくなので全てのメソッドを埋めてみます。

WordPress ウィジェット API

codexが参考になります。

 

今回作るものも基本的には表示するだけなので、必要最低限の機能だけで作れますが、せっかくなのでタイトルをつけられるようにしてみます。

 

 



//////////////////////////////////
/// Twitter シェアリンクを表示する
//////////////////////////////////



class Twitter_Widget extends WP_Widget{
  function __construct(){
    $option = array(
      'classname' => 'twitter_widget_class',
      'description' => 'Twitter用のシェアリンクを表示します',
    );
    parent::__construct('twitter_widget','Twitterシェア用のリンクを表示します',$option);
  }


////////////////////////////
//画面に表示される部分
////////////////////////////



  public function widget($args,$instance){
    
    
      
      echo $args['before_widget'];

      if(!empty($instance['title'])){
        echo $args['before_title'].apply_filters('widget_title',$instance['title'])
          .$args['after_title'];
      }


      //SNSの表示
      
      echo "Twitterシェアリンク";

      ?>
      <a class="sh-twitter" href="http://twitter.com/intent/tweet?text=<?php echo urlencode(the_title("","",0)); ?>&amp;<?php echo urlencode(get_permalink()); ?>&amp;url=<?php echo urlencode(get_permalink()); ?>" target="_blank" title="Twitterで共有">Twitter</a>
      <?php echo $args['after_widget']; 
} 

/////////////////////////////////////// 
//ウィジェットエリアフォームのスタイル 
/////////////////////////////////////// 

public function form($instance){ 


//タイトルが空ならばタイトルという文字列を入れる 
$title = ! empty($instance['title']) ? $instance['title'] : ('タイトル'); ?>
      
<P>
        <label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('タイトル'); ?></label>
        <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>"
          name="<?php echo $this->get_field_name('title'); ?>"
            type="text" value="<?php echo esc_attr($title); ?>">
      </P>

      <?php
  }




  

/////////////////////////////
//データベース更新処理
/////////////////////////////




    public function update($new_instance,$old_instance){
      $instance = array();

      
      //strip_tags html php タグを取り除く

      $instance['title'] = (!empty($new_instance['title'])) ? strip_tags($new_instance['title']):'';

      return $instance;
    }


}//end class





 

色々とコード量が増えましたが、メソッドの目的さえわかればなんとなくやっていることが見えると思います。

 

例えば、public function form($instance)メソッドでやっていることは

フォームを作っているだけです。タイトルが既に設定済の場合はそのタイトルをフォームのinput要素に表示させています。
未設定の場合はタイトルという文字列を表示させています。

 

こんな感じのウィジェットが出来上がります。

 

 

カスタムウィジェットを作成したら、忘れずに登録処理を行います



// ウィジェットを登録
function register_custom_widget() {
    register_widget( 'simple_widget' );
    register_widget( 'twitter_widget' );
}
add_action( 'widgets_init', 'register_custom_widget' );


 

こんな感じで書けばいいですね。

 

 

カスタムウィジェットは基本的な枠組みさえ覚えてしまえば、意外と簡単に作成することができます。

必要な機能を出力するだけのウィジェットならば書くコード量もグンと減るので、自分だけのウィジェットをガンガン作っていきましょう