<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
		xmlns:xhtml="http://www.w3.org/1999/xhtml"
>

<channel>
	<title>Nakatta blog &#187; WP Grings</title>
	<atom:link href="http://blog.nakatta.net/archives/tag/wp-grings/feed" rel="self" type="application/rss+xml" />
	<link>http://blog.nakatta.net</link>
	<description>日々の出来事をただ書き綴る</description>
	<lastBuildDate>Tue, 07 Feb 2012 14:40:41 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.6</generator>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.nakatta.net/archives/tag/wp-grings/feed" />
		<item>
		<title>WordpressでPCから携帯対応の絵文字入力</title>
		<link>http://blog.nakatta.net/archives/2008/11/post_188-2.html</link>
		<comments>http://blog.nakatta.net/archives/2008/11/post_188-2.html#comments</comments>
		<pubDate>Sat, 15 Nov 2008 15:17:28 +0000</pubDate>
		<dc:creator>tada</dc:creator>
				<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[ktai style]]></category>
		<category><![CDATA[WP Grings]]></category>
		<category><![CDATA[プラグイン]]></category>

		<guid isPermaLink="false">http://muda.info/?p=188</guid>
		<description><![CDATA[				せっかくなので手順をメモしときます。
				携帯に絵文字も含めて対応できる「ktai_style」と、PC投稿時に顔アイコンを一覧から選べるようにする「WP Grings」の二つをムリヤリ組み合わせてみます。つ [...]]]></description>
			<content:encoded><![CDATA[				<p>せっかくなので手順をメモしときます。</p>
				<p>携帯に絵文字も含めて対応できる「<a href="http://wppluginsj.sourceforge.jp/ktai_style/">ktai_style</a>」と、PC投稿時に顔アイコンを一覧から選べるようにする「<a href="http://alexking.org/projects/wordpress/readme?project=wp-grins">WP Grings</a>」の二つを<b>ムリヤリ</b>組み合わせてみます。つまり、WP Gringsで使用するアイコンをktai_style互換にしちゃおうって作戦。</p>
				<p>結構いろいろいじってるし、自分のためにやっつけで対応したためチャレンジする人は自己責任でどうぞ。<br />
				<span id="more-555"></span><br />
				まず、なにはともあれ２つのプラグインを普通にインストール。</p>
				<p>標準だとWP GringsはWordpress標準のスマイルマークが使えるようになってます。これはただアイコンタグの入力を補完しているだけっぽい。てことはまるまるktai_styleのアイコンを表示して、クリックしたとき入力されるタグもktai_styleのものに差し替えることができれば目的達成？</p>
				<p>というわけでWP Gringsをいじります。</p>
				<p>wp-grins.phpを4か所修正<br />
				行番号は未編集のVersion1.5のwp-grins.phpを対象にしています。</p>
				<p>まずはktai_styleのタグ用にスペースを排除する処理をコメントアウト。</p>
				<pre name="code" class="php:firstLine[77]" style="margin:18px 0;">
//$tag = str_replace(&#039; &#039;, &#039;&#039;, $tag);
</pre>
				<p>次に画像ファイルのパスをktai_styleのインストール場所に変更。</p>
				<pre name="code" class="php:firstLine[78]" style="margin:18px 0;">
$grins .= &#039;&lt;img src=&quot;&#039;.get_bloginfo(&#039;wpurl&#039;).&#039;/wp-content/plugins/ktai_style/pics/SA/&#039;.$grin.&#039;&quot; alt=&quot;&#039;.$tag.&#039;&quot; onclick=&quot;grin(\&#039;&#039;.$tag.&#039;\&#039;);&quot;/&gt; &#039;;
</pre>
				<p>※パスはインストールした環境によって変わります。</p>
				<p>my-hacks.phpに以下を追加。</p>
				<pre name="code" class="php" style="margin:18px 0;">
&lt;?php
	$wpsmiliestrans = array(
		&#039;&lt;img localsrc=&amp;quot;d140&amp;quot; /&gt;&#039; =&gt; &#039;happy01.gif&#039;,
		&#039;&lt;img localsrc=&amp;quot;d141&amp;quot; /&gt;&#039; =&gt; &#039;angry.gif&#039;,
		&#039;&lt;img localsrc=&amp;quot;d142&amp;quot; /&gt;&#039; =&gt; &#039;despair.gif&#039;,
		&#039;&lt;img localsrc=&amp;quot;d143&amp;quot; /&gt;&#039; =&gt; &#039;sad.gif&#039;,
		&#039;&lt;img localsrc=&amp;quot;d221&amp;quot; /&gt;&#039; =&gt; &#039;think.gif&#039;,
		&#039;&lt;img localsrc=&amp;quot;d222&amp;quot; /&gt;&#039; =&gt; &#039;confident.gif&#039;,
		&#039;&lt;img localsrc=&amp;quot;d223&amp;quot; /&gt;&#039; =&gt; &#039;coldsweats01.gif&#039;,
		&#039;&lt;img localsrc=&amp;quot;d224&amp;quot; /&gt;&#039; =&gt; &#039;coldsweats02.gif&#039;,
		&#039;&lt;img localsrc=&amp;quot;d225&amp;quot; /&gt;&#039; =&gt; &#039;pout.gif&#039;,
		&#039;&lt;img localsrc=&amp;quot;d226&amp;quot; /&gt;&#039; =&gt; &#039;gawk.gif&#039;,
		&#039;&lt;img localsrc=&amp;quot;d227&amp;quot; /&gt;&#039; =&gt; &#039;lovely.gif&#039;,
		&#039;&lt;img localsrc=&amp;quot;d229&amp;quot; /&gt;&#039; =&gt; &#039;bleah.gif&#039;,
		&#039;&lt;img localsrc=&amp;quot;d230&amp;quot; /&gt;&#039; =&gt; &#039;wink.gif&#039;,
		&#039;&lt;img localsrc=&amp;quot;d231&amp;quot; /&gt;&#039; =&gt; &#039;happy02.gif&#039;,
		&#039;&lt;img localsrc=&amp;quot;d232&amp;quot; /&gt;&#039; =&gt; &#039;bearing.gif&#039;,
		&#039;&lt;img localsrc=&amp;quot;d233&amp;quot; /&gt;&#039; =&gt; &#039;catface.gif&#039;,
		&#039;&lt;img localsrc=&amp;quot;d234&amp;quot; /&gt;&#039; =&gt; &#039;crying.gif&#039;,
		&#039;&lt;img localsrc=&amp;quot;d235&amp;quot; /&gt;&#039; =&gt; &#039;weep.gif&#039;,
		&#039;&lt;img localsrc=&amp;quot;d271&amp;quot; /&gt;&#039; =&gt; &#039;delicious.gif&#039;,
		&#039;&lt;img localsrc=&amp;quot;d272&amp;quot; /&gt;&#039; =&gt; &#039;smile.gif&#039;,
		&#039;&lt;img localsrc=&amp;quot;d276&amp;quot; /&gt;&#039; =&gt; &#039;shock.gif&#039;,
		&#039;&lt;img localsrc=&amp;quot;d137&amp;quot; /&gt;&#039; =&gt; &#039;heart02.gif&#039;,
		&#039;&lt;img localsrc=&amp;quot;d144&amp;quot; /&gt;&#039; =&gt; &#039;wobbly.gif&#039;,
		&#039;&lt;img localsrc=&amp;quot;d145&amp;quot; /&gt;&#039; =&gt; &#039;up.gif&#039;,
		&#039;&lt;img localsrc=&amp;quot;d146&amp;quot; /&gt;&#039; =&gt; &#039;note.gif&#039;,
		&#039;&lt;img localsrc=&amp;quot;d150&amp;quot; /&gt;&#039; =&gt; &#039;shine.gif&#039;,
		&#039;&lt;img localsrc=&amp;quot;d151&amp;quot; /&gt;&#039; =&gt; &#039;flair.gif&#039;,
		&#039;&lt;img localsrc=&amp;quot;d152&amp;quot; /&gt;&#039; =&gt; &#039;annoy.gif&#039;,
		&#039;&lt;img localsrc=&amp;quot;d153&amp;quot; /&gt;&#039; =&gt; &#039;punch.gif&#039;,
		&#039;&lt;img localsrc=&amp;quot;d154&amp;quot; /&gt;&#039; =&gt; &#039;bomb.gif&#039;,
		&#039;&lt;img localsrc=&amp;quot;d156&amp;quot; /&gt;&#039; =&gt; &#039;down.gif&#039;,
		&#039;&lt;img localsrc=&amp;quot;d157&amp;quot; /&gt;&#039; =&gt; &#039;sleepy.gif&#039;,
		&#039;&lt;img localsrc=&amp;quot;d159&amp;quot; /&gt;&#039; =&gt; &#039;sign02.gif&#039;,
		&#039;&lt;img localsrc=&amp;quot;d160&amp;quot; /&gt;&#039; =&gt; &#039;sign03.gif&#039;,
		&#039;&lt;img localsrc=&amp;quot;d162&amp;quot; /&gt;&#039; =&gt; &#039;sweat01.gif&#039;,
		&#039;&lt;img localsrc=&amp;quot;d163&amp;quot; /&gt;&#039; =&gt; &#039;sweat02.gif&#039;,
		&#039;&lt;img localsrc=&amp;quot;d164&amp;quot; /&gt;&#039; =&gt; &#039;dash.gif&#039;,
		&#039;&lt;img localsrc=&amp;quot;d166&amp;quot; /&gt;&#039; =&gt; &#039;sign05.gif&#039;,
		&#039;&lt;img localsrc=&amp;quot;d240&amp;quot; /&gt;&#039; =&gt; &#039;run.gif&#039;,
		&#039;&lt;img localsrc=&amp;quot;d084&amp;quot; /&gt;&#039; =&gt; &#039;eye.gif&#039;,
		&#039;&lt;img localsrc=&amp;quot;d085&amp;quot; /&gt;&#039; =&gt; &#039;ear.gif&#039;,
		&#039;&lt;img localsrc=&amp;quot;d086&amp;quot; /&gt;&#039; =&gt; &#039;rock.gif&#039;,
		&#039;&lt;img localsrc=&amp;quot;d087&amp;quot; /&gt;&#039; =&gt; &#039;scissors.gif&#039;,
		&#039;&lt;img localsrc=&amp;quot;d088&amp;quot; /&gt;&#039; =&gt; &#039;paper.gif&#039;,
		&#039;&lt;img localsrc=&amp;quot;d091&amp;quot; /&gt;&#039; =&gt; &#039;foot.gif&#039;,
		&#039;&lt;img localsrc=&amp;quot;d228&amp;quot; /&gt;&#039; =&gt; &#039;good.gif&#039;,
		&#039;&lt;img localsrc=&amp;quot;d237&amp;quot; /&gt;&#039; =&gt; &#039;clip.gif&#039;,
		&#039;&lt;img localsrc=&amp;quot;d241&amp;quot; /&gt;&#039; =&gt; &#039;secret.gif&#039;,
		&#039;&lt;img localsrc=&amp;quot;d005&amp;quot; /&gt;&#039; =&gt; &#039;thunder.gif&#039;,
	);
?&gt;
</pre>
				<p>個人的に使いそうなやつだけピックアップしました。<br />
				ここで行を増やすなり減らすなりすれば反映されます。<br />
				あんま多いと重くなるので注意です。</p>
				<p>と、ここまででとりあえず使えるようになるはず。</p>
				<p>ただ、wp.vicunaとか使ってるとこのままではコメント投稿欄にIE以外のブラウザだと反映されません。</p>
				<p>なのでさらにちょっと修正。</p>
				<pre name="code" class="php:firstLine[97]" style="margin:18px 0;">
else if (document.getElementById(&#039;comment&#039;)) {
	var type = &#039;before&#039;;
	var node = $(&#039;comment&#039;);
}
else if (document.getElementById(&#039;comment-text&#039;)) {
	var type = &#039;before&#039;;
	var node = $(&#039;comment-text&#039;);
}
else {
	return;
}
</pre>
				<pre name="code" class="php:firstLine[125]" style="margin:18px 0;">
else if ($(&#039;comment&#039;) &amp;&amp; $(&#039;comment&#039;).type == &#039;textarea&#039;) {
	myField = $(&#039;comment&#039;);
}
else if ($(&#039;comment-text&#039;) &amp;&amp; $(&#039;comment-text&#039;).type == &#039;textarea&#039;) {
	myField = $(&#039;comment-text&#039;);
}
else {
	return false;
}
</pre>
				<p>こんな感じ。</p>
				<p>それと注意事項としてはktai_styleのタグはビジュアルエディタと相性がよくないので使用しないようにしてください。<br />
				というか、そもそも今回のコレはタグの挿入を補完するものなので<img src="http://blog.nakatta.net/wp-content/plugins/ktai_style/pics/SA/bomb.gif" alt="●〜" style="border:0 none;" /></p>
				<p>…一応以上ですが、よく要素も確認せずにとりあえず使えるようにしたって感じでなんか不具合あるかもです。</p>
				<p>時間あったらも少しちゃんとしてプラグインにでもしようかな。</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.nakatta.net/archives/2008/11/post_188-2.html/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.nakatta.net/archives/2008/11/post_188-2.html" />
	</item>
	</channel>
</rss>

