修正:町の不動産屋さん

今無料配布している町の不動産屋さんテーマにおいて、googlemapが正常に動作しないというお声をいただきました。

その場合、以下のことを試してください。

①プラグインを全て停止した後再稼動させる。

②緯度と経度の記入を逆にしてみる。

です。随時修正を行なってまいります。

宜しくお願いします。

良いWEBデザインを見つけたい時は?

久しぶりの更新です。

この時期は毎回ばたばたしているNPCですが、少し余裕も出てきそうです。
リーダーは余裕ないんですけどね(笑)

さて、時間ができれば色々WEBの海をただようのが私たちです。良いデザインやコードを見つけにネットをプラプラしてます。

良いサイトデザインを見たい場合は、

施工会社、家具屋さん、雑貨屋さん、レストラン、ギャラリー、美術館さんのサイトを検索することが吉☆ハイセンスで見やすいページが多く、とても勉強になります。

学生さんで良いサイトデザインを勉強したいと思ったら、上記キーワードで絞ってみてください。

 

IEの互換表示による弊害を解消?

クライアントさんから、IE8でみると表示が崩れているとご連絡が。

一同パニック!互換表示をオフにしてください。ということで解決・・・になってない!確かに治りましたが、見ている方が皆オフにしてくれるわけがないのです。

いままで気にせず構築出来ていた分、パニックでした。するとリーダーが

「<meta http-equiv=”X-UA-Compatible” content=”IE=edge” /> をMETAタグ列の一番上に書いたら治りますよー。」

と言われたので書いてみたら・・・治ってる!勉強不足を痛感(--;

改めて調べると記事が沢山ありました。

最新の標準準拠モードを指定 (IE8の場合はIE8標準準拠モード)
<meta http-equiv="X-UA-Compatible" content="IE=edge">

ってことらしいです。IE8がお目見えした時からあるそうです。

ほんと、いつだってIEが私を悩ませます。同じことで悩んでる人がいたらどうぞ参考にしてください。

wordpressでショートコードで動くプラグインを作る

もう手垢もついてますが、読んでいただいている方からのリクエストよりwordpressに独自のショートコードを制作し、出力する方法をご紹介します。

function.phpにでも書いてくだされば機能します。

概要
ショートコードで囲んだ「, 」カンマ区切りの文字列を、<li></li>でコーディングする動きを作ります。

[list_garo8]1,2,3,4,5,6,7,8[/list_garo8]

と書いた場合にリストとして表示されます。コードは↓

function list_garo($atts,$content=null){

extract(shortcode_atts(
array(
'class'=>'',
'float'=>'none',
),$atts)
);

$content=do_shortcode($content);

if(isset($content)){
	$values = explode(',',$content);
	$count = count($values);
	$float="style="float:${float};"";
	$output_html="
	for($i=0; $i < $count; $i++){
		$output_html .= "</pre>
<ul>
	<li>";
		$output_html .=$values[$i]."</li>
</ul>
<pre>

";

		}
		if($float != 'none'){
		$output_html.="</pre>
<div style="clear: both;"></div>
<pre>
";

		}
		$output_html.="

";
	return $output_html;

	}	

	else{ return '';}

	}
add_shortcode( 'list_garo8','list_garo');


作る関数は
function list_garo($atts,$content=null);


とします。関数名はその他の関数と名前がタブらないようにつけてくださいね。

引数$attsは後ほどショートコード内で設定できる値、「属性」の情報が渡されます。$contentは、ショートコードで囲まれたテキストを表します。

それでは一つ一つ見ていきます。
function list_garo($atts,$content=null){

extract(shortcode_atts(
array(
'class'=>'',
'float'=>'none',
),$atts)
);

$content=do_shortcode($content);
//ここに後でif(isset($content){}を入れます。
 }
add_shortcode( 'list_garo8','list_garo');


extract(shortcode_atts(
array(
‘属性名’=>’値’,
‘属性名’=>’値’,
),$atts)
);

は、属性名をキーとした配列を作り出します。ショートコードの作り方として覚えておいていください。

$content=do_shortcode($content);

は、ショートコードでショートコードを囲ってしまった場合の対処です。
do_shortcode();は囲ったショートコードの機能を正常に動かすための関数です。

if(isset($content)){
	$values = explode(',',$content);
	$count = count($values);
	$float="style="float:${float};"";
	$output_html="
	for($i=0; $i < $count; $i++){
		$output_html .= "</pre>
<ul>
	<li>";
		$output_html .=$values[$i]."</li>
</ul>
<pre>

";

		}


if(isset($content)){ }の中身を見ます。
$contentがある場合(ショートコードで囲ったテキストがある場合)に関数を実行させます。ここでは、explode(‘分割する文字’,配列のもと);を使い、$contentを分解して配列にします。カンマで区切って配列を作ります。それを$valuesに代入します。

$countに配列の個数を代入します。count(配列);は配列の要素の数を返してくれます。

$floatは後々、ショートコードの属性でfloatを指定出来るようにしてあります。

$output_htmlはテキストを表示させるための変数として<ul style=”list-style-type: none; clear:both;”>をあてがいます。

後は、$countent配列の要素の数だけ、製成したいHTMLを、for文を使って組み上げます。$output_htmlにfor文内で製成したHTMLを追記していく形をとります。returnを使って$output_htmlを出力します。
if($float != 'none'){
		$output_html.="</pre>
<div style="clear: both;"></div>
<pre>
";

		}
		$output_html.="
";
	return $output_html;

	}

	else{ return '';}

製成が終わったら、ショートコードを登録します。ショートコードの登録は

add_shortcode( ‘ショートコード名’,’ショートコードを適応させる関数名’);

を使用します。ここでは、
add_shortcode( ‘list_garo8′,’list_garo’);

となります。このような簡単なコードであれば、簡単ですが、複雑になるとクラスを製成して制作した方がラクな場合があります。

次回はこのコードをプラグインにする方法をご紹介します。

CM



http://cm.sprasia.com/channel/npchomepage/20130108012937.html


CocoMovieさんで制作したものです。簡単なのでお試しあれ!

ところで制作したのはリーダーなんですが、制作にあたって参考にした動画はこちらの動画



『言葉のもつ力と魅せ方』を体現した動画ですね。

全然関係のない話かもしれませんが、NPCのCMをサービスサイトで制作する時、本当に楽しそうに制作しています。ラクに楽しみながらできるのが良いサービスということかもしれません。