‘wordpress’ カテゴリーのアーカイブ

2012.12.23 サイトのメンテ等

こんばんわー。

先日のサイト更新ついでに、サイトのレイアウトを軽く見直してみました。
2012年も末ってことで、javaScript前提でもぼちぼち問題ないですよね。
画像の表示とかメニューの隠蔽にjQuery使ってます。

そして、長い長い2ペイン時代を経て1ペインに戻って来ました。
上手い具合にコンパクトにまとまってるように見えるといいなあ、などと。

ミクさんゲー

アバターのキャンペーンでチュートリアルをこなしたついでに、と
ポチポチやってました。

レベルが異様に上がり易く、自転車操業でクエストをこなすだけであっという間に3桁レベルに。
(モバマスなんて半年やっててまだレベル100行かないというのに……)
出稼ぎゲーもみんなこれくらい楽ちんだといいんですけどね。

ガチャ券10回ぐらいまわしたらSSR+とSRが出ました……、
この運気をなぜモバマスで使えないのか。

2012.3.5 サイドバーのリストを手直しする

HTML4の仕様では<a>タグがインライン要素となっており、
<div>タグや<li>タグといったブロック要素を子に持つこと出来ず、
ブラウザの仕様上は<div>の内部全体をアンカー(リンク元)として機能させる使い方が出来ても、
HTML4の仕様には準拠していないのでアレである、といった感じだったと思うんですが。

HTML5になってコンテンツモデルという概念が出てきたらしく、
この概念では<a>タグはtransparetな要素となっており親要素の属性を受け継ぐとのこと。
すなわち、<div><a><div>…</div></a></div>といった記法が文法的に許容されるらしい、おそらく。

ということで、折角なのでWordPressのサイドバーを弄ってみることに。
現状だとdiv:hoverでdiv要素にカーソルが重なった際に背景色が変化するんだけど、
肝心のアンカーとして機能する部分は文字だけである、という不便な仕様。

<li><a><div>…</div><a><li>なる構造もHTML5に準拠しているようなので、
そんなワケで<a>要素のなかにdivタグを仕込んでみることにします。

まずは recent post から、ウィジェットの作成には Executable php widget を利用。
以前まではプラグイン Customizable Post Listings の c2c_get_recent_posts() 関数を使っていたんですが、
今回は折角なんで日付を絶対位置として右下に固定し、かつ
記事タイトルと日付とが重なって表示されないように、
記事タイトルの文字列長(半角換算)を mb_strwidth() 関数を使って調整します。
(このときの文字列長は固定値の決め打ち、しゃーなしだな)

他の要素(カテゴリ、過去ログ、ブックマーク)についても、
デフォのウィジェットだと痒いところに手が届かないので
wp_list_categories()やwp_get_archives()、wp_list_bookmarks()といった関数を
preg_matchで適当に検索置換して都合の良い感じに改変します。
(直接db叩いてリスト整形した方が正規表現で置換するより圧倒的にサーバの負荷が軽そうですががが)

結構というかかなりいい加減な感じですが、
素人工事だとこんな感じでいいんじゃないかなー、と。
余裕があったら Executable php widget からプラグインの形に直したいかも

<ul id="recent_posts" class="mod_widgets">
<?php
	$encode = get_bloginfo('charset');
	$recent_posts = wp_get_recent_posts('numberposts=10&post_status=publish');
	foreach( $recent_posts as $recent ) {
		$br_flg = ( mb_strwidth( $recent["post_title"], $encode) % 40 > 28 );
		$style = $br_flg?' style="padding-bottom:1.5em"':'';
		echo '<li><a href="'.get_permalink($recent["ID"]).'" title="view post'.$recent["ID"].'"><div'.$style.'>'.$recent["post_title"].'<span class="post_date">('.mysql2date('n/j',$recent["post_date"]).')</span></div></a></li>';
	}
?>
</ul>
.mod_widgets div .post_date, .mod_widgets div .cat_num, .mod_widgets div .archive_num {
	color: #888;
	position: absolute;
	right: 0;
	bottom: 0;
}
最近の投稿 カテゴリ

2012.3.4 my_autop を wordpress3.0 で動くようにおまじないする

WordPress3.0になってから(?)挙動が怪しくなってしまい
地味に不便だった my_autop を
応急処置的な感じで WordPress3.0 環境でも動くように取り繕ってみました。

わざわざこんなことをしなくてもbrbrbrみたいな名前のプラグインで複数回の改行に対応できるらしいけど、
<br><br><br>みたいなタグの使い方は率直に言って気持ち悪いので却下。

my_autop.php の 67行目の以下の部分、すなわち
空行がなかった行(連結している行)について普通に改行タグを乗っけるだけのところ。

$pee .= trim($tinkle, "\n") . "<br />\n";

文法の整形ルールとかはよく分からないので稚拙な力技で対応、
予め連結した行としてpタグと改行タグを組んでしまう。
やってて思うが作者の人に怒られそうな対応の仕方であってアレである、
文法の整形ルールを覚えたり正規表現の検索置換とか面倒くさいですしおし……。

if ( $pee == null ) {		// 本文の先頭のみ例外処理
	$pee .= '<p style="margin-top:0em;">' . trim($tinkle, "\n") . "</p>\n"
} else {
	/* $pee の末尾の"</p>\n"を削除して"<br />\n"に */
	$pee = substr($pee, 0, -5) . "<br />\n" . trim($tinkle, "\n") . "</p>\n";
}

言わずもがなだけど、substr()を使った書き方はかなり冗長。
“</p>\n”の挿入のタイミングを適当にズラした方がかなり負荷はかなり少ない筈。
最小限の改変に済ませたいので処理がアレになっているということ。

ついでに、
imgタグをpタグで括るのはかなり気持ちが悪いので、
(bodyの直下にimgタグが仕様外ってだけの話だったと思うので)
44行目の$allblocksにimgタグを追加しておきました。
(勘でやってるけど、$allblocksが安直な挙動をしてくれるのならこれで合ってるはず)

$allblocks = '(?:table|thead|tfoot|caption|col|colgroup|tbody|tr|td|th|div|dl|dd|dt|ul|ol|li|pre|select| form|map|area|blockquote|address|math|style|input|p|h[1-6]|hr|fieldset|legend)';
$allblocks = '(?:table|thead|tfoot|caption|col|colgroup|tbody|tr|td|th|div|dl|dd|dt|ul|ol|li|pre|select| form|map|area|blockquote|address|math|style|input|p|h[1-6]|hr|fieldset|legend|img)';

空改行を挟まずに段落と画像を並べると
pタグの中にimgタグが内蔵されるぞオラァ、ってのは正しい挙動っちゃ正しい挙動なので放置。

↑これで改行4回分。

2011.9.6 気分転換にサイトのデザインを変更しました

といってもレイアウトはそのまま、
基本的には css ぐらいしか書き換えていません

ftp ソフトから直接 css ファイルを改変していっても良かったんですが、
折角なのでメインPC にも web制作の環境を簡単に整えてみました

MAMP をインスコして、ついでにバーチャルホストを設定
local.trial-run.net:8888 みたいな感じで
ローカル環境にサイトを複製した環境を用意してまずはそっちで作業をば、ということ

サイトの見た目を更新ついでに、
ちょっと前から懸案があったスマートフォン環境への対応も簡単にやってみました

wordpress を使ってるということで、
スマートフォンに対応させるプラグインってのも色々あるみたいですが、
例のスマートフォンにありがちな表示が個人的にそんなに好きではないので
今回は css の Media Queries で対応させました

ブラウザを横に縮めてみるとメニューバーの float が解除されて
サイト最下部に移動します、ありがちな実装というか(;´∀`)

サイトの見た目の方については
border がなくなったり、全体的にマージンを削減して情報量が圧縮されたり、といった感じ

2011.8.9 Yet Another WebClap for WordPress ver0.2

正式に公開、ついでに 0.2 にアップデートしました

Yet Another WebClap for WordPress

アップデート内容としては、0.1.1 からは多言語化したくらい(wordpress.org で公開するのに付随してソースコードの記述を英語に統一、言語ファイルで日本語化)しか変わってませんが、おそらくアップデート後にウィジェット後が吹っ飛ぶ場合があるので、再設定の方よろしくお願いします(;´∀`)

今後の予定ですがー

  • 解析画面の Ajax化(設定でAjaxと非Ajaxの選択)
  • web拍手ボタンの Ajax化(こっちも選択式の予定)

とか考えてます
web拍手ボタンの AJax化は必要な人とそうでない人とが居そうですが、解析画面にいちいちページ遷移があるのはナンセンスなので改善していきたいです
ただまぁ、現状 php でグラフとか生成しているんで、Javascript で書き直すのが若干めんどうくさいなー、とか(^^;