カテゴリー: WordPress

WordPress(ワードプレス)に関する話題です。WordPressに関する情報、カスタマイズ、プラグイン、テーマ、などなど。

[復刻版]WordPressテーマガイド(3)XHTMLからWPテーマへ

この記事についてこの記事は2007年5月に公開した物を再アップした物です。詳しくはこの記事を参照してください。

WordPressの他にサーバ・インストール型のブログ・ツールを使用した事がある方は、テーマのフォルダ内を覗いただけでWordPressテーマの仕組みは大体分かるんじゃないかと思います。

ここでは、前章で述べたウェブ・スタンダードに準拠する形でコーディングされたXTHML+CSSのブログ・デザインが、どの様にテンプレート・ファイル、更にWordPressテーマと成っていくのかを追っていきます。

XHTMLからテンプレートへ(一般的な仕組み)

こ こに一般的なブログのトップページ(ホーム)が有るとします。ブログ・ツールはWordPressでも、Movable Typeでも、Serene Bachでも、何でもかまいません。ヘッダー、サイドバー、フッターがあり、コンテンツ部分には最近の記事が幾つか表示されています。このページは XHTMLでコーディングされ、外部CSSファイルによって見た目がコントロールされています。この何の変哲も無いウェブ・スタンダードな XHTML+CSSが目の前にあると思ってください。そしてCSSはいったん横に置き、XHTMLの方に注目します。

「目印」に置き換える

ブ ログでは、状況によって表示内容が変化する箇所が幾つかあります。記事のタイトル、日付、カテゴリ、タグ等はもちろんの事、トップページやアーカイブ表示 は時系列で記事が並んでいるので、新しい記事を投稿するたびに古い記事は下へ下へと移動していきます。さらに、例えばサイドバーにカテゴリの一覧をリスト 表示しているとすると、新たなカテゴリを作れば自動的にそのリスト付け加えて更新、表示してくれれば非常に便利です。

Continue reading

[復刻版]WordPressテーマガイド(2)ブログのデザイン

この記事についてこの記事は2007年5月に公開した物を再アップした物です。詳しくはこの記事を参照してください。

WordPressテーマの説明に入る前にブログで実践されるウェブ・デザインを知っておく必要があります。正直言って、WordPressテーマ をカスタマイズ、もしくは作成するにあたって重要なのはPHPよりも、XHTML+CSSでコーディングされたウェブ・スタンダードなサイトを作れるスキ ルです。(データベースからの結果を操作する、設定パネルを作る、等のよほど凝ったカスタマズでない限り。)

ここでは、WordPressテーマの構造を理解するのに必要な一般的なブログのレイアウトと、ウェブ・スタンダードとの関連性についてだけを簡単に解説します。XHTMLとCSSのスキルが足りないと感じている方は、ほかのサイトや書籍も参考にして下さい。

ブログ・デザインの定番

最 近は幾つか個性的なデザインも出てきましたが、まだまだ下の画面のようなデザインが一般的ではないでしょうか。ヘッダー(Header)とフッ ター(Footer)にサンドイッチされる形で、コンテンツ(Content)とサイドバー(Sidebar)があります。画面はWordPressの ディフォルト・テーマですが、ここではサイドバーが右に配置されています。テーマによっては、右側に表示されていたり、左右両方に表示されていたりしま す。

Continue reading

[復刻版]WordPressテーマガイド(1)イントロダクション

この記事についてこの記事は2007年5月に公開した物を再アップした物です。詳しくはこの記事を参照してください。

WordPressテーマのカスタマイズ方法や作成方法を求めてここにたどり着いた方には説明不要だとは思いますが、一応書いておきます。

WordPressとは?

WordPress はPHP+MySQLで構築されるコンテンツ・マネジメント・システム(CMS)で、主にサーバ・インストール型のブログ・ツールとして使用されていま す。日本での知名度と使用率はまだまだメジャーとは言えませんが、海外ではMovable Typeと人気を二分するほど有名で人気があり、一部ではMovable Typeを抜き去ったとも言われます。今年になって登場したレンタル版(登録無料)も好評で、WordPress人気にますます拍車がかかっています。

Continue reading

[復刻版]WordPressテーマ:作成とカスタマイズのガイド

2007年の5月に書いた「WordPressテーマ:作成&カスタマイズ」と言う記事を復活させる事にしました。正確には、当ブログの記事ではなく、サブドメインで公開してた別サイトです。それを数回に分けて記事にする事にしました。

今回この古~いガイドを記事として投稿する事にした理由は:

  • 古くても、未完成でも、何かWPコミュニティにcontributeできる物は公開しておきたい
  • waviaei.comが存在した期間の中でも、index.phpに次ぐ第2位のページビューを獲得しているページを、お蔵入りにするのは(需要はともかく)個人的にもったいないと感じる

この2点です。そして注意してほしいのは:

  • WordPress2.0~2.2頃に作成したので、それらバージョンに基づいて書かれている
  • そして今回復活させるにあたり、最新バージョンに合わせて内容を編集したりはしていない

の2点です。 Continue reading

MySQLを4から5へ(さくら+WPの場合)

このブログを設置しているさくらインターネットのレンタルサーバーでMySQL5.1.xが使えるようになりました。実際は数ヶ月前から可能だったのですが、自動的にアップデートとか何かされるだろうと勘違いしていて、その発表を待ってました。しかし、実はユーザーが手動で行わなければいけない事と、いったんデータベース(DB)を削除してから新規にMySQL5を選択して作成する必要がある事が分かった!

PHPMyAdminを使用してエクスポートしてきたSQLファイルを、ローカルPCにインストールしたXAMPPにインポートすると、文字化けしまくりで大変だった事が以前ある。なので、データベースのインポートとエクスポートが必要となる今回のバージョンアップ作業は正直見送りにしようかと思ってました。

が、注意箇所および詳しい手順がかかれている記事を参考に、ビールを飲んだ後の勢いで「えいやっ」と昨晩やってしましました。参考にさせていただいた記事は次の3つ。ありがとうございます。

手順

僕はコマンドを使ったMySQLの設定方法がよく分からないので、それ抜きでやってみました。 Continue reading

さくら+WordPressでHTMLタグが消えるバグ

Vistaを入れ直した際に、最近使い始めてたWLWな再インストールしたんですが、ローカルからサーバへ投稿した時になぜかHTMLタグの<や>が取り除かれると言う不具合が。再インストールが原因とも思わなかったけど、原因が分からずアンインストール。

しかしその原因と対策方法がようやく分かりました。

  • さくらのレンサバではlibxml2のバージョン2.7.2がインストールされている
  • このver.2.7.2にバグが有る
  • このバグがWordPressのXML-RPC投稿との間に問題を引き起こす

というものでした。libxml2のバグはver.2.7.3で解消されているそうなのですが、レンタルサーバなので勝手に新しいバージョンをアップすることはできません。

ということで結局WordPress側での対応となるんですが、この問題を解消するプラグインがリリースされているので、これをあてればOK。

この問題はチケット#7771 (XMLRPC api stripping leading angle brackets) – WordPress Tracとしても取り上げられていますが、そもそもこの問題はlibxmlにあり、また、その最新版を利用していないサーバ側の問題であると言う事から、WordPressコアでの対応よりも、必要な人だけインストールして利用できるようプラグインの方が良いのでは?と言うことでプラグインのリリースとなったようです。

さくらインターネットのレンタルサーバを利用している人は、とりあえず入れておくとよいかもしれません。一応バージョンアップしてもらう要望をだしてみます。

以下、参考になった記事です。

SixApartがWordPressのプラグインをリリースする

日曜日(17日)に米国ボルティモアで行われたWordCamp Mid-Atlanticの基調講演にて発表されたそうなんですが、SixApartがWordPress用のプラグインをリリースするそうです。一応WordPress関係のニュースは追っているものの、ここ1週間はRSSをチェックできてなかったので全然知りませんでした…

詳細は誤植にあらず:Six ApartがライバルWordPressにプラグインを提供詳しいですが、スパム対策やコメント・プロフィール(=Gravatar+αのようなサービス?)などらしい。個人的には、SixApartがWordPressプラグインをリリースする事に決めたと言う決定とその流れに「へぇ~」と思いましたが、少なくとも今回発表されたプラグインについては「ふぅ~ん」程度。WordPressに既に存在する機能をわざわざSixApart社製に乗り換える必要性は今のところ感じないなぁ。どちらかと言うと、MTやTyePadからWordPressへ移行するのを躊躇していた人たちに朗報かと思います。

今後も色々とリリースされるそうなので、面白い動きがあるかも知れないという可能性が1つ増えたのはいいですねー。

Random Image Script

20090517_waviaei

サイドバーの上の方にある、Aboutの部分の写真をランダムに表示させるスクリプトを入れました。jQueryのスライド系プラグインも面白そうだったのですが、とりあえず以前もやった事のあるPHPスクリプトを用いたやり方で実装。ただし今回はMattがずいぶん昔にリリースしたRandom Image Scriptを利用。

wp_enqueue_scriptを使う(その2)

wp_enqueue_script をテーマで使うときは、わざわざフックを通さなくても大丈夫です。 header.php の冒頭にいかのように書くだけでおっけ。

テーマでwp_enqueue_scriptを使う « Waviaei

と、をかもとさんに教えてもらい、テンプレートを少し編集しました。フックを通すと管理画面でも適用されると言うことも、全く頭になかったのでまた1つ勉強になりました。をかもとさんありがとう!やはりこの辺はテーマ作成者よりもプラグイン作成者の方がよく分かってらっしゃる。PHPスキルの差。

テーマでwp_enqueue_scriptを使う

コリスさんが作成されたページの先頭や任意の要素に、スムーズにスクロールさせることができるスクリプトPage Scroller」を入れてみました。ページの右下の方にある「↑toTop」をクリックしてみてください。スムーズにページ上部へスクロールするはずです。

で、このスクリプトを実装するときに使ったのがwp_enqueue_script();と言うWordPressのアクションフック。Ver. 2.1から導入されたみたいなんだけど、プラグイン向けの関数と言うこともあって、その存在すら全然知りませんでした(汗)

wp_enqueue_scriptとは

何をするフックかと言うと、外部参照のスクリプトを:

  1. 重複しないように
  2. 適切な順番で

読み込むように自動的に調節してくれるフックです。なぜこんなのが必要かと言うと、最近のプラグインやWPコアの機能において、jQueryscript.aculo.usと言ったJavaScriptのライブラリとそれらプラグインがよく利用されているからです。これらスクリプトはそれぞれ適切な読み込み順序があり、また当然の如く、同じライブラリを2回も3回も読み込むのは無駄です。

より詳しく知るにはこの2つの記事が勉強になります。

使ってみると、便利ですね。もしテーマを自作したり、カスタマイズしたりする時は、スクリプトの外部参照をheader.phphead内に直接記述するのではなく、wp_enqueue_script();を利用するのが必須となってきそうです。

Continue reading

新しいテーマとやっぱりテーマ作りは楽しい件

使用しているテーマを新しくしました。今回はダウンロードしてきたテーマではなく、一から自分で作ったテーマです。テーマ名はShikigasaneと命名。このブログ用に自作したテーマはこれで6つ目ですが、正式採用したのは4つ目。目標は相変わらず(?)和っぽいテイストをシンプルに。

20090510_waviaeidesign6

今回のデザイン・ネタ

作る度にどこか「和」っぽいテイストを入れようとしてみますが、ことごとく失敗します(笑)。今回作成したテーマのネタは伊右衛門に付いてきたかさねいろ豆巾着です。かさね色と言う和の色目があることは前から(詳しくはないですが)知ってはいました。これってウェブ・デザインに使えるんじゃないかと思うも、どこでどのように使えば効果的なのか、全然アイデアが思い浮かばずにいたんです。ところがこの豆巾着を逆さまにしてみて「そうか!ヘッダーのバックグラウンド画像に使おう」と思いたち作ってみたのがこのテーマです。

とは言うものの、色がちょっと変わってるだけで、デザイン的にはよくあるやつです(苦笑)。シンプルで気の利いたデザインを設計できる人は凄いなと思います。コメント欄はシンプルなデザインのブログを探して、それを参考にしたんですけど、なんかこぅ、パクリっぽくなってしまいました(汗)。どこのブログのコメント欄にインスパイアされたかは当ててみてくださいな。

Continue reading

WordCamp Tokyo 2009

先日(12日)WordCamp Tokyo 2009が行われました。昨年のWordCamp Tokyoは参加者として参加しましたが、今回は微力ながらスタッフとして運営の方をサポート+Matt質疑応答の通訳をさせていただきました。スタッフの皆さんお疲れ様でした。そして何よりもWordCampに来ていただいた皆様、ありがとうございました!

もうすでにブログに感想を書いてらっしゃる方々がたくさんいらっしゃいますし、アンケートもいただいています。僕もほとんどは読ませていただきましたし、これからも引き続きチェックしていきます。賛否両論、いろいろな意見、感想があり、参考になるお言葉も多いです。このようなイベントではすべての方々を100%大満足させる事は非常に難しいと思います。しかし、この人と会えてよかった。あの人と話せてよかった。あんな話を聴けててよかった。そう思える事が1つでも皆さんあれば幸いです。

写真は後日整理してアップしますが、とりあえず今日はおでさんが撮ってくださった質疑応答の時の写真をお借りします。手持ちでMattとのツーショットがないんですよねえ、なぜか。こういう質疑応答時の写真だけなんですよ。

ひっくり返すとMattのMだよね

古い記事をインポートして統合

このブログは2006年の1月17日に始めたのですが、2007年8月に一度「リセット」しています。「リセット」した理由はその時の記事に書いてあるのでここでは書きませんが、ブログのデータベース的には一度全てをバックアップした上でまっさらな状態から再インストールしています。2007年8月19日以前の記事は別のブログでも作ってそこにアップしておこうと思っていましたが、そのままローカル上に置きっぱなしになってました。

今回、2つのWordPressブログを統合する簡単な方法をMark Jaquith氏が書かれていた(Tip for merging two WordPress blogs « Mark on WordPress)ので、それを参考にして「リセット前」の記事を「リセット後」のブログに統合しました。ちなみに統合した「リセット前」の記事数は145。全て統合しました。

今のところ何も問題はないようです。記事IDが日付順にきれいに並んでないのがちょっと気持ち悪いですが、仕方ありません。とりあえず全てUncategorizedカテゴリに入れたので、おいおいカテゴリ分けしていきます。あとタグ付けも。

Windows Live Writer

WS000017

先ほどのFA50mm F1.4の記事と、この記事は、マイクロソフトのWindows Live Writerを使って書きました。いやぁ~、良いですねこれ! 書きやすい。WordPressの記事投稿画面も使いやすくなりましたが、それでもWLWには及ばない気がします。まだたった2つの記事を書いたとこですが、とりあえず今のところ気に入っているのは:

  • ローカルでドラフトを保存、管理できる
  • ほぼ忠実なプレビューが待ち時間なしにサクッとチェックできる
  • 画像の挿入が簡単 - 特にサーバへのアップロードは自動でやってくれるのが嬉しい
  • カテゴリとタグの両方ががきちんと連動している - これ重要だと思います
  • ローカル上のソフトウェアなので当たり前かもしれませんが、こうやってタイピングしていると画面にキビキビと文字が表示されていく。テキストエディタのように

まだ試していませんが、表や地図、動画の挿入も簡単そうです。更にプラグインによって機能を拡張できるようにしたのは英断ですね。

以前からネット上で「マイクロソフトらしからぬ(?)良いソフト」などと言った評判は目にしていたのですが、納得です。しばらくは僕もWLWで記事を投稿してみようかと思います。

と書いている矢先、今、欠点を2つ発見。

  • パーマリンク(スラッグ)を編集できない
  • 特殊文字の挿入ボタンが無い

特に1つめに関しては、日本語がそのままURLになってしまう。う~ん。ちょっとググってみるしかないですね。

リンクメモ―WordPress 2.7のテーマとコメント周り

またテーマをいじっているけど、WordPress2.7にバージョンアップしてテーマ周りが少し変わった。特にcomment.phpが一番変更が多かったように思うけど、これに関する詳細なドキュメントがなかな見つからなかった。でもようやく見つけたのでそのリンクの自分用メモ。

Migrating Plugins and Themes to 2.7/Enhanced Comment Display « WordPress Codex

Codexのページ。特に、新しいコメントループ用のテンプレタグwp_list_comments()が、liに付け加えるclass=””のリストは要チェック

WordPress 2.7 Comments Enhancements

Codexの解説とかぶる内容だけど、comments.phpを2.7以前と以降の両方に対応させるための方法が詳細に書かれている。

Mastering Your WordPress 2.7 Theme & Admin Area: Tips and Tricks

テーマと管理画面に関する変更箇所をまとめた記事。テーマの項はコード付きで、管理画面の項はスクリーンショット付きで解説されていてわかりやすい。テーマ周りでは以下の4こうもく。

  • コメント表示の拡張―スレッド、ページ
  • Stickyの記事
  • Post Class - 任意のクラス名をパラメータに渡してつけ加えられる。
  • wp_page_menu - wp_list_pagesをブログのナビゲーションメニューに。
  • ログアウト用リンク

最近気になっているWordPressの話題

寒くなってきました。秋を通りすぎて一気に冬って感じですねー。ここ最近気になっているWordPressの話題を3つ。

フレームワーク系のテーマが相次いでリリース

自分でテーマを作成する際にベースとして使えるテーマと言うと、真っ先に名が上がるのは、おでさんがWordCampでもプレゼンされたSandboxでしょう。日本だとwp.Vicunと言う選択肢もポピュラーだと思います。しかしここ数ヶ月間で、SandboxやVicunaのように、フレームワークとして利用できるWordPress用テーマが幾つか相次いでリリースされてます。

Continue reading

[投票企画]ブログの記事タイトルと同じ場所に表示してほしいのは?

トップページにしろ、個別記事のページにしろ、記事のタイトルは(ほぼ)必ず表示されます。よくこの記事タイトルの下に投稿日やカテゴリに、タグ、コメント数、投稿者、等が表示されるように一般的になっています。でも、あまり表示しすぎるとかえってごちゃごちゃと見にくい事になります。どうするのが一番良いのかな、と思っていましたが、せっかくなのでAutomatticが先日買収したPollDaddy.comを使用して投票企画を行ってみようと思います。

Continue reading

MattによるWordPress2.7管理画面のデモプレゼン

開発陣がWordPress2.7への新機能の追加をストップし、いよいよ近づいてきたなと言う感じです。変更点などの詳細は、taiさんが2.7の資料リンクを書かれているのでそちらを参照していただくとして、2.7の管理画面が実際に動いているデモのビデオをこちらで見られます。

Mattが先日、と言っても記事の投稿日10月5日なのでもう2週間くらい前ですが、WordCampNYCにて行ったプレゼンの一部です。ビデオの大体5分を過ぎるあたりから、Matt自身のブログの管理画面を使用して新機能のデモを行ってます。

  • 記事投稿画面の表示カスタマイズ(項目、表示場所など)
  • 記事の管理の表示カスタマイズ(項目、クイック編集、クイック一括編集)
  • コメントの管理画面(管理画面上で直接返事)
  • プラグインの管理画面(管理画面から直接プラグインを検索してインストール)

デモでは動作がきびきびとしていて気持ちが良いです。特にプラグインの直接インストールはびっくりするくらい早かった。もちろんサーバや回線の状況に左右されるとは思いますが。それからGoogleGearsを使用しているかどうかも影響する気がします。

前編英語ですが、管理画面の動作やカスタマイズ具合は分かると思いますので、興味が有る方は是非!

WordCamp Tokyo 2008の写真

WordCamp Tokyo 2008の写真を数枚Flickrの方にアップしました

実行委員会からの連絡事項通り(下記引用)プレゼンの方々以外の顔がうつらない写真を一応ピックアップしましたが、配慮が足りない写真があればご連絡下さい。すぐに対処します。

プレゼンスピーカー以外の人物がはっきり移っている写真については、その方の了承を得て公開していただくか、画像処理などの配慮をお願いいたします。(WordCamp WordCamp Japan » WordCamp Tokyo 2008 終了のお礼

なお、懇親会の写真2枚の時系列順番がおかしくなっているのは、アップロード後にFlickr上で編集したからです。ちょっとだけ左右を切り取ってあります。顔だけモザイクかけようと思ったらプレミアム会員だけ。元画像を置き換えようと思ったらこれもプレミアム会員だけ。Proじゃない僕はできなかった(泣)

WordCamp Tokyo 2008へ行ってきました

今日は楽しみにしていたWordCamp Tokyo 2008へ行ってきました。酔っぱらいすぎて終電にまにあわず、ファミマのチキンかじりながら歩いてきて、早く寝ないと明日の仕事に起きれないんでちゃんとしたレポートはまた後日書きます。ともかく、運営チームの皆さん、お疲れ様でした!プレゼンをされた皆さん、いろいろと勉強になりました。それから、懇親会や二次会(三次?)でお会いした方々、楽しいひとときをありがとうございました。

そろそろ何かWordPressコミュニティに還元したいなぁ~と思っていたので、いろんな刺激やアイデア、つながりができて、とてもとても良かったです。僕のへたな言葉では表現しきれません。

今日はこのへんで。あー早よ寝な。明日が…

明日はいよいよWordCamp Tokyo 2008

明日は(書いている間に当日に…)いよいよ待ちに待ったWordCamp Tokyo 2008の日です!

いや~。正式な告知が出てから長かったような、身近かかったような。今日スピーカータイムテーブルが発表。どれも面白そうで楽しみなのですが、特にAutomaticのMicheal Pick氏がどんな内容のプレゼンを行うのかを個人的には注目してます。

Continue reading

マガジン・スタイルのWordPressテーマ「Arthemia」

今回使用する事にしたテーマArthemiaの主な特徴は以下の4つ。

今流行のマガジン・スタイル。
トップページに表示しているイメージ画像は、表示サイズより大きくても自動縮小。
グリッド・レイアウトに基づき整理・表示された情報。
主なカテゴリを5つピックアップして目立つように表示できる「Browse Categories」。

画像の自動縮小は、テーマに同梱されているTimThumb PHP Scriptで実現しています。また、作成された画像は指定してあるフォルダにキャッシュされるので、一度表示すれば2回目からは早く、負担も軽くなっているはずです。

もちろん幾つかカスタマイズして変更している点はあります。まずトップページに並んでいる記事は時系列表示(=最新の記事5つ)に変更。4つの記事にもイメージ画像を表示するように変更。画像のサイズによってexcerptを表示するかどうかの条件式も足しています。カテゴリや月別アーカイブのページにもイメージ画像を表示するように変更。また、記事を投稿するときにイメージ画像をアップできなかった時(例:出張時や携帯電話からの投稿など)を考え、イメージ画像が無いとき用の処理も記述。

フッターの真ん中に表示しているコメント数の多い記事5つはそのままに、左にはGoogleReaderのShare、そして右にはメディアマーカーに最近登録した5つのアイテムを表示。

しばらくはこのテーマで行ってみようかと思います。最近、いやここ数ヶ月、ブログの中の情報(=記事など)をどのように整理し、どうやって見せるのかにムクムクと興味がわいてきています。なのでアクセス解析(GoogleAnalytics使用)を用いて訪れるかたがどう反応しているのかもチェックできたらと思っています。

テーマ変更― Arthemia

テーマを変更しました。今回は流行りのマガジン・スタイルなデザインのArthemiaです。完全にディフォルトではなく、ちょこちょこっとカスタマイズしています。以前に「数ヶ月前から作り込んでるテーマ」と書いたんですが、これがそのテーマです。

「数ヶ月作り込んだのに見た目が(オリジナルと)あんまり変わらんやないか!」と言われそうですが…

今日はもうちょっと遅いので、そこらへんも含めて連休中に書こうと思います。とりあえず、サーバにアップ、テーマを適用して発生した不具合が2カ所。両方ともローカルでは問題無かったのになぁ。

まずはイメージ画像でサイズの大きい画像を縮小している箇所。これはArthemiaに同梱されていたTimThumb PHP Scriptを利用しているんですが、画像が表示されない場合がある。テーマを適用して1回目は問題無かったけど、何回かリロードすると表示されなくなっちゃった。ちゃんとキャッシュも作成されてるし、コードも間違ってないし。う~ん。やっぱりさくらのサーバーかな。

2つ目はファビコン。Firefox3ではなぜか表示されない。これもローカルでは問題なかった。ちなみにIE8では問題なし。Firefoxで使用しているアドオンのSpeed Dialでも問題なし。

うーん。何でやねん。

追記(2008/09/14/12:40):一晩あけて、両方ともうまくいってるっぽい。ファビコンはたぶんFirefoxに残っていた履歴とかキャッシュとかの問題。TimThimb PHP Scriptは一時的に大きい負荷がかかっていたからでしょうね。