WordPressカスタマイズ
WordPressアップグレード 2.9.1→3.2.1
明けまして2012。
昨年中、やろうと思いつつ放ったらかしにしていた WordPress のアップグレード。2011年のうちに、仕事で使う WordPress も、読んでいる参考書も 3.x系にすっかり移行したというのに、自分のブログだけ2.9.1というのはどうにもチグハグ…。ということで、年も変わったので心機一転、実行してみました。
とりあえずファイルとDBのバックアップを取って、「自動アップグレード」ボタンをポチっとな、で完了…かと思いきや、管理パネルには「最新版の WordPress を利用中です。更新の必要はありません。」の表示が…。
やむを得ず、手動アップグレードの手順を調べることに。 (自動アップグレードができない理由は分かりませんでしたが、サーバーの自動インストール機能を使ってインストールしているのが原因かも?)手順については、オフィシャルのCodexで確認。「サーバ上の古い WordPress ファイルを削除。ただし、次のものは削除せずに残すこと。」って作業がなかなか緊張しますが…手順どおりにこなして、無事アップグレード完了。
3.x から、アイキャッチ画像機能が追加されているようなので、今まで手動で設定していたアイキャッチをもっと簡単に入れられるようトライしてみたい…その辺はまたいずれ。便利なリダイレクト設定プラグイン「Redirection」
WordPress での投稿時、忘れがちなのが「パーマリンク設定」。このブログでは投稿ごとに連番を振るのではなく、個別に「投稿スラッグ」と呼ばれる記事IDのようなもの(この記事URLの “plug-in-redirection” に該当する部分)を設定してるんですが、これを入力し忘れたまま公開しちゃうことがよくあるのです。
先日投稿した「2011 新年のごあいさつ」という記事も投稿スラッグを入力しないまま公開してしまいました。入力し忘れた場合のデフォルト値はその記事のタイトルから生成されるため、できあがったURLが「~/2011-新年のごあいさつ.html」。日本語のURLも読み取れるブラウザが多くなってきたとはいえ、これは何かとよろしくない。あわてて修正しようとするも、Twitter や ping で公開したURLは「2011-新年のごあいさつ.html」のまま変更がきかないので、新URLにリダイレクトさせてあげないといけません。
ということで、(前置きが長くなりましたが)今回活躍してくれたのが「Redirection」という WordPress プラグイン。.htaccess ファイルをいじらずとも、リダイレクトを実現してくれるそうです。
さっそくダウンロードして wp-content/plugins/ にアップロード。プラグインを有効化すると、管理画面に「ツール」-「リディレクション」が現れます。
ほうほう、ここに転送元と転送先のURLを入れればいいのね…と思いきや、設定後もうまくリダイレクトしてくれない。
色々調べるうち、今回のような「個別記事のURLを転送する」場合は、転送ルールを「Redirection」グループではなく「Modified posts」に記載すればOK、と判明。
画面右上の「グループ:」コンボボックスで「Modified posts」を選んで「Go」を押下。転送元と転送先のURLを登録すると、リダイレクトしてくれるようになります。
登録後、旧URLにアクセスしてみると…↓ http://neverfound.jp/2011/01/2011-新年のごあいさつ.html しっかりリダイレクトされてますよね。
過去記事を見直したら、日本語の投稿スラッグがもう一つあったので、あわせて訂正。実際にリダイレクトが行われた回数もカウントしてくれます。
なお、今回使用したプラグインのバージョンは 2.1.28 ですが、WordPress.org で公開されているバージョン2.2.3 にアップデートしてみたら、うまく動きませんでした。なぜだろう。しばらくアップデートは見送りかな。
ちなみに、日本語の投稿スラッグが作成されないよう、タイトルから英単語のみを抽出してスラッグを作ってくれるプラグインもあるようですが、スラッグはその都度編集したい派なので(じゃあ入力し忘れんなって話ですがw)今回は導入しないでおこうかなと…。
- Redirection – Manage 301 redirections without modifying Apache | Urban Giraffe
- http://urbangiraffe.com/plugins/redirection/
サイトロゴ載っけてみました
11月がノーエントリーでフィニッシュしそうだったので、場つなぎ的なポストを強引に。
コリスさんのTwitterで紹介されていた「LED風のデジタルちっくなフォントのまとめ」を覗いていたら、「Times Square」ってフォントが好みだったので、勢いでサイトロゴにしてみました。こういうデジタル系というか、「20年前から見た近未来」的なデザイン大好きなものでつい。
今までのテキスト(Verdana フォント使用)のタイトルも好きだったけど、サクっと置き換えてみました。
ロゴと言っても、黒ベタの文字で背景を透過にしただけなので、気が向いたらもうちょっとイジりたいです。
- 40 Edgy Digital Fonts for LED Banner Designs
- http://www.1stwebdesigner.com/resources/digital-fonts-led-banner-designs/
さりげなく Arial から Tahoma に浮気してみた

当ブログのフォント指定に Tahoma を加えてみました。日本語のフォントは変わらないので、英数字が微妙に変わるだけのわずかな変化ですが。
数字のフォントが Arial より好みな気がして、浮気。
Verdana とよく似てるけど、Verdana だとちょっと文字幅が広すぎる気がするので、狭めな Tahoma にしときました。
<br />
body {<br />
font: 13px/1.231 Tahoma, Arial, Helvetica, Clean, sans-serif;<br />
}<br />
もちろん、Tahoma がセットアップされていない環境(Macとか)では表示は変わりませんけどね。
DOMトレーニング
このブログのサイドナビゲーションに配置してあるウィジェット
- 最近の投稿
- アーカイブ
- カテゴリー
- 最近のTweet
のタイトル(h3要素)にそれぞれ個別のアイコン(背景画像)を付けたい!と思っていたものの、ウィジェットなのでh3タグに id やら class やらを付けられず、断念しておりました。
が、最近かじり始めたJavaScript DOM を使えば実現できそうなので、勉強がてらトライ。どうにかこうにか実現できました。
備忘録的にコードをぺたり。
<br />
window.onload = function() {<br />
var oElements = document.getElementById('sidebar').getElementsByTagName('h3');<br />
for (var i = 0; i < oElements.length; i++) {<br />
var oElement = oElements[i];<br />
switch (oElement.innerHTML) {<br />
case '最近の投稿':<br />
oElement.style.backgroundImage = 'url(/wp-content/themes/journalist/images/bitcons/flag.gif)';<br />
break;<br />
case 'アーカイブ':<br />
oElement.style.backgroundImage = 'url(/wp-content/themes/journalist/images/bitcons/document.gif)';<br />
break;<br />
case 'カテゴリー':<br />
oElement.style.backgroundImage = 'url(/wp-content/themes/journalist/images/bitcons/folder.gif)';<br />
break;<br />
case '最近のTweet':<br />
oElement.style.backgroundImage = 'url(/wp-content/themes/journalist/images/bitcons/comment.gif)';<br />
break;<br />
}<br />
}<br />
}<br />
onload イベント時に getElementById と getElementsByTagName を使ってサイドバーのh3要素を探し出し、case 文で h3要素のinnerHTML ごとに css の background-image を切り替える…
おお…楽しいぞ JavaScript…(笑)
(ただし、コードを書くに当たって参照してたサイトが 「getElementById」を「getElementsById」って書いてくれていたおかげで30分以上悩んでいたのは内緒だ)
しかし、改めてソースコード見たら background-image のURL、共通部分が冗長ですな。書き直すかー。気が向いたら。
あと、これを外部ファイルにしようと思っても、読み込み処理のタイムラグのせいで一筋縄にはいかないようで。これもそのうち対応したいっす。
あ、ソースコードの表示に際して、SyntaxHighlighter Evolved なるプラグインも導入させていただきました。導入に際してお借りしたフンドシはこちら。
- WordPressにソースコードを綺麗に表示させるプラグイン SyntaxHighlighter Evolved を設置 | WordPressで綴るパソコン生活
- http://kantan.hp2.jp/?p=647
あー、気持ちイイわこれ。色々覚えていきましょい。

