指定した個数の☆を表示するショートコード

比較や評価のサイトで評価を解りやすく表現するために☆マークが並んで表示されている場合があります。
まずは、htmlタグとCSSだけを使用して星5個を横に並べて表示することを考えてみます。いろいろな方法があるはずですがリストタグ(<ul> <li>)を横に並べて表示・・と思いましたが、並べられるというスタイル的な意味だけで箇条書きには何の意味も無いのでここでは<div>ボックスを新たに作ってみることにします。

★

画像が表示出来なくてテキストになっちゃたときは

★★★★★

そんな状況はあまり起こらないとは思いますが・・、そう考えると

style.cssに追加

#content .entry-content .hoshi-list {
	width: 120px;
	margin: 0px;
	padding: 0px;
	overflow: auto;
}

#content .entry-content .hoshi {
	display: inline-block;
	margin: 0px;
	padding: 0px;
	float: left;
	width: 24px;
	height: 24px;
	font-size: 23px;
	text-align: center;
	vertical-align: middle;
}

#content .entry-content .hoshi img {
	margin: 0px;
	padding: 0px;
	border: 0px;
}
★
★
★
★
★

画像が表示されなかったら

という具合になります。
次にショートコードの作成に移ります。
仕様を決めます。

  • 評価は5段階表示とする。
  • [pt hoshi=”n”]と記載すると星をn個表示する。
  • 評価5に満たない場合は、グレーの星を表示する。
    例)評価3だった場合

    ★
    ★
    ★
    ★
    ★

処理の流れをフロー図にしてみます。→フロー図参照
この流れですと、hosiの数値が指定されていなかった場合をゼロにすれば問題なしです。

functions.phpに追加

function point_hoshi($atts) {
	extract(shortcode_atts(array(
		'hoshi' => '0'
	),$atts));

	$i_hoshi = (integer) $hoshi;
	$temp_html = "";

	// class="hoshi-list"を開始
	$temp_html = "<div class=\"hoshi-list\">\n";
	// $nを1~5までループ
	for($n = 1; $n <= 5; $n++) {
		// class="hoshi"を開始
		$temp_html .= "\t<div class=\"hoshi\">";
		if( $n > $i_hoshi) {
			// グレーの星を出力
			$temp_html .= "<img src=\"http://www23.atpages.jp/wpetc/wp-content/uploads/2011/01/hoshi_off.png\" alt=\"☆\" />";
		} else {
			// 黄色の星を出力
			$temp_html .= "<img src=\"http://www23.atpages.jp/wpetc/wp-content/uploads/2011/01/hoshi_on.png\" alt=\"★\" />";
		}
		// class="hoshi"を閉じる
		$temp_html .= "</div>\n";
	}
	// class="hoshi-list"を閉じる
	$temp_html .= "</div>\n";
	return $temp_html;
}
add_shortcode('pt', 'point_hoshi');

できました。
評価2(投稿記事には[pt hoshi=”2″]と記入)


評価4(投稿記事には[pt hoshi=”4″]と記入)

参照先

カテゴリー: その他 | コメントをどうぞ

記事内のhタグ調整

追加CSS

記事内だけの見出しタグを変更する場合は、style.cssに「#content .entry-content」セレクタを新たに追加して定義する。

例)

#content .entry-content h1, #content .entry-content h2, #content .entry-content h3, #content .entry-content h4, #content .entry-content h5, #content .entry-content h6 {
    color: #000000;
    line-height: 1.5em;
    margin: 0 0 10px;
    padding-left: 5px;
    border-bottom: 1px solid #999999;
    border-left: 6px solid #C6485B;
}
カテゴリー: その他 | コメントをどうぞ

ソースコードをハイライト表示する

syntaxhighlighter

カテゴリー: プラグイン | コメントをどうぞ

子テーマを作成して下準備

これから、WordPressのデフォルトテーマである「twentyten」を自分好みに改造して行きたい訳ですが、WordPress 3.0から追加された子テーマという機能を利用すると大変良いらしい。

これは、元のテーマファイルに手を加えずに変更箇所だけを別の場所に作成することで改造ができるということです。

カテゴリー: Twenty Ten を 改造 | 1件のコメント