wordpress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと!...
DESCRIPTION
WordPress実施背景昨今のWEB制作シーンにおいて、CMSを実装したWEB制作要望は増え続け、そんな中で「WordPress」の活用は制作現場において、当たり前の存在となりつつあります。但し、いざ活用しようと思っては見たものの、導入時のサーバへの実装方法や、オープンソースゆえの情報入手経路、さらに制作したホームページの「WordPress」へのテーマ化など疑問はつきません。そんな制作者の方に、本セミナーでは、講師が実際にデモを通じて制作の流れを実演します。【詳細内容】基本機能でここまでWebは制作できる「WordPress」活用セミナー・「WordPress」とは… ・「WordPress」をサーバにインストールしてみよう・「WordPress」の便利な基本機能を知ろう・「WordPress」テーマの構造を理解しよう・「子テーマ」を使ってカスタマイズしようTRANSCRIPT
![Page 1: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/1.jpg)
基本機能でここまでWebは制作できる「WordPress」活用セミナー
![Page 2: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/2.jpg)
簡単に自己紹介
![Page 3: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/3.jpg)
小賀 浩通@digitalcube
株式会社デジタルキューブ代表
![Page 4: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/4.jpg)
アジア初のWordPress認定コンサルタント会社。
WordPressでのサイト構築実績数は350サイト以上!
![Page 5: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/5.jpg)
通称
![Page 6: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/6.jpg)
組め
10press.net
![Page 7: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/7.jpg)
アジェンダ
![Page 8: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/8.jpg)
今日のアジェンダ
1: WordPressとは?2: WordPressの基本機能と構成3: テーマとWordPressの関係を知ろう4: テーマのファイル構成と表示される位置5: 子テーマでオリジナルをつくろう6: 実際の作業をみてみよう。7: 上達の秘訣
![Page 9: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/9.jpg)
■本日のターゲットWordPressに興味を持っている人・Web制作者
■本日の目的今後仕事でWordPress使おう!と思ってもらう。
![Page 10: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/10.jpg)
では、はじめます。
![Page 11: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/11.jpg)
...と、その前に
![Page 12: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/12.jpg)
Webnist。
本日のメインディッシュ子テーマによるデザインカスタマイズを、いまからライブコーディングで行います。
WordPressの基本はOKという方はこちらを実際の作業風景をチェックしてください。
![Page 13: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/13.jpg)
作業の内容:TwentyTenの子テーマstyle.cssのみでカスタマイズ
![Page 14: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/14.jpg)
![Page 15: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/15.jpg)
![Page 16: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/16.jpg)
では、ほんとにはじめます。
![Page 17: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/17.jpg)
1:WordPressとは?数字をまじえて理解しましょう
![Page 18: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/18.jpg)
2010 Open Source Awards 1位オープンソースのCMSにおいて世界ナンバー1
![Page 19: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/19.jpg)
最新版ver.3.0のダウンロード数は
http://wordpress.org/download/counter/
![Page 20: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/20.jpg)
世界のWEBサイトの8.5%はWPで出来てる
![Page 21: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/21.jpg)
人気の理由は、圧倒的な使いやすさ
![Page 22: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/22.jpg)
そして、なにより
![Page 23: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/23.jpg)
日々開発され続けるテーマとプラグイン群
テーマ(デザインテンプレート)1,314プラグイン(拡張機能)12,830
![Page 24: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/24.jpg)
カッコいいデザインがないかな?探して適応! 1クリックインストール!
![Page 25: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/25.jpg)
こんな機能ないかな?探して適応! 1クリックインストール!
•Contactform7(お問合わせフォーム)•Ktaiスタイル(携帯表示)•Head Cleaner(ソース最適化)•Feedback Champuru(ソーシャルツール連携)•WPtouch(スマートフォン表示)•Google XML Sitemaps(SEO対策)•WordPress Database Backup(バックアップ)•welcart(カート機能)
![Page 26: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/26.jpg)
しかも
![Page 27: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/27.jpg)
公式のものは全部無料!
![Page 28: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/28.jpg)
まさに夢のツール
![Page 29: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/29.jpg)
いいですよね?
![Page 30: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/30.jpg)
2:WordPressの基本機能と構成どうやって使うの?
![Page 31: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/31.jpg)
必要なもの・WEBサーバ・MYSQL バージョン 5.0 以上・PHP バージョン 5.2 以上 ・FTP/SSHツール
![Page 32: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/32.jpg)
1:サーバのコントロールパネルにてデータベースを作成
2:日本語公式サイトよりDLしたファイルをアップロード
3:アクセスし、データベースの内容を入力
4:サイト情報を入力
以上!慣れれば5分かかりません。
![Page 33: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/33.jpg)
最近のレンタルサーバなら、さらに簡単!一発インストーラーがあります。
スマイルサー も、もちろんあります。
ワンクリックでおわり。
![Page 34: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/34.jpg)
実際にやってみます。
![Page 35: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/35.jpg)
できました!!
![Page 36: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/36.jpg)
WordPressにある3大機能
■1:管理・編集機能サイト管理、投稿等、記事を投稿する
■2:テーマ(デザイン)機能見栄えを変更する
■3:プラグイン(拡張機能)機能機能を拡張する
![Page 37: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/37.jpg)
実際にやってみます。
![Page 38: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/38.jpg)
■1:管理・編集機能■2:テーマ(デザイン)機能■3:プラグイン(拡張機能)機能
これらを使えば
無限の可能性!!
![Page 39: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/39.jpg)
他にも便利なPlugin
![Page 40: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/40.jpg)
実例 : スライドメインイメージサイボウズ総合研究所 Easing Slider
![Page 41: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/41.jpg)
実例 : ソーシャル連携小学館Men-Joy Feedback Champuru
![Page 42: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/42.jpg)
すごいぞ!
![Page 43: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/43.jpg)
どうです?使いたくなってきました?
![Page 44: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/44.jpg)
ぜひ自分のサーバにインストールしてみてください!マニュアルはこちら
■公式ドキュメントhttp://wpdocs.sourceforge.jp/
■め組マニュアル(動画付き!)http://megumi-manuals.com/
![Page 45: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/45.jpg)
さて。。
![Page 46: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/46.jpg)
本日は制作会社さまが多いということで
さらに突っ込んでデザインカスタマイズの話に進みます
![Page 47: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/47.jpg)
ちょっとだけ難しくなりますw
![Page 48: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/48.jpg)
3:テーマとWordPressの関係を知ろうテーマを変更すればサイト全体が変更される
![Page 49: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/49.jpg)
通常のHTMLでつくられたホームページ
WEBサーバ
HTML
それぞれの個別ページにおけるHTMLファイルがある
HTMLHTMLHTMLHTMLHTMLHTMLHTMLHTMLHTMLHTMLHTML
![Page 50: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/50.jpg)
WordPressでつくられたホームページ
WEBサーバ
テーマファイル
データベース
テキスト
画像
それぞれの個別ページにおけるHTMLファイルを持たず、データベース内に保管される
![Page 51: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/51.jpg)
WordPressホームページ
WEBサーバ
テーマファイル
データベース
テキスト
画像
共通のテーマファイルを利用するので、テーマファイルを変更すれば、全ページを一括して変更することができる!
変更
![Page 52: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/52.jpg)
イメージできました?
![Page 53: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/53.jpg)
もうちょっと突っ込んだ話
![Page 54: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/54.jpg)
4:テーマのファイル構成と表示される位置パーツごとに別れた構成を理解しよう!
![Page 55: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/55.jpg)
WordPress テーマは、wp-content/themes/ の中のサブディレクトリに存在します。例えば、「test」というテーマは、wp-content/themes/test/ ディレクトリにあります。テーマ名に数字を入れるとテーマ管理画面にその部分が表示されないので避けましょう。テーマフォルダには、スタイルシートファイル、テンプレートファイル、オプションの関数ファイル (functions.php)、画像といったものが含まれています。
Twenty Tenの場合
![Page 56: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/56.jpg)
1枚のファイルに見えるのですが...実は
![Page 57: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/57.jpg)
404.phparchive.phppage.phpindex.phpsingle.php
header.php
footer.php
sidebar.php
Twenty Tenの場合
![Page 58: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/58.jpg)
こまかく役割みると
![Page 59: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/59.jpg)
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)、画像といったものが含まれています。
![Page 60: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/60.jpg)
404.php (404)archive.php (アーカイブ)category.phpp (カテゴリー)tag.php (タグアーカイブ)page.php (ページ)index.php (トップ)author.php (投稿者)single.php (投稿詳細)search.php (検索結果)attachment.php (添付画像など)
テンプレート ファイルそれぞれの要求があるページについて表示されるテンプレート
![Page 61: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/61.jpg)
loop.php(繰り返す内容)sidebar-footer.php(フッターのウィジェットエリア)comments.php(コメント)sidebar.php(サイドバー)footer.php(フッター)header.php(ヘッダー)
モジュールテンプレートファイルパーツとして呼び出され表示されるテンプレート
![Page 62: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/62.jpg)
rtl.css(right to left ヘブライ語用のCSS)editor-style-rtl.css( ヘブライ語ビジュアルエディタのCSS)style.css(サイトのCSS)editor-style.css(ビジュアルエディタ用のCSS)
スタイルシートサイトと管理画面のスタイルシート
![Page 63: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/63.jpg)
functions.php
関数ファイルテーマの中で使われる機能
function twentyten_page_menu_args( $args ) { $args['show_home'] = true; return $args;}add_filter( 'wp_page_menu_args', 'twentyten_page_menu_args' );
例)メニュー部分の関数
![Page 64: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/64.jpg)
screenshot.png(テーマ選択画面用スクリーンショット)license.txt(ライセンスが表記されたテキスト)images/(テーマ内で利用されている画像)languages/(翻訳用言語ファイル)
画像ファイル、言語ファイルその他のファイル
![Page 65: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/65.jpg)
ということで、オリジナルテーマをつくるには
![Page 66: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/66.jpg)
オリジナルデザインのテーマを作るには、
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!
![Page 67: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/67.jpg)
かんたんですね!
![Page 68: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/68.jpg)
かんたんですか。。。?
![Page 69: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/69.jpg)
orz...
![Page 70: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/70.jpg)
そんなあなたに
![Page 71: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/71.jpg)
5:子テーマでオリジナルをつくろうこれならできる!
オススメ!
![Page 72: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/72.jpg)
子テーマとは
別のテーマ(親テーマ)の機能を継承し、その機能にさらに機能を追加したりその機能を調整したりすることのできるテーマです。
![Page 73: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/73.jpg)
子テーマとは
もっとも単純な形式では style.css ファイルのみそれだけでOKです!
親テーマの変更したいとろこだけ自分でカスタムすることで、残りは親テーマをそのまま利用します!
![Page 74: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/74.jpg)
TwentyTenを親テーマに子テーマを作ってみます
![Page 75: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/75.jpg)
やってみよう!■1: Twenty Tenの子テーマを制作。
1: wp-content/themes に新しいディレクトリを作成今回は”kodomo”と名づけます2: 次のコードを style.css ファイルを作成して入れる/*Theme Name: kodomoAuthor: MegumiTemplate: twentyten*/
@import url('../twentyten/style.css'); ←親のCSSをインポートしている
![Page 76: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/76.jpg)
すると
出ました!
![Page 77: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/77.jpg)
タイトルを緑色に変更してみる!!
![Page 78: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/78.jpg)
CSSをカスタマイズ!
/*Theme Name: kodomoAuthor: MegumiTemplate: twentyten*/
@import url('../twentyten/style.css');
#site-title a { color: #009900;}
←サイトのタイトル文字を緑色に
![Page 79: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/79.jpg)
ディスクリプションを消してみる!
![Page 80: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/80.jpg)
header.phpをカスタマイズ
1: Twenty Tenのテーマファイルからheader.phpをコピーし、kodomoフォルダに入れる
2:コピーしたheader.phpを編集
<div id="site-description"><?php bloginfo( 'description' ); ?></div>
削除
←ディスクリプション表示部分
![Page 81: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/81.jpg)
豆知識
なれないうちはFirebugを使ってイメージでソースと仲良くなろう!
![Page 82: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/82.jpg)
簡単にまとめると
![Page 83: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/83.jpg)
■子テーマにCSSやテンプレートファイルが無い場合親テーマのテンプレートファイルが適応される
■子テーマにCSSやテンプレートファイルがある場合子テーマのテンプレートファイルに上書きされる
![Page 84: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/84.jpg)
1点注意
![Page 85: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/85.jpg)
例外
■functions.phpこちらのみは上書きされません。親テーマの functions.php の直前に追加して読み込まれます。
![Page 86: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/86.jpg)
子テーマでよくある質問
![Page 87: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/87.jpg)
子テーマをつかわなくても、直接テーマを編集すればいいのでは??
![Page 88: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/88.jpg)
WordPressがアップデート↓対応するためにテーマもアップデート↓直接、親テーマ編集してしまった場合、・アップデートできない。。。・上書きされて元にもどってしまう。。。
だから子テーマでやりましょう!!
![Page 89: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/89.jpg)
さて、お待ちかねの
![Page 90: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/90.jpg)
6:実際の作業をみてみよう。
![Page 91: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/91.jpg)
どう?Webnist
![Page 92: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/92.jpg)
最後に...
![Page 93: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/93.jpg)
上達の秘訣!
![Page 94: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/94.jpg)
とにかくやってみよう。ノーリスクですよ。
やってみる!(壊しまくるw)正しい情報を調べる(Codex)フォーラム(Give&Take)勉強会・カンファレンス(コミュニケーション)
![Page 95: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/95.jpg)
WordPressを使うと素敵な出会いがまってます。
![Page 96: WordPress&映像配信セミナー+さぶみっと!オフ会 - 第1回 さぶみっと! WEB制作セミナー Supported by NTTスマートコネクト](https://reader034.vdocuments.site/reader034/viewer/2022051015/5558c693d8b42a995d8b477c/html5/thumbnails/96.jpg)
Thank you!