タグ: 作成

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