ワードプレステーマ「SANGO」で吹き出しの背景色パターンを追加・増やす方法【カスタマイズ】

SANGO、同一方向でも吹き出しの色変えれるようにしてほしいなぁ…。

— みやちまん@法人アフィリマン (@masa381) 2018年8月17日

TLで見かけて、できそうだなぁ・・・できた！ってなったので早速。

ネタ頂きありがとうございます！

SANGOで用意されている吹き出しのショートコードは左右一つずつ。標準だと同一方向の吹き出しで背景色を複数使うことはできません。

実際に見るとこんな感じ。

らすかさす

こんにちは

すさかすら

わんこそば

「会話文の吹き出しは同一方向が良いのか論争」もありますが、今回はSANGOでの実装手順をご紹介します。

この記事に書かれていること

1 吹き出しの背景色を変える手順
2 ワードプレスプラグイン「AddQuicktag」での方法
- 2.1 functions.phpをいじる方法
- 2.2 AddQuicktagで増やす方法
3 次のアップデートで是非導入されると良いですね

吹き出しの背景色を変える手順

らすかさす

親テーマの改編でもできますが、子テーマ推奨です。

何が起こるか分からないから(/_;)

この吹き出しは背景色を#e0edffに指定しています

①子テーマのfunctions.phpにコード追加

/*********************
会話ふきだし
*********************/
function say_what2($atts, $content = null) {
	if($atts) {
		$img = (isset($atts['img'])) ? esc_url($atts['img']) : null;
		$name = (isset($atts['name'])) ? esc_attr($atts['name']) : '';
		$class = (isset($atts['class'])) ? esc_attr($atts['class']) : '';
		if(isset($atts['from'])){
			$from = ($atts['from']=="right") ? "right" : "left";
		} else {
			$from = "left";
		}
		if($img && $from =="right"){
			$output = <<<EOF
				<div class="say {$from}">
					<div class="chatting"><div class="sc {$class}">{$content}</div></div>
					<p class="faceicon"><img src="{$img}"><span>{$name}</span></p>	
				</div>
EOF;
		} else {
			$output = <<<EOF
				<div class="say {$from}">
					<p class="faceicon"><img src="{$img}"><span>{$name}</span></p>
					<div class="chatting"><div class="sc {$class}">{$content}</div></div>
				</div>
EOF;

		}//endif

	return $output;

	}// endif $atts
}
add_shortcode('says','say_what2');

SANGOで用意されている会話吹き出しのコードを元に、ショートコードでclass指定できるように変更しました。

②背景色変更のためのcss設定

追加cssは以下です。

.color1{background:#e0edff;}
.color1:after{border-right-color:#e0edff;}
.color1:before{}

背景色のパターンを増やしたければ、color2,color3・・と増やすことができます。※文字列は任意

③ショートコードを使って吹き出し表示

実際に会話吹き出し

[says☆ name="らすかさす" img="https://rasukasasu.com/wp-content/uploads/2018/08/twitter.jpg" class="color1"]<p></p>[/says]

class=”” のところにはcssで使った文字列を入れます。[says☆ の☆は削除してください。ショートコードが展開されてしまうためわざと入れています

ワードプレスプラグイン「AddQuicktag」での方法

参考

ワードプレス有料テーマサンゴでふきだしの色を複数設定する方法：SANGO＋PORIPUカスタマイズ

functions.phpはいじらない方法ですね。好きな方法で問題ありませんが、それぞれのメリット・デメリットだけ触れておきたいと思います。

functions.phpをいじる方法

汎用性が高い。これに付きますね

最初にカスタマイズしてしまえば、手間をかけずに吹き出しの背景色をいくらでも増やすことができます。

この記事で書いたコードのコピペでいけるので、難しいこともありません。

AddQuicktagで増やす方法

こちらは追加したい吹き出しパターンを全て登録していく必要があります。また、SANGO標準のショートコードが展開された状態のものを使うことになります。

手間はかかりますが、functions.phpをいじらずプラグインで実装するのであればこちらをおすすめします！

次のアップデートで是非導入されると良いですね

テーマファイルいじるとアップデートで上書きされますし、こういうのは公式が標準で入れてくれると嬉しいですよね。

SANGOもしくはSANGO公認の子テーマのアップデートを楽しみに待ちましょう(^^)/

では！