Top Banner
WordPressとおやつの会 ver. β1
23

2010-09-03 WordPressとおやつの会

May 15, 2015

Download

Technology

Twenty Tenの子テーマを作る、というテーマでお話ししました。
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: 2010-09-03 WordPressとおやつの会

WordPressとおやつの会ver. β1

Page 2: 2010-09-03 WordPressとおやつの会

本日はご来場ありがとうございます

Page 3: 2010-09-03 WordPressとおやつの会

本日の内容

WordPress 3.0についてのごく簡単な紹介

子テーマ(child theme)について

子テーマを使ったカスタマイズのデモ

質疑応答

Page 4: 2010-09-03 WordPressとおやつの会

その前に、スピーカーの自己紹介を

名前:五十嵐 武志(Takeshi+81, takeshi81)81は日本の国番号で、1981年生まれではありません。念のため。

フリーランスのWeb制作者です。主にディレクションを手掛けています。

ここ、水玉製作所に居候して、自分や水玉の案件をいろいろ捌いています。

今年からファッション系の専門学校で、Web制作を教えています。

Page 5: 2010-09-03 WordPressとおやつの会

その前に、スピーカーの自己紹介を

Web制作歴 11年

WordPress歴 不明ME1.5くらいからさわっていたはず

導入はよくやりますが、テーマの構築事例は実はあまり多くありません。自社プロジェクトで一つくらい。

Page 6: 2010-09-03 WordPressとおやつの会

さて、ここから本題に入ります。

Page 7: 2010-09-03 WordPressとおやつの会

WordPress 3.0について

WordPress と WordPress MU が統合、一度のインストールでマルチサイトと呼ばれる複数のサイトの管理が可能に。

WordPress の最新機能を最大限に生かした新デフォルトテーマ「Twenty Ten」を採用。

新カスタムメニュー機能

Page 8: 2010-09-03 WordPressとおやつの会

WordPress 3.0について

WordPress 管理画面から、ヘルプタブをクリックしてヘルプテキストにアクセス可能。

インストール時に管理者のユーザー名とパスワードを自由に設定できるように。

テーマの一括更新と処理中の自動メンテナンスモード。

and more...

Page 9: 2010-09-03 WordPressとおやつの会

新テーマ「Twenty Ten」

WordPress 3.0の新機能をフルに活かした、今後のデフォルトテーマ。

カスタム背景、カスタムヘッダー

ドロップダウンメニュー

ビジュアルエディタースタイル

and more...

Page 10: 2010-09-03 WordPressとおやつの会

新テーマ「Twenty Ten」

更に詳細な情報が知りたい方へ、朗報です。

Page 11: 2010-09-03 WordPressとおやつの会

新テーマ「Twenty Ten」

WordBench Nagoyaで発表された@hokoriさんのスライドが大変素晴らしいので

そちらをご参照ください!

WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖!http://www.slideshare.net/hokori3/wordpress30-twenty-ten

Page 12: 2010-09-03 WordPressとおやつの会

では、子テーマについてのお話を。

Page 13: 2010-09-03 WordPressとおやつの会

「子テーマ」(child themes)

WordPressの子テーマとは、別のテーマ(親テーマ)の機能を継承し、その機能にさらに機能を追加したりその機能を調整したりすることのできるテーマです。(Codexより)

Page 14: 2010-09-03 WordPressとおやつの会

「子テーマ」(child themes)

もっとも単純な形式では style.css ファイルを一つだけ備えたディレクトリとなり、制作がとても簡単です。HTML と CSS に精通していればプログラミングの知識は必要ありません。(Codexより)

Page 15: 2010-09-03 WordPressとおやつの会

Twenty Ten (parent)Twenty Ten Child

「子テーマ」(child themes)

Page 16: 2010-09-03 WordPressとおやつの会

Twenty Ten (parent)Twenty Ten Child

「子テーマ」(child themes)

子テーマにないファイルを自動的に継承(例外有り)

Page 17: 2010-09-03 WordPressとおやつの会

「子テーマ」(child themes)

もっとも単純な形式では style.css ファイルを一つだけ備えたディレクトリとなり、制作がとても簡単です。HTML と CSS に精通していればプログラミングの知識は必要ありません。

また、基本的には親テーマ自身にはまったく手を加えないで親テーマのスタイルやレイアウトを好きなだけ変更することができます。そのため、親テーマがアップデートされても子テーマの変更は保持されます。(Codexより)

Page 18: 2010-09-03 WordPressとおやつの会

「子テーマ」(child themes)

さらに、PHP や WordPress Plugin API を基本的に理解していれば、自分の子テーマの中で PHP を使い、親テーマにまったくさわることなくどのような改変でも可能になります。

このような理由で、使用しているテーマをカスタマイズする方法として子テーマをおすすめします。(Codexより)

Page 19: 2010-09-03 WordPressとおやつの会

Demo 1

早速、子テーマを作って、

親テーマの継承を確認しましょう。

Page 20: 2010-09-03 WordPressとおやつの会

子テーマの最低要件

基本、親テーマが定義された style.css があればOK。

/*

Theme Name: Twenty Ten ChildTheme URI: http://wordpress.org/Description: Child theme for WordPress Twenty Ten theme.Author: the WordPress teamTemplate: twentytenVersion: 0.1Tags: black, blue, white, two-columns, fixed-width, custom-header, custom-background, threaded-comments, sticky-post, translation-ready, microformats, rtl-language-support, editor-style*/

親テーマのディレクトリ名を指定

Page 21: 2010-09-03 WordPressとおやつの会

子テーマの最低要件

screenshot.png は継承されません。

functions.php は子テーマのものを読み込んでから、親テーマのものを読み込むようになっています。

他のファイルは、子テーマから読み込み、ないものは親テーマから読み込みます。

Page 22: 2010-09-03 WordPressとおやつの会

Demo 2

では、まったりいじります。

Page 23: 2010-09-03 WordPressとおやつの会

お疲れ様でしたまたのご来場をお待ちしております