Hello～、ミョウガですよっ♪
本サイトでは、吹き出しを表示するプラグイン「Speech Bubble」を使用しています。
今回はそのプラグインを改造して、吹き出しのアイコン画像をプラグイン側のディレクトリの代わりに、アップロード側のディレクトリから指定できるようにしてみます。
目次
1. 注意事項
プラグインを編集すると、環境によっては正常に動作しない可能性があります。
プラグインのソースコードを編集する前に、あらかじめファイルをバックアップしておきましょう。
2. プラグインを改造
2.1. uploadsディレクトリにアイコン画像用のフォルダを作成
まずは、Speech Bubbleのアイコン画像を格納するフォルダを作成します。
FTPソフトやターミナルソフトで「[WordPressのディレクトリ]/wp-content/uploads」ディレクトリ内に「speech-bubble」フォルダを作成します。
|
1 2 3 4 5 6 7 |
$ cd [WordPressのディレクトリ]/wp-content/uploads $ mkdir speech-bubble # グループをwwwに設定します。 $(root) chown [所有者]:www speech-bubble # 所有者とwwwには読み書き実行を、ユーザーには読み取り実行を許可します。 $ chmod 775 speech-bubble |
作成したspeech-bubbleフォルダの中に「img」フォルダを作成します。所有者とパーミッションはspeech-bubbleと同じように設定します。
|
1 2 3 4 5 6 7 |
# カレントディレクトリが「[WordPressのディレクトリ]/wp-content/uploads」とします。 $ cd speech-bubble $ mkdir img $(root) chown [所有者]:www img $ chmod 775 img |
作成したimgフォルダの中に、speech-bubbleのアイコンで使用する画像をアップロードします。
プラグイン側「[WordPressのディレクトリ]/wp-content/plugins/speech-bubble/img」で既にアップロード済みの場合、そこからコピーする手もあります。
|
1 2 3 4 5 |
# プラグイン側 : [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」を開きます。
編集する場所は、shortcode_speech_bubble関数とshortcode_speech_bubble_id関数の2箇所です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
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 ); } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
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は、吹き出しのアイコンで指定する画像のサブディレクトリが定義されています。
|
1 2 3 4 5 6 |
<?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属性に指定した文字列が格納されています）を連結し、吹き出しのアイコンで指定する画像のパスを生成します。
|
1 2 3 4 |
// wp-content/uploadsディレクトリのパスを取得します。 $wp_upload_path = wp_upload_dir(); // 吹き出しアイコンの画像のパスを生成し、代入します。 $icon_path = $wp_upload_path['baseurl'].'/'.self::PLUGIN_FOLDER_PATH_IMG.$atts['icon']; |
|
1 |
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に代入することで、アップロード側のディレクトリからアイコン画像を指定することができます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
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 ); } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
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）を指定した時、
- アップロード側に（/wp-content/uploads/speech-bubble/img/icon.jpg）存在するかどうかチェック
- 存在する場合、そのパスを指定します。
- 存在しない場合、プラグイン側の方（/wp-content/plugins/speech-bubble/img/icon.jpg）を指定します。
という動作にしてみます。
ファイルが存在するかどうかを判別するには、file_exsits関数を使用します。引数にはファイルパスを指定するのですが、URLではなく、サーバーから見たローカルパスを指定します。
file_exsits関数の戻り値を判別して、アップロード側のパスもしくはプラグイン側のパスを生成していきます。
|
1 2 3 4 5 6 7 8 9 |
$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'] ); } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
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 ); } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
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ですよっ♪
