ezorisu-web

WordPressで特定のカテゴリーや日付の記事だけ表示したい時、例えばトップページに「お知らせ」カテゴリーの記事のみ載せる場合などは、記事ループの前でテンプレートタグ「query posts」を使います。

カテゴリーの名前を「お知らせ」、そのカテゴリースラッグを「news」としていた場合。

<?php query_posts('category_name=news'); ?>

これで「お知らせ」カテゴリーのみを集めて表示していたんだけど、そうしたらちょっと困った事態になっていました。
「WordPlessでページナビゲーションを表示する」で書いたようにページナビを入れていたら、2ページ以降が表示されない。どのページをクリックしても1ページ目が出てきます。
いつものようにググッてみると、「query_posts」はそのままではページ送りが出来ない仕様らしい。でも、もちろん解決策はあります。

ひとつ目は引数の頭に「$query_string .」を加え、引数を「&」で始める。

<?php query_posts($query_string . '&category_name=news'); ?>

もうひとつは引数の後ろに「&paged=」を付け足して「’」で閉じた後にさらに「.$paged」を加える。

<?php query_posts('category_name=news&paged=' .$paged); ?>

どちらの方法でもページナビは正常に動作しました。

この「query_posts」は複数のカテゴリーを指定したり、特定のタグを表示したり、記事の表示件数を指定したりといろいろ便利に使えます。

WordPressに便利機能を追加してくれるのがプラグインです。
ちょっと前から使っているのが、ソースコードを見やすくしてくれて行番号もふってくれる「SyntaxHighlighter Evolved」です。
ウェブ上でソースコードを表示するときって、どうやって書くのが正解なのか正直言ってよくわかりません。preタグの中でさらにcode要素としてソースを書くのが一般的なようなので、このサイトでもそれに習っていました。ただソースコード部分は、そのままだとうまく表示されないので、実体参照変換してから貼り付けるとかいろいろと面倒。
そういうのを非常に楽ちんにしてくれるのが、「SyntaxHighlighter Evolved」なわけです。

こんなふうに表示してくれます。

SyntaxHighlighter Evolved のスクリーンショット

ステキだ。記入時に実態参照変換も必要ありません。
使い方も簡単。ソースの内容を例えばcssならば、[ css ] cssソース [ /css ] というふうにソース内容に合わせて囲ってあげるだけ。

で、例によってウェブサイトデザインに合わせて外観イメージを少しいじってみます。こんな感じで

<div id="menu">
	<ul>
		<li>Home</li>
		<li>Themes</li>
		<li>About</li>
	</ul>
</div>

「SyntaxHighlighter Evolved」を組み込むと、pluginsフォルダの中のsyntaxhighlighterの中にさらにsyntaxhighlighterがあってその中にstylesフォルダががあります。中には、cssファイルがいろいろはいっています。
今回は、shThemeDefault.cssを元にして改変します。「SyntaxHighlighter Evolved」でDefault設定を使う場合参照しているのは、shCore.cssとshThemeDefault.cssのふたつなので、shThemeDefault.cssの後ろの方にshCore.cssの変更分も合わせて下記のcssを書き加えました。

/*shThemeDefault.css改変部分*/

.syntaxhighlighter
{
	background-color: #e7e5dc !important; /*行番号部分の色*/
}

/* Highlighed line number */
.syntaxhighlighter .line.highlighted .number
{
	background-color: #ffdc40 !important; /*ハイライトしたときの行番号色*/
	color: black !important; /*ハイライトしたときの行番号文字色*/
}

/* Highlighed line */
.syntaxhighlighter .line.highlighted.alt1 .content,
.syntaxhighlighter .line.highlighted.alt2 .content
{
	background-color: #ffdc40 !important; /*ハイライトしたときのコード行色*/
}

/* Add border to the lines */
.syntaxhighlighter .line .content
{
	border-left: 3px solid #fff !important; /*行番号とコードの境界*/
}

/* Second line */
.syntaxhighlighter .line.alt2 .content
{
	background-color: #f6f6f6 !important; /*偶数行の色*/
	border-right: 3px solid #fff !important; /*偶数行の右端にボーダー追加*/
}

.syntaxhighlighter .line .content .block
{
	background: url(wrapping.png) 0 1.5em no-repeat !important; /*改行アイコン 行間調整*/
}

.syntaxhighlighter .toolbar /*ツールバーのバックカラー消去*/
{
	background-color: transparent !important;
	border: none !important;
}

.syntaxhighlighter /*追加項目*/
{
	width: 90% !important;
	overflow: auto !important;
	margin: 18px auto 36px !important;
	border: 1px dotted #959aa1 !important;
}

.syntaxhighlighter:before /*タイトル部分追加*/
{
	display: block !important;
	content: "Source Code";
	color: #6f6e69 !important;
	background-color: #e7e5dc !important;
	height: 20px !important;
	width: auto !important;
	padding-left: 5px !important;
	border-bottom: 3px solid #fff !important;
}

/*shCore.css改変部分*/

.syntaxhighlighter,
.syntaxhighlighter div,
.syntaxhighlighter code,
.syntaxhighlighter span
{
	line-height: 1.5em !important; /*行間調整*/
}

.syntaxhighlighter
{
	padding: 0px !important; /* 外周のpaddingは無し */
}

.syntaxhighlighter .toolbar
{
	padding: 2px 8px 2px 0 !important; /* ツールバー表示調整 */
}

お気に召したら、使ってみてください。

本当は、WordPressサイト管理画面の「SyntaxHighlighter Evolved」設定にある「Additional CSS Class(es)」という項目で、自分で作ったcssを読み込めるのかなと思ったんですが、使い方がよくわかりませんでした。英語のページもあさってみましたが、なにしろ英語は苦手なもんでチンプンカンプン。誰かこの設定の使い方わかった人がいたら、教えてください。
そんなわけで、ここでは単純にshThemeDefault.cssの後ろに書き足したというわけです。

わからないついでに、もうひとつ。
頭のところで「Source Code」と表示するようにしてありますが、できれば「CSS」とか「HTML」とかソースに合わせて表示したいところです。
前のバージョンでは、class名が”html”などとなっていたので、書き分けられましたが「Evolved」ではclass名が”brush: xml;”などとなっています。これってcssであつかうときは、どうしたらいいんだろう？よくわかりません。
「教えて、えらい人！」

詳しい導入方法、使い方などは、下記サイトをご覧になるとわかりやすいと思います。

よくブログでサイドバーにFlickrのブログパーツを表示しているのを見かけますが、Picasaでも似たようなのがないかなと探してみたら、Picasa内に「スライドショーを埋め込む」ボタンを見つけました。

Picasa ウェブアルバムのスライドショーにしたいアルバムを開いて、横にある「このアルバムへのリンク」をクリックすると、「スライドショーを埋め込む」という項目が出るので、クリック。プレビューとともにスライドショー作成の画面が出ます。
何種類かのサイズを選べるんだけど、サイドバーで使えそうなサイズは、「小144ピクセル」と「中288ピクセル」くらい。
ところがこのサイズは、まわりの黒い部分も含めた大きさです。

「中288ピクセル」

「小144ピクセル」

最近のブログでは、サイドバーもだんだん幅広タイプが増えているような気もしますが、普通は180〜200ピクセルくらいが多いのではないでしょうか。
288ピクセルは大きすぎるし、144ピクセルだと写真部分が小さすぎて見にくい。
そこで、サイドバーに入れやすいように大きさを調整してみました。
できれば縁の黒いのもやめて、自分で好きな形にしたいし。

まずは、Picasaの「スライドショーを埋め込む」の貼り付け用コードをコピーして、自分のブログのサイドバー部分にペースト。どれでもいいんだけど今回は「中288ピクセル」を選んでいます。
中身を見ると、width=”288″ height=”192″というのがあるのでwidth=”160″ height=”120″に変更。
それからスライドショー部分を適当なidを付けて囲ってやります。
< div id="picasa-slideshow"> スライドショーのコード </div>
こんな感じで。

次は、cssで微調整。

#picasa_slideshow {
width:160px;
height:120px;
margin:15px auto;
border: 1px solid #333333;
}

marginで上下の間隔調整とセンター配置。
細いボーダーも追加してます。

「中288ピクセル」の写真部分のサイズは200×150、「小144ピクセル」は72×54 になっています。
いろいろためしてみた結果、写真だけの表示にしてサイドバーで使えそうなサイズは、

• 200×150
• 160×120
• 144×108
• 72×54

こんなところです。サイドバーの横幅に合わせて使い分けてください。
あとは、cssで見せ方を工夫してやればOK。

実際に設置してみたのは、こちら「えぞりすノート」