タグ: テーマ

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

リンクメモ―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

マガジン・スタイルの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は一時的に大きい負荷がかかっていたからでしょうね。

WPテーマ検証用のサンプル・ポスト・コレクション

テーマを作成する時に、XAMPPで作ったローカル環境にインストールしたWordPressで検証します。その時にテーマ全体の出来具合や不具合のチェックも行いますが、その時面倒くさいのが記事のチェック。

<p>や<blockquote>、<ul>に<ol>、<img>の左寄り・真ん中寄り・右寄り、と行った具合に検証しなきゃいけないマークアップが多すぎ。自分のみ利用するテーマの場合、これまでの経験からだいたいどんなのを自分のWordPressブログで利用するか分かってます。なので僕はいつも手っ取り早くウェブ上の自分のブログ(つまりWaviaei)からコピッてきます。でも絶対1つぐらいはチェックし忘れたり見落としてたりするんですよねぇ。

で、そんな人の為にWPCandyがリリースしたのがSample Post Collection。検証用のサンプル・ポストです!

Continue reading

新しいテーマ - Notepad Chaos

WP Theme - Notepad Chaos

WP Theme - Notepad Chaos

使用しているWPのテーマを変えてみました。今回はNotepad Chaosです。オーソドックスな2カラムのデザインですが、よく作り込まれた背景画像と、手書き文字が特徴的です。Archivesとか、リンク先が変だったり、記事の写真がはみ出してたりしてますが、相変わらずの「一時的用」として勘弁してください~。

で、数ヶ月前から作り込んでるテーマですが、スクラッチからではなく、一応ダウンロードできるのをベースにしています。でも改造してる内に、自分が普段(と言うか以前)用いているXHTML+CSSのコーディングと違っていてそれが気になってしようがありません。たとえばid名だったりcss名だったりです。レイアウト的にもwrapperを使う、使わないとか。さらに、改造していくうちに削りたい箇所や、加えたいコードが有ったり、使う予定のないプラグイン用の記述を削除したり・・・。だいぶ混乱しています(笑)。

そんなこんなで、デザインと画像部品はそのままに、コーディングを書き直そうと思ってます。自分好みに綺麗にするか、Sandboxをベースにしてみるか、ちょっと悩んでますが・・・。

wp.vicunaのデザインを変えてみた

使用しているテーマ、wp.vicunaのスキンをカスタマイズしてみました。ベースにしたのは、Originのスキンです。いやー、やっぱり他人が作ったテーマのテンプレート・ファイルを編集するのは、それはそれで結構大変な部分がありますね。XHTMLとCSSの書き方の癖の他に、テンプレ作りの癖。やっぱり、一番やりやすいと感じるのは人それぞれですからね。自分でスクラッチから始めた方がやりやすいんじゃないか?と思いつつも、1日もいじっていれば、大体つかめてきて、結局思ったより早く完成しました。いや、完成はしてないんですけど、アップできるようにはなった、です。

主にCSSの方をいろいろといじったわけですが、テンプレート・ファイル(phpの方)も少し編集(naviとfooterの部分)しています。ヘッダーは、実装してみたいと思っているしかけが有って、そのため、ちょっとややこしい事をしてます。頑張って、さっさと実装しようと思っています。

あっ!IEのチェック忘れてる・・・。でも、もう遅いので明日にします。どっちみち、家からじゃぁVista+IE7環境でしかチェックできないですし。

vicunaのアイキャッチ画像をランダムに

Vicunaのモジュールに、アイキャッチ画像が有りますが、その内の「Eye Catch Mini Module」をオンにしてみました。ただそれだけじゃ面白くないので、幾つかの画像をランダムに表示させるようにカスタマイズ。画像をランダムに表示させる方法は、JavaScriptを使う方法も含め幾つかあるようですが、今回はphpで実装しています。CSSに記述されている画像へのリンクを、とあるphpファイルへ置き換え、そのphpファイルが指定されたフォルダ内の画像をランダムに表示しています。

ちなみに、使用しているbazookaスタイルのミニのアイキャッチ画像ですが、角丸になっていたりして、ちょっと加工が面倒です。と思っていたら、Vicunaブログ経由MercuriousLABさんがアイキャッチ画像作成ツール作成・公開してくださったとのニュースが!おおっ、なんちゅうタイミング!感謝です。

  1. まずはアイキャッチ画像作成ツールみたいなものに、使用したい画像をアップロードしてアイキャッチ画像を作成。作成されたアイキャッチ画像の中から、使用する画像をローカルに(デスクトップとか)保存します。ファイル名は何でもOK。
  2. A List Apart の、Random Image Rotation という記事からテキストファイルをダウンロードする。ファイルへのリンクはページの下の方。分からない方は直接ここから。
  3. ダウンロードしたrotate.txtをrotate.phpにしておく。
  4. 作成したアイキャッチ画像たちと、rotate.phpを同じフォルダに入れる。フォルダ名は何でもOK。ここでは、random_mini としておきます。
  5. random_mini フォルダを、そのままサーバへアップします。アップする場所は、基本的にはvicuna のフォルダ内のどこでも良いです。僕はstyle-bazooka 用に画像を作成したので、管理しやすいように /wp.vicuna/style-bazooka/images/eyeCatch へアップロードしました。
  6. module フォルダ内にある mod_eyeCatch-mini.css を編集します。編集するのは27行目にあるbackground-image: url(../images/eyeCatch/mini.gif);
    これを
    /* background-image: url(../images/eyeCatch/mini.gif); */
    background-image: url(../images/eyeCatch/random_mini/rotate.php);

    の用に編集。元の記述は削除せずに、コメントアウトして一応残しています。random_mini の箇所は、4. で作成したフォルダ名にして下さい。
  7. 6. で編集したCSSファイルをサーバへアップして、上書きします。
  8. これで完了。ブラウザ上で確認して、ページを再読込みして、画像がランダムに表示されればオッケー!

手順の2. ~ 3. あたりがよく分からない方は、chocobit さんのphpで画像をランダムに表示させるがわかりやすいです。

試しに、当ブログを再読込みしたり、サイト内へのリンクをクリックしてみて下さい。左上にランダムにアイキャッチ画像が表示されるはずです。

なお、アイキャッチ画像作成ツールに画像ファイルをアップロードする際、ファイルサイズが大きいデジカメ画像だと、処理に少し時間がかかります。おそらく設置されているサーバにも負担がかかるので、予め縮小して、ファイルサイズを落としてからアップロードする方が良いと思います。