[WP] テーマの使い方

[065] Twenty Ten のギャラリーの便利な機能色々

WordPress3.0 のデフォルトテーマ「Twenty Ten」ではギャラリーという便利な機能があります。これがとても便利なのですが、意外と使われていないようなのでご紹介します。
まずはご紹介するにあたり、WordPress のギャラリー機能を使って、フォトブログを作ってみました。


さて、Gallery には以下の大きくふたつの機能がありますので、順にご紹介します。

1.「画像を追加」画面の「ギャラリー」を使う


表示順が変えられます
画像をアップロードする「画像を追加」画面の「ギャラリー」ではアップロードした添付画像のタイトルや説明を更新できるだけでなく、表示する順序を入れかえることができます(右図 上の赤枠)。

画像一覧が表示できます
さらにキャラリー設定の画像の順序で「メニューの順序」を選んで「ギャラリー設定を更新」すると(右図 下の赤枠)、投稿画面にギャラリーの絵が表示されます(下図)。この絵はHTMLで表示すると挿入されたのがショートコードであることが分かります。
続きを読む

[062] カスタムヘッダーにタイトルを表示する

WordPress3.0のデフォルトテーマ「Twenty Ten」ではカスタムヘッダーを使用することができる。さらに Twenty Ten の functions.php にはヘッダー画像にテキストを表示することができる設定があったので試してみた。

ヘッダーのテキスト設定

まず、子テーマの functions.pphp で、define( ‘NO_HEADER_TEXT’, false ); と設定して下さい。


すると管理画面左メニューの外観>ヘッダーで「ヘッダーのテキスト」を設定できるようになります。


続きを読む

[Seminar] WordPress3.0の新機能とCMSへの応用

KDDI Web Communications 殿主催の CMS 8日間連続無料セミナーがあり、11月12日(金)のWordPress に参加させていただきました。会場もとても綺麗で、来場者もざっと50人以上の方が来られていて 大盛況でした。

講師は株式会社キャンプフォー 高山一登殿でした。
高山殿は WordPress のイベント「WordCamp Yokohama 2010」での発表がとても面白かったので、無料セミナーがあると聞いて参加しました。



参加者のうちWordPressのテンプレートタグが分かるのはおよそ半分という構成で、当日のセミナー全体の流れは以下のようになっていました。

  1. KDDI Web Communications 殿から告知、書籍の抽選
  2. WordPress の紹介、WordPress の簡単インストール
  3. サンプル1 フォトブログのテーマをライブコーディング
  4. サンプル2 KDDI Cafe のテーマをライブコーディング
  5. マルチサイト化の実演
  6. プラグインの紹介、質疑応答



以下は講師の高山殿のセミナーでの発表内容を、メモから書き起こしました。(もし、間違いや理解違い等がありましたらご容赦下さい。お教えいただければ訂正します。)
今回のセミナーは私にとっては、実際にコーディングする流れを見れたので、様々な機能や関数の使い方とあわせて非常にためになる内容でした。入門~初級者にとっても、実際に何をコーディングしているかを理解することは難しいものの、その結果として具体的なメリットや便利さを感じられたのではないかと思います。

今回のセミナーについては @crema さんのブログに詳細なメモが掲載されていますので、あわせてご参照になるとCMSソフトウェア WordPress3.0 の理解の助けになるかと思います。
とってだし自分用メモ「WordPress3.0の新機能とCMSへの応用」セミナー

続きを読む

[053] Twenty Ten ヘッダー画像サイズ変更

WordPress3.0 のデフォルトテーマ Twenty Ten はヘッダー画像を 外観>ヘッダー から好きな画像に変更することができます。
ヘッダー画像のサイズは 940px×198px で固定となっていて、ヘッダー画像をアップする際にトリミングをおこなってくれる機能もあって、とても便利です。

Twenty Tenのレイアウトを変える で全体の横幅を大きくしたので、今回は画像のサイズを変更してみました。

まず、変更方法を調べてみると Twenty Ten のテーマフォルダの functions.php の関数 twentyten_setup() にそれらしい箇所がありました。

	// The height and width of your custom header. You can hook into the theme's own filters to change these values.
	// Add a filter to twentyten_header_image_width and twentyten_header_image_height to change these values.
	define( 'HEADER_IMAGE_WIDTH', apply_filters( 'twentyten_header_image_width', 940 ) );
	define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyten_header_image_height', 198 ) );



ヘッダー画像のサイズを定義する HEADER_IMAGE_WIDTH、HEADER_IMAGE_HEIGHT の定義では apply_filter が使用されているので、フィルターフックで変更が可能だと分かります。これなら簡単にヘッダー画像のサイズを変更できそうです。

続きを読む

[045] Twenty Ten の「Asides」「Gallery」

Matt Thomas が WordPress.com 英語版ブログに投稿したWordPress3.0 の新しいデフォルトテーマTwenty Ten を紹介する記事には以下のように書かれている。

Twenty Ten は、「Asides」または「Gallery」カテゴリーの投稿を特別なスタイルで表示できます。一覧ページ(例えばホームページや月別アーカイブなど)を表示した場合、Asides カテゴリーの投稿にはシンプルなスタイルが適用され、フルレングスの投稿の間にきれいに収まります。Gallery では中に含まれる画像を見ることができます。

この2つの名前のカテゴリーをブログに追加すれば、Twenty Ten テーマは自動的にカテゴリー名を検知して適切なスタイルを適用してくれます(訳注: カテゴリー名は現在英語のみ対応)。僕らがこの機能を取り入れるきっかけとなったマットのブログで、短い投稿やギャラリーがどんなふうに含まれているか見てみてください。(出典)新テーマ: Twenty Ten



そこで、これらのカテゴリーを試してみた。まずは Gallery の場合は下図のように画像をひとつサムネイル表示して、 「This gallery contains 3 photos.」 と画像数を記載する点である。


次に Asides の場合は以下のように表示される。こちらは題名も画像は表示せず、抜粋がある場合は抜粋のみ表示する。抜粋表示の場合の記事を囲む div要素のクラスは、「entry-summary」、全文もしくはmoreまでの場合は「entry-content」になる。


これらの制御は loop.php にておこなわれており、以下のような制御の流れになっている。
if ( in_category( _x('gallery', 'gallery category slug', 'twentyten') ) ) :
	Gallery に関する処理
elseif ( in_category( _x('asides', 'asides category slug', 'twentyten') ) ) :
	Asides に関する処理
else :
	通常の処理
endif; // This was the if statement that broke the loop into three parts based on categories.

[044] One Column no sidebar

WordPress3.0 のデフォルトテーマ Twenty Ten でページを作成する場合にはテンプレートを利用して One Column no sidebar のレイアウトのページを作成できるので紹介します。

テンプレートを選択するのは、ページ新規作成か編集画面の(デフォルトの場合)右下にあるページ属性というボックスで設定します。


テンプレートは最初「デフォルトテンプレート」が選択されていると思います。これを One Column, no sidebar に変更して、ページを保存すると1カラムでサイドバー表示のないページになります。さて、実際に試してみました。すると、左右に大きな余白ができてしまいました。



これは1カラムになって全体の幅が大きくなったにも関わらず、 コンテンツの幅が下記のように 640px に設定されていたからでした。

.one-column #content {
	margin: 0 auto;
	width: 640px;
}



そこで、上記CSS設定を私はレイアウトを少し大きくしたので 980px に(通常であれば940px に)変更したものを子テーマの style.css に追記しました。すると、横幅全体を使って大きく表示してくれるようになりました。

[043] ロリポップでWordPressを簡単インストール

WordPressのバージョンが3.0 にテーマがTwenty Ten になり初心者の方にとても使いやすくなったWordPress のインストールを、私が現在使用しているレンタルサーバであるロリポップを使っておこなう場合で説明します。

WordPress は PHP+MySQL(データベース)という構成になっていています。このため、インストールの前にどのレンタルサーバのプランが対応しているか確認して下さい。ロリポップだと以下のようになります(2010年10月28日現在)

これによると、さすがに月額105円のコロリポプランではデータベース(MySQL5)が用意されていないため、WordPress が使用できないようです。さて、それではロリポプランを選択したとします。


現在ではロリポップを始め多くのレンタルサーバで「簡単インストール」機能が用意されています。ロリポップでログインして、左メニューから簡単インストールを押すと下図のように簡単インストールできるアプリケーションとして WordPress が表示されるので、「利用する」ボタンを押します。

続きを読む

[041] Twenty Tenのレイアウトを変える

WordPress3.0 のデフォルトテーマ Twenty Ten のサイトレイアウト、具体的には全体とサイドバーの横幅を広げたいなと思い調べてみた。

まず、サイトの要素の大きさには以下の4つがある

  1. 要素の大きさ width
  2. 境界線 border
  3. 余白(境界線内) padding
  4. 余白(境界線外) margin
右図は下記サンプルCSS設定のレイアウトである
div#sapmle{
	width: 100px; border: solid 10px #999;
	margin: 40px 30px 20px 10px;
	padding: 30px 20px 10px 0px;
}




今回はdiv#wrapper の横幅を 940pxから980px に、サイドバーの横幅を 220pxから270px に広げた(すでに変更済み)。ポイントはdiv#container の-240pxというmarginだった。

Twenty Ten の各要素の大きさ(width、padding、margin)は下図のようになっていた。要素名はCSS にならっていて、div#wrapper なら div id=”wrapper” の要素を指す。
また、Twenty Tenの子テーマに追加したCSS設定も合わせて掲載する。

続きを読む

[040] WordPress CMSトレンド

Movable Type をサポートする Six Apart が広告ネットワーク大手 VideoEgg に買収されるとのニュースが先月あった。
広告ネットワークのVideoEggがSix Apartを買収

そこで、CMSのトレンドおよびCSMにおけるWordPresの置かれた状況を見るために、よく使われる Google Trend を試してみた。


Google Trend は検索数の指数なので、「使われている」というよりは「注目を集めている」度合いの指標と考えた方が適切であろう。さて、すべての国/地域で見てみると下図のようになる。2006年から joomla、wordpress が勢いよく伸びていることがよく分かる。



さて、それに対して日本は長らく Movable Type が優勢と言われてきたが、2007年頃までは xoops と Movable Type が注目されていたことが分かる。それが、2007年を境に両者に代わって WordPress が台頭してきている。世界的には注目されている joomla は低位にとどまっています。

世界と日本でずいぶんと違うものですが、WordPress が注目を集めていることだけは確かなようです!

続きを読む

[039] twentytenのメニュー使い方

WordPress3.0 のデフォルトテーマ「twenty ten」では外観>メニューから管理画面を開き、メニューを作成・編集することができる。

初期では「ホーム」と「紹介」の2種類が表示されている。これらのナビゲーションメニューを表示しないようにしたい場合にもまず作成する必要がある。



  1. メニューの名前を付け保存して、新しいメニューを作成する
  2. テーマの場所で新しく作成したメニューを設定して保存する


この時点で、ナビゲーションは表示されなくなる。ここから、メニューに表示するメニュー項目を加えて保存する。ホームを追加したい場合は、ページで「すべてを表示」を押すと表示される。


twentyten でナビゲーションメニューの2つ目以降を追加する場合は、 ナビゲーションメニューの追加を参照して下さい。

[017] WordPress Theme 「twentyten」の設定

WordPress3.0 のデフォルトテーマ「Twentyten」の設定については、この記事に追記していく。

  1. マルチサイトにして新しく作成したサイトの初期言語を日本語にする
    (マルチサイトで新しくサイトを作成すると、ダッシュボードが英語になってしまう・・・)
    • 特別管理者>設定>初期設定言語 を 「Japanese」 にする
      ⇒次回以降に作成したサイトは最初から日本語になる
    • ダッシュボード>設定>一般>サイトの言語 を 「Japanese」にする
      ⇒すでに英語になってしまったサイトも日本語の表記に変更される