Speach Bubbleのコードを改造し、アップロード側のディレクトリにあるアイコンを指定できるようにしてみました

  |   2016/11/19 ( 2018/12/31 ) | 344 views
 0
 Web開発 WordPress |  
B! Bookmark
 LINE
 Pocket

【お知らせ】

本ブログで使用している吹き出しプラグインの切り替えのため、この記事は近日公開を終了します。

Hello～、ミョウガですよっ♪

本サイトでは、吹き出しを表示するプラグイン「Speech Bubble」を使用しています。

[speech_bubble type=”air-md” subtype=”L1″ icon=”Myoga03.png” name=””]導入した時の記事はこちらですっ♪

WordPressで吹き出しを表示するプラグイン「Speech Bubble」を導入してみましたっ！[/speech_bubble]

今回はそのプラグインを改造して、吹き出しのアイコン画像をプラグイン側のディレクトリの代わりに、アップロード側のディレクトリから指定できるようにしてみます。

1. 注意事項

プラグインを編集すると、環境によっては正常に動作しない可能性があります。

プラグインのソースコードを編集する前に、あらかじめファイルをバックアップしておきましょう。

[speech_bubble type=”air-md” subtype=”L1″ icon=”Myoga12.png” name=””]あるいは、テスト環境の方でプラグインを編集して、動作確認するのも手ですよ♪[/speech_bubble]

2. プラグインを改造

2.1. uploadsディレクトリにアイコン画像用のフォルダを作成

まずは、Speech Bubbleのアイコン画像を格納するフォルダを作成します。

FTPソフトやターミナルソフトで「[WordPressのディレクトリ]/wp-content/uploads」ディレクトリ内に「speech-bubble」フォルダを作成します。

winscp-sb

WINSCPでの例

$ cd [WordPressのディレクトリ]/wp-content/uploads
$ mkdir speech-bubble

# グループをwwwに設定します。
$(root) chown [所有者]:www speech-bubble
# 所有者とwwwには読み書き実行を、ユーザーには読み取り実行を許可します。
$ chmod 775 speech-bubble

[speech_bubble type=”air-md” subtype=”L1″ icon=”Myoga02.png” name=””]パーミッションは、wwwもしくはユーザーが読み取りと実行できれば（8進数で5以上）OKですっ！[/speech_bubble]

作成したspeech-bubbleフォルダの中に「img」フォルダを作成します。所有者とパーミッションはspeech-bubbleと同じように設定します。 

# カレントディレクトリが「[WordPressのディレクトリ]/wp-content/uploads」とします。

$ cd speech-bubble
$ mkdir img

$(root) chown [所有者]:www img
$ chmod 775 img

作成したimgフォルダの中に、speech-bubbleのアイコンで使用する画像をアップロードします。

winscp-sb2

プラグイン側「[WordPressのディレクトリ]/wp-content/plugins/speech-bubble/img」で既にアップロード済みの場合、そこからコピーする手もあります。 

# プラグイン側 : [WordPressのディレクトリ]/wp-content/plugins/sppech-bubble/img
# カレントディレクトリ : [WordPressのディレクトリ]/wp-content/uploads/sppech-bubble
# とします。

$ cp ../../plugins/sppech-bubble/img/*.{jpg,png,gif,svg,tif} img

これで、アイコン画像をアップロード側のディレクトリへ配置することができました。

2.2. プラグインのソースコードを編集

次に、プラグインのソースコードを編集します。

「[WordPressのディレクトリ]/wp-content/plugins/speech-bubble/classes」ディレクトリにある「SnbSpeechBubble.php」を開きます。

[speech_bubble type=”air-md” subtype=”L1″ icon=”Myoga02.png” name=””]必ずUTF-8（BOMなし）の文字コードで編集できるテキストエディタで編集してね。[/speech_bubble]

編集する場所は、shortcode_speech_bubble関数とshortcode_speech_bubble_id関数の2箇所です。 

public function shortcode_speech_bubble( $atts, $content = '' ) {
    $content = (string) $content;
    if ( 0 == strlen( $content ) ) {
        return '';
    }

    $default_atts = array(
        'type'    => 'std', 
        'subtype' => 'L1', 
        'icon'    => '1.jpg',
        'name'    => 'no name'
    );
    $atts = shortcode_atts( $default_atts, $atts );
    
    self::make_speech_bubble_divs( $code );

    $sb_type 	= self::check_sb_type( $atts['type'] );
    $sb_subtype = self::check_sb_subtype( $atts['subtype'] );
    $user_icon  = self::check_icon_extension_exists( $atts['icon'] );
    $sb_name 	= $atts['name'];

    $sb_icon_path = plugins_url( self::PLUGIN_FOLDER_PATH_IMG . $user_icon );
    
    return sprintf( $code, $sb_type, $sb_subtype, $sb_icon_path, $sb_name, $content );
}
public function shortcode_speech_bubble_id( $atts, $content = '' ) {
    $content = (string) $content;
    if ( 0 == strlen( $content ) ) {
        return '';
    }
    
    $default_atts = array(
        'type'    => 'std', 
        'subtype' => 'L1', 
        'icon'    => '1.jpg',
        'name'    => 'no name'
    );
    $atts = shortcode_atts( $default_atts, $atts );
    
    self::make_speech_bubble_divs( $code );

    $speaker_icon_path = plugins_url( self::PLUGIN_FOLDER_PATH_IMG . $atts['icon'] );
            
    return sprintf( $code, $atts['type'], $atts['subtype'], $speaker_icon_path, $atts['name'], $content );
}

関数内にある変数$sb_icon_path及び$speaker_icon_pathが、吹き出しのアイコンで指定する画像のパスが格納されています。また、定数のself::PLUGIN_FOLDER_PATH_IMGは、吹き出しのアイコンで指定する画像のサブディレクトリが定義されています。 

<?php
class SnbSpeechBubble {
	// ...
	const PLUGIN_FOLDER_PATH_IMG = 'sｐpeech-bubble/img/';
	// ...
}

wp_upload_dir関数でwp-content/uploadsディレクトリのパスを取得します。戻り値はキーと値のペア表す配列なので、キーに「baseurl」を指定して、その値とself::PLUGIN_FOLDER_PATH_IMGと$attrs[‘icon’]（ショートコードのicon属性に指定した文字列が格納されています）を連結し、吹き出しのアイコンで指定する画像のパスを生成します。 

// wp-content/uploadsディレクトリのパスを取得します。
$wp_upload_path = wp_upload_dir();
// 吹き出しアイコンの画像のパスを生成し、代入します。
$icon_path = $wp_upload_path['baseurl'].'/'.self::PLUGIN_FOLDER_PATH_IMG.$atts['icon'];
Array(
    [path] => '[WordPressのディレクトリ]/wp-content/uploads/2016/11',
    [url] => 'http(s)://[ドメイン]/wp-content/uploads/2016/11',
    [subdir] => '/2016/11',
    [basedir] => '[WordPressのディレクトリ]/wp-content/uploads',
    [baseurl] => 'http(s)://[ドメイン]/wp-content/uploads',
    [error] =>
)

生成したパスを$sb_icon_path及び$speaker_icon_pathに代入することで、アップロード側のディレクトリからアイコン画像を指定することができます。 

public function shortcode_speech_bubble( $atts, $content = '' ) {
    $content = (string) $content;
    if ( 0 == strlen( $content ) ) {
        return '';
    }

    $default_atts = array(
        'type'    => 'std', 
        'subtype' => 'L1', 
        'icon'    => '1.jpg',
        'name'    => 'no name'
    );
    $atts = shortcode_atts( $default_atts, $atts );
    
    self::make_speech_bubble_divs( $code );

    $sb_type 	= self::check_sb_type( $atts['type'] );
    $sb_subtype = self::check_sb_subtype( $atts['subtype'] );
    $user_icon  = self::check_icon_extension_exists( $atts['icon'] );
    $sb_name 	= $atts['name'];

    $wp_upload_path = wp_upload_dir();
    $sb_icon_path = $wp_upload_path['baseurl'].'/'.self::PLUGIN_FOLDER_PATH_IMG.$atts['icon'];
    
    return sprintf( $code, $sb_type, $sb_subtype, $sb_icon_path, $sb_name, $content );
}
public function shortcode_speech_bubble_id( $atts, $content = '' ) {
    $content = (string) $content;
    if ( 0 == strlen( $content ) ) {
        return '';
    }
    
    $default_atts = array(
        'type'    => 'std', 
        'subtype' => 'L1', 
        'icon'    => '1.jpg',
        'name'    => 'no name'
    );
    $atts = shortcode_atts( $default_atts, $atts );
    
    self::make_speech_bubble_divs( $code );

    $wp_upload_path = wp_upload_dir();
    $speaker_icon_path = $wp_upload_path['baseurl'].'/'.self::PLUGIN_FOLDER_PATH_IMG.$atts['icon'];
            
    return sprintf( $code, $atts['type'], $atts['subtype'], $speaker_icon_path, $atts['name'], $content );
}

これで、アップロード側のディレクトリからアイコン画像を指定できるようになりました。

2.3. アップロード側にアイコン画像がない時、代わりにプラグイン側から指定できるようにする

ここでは、プラグインのソースコードさらに改造し、アイコン画像（例 : icon.jpg）を指定した時、

  1. アップロード側に（/wp-content/uploads/speech-bubble/img/icon.jpg）存在するかどうかチェック
  2. 存在する場合、そのパスを指定します。
  3. 存在しない場合、プラグイン側の方（/wp-content/plugins/speech-bubble/img/icon.jpg）を指定します。

という動作にしてみます。

ファイルが存在するかどうかを判別するには、file_exsits関数を使用します。引数にはファイルパスを指定するのですが、URLではなく、サーバーから見たローカルパスを指定します。

file_exsits関数の戻り値を判別して、アップロード側のパスもしくはプラグイン側のパスを生成していきます。 

$wp_upload_path = wp_upload_dir();
// アップロード側のディレクトリに、アイコン画像のファイルが存在するかチェックします。
if( file_exists( $wp_upload_path['basedir'].'/'.self::PLUGIN_FOLDER_PATH_IMG.$atts['icon'].'/'.attr['icon'] ) ) {
    // 存在する場合、アップロード側の方を指定します。
    $icon_path = $wp_upload_path['baseurl'].'/'.self::PLUGIN_FOLDER_PATH_IMG.$atts['icon'];
} else {
    // 存在しない場合、プラグイン側の方を指定します。
    $icon_path = plugins_url( self::PLUGIN_FOLDER_PATH_IMG . $atts['icon'] );
}
public function shortcode_speech_bubble( $atts, $content = '' ) {
    $content = (string) $content;
    if ( 0 == strlen( $content ) ) {
        return '';
    }

    $default_atts = array(
        'type'    => 'std', 
        'subtype' => 'L1', 
        'icon'    => '1.jpg',
        'name'    => 'no name'
    );
    $atts = shortcode_atts( $default_atts, $atts );
    
    self::make_speech_bubble_divs( $code );

    $sb_type 	= self::check_sb_type( $atts['type'] );
    $sb_subtype = self::check_sb_subtype( $atts['subtype'] );
    $user_icon  = self::check_icon_extension_exists( $atts['icon'] );
    $sb_name 	= $atts['name'];

    $wp_upload_path = wp_upload_dir();
    if( file_exists( $wp_upload_path['basedir'].'/'.self::PLUGIN_FOLDER_PATH_IMG.$atts['icon'] ) ) {
        $sb_icon_path = $wp_upload_path['baseurl'].'/'.self::PLUGIN_FOLDER_PATH_IMG.$atts['icon'];
    } else {
        $sb_icon_path = plugins_url( self::PLUGIN_FOLDER_PATH_IMG . $user_icon );
    }
    
    return sprintf( $code, $sb_type, $sb_subtype, $sb_icon_path, $sb_name, $content );
}
public function shortcode_speech_bubble_id( $atts, $content = '' ) {
    $content = (string) $content;
    if ( 0 == strlen( $content ) ) {
        return '';
    }
    
    $default_atts = array(
        'type'    => 'std', 
        'subtype' => 'L1', 
        'icon'    => '1.jpg',
        'name'    => 'no name'
    );
    $atts = shortcode_atts( $default_atts, $atts );
    
    self::make_speech_bubble_divs( $code );

    $wp_upload_path = wp_upload_dir();
    if( file_exists( $wp_upload_path['basedir'].'/'.self::PLUGIN_FOLDER_PATH_IMG.$atts['icon'] ) ) {
        $speaker_icon_path = $wp_upload_path['baseurl'].'/'.self::PLUGIN_FOLDER_PATH_IMG.$atts['icon'];
    } else {
        $speaker_icon_path = plugins_url( self::PLUGIN_FOLDER_PATH_IMG . $atts['icon'] );
    }
            
    return sprintf( $code, $atts['type'], $atts['subtype'], $speaker_icon_path, $atts['name'], $content );
}

3. プラグインでユーザーが追加するファイルは、アップロード側のディレクトリに配置した方がよい理由

それは、プラグインをアップデートしても、アップロード側にあるファイルはそのまま残るからです。プラグインをアップデートすると、そのディレクトリの中身が上書きされるため、追加でアップロードしたファイルが消えてしまいます。

WP Speech Bubbleプラグインアップデート注意!!! ver 1.0.3 現象と対策 – ありそうでなかったものを

今回の改造により、Speech Bubbleをアップデートしても、アップロード済みのアイコン画像をそのまま残すことができるようにしました。

ではでは、See youですよっ♪

この記事をシェアする
B! Bookmark
 LINE
 Pocket
Chronoir.netのRSSフィードを購読する
 RSS
 feedly

関連記事はこちら

WordPressで吹き出しを表示するプラグイン「Speech Bubble」を導入してみましたっ！
Twitterのシェア用ツイートのviaパラメーターを記事執筆者のユーザー名にしてみよう
【脱プラグイン作戦】Twitterカード用のメタタグ生成をプラグインなしで設定してみよう（ついでにFacebook用OGPも設定）
【脱プラグイン作戦】WordPressのパンくずリストを自作してみよう

コメントを残す

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

CAPTCHA

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。