基本機能でここまでWebは制作できる「WordPress」活用セミナー

簡単に自己紹介

小賀　浩通@digitalcube

株式会社デジタルキューブ代表

アジア初のWordPress認定コンサルタント会社。

WordPressでのサイト構築実績数は350サイト以上！

通称

組め

10press.net

アジェンダ

今日のアジェンダ

1: WordPressとは？2: WordPressの基本機能と構成3: テーマとWordPressの関係を知ろう4: テーマのファイル構成と表示される位置5: 子テーマでオリジナルをつくろう6: 実際の作業をみてみよう。7: 上達の秘訣

■本日のターゲットWordPressに興味を持っている人・Web制作者

■本日の目的今後仕事でWordPress使おう！と思ってもらう。

では、はじめます。

...と、その前に

Webnist。

本日のメインディッシュ子テーマによるデザインカスタマイズを、いまからライブコーディングで行います。

WordPressの基本はOKという方はこちらを実際の作業風景をチェックしてください。

作業の内容：TwentyTenの子テーマstyle.cssのみでカスタマイズ

では、ほんとにはじめます。

1:WordPressとは？数字をまじえて理解しましょう

2010 Open Source Awards １位オープンソースのCMSにおいて世界ナンバー1

最新版ver.3.0のダウンロード数は

http://wordpress.org/download/counter/

世界のWEBサイトの8.5%はWPで出来てる

人気の理由は、圧倒的な使いやすさ

そして、なにより

日々開発され続けるテーマとプラグイン群

テーマ（デザインテンプレート）1,314プラグイン（拡張機能）12,830

カッコいいデザインがないかな？探して適応！　1クリックインストール！

こんな機能ないかな？探して適応！　1クリックインストール！

•Contactform7（お問合わせフォーム）•Ktaiスタイル（携帯表示）•Head Cleaner（ソース最適化）•Feedback Champuru（ソーシャルツール連携）•WPtouch（スマートフォン表示）•Google XML Sitemaps（SEO対策）•WordPress Database Backup（バックアップ）•welcart（カート機能）

しかも

公式のものは全部無料！

まさに夢のツール

いいですよね？

2:WordPressの基本機能と構成どうやって使うの？

必要なもの・WEBサーバ・MYSQL バージョン 5.0 以上・PHP　バージョン 5.2 以上　・FTP/SSHツール

1：サーバのコントロールパネルにてデータベースを作成

2：日本語公式サイトよりDLしたファイルをアップロード

3：アクセスし、データベースの内容を入力

4：サイト情報を入力

以上！慣れれば5分かかりません。

最近のレンタルサーバなら、さらに簡単！一発インストーラーがあります。

スマイルサー　　　も、もちろんあります。

ワンクリックでおわり。

実際にやってみます。

できました！！

WordPressにある3大機能

■1：管理・編集機能サイト管理、投稿等、記事を投稿する

■2：テーマ（デザイン）機能見栄えを変更する

■3：プラグイン（拡張機能）機能機能を拡張する

実際にやってみます。

■1：管理・編集機能■2：テーマ（デザイン）機能■3：プラグイン（拡張機能）機能

これらを使えば

無限の可能性！！

他にも便利なPlugin

実例　：　スライドメインイメージサイボウズ総合研究所 Easing Slider

実例　：　ソーシャル連携小学館Men-Joy Feedback Champuru

すごいぞ！

どうです？使いたくなってきました？

ぜひ自分のサーバにインストールしてみてください！マニュアルはこちら

■公式ドキュメントhttp://wpdocs.sourceforge.jp/

■め組マニュアル（動画付き！）http://megumi-manuals.com/

さて。。

本日は制作会社さまが多いということで

さらに突っ込んでデザインカスタマイズの話に進みます

ちょっとだけ難しくなりますw

3:テーマとWordPressの関係を知ろうテーマを変更すればサイト全体が変更される

通常のHTMLでつくられたホームページ

WEBサーバ

HTML

それぞれの個別ページにおけるHTMLファイルがある

HTMLHTMLHTMLHTMLHTMLHTMLHTMLHTMLHTMLHTMLHTML

WordPressでつくられたホームページ

WEBサーバ

テーマファイル

データベース

テキスト

画像

それぞれの個別ページにおけるHTMLファイルを持たず、データベース内に保管される

WordPressホームページ

WEBサーバ

テーマファイル

データベース

テキスト

画像

共通のテーマファイルを利用するので、テーマファイルを変更すれば、全ページを一括して変更することができる！

変更

イメージできました？

もうちょっと突っ込んだ話

4:テーマのファイル構成と表示される位置パーツごとに別れた構成を理解しよう！

WordPress テーマは、wp-content/themes/ の中のサブディレクトリに存在します。例えば、「test」というテーマは、wp-content/themes/test/ ディレクトリにあります。テーマ名に数字を入れるとテーマ管理画面にその部分が表示されないので避けましょう。テーマフォルダには、スタイルシートファイル、テンプレートファイル、オプションの関数ファイル (functions.php)、画像といったものが含まれています。

Twenty Tenの場合

1枚のファイルに見えるのですが...実は

404.phparchive.phppage.phpindex.phpsingle.php

header.php

footer.php

sidebar.php

Twenty Tenの場合

こまかく役割みると

404.phparchive.phpcategory.phptag.phppage.phpindex.phpauthor.phpsingle.phpearch.phpattachment.php

loop.phpsidebar-footer.phpcomments.phpsidebar.phpfooter.phpheader.php

rtl.csseditor-style-rtl.cssstyle.csseditor-style.cssfunctions.php

screenshot.pnglicense.txtimages/languages/

テンプレート

関数

スタイルシート

モジュールテンプレート

画像・言語

ファイル構成WordPress テーマは、wp-content/themes/ の中のサブディレクトリに存在しますテーマフォルダには、スタイルシートファイル、テンプレートファイル、オプションの関数ファイル (functions.php)、画像といったものが含まれています。

404.php　（404）archive.php　（アーカイブ）category.phpp　（カテゴリー）tag.php　（タグアーカイブ）page.php　（ページ）index.php　（トップ）author.php　（投稿者）single.php　（投稿詳細）search.php　（検索結果）attachment.php　（添付画像など）

テンプレート ファイルそれぞれの要求があるページについて表示されるテンプレート

loop.php（繰り返す内容）sidebar-footer.php（フッターのウィジェットエリア）comments.php（コメント）sidebar.php（サイドバー）footer.php（フッター）header.php（ヘッダー）

モジュールテンプレートファイルパーツとして呼び出され表示されるテンプレート

rtl.css（right to left ヘブライ語用のCSS）editor-style-rtl.css（ ヘブライ語ビジュアルエディタのCSS）style.css（サイトのCSS）editor-style.css（ビジュアルエディタ用のCSS）

スタイルシートサイトと管理画面のスタイルシート

functions.php

関数ファイルテーマの中で使われる機能

function twentyten_page_menu_args( $args ) { $args['show_home'] = true; return $args;}add_filter( 'wp_page_menu_args', 'twentyten_page_menu_args' );

例）メニュー部分の関数

screenshot.png（テーマ選択画面用スクリーンショット）license.txt（ライセンスが表記されたテキスト）images/（テーマ内で利用されている画像）languages/（翻訳用言語ファイル）

画像ファイル、言語ファイルその他のファイル

ということで、オリジナルテーマをつくるには

オリジナルデザインのテーマを作るには、

404.phparchive.phpcategory.phptag.phppage.phpindex.phpauthor.phpsingle.phpearch.phpattachment.php

loop.phpsidebar-footer.phpcomments.phpsidebar.phpfooter.phpheader.php

rtl.csseditor-style-rtl.cssstyle.csseditor-style.cssfunctions.php

screenshot.pnglicense.txtimages/languages/

テンプレート

関数

スタイルシート

モジュールテンプレート

画像・言語

たった、これだけのファイルをつくればOK！

かんたんですね！

かんたんですか。。。？

orz...

そんなあなたに

５:子テーマでオリジナルをつくろうこれならできる！

オススメ！

子テーマとは

別のテーマ（親テーマ）の機能を継承し、その機能にさらに機能を追加したりその機能を調整したりすることのできるテーマです。

子テーマとは

もっとも単純な形式では style.css ファイルのみそれだけでOKです！

親テーマの変更したいとろこだけ自分でカスタムすることで、残りは親テーマをそのまま利用します！

TwentyTenを親テーマに子テーマを作ってみます

やってみよう！■1: Twenty Tenの子テーマを制作。

1: wp-content/themes に新しいディレクトリを作成今回は”kodomo”と名づけます2: 次のコードを style.css ファイルを作成して入れる/*Theme Name: kodomoAuthor: MegumiTemplate: twentyten*/

@import url('../twentyten/style.css'); ←親のCSSをインポートしている

すると

出ました！

タイトルを緑色に変更してみる！！

CSSをカスタマイズ！

/*Theme Name: kodomoAuthor: MegumiTemplate: twentyten*/

@import url('../twentyten/style.css');

#site-title a { color: #009900;}

←サイトのタイトル文字を緑色に

ディスクリプションを消してみる！

header.phpをカスタマイズ

1: Twenty Tenのテーマファイルからheader.phpをコピーし、kodomoフォルダに入れる

2:コピーしたheader.phpを編集

<div id="site-description"><?php bloginfo( 'description' ); ?></div>

削除

←ディスクリプション表示部分

豆知識

なれないうちはFirebugを使ってイメージでソースと仲良くなろう！

簡単にまとめると

■子テーマにCSSやテンプレートファイルが無い場合親テーマのテンプレートファイルが適応される

■子テーマにCSSやテンプレートファイルがある場合子テーマのテンプレートファイルに上書きされる

1点注意

例外

■functions.phpこちらのみは上書きされません。親テーマの functions.php の直前に追加して読み込まれます。

子テーマでよくある質問

子テーマをつかわなくても、直接テーマを編集すればいいのでは？？

WordPressがアップデート↓対応するためにテーマもアップデート↓直接、親テーマ編集してしまった場合、・アップデートできない。。。・上書きされて元にもどってしまう。。。

だから子テーマでやりましょう！！

さて、お待ちかねの

６:実際の作業をみてみよう。

どう？Webnist

最後に...

上達の秘訣！

とにかくやってみよう。ノーリスクですよ。

やってみる！（壊しまくるw）正しい情報を調べる（Codex）フォーラム（Give＆Take）勉強会・カンファレンス（コミュニケーション）

WordPressを使うと素敵な出会いがまってます。

Thank you！