タグ: 作成

ManabiTheme – IntermediateLevelを公開します

2010年6月22日 /

以前公開した、「ローカル環境にて、ソースコードからWordPressテーマを学ぶことを目的とした、テーマを学ぶ為のテーマ　－　ManabiTheme（学びテーマ）」の続きを公開します。前回公開したのはEntry Level（初級編）ですが、今回はIntermediate Level（中級編）です。

ダウンロード：ManabiTheme – IntermediateLeve ver.0.9

ManabiThemeを作成した経緯と、その特徴は、初級編の記事を参照してください。デザインの変更もありません。

中級編に追加したテンプレートファイルは以下の5つ。

  • single.php
  • archive.php
  • page.php
  • search.php
  • functions.php

テーマの機能としては、サイドバーのウィジェットに対応しています。

初級編と同様に、解説をコメントで説明していますが、初級編で書かれていたコメントは一部を除いて全て削除しています。分からない箇所があれば、初級編のテンプレートファイルをもう一度参照して下さい。もちろん、中級編にて新たに追加したテンプレートタグや、逆に削除したテンプレートタグは、初級編のように解説をコメントで説明しています。
Continue reading

ManabiTheme – EntryLevelを公開してみます

2010年3月13日 /

WordCamp Fukuoka 2010の2次会＠APIカフェにて紹介させていただいた、「テーマを学ぶ為のテーマ」、名付けてManabiTheme、を公開します！

このManabiTheme（学びテーマ）は、「テーマを学ぶ為のテーマ」として作成しました。外部に公開するWordPressブログ用のテーマとしても使用可能ですが、それよりは、ローカル環境（XAMPP等）にてWordPressテーマを学ぶ為に使用されることを主たる目的として作成しています。

WordCamp Fukuoka 2010

ManabiThemeを作成した経緯

去年の秋頃だったと思うんですが、@khoshinoさんが、とあるWordPressの勉強会にてこんな趣旨のつぶやきをされました。

「テーマを学ぶ為のオススメのテキストやサイトは？」

このつぶやきに反応して、僕を含めて何人かの方がオススメしたのを纏めると。

「一番良いテキストブックは良いテーマ。」

僕はWordPressのテーマを1.5系からいじっているのですが、ある程度基礎的な事が分かると、あとはダウンロードしてきたテーマのコードを読んで学びました。XHTMLとCSSも、「これは！」と思うサイトのソースを読んでましたね。

で、@khoshinoさんに「ではどのテーマが良いですか？」と聞かれて改めて気がついたのですが、最近は「勉強するならこれがいいですよっ」と１つ進められるテーマがないんですよねぇ。WordPressが多機能になるにつれ、テーマの中身が複雑化しました。例えばサイドバーのウィジット化やコメントのスレッド化です。そして、公式レポジトリにアップされるテーマの数が多くなるにつれ、テーマ作者は競うように高機能化を進めていく。例えば、管理画面から各種設定が行えたり、様々な種類のレイアウトからお好みのを選択できたり。悪くはもちろんないんですが、テーマを独学する為の教材としては敷居が高くなってしまった感は否めませんね。

ならば、それに適したテーマを作ってみよう、と思って作成したのがこのManabiThemeです。他人のソースコードを（良い意味で）盗み、学ぶのは、スキルアップに不可欠だと個人的には思います。このManabiThemeがその入り口となってもらったり、きっかけの１つになってもらったら幸いです。

ManabiThemeの特徴

幾つか特徴をご紹介いたします。

Continue reading

ブログのデザインを少し変更 – ver.7

2009年10月3日 /

ブログのデザインをちょこっと変えました。これで少しすっきりしたかと。右側の黄色を取っ払おうかどうか考えましたが、結局は以前よりもちょっとだけ細くして、メインコンテンツとの間のホワイト・スペースを増やしました。

20091003_Waviaei_renew1

その他には、コメントやコメント周りや…
Continue reading

[復刻版]WordPressテーマガイド（4）WPテーマの構造と仕組み

2009年5月28日 /

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

ここでは具体的にWordPressテーマのファイルやディレクトリ構造を見ていきます。

最低限必要なテンプレート・ファイルはどれなのか？

モジュールは？

などなど、テーマの中身が分かると思います。

Continue reading

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

2009年5月27日 /

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

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

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

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

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

「目印」に置き換える

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

Continue reading

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

2009年5月26日 /

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

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

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

ブログ・デザインの定番

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

Continue reading

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

2009年5月25日 /

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

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

WordPressとは？

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

Continue reading

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

2009年5月25日 /

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

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

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

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

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

の2点です。 Continue reading

Random Image Script

2009年5月18日 /

20090517_waviaei

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

wp_enqueue_scriptを使う（その２）

2009年5月17日 /

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

—テーマでwp_enqueue_scriptを使う « Waviaei

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

テーマでwp_enqueue_scriptを使う

2009年5月15日 /

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

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

wp_enqueue_scriptとは

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

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

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

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

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

Continue reading

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

2009年5月10日 /

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

20090510_waviaeidesign6

今回のデザイン・ネタ

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

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

Continue reading

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

2008年12月29日 /

またテーマをいじっているけど、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

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

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

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

2008年10月19日 /

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

Continue reading

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

2008年9月13日 /

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

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

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

Continue reading

WordPressのテーマを日本語でも見栄えをよくする

2006年8月7日 /

WordPressコミュニティには素晴らしいテーマがたくさんあるのですが、ほとんど全てが欧文のブログを想定しています。気に入っても、いざ導入してみると「あれっ？」と思うこともすくなくないと思います。和文だと見栄えがよくないのが多いんですよね。

そこで、日本語でも見栄えをよくする為のポイントを書いてみます。

Continue reading

Waviaei Design ver.2

2006年6月27日 /

IE対策でちょっとてこずりましたが、なんとか完成。以前のデザインは「0.5くらい」って言ってましたが、あれはもうver.1にします（笑）。それで今回は「Waviaei Design ver.2」とします。一応サブタイトルは「Midori」。そのまんまやんけっ！、と突っ込まれてもおかしくないくらい、なんのひねりもありません。

今回のデザイン、レイアウト、そして色に関するインスピレーションのネタなどを少し書いてみようと思います。

Continue reading

リ・デザイ・・・ン？

2006年6月25日 /

Waviaeiのデザインをまた変えました。今回も全て一から作ったんですが、ゴメンナサイ。IEのチェックが甘かったです。IEは、最近入れたIE7betaでチェックすると問題なかったので、IE6だとPNGだけを入れ替えるとOKなんじゃないかと思ってた。でもサイトのトップやでっかいフッタの部分の「ブロック」が１つずれる。原因がいまいちわかりません。Widthのトータルを親divのwidthよりも少なくしても変わらない。う～ん。

早急に原因を解明して直します。また、良い機会なのでIE7でも使えるCSSのブラウザ振り分けとハックを実践してみようかと。

WaviaeiへのアクセスはIEとFirefoxが同じくらいですが、わずかの差でIEがトップ。以外にも（失礼！）Safariからのアクセスも結構あります。でもMac持っていないので、Safariでもおかしかったら教えてください。