KYO

ワードプレスのカスタムウィジェットで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' );


 

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

 

 

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

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


関連記事

ワードプレスのアクションフックの基本

2018年5月26日

先日、フィルターフックについて書きましたが、今回はアクションフックについて書きます。 ワードプレスのフィルターフックの基本を理解する   アクションフックを使いこなすと、高度なプラグインとかが作成できるようになりそうですね。 ワードプレスのアクションに関連して関数を呼び出せるようになります。   具体的には、記事を投稿...

ワードプレスでソースコード書くなら Crayon Syntax Highlighter一択

2018年5月30日

プログラム系のブログを書いていると、プログラムのソースコードを表示させたい場面があります。 しかし綺麗にソースコードを書くのは困難です。   ワードプレスでは記事編集モードで、ソースコードを入力しようとすると様々なトラブルが起こります(笑) 例えば、変な位置で改行されたりされなかったり、空白が消えたり、特殊文字に変換されたりと、...

ワードプレスの記事投稿画面のエディタにボタンを追加する

2018年7月15日

ワードプレスのテーマを作っていると、記事投稿画面で便利な機能を追加したいと思う時があります。プラグインを追加すれば簡単にできるのでしょうが、今回は自作で作っていきます。ちなみにこのブログテーマは自作テーマ(KYO)なのですが、数種類のボタンを自作しています。 ビジュアルエディタにボタンを追加する functions.phpに以下のように書...

ワードプレスでお店のホームページを作るならゲール

2018年6月23日

ワードプレスのテーマを作りました。 テーマの名前はゲールです。   ゲール紹介ページ デモページ   主に飲食店や美容系のお店をターゲットにしています。 普通のブログには向いていないのですが、ビジネスサイトを作るならば、とてもオススメのテーマになっています。   今のところは飲食店や美容系などのお店のホームペ...

ワードプレスの管理画面に設定項目を追加する

2018年7月16日

今、新しいテーマを作っているのですが、管理画面に値を設定させるフィールドを用意しています。そんなわけで管理画面で独自の値を設定する方法を本投稿で書いていきます。これができると、カスタマイズの幅が広がります。ここはクライアントが入力した値を使いたい!という場面で役に立ちます。 以前も似たような記事を書いたのですが ワードプレスの設定画面に項...

アフィリエイトに使えるワードプレスのテーマ

2018年5月13日

アフィリエイトに強く自由度の高い、ワードプレスのテーマを作りました。 ダウンロード   修正履歴 2018/05/25 記事本文がはみ出す現象を修正しました   テーマの名前はメリーラです。意味は特にありません。 アフィリエイトサイトに特化したテーマになっています。稼げるサイト作りに役立てて頂ければと思います。 &nb...