愛があれば発信できる!wordpressで作る焼き鳥ポータルサイト~公式テーマ・プラグインと子テーマの活用~|wordcamp...
TRANSCRIPT
WordCampTokyo2015 「More Publishing」15.10.31
愛があれば発信できる!
WordPressで作る焼き鳥ポータルサイト
TickleCode.
Yoshinori Kobayashi 1
~公式テーマ・プラグインと子テーマの活用~
2
1.自己紹介
2.本テーマ
3.最後に
>WordPressの可能性とスケール感を知る
>焼き鳥サイトのデモとサイト構成
>WordPress公式テーマの活用
>WordPress公式プラグインの活用
>WordPressのリデザイン(子テーマ)
アジェンダ
3
生まれは 奈良県 です
小林由憲(こばやしよしのり)
Twitter:
TickleCode ブログ:
@yoshiii514
4
基幹系業務システムエンジニアから、 Webコーディング、Webエンジニアへ
1995年~2011年の16年間 2011年~現在
スキル:
C言語、VisualBasic、SQLServer、ER図、DFD、在庫管理、簿記。
生産管理システム、 販売・会計システムの PM、設計、プログラミング
スキル:
HTML、JavaScript、PHP、Ruby、WordPress、SEO、アクセス解析
ポータル・不動産系サイト、 データビジュアルの、 コーディング、プログラミング
自己紹介
もくもく会(自主勉強会) を運営メンバーやアドバイザ ーの方々とともに、定期開催 しています。
勉強会を開催しています)^o^(
5
【CoEdo.rb】
Ruby / Ruby on Rails ビギナーズ勉強会
Swiftビギナーズ勉強会
WordPressもくもく 勉強会
http://wp-moku.doorkeeper.jp/
https://swift-beginners.doorkeeper.jp/
https://coedo-rails.doorkeeper.jp/
自己紹介
6
WordPressコミュニティでの活動1
WordBench東京 モデレーター
(主催・運営)
WordBench東京 2014年8月度
自己紹介
WordBench東京8月 「制作現場を爆速にする妙技をシェアしあおう!!」勉強会
WordBench東京 2015年7月度
WordBench東京 7月『WordPressでのブログライティングとブログ運営』
7
WordPressコミュニティでの活動2
WordCamp Tokyo 2013
Web制作班 へ参加!
わぷー動かしたり、メニューをニョッキ!
とさせたり。
WordCamp Tokyo 2014
セッション班へ参加! 登壇者の調整、ステージ調整。
あとは懇親会班など。
https://tokyo.wordcamp.org/2013/
https://tokyo.wordcamp.org/2014/
自己紹介
8
1.自己紹介
2.本テーマ
3.最後に
>WordPressの可能性とスケール感を知る
>焼き鳥サイトのデモとサイト構成
>WordPress公式テーマの活用
>WordPress公式プラグインの活用
>WordPressのリデザイン(子テーマ)
アジェンダ
9
本テーマ WordPressの可能性とスケール感を知る
2011年にWordPressのイベント「WordCamp」に 参加してみた!
「WordCamp Tokyo 2011」 via flickr photo By [email protected]
WordCamp Tokyo 2011 で感じた「人」のパワー|ja.naoko.cc
10
本テーマ WordPressの可能性とスケール感を知る
WordCamp はローカルコミュニティが運営する カジュアルなスタイルのカンファレンス!
通算で 48ヵ国、505回 のWordCampが開催。 ※数値は、15年10月現在
About WordCamps | WordCamp Central
11
WordPressの可能性とスケール感を知る 本テーマ
世界での導入実績も多い。
Usage Statistics and Market Share of Content Management Systems for Websites, June 2015
Webサイトで使うCMSとして、58.8% のシェア。
すべてのWebサイト(ネット上のサイト)で、
24.4% のシェアがある。
※「w3techs」という、毎日、シェアを計算している「技術の使用統計サイト」より引用。 ※数値は2015年9月13日時点。
12
本テーマ WordPressの可能性とスケール感を知る
事例紹介:企業サイト
クックパッド株式会社
WordPress.org ショーケースより引用
コーポレイトサイトとしての利用。 料理レシピサイト『クックパッド』の企画・運営。
さいたまスーパーアリーナ公式ホームページ。 株式会社さいたまアリーナの運営するコンサ ート、スポーツイベント、見本市等に利用さ れる多目的ホール。
さいたまスーパーアリーナ
13
本テーマ WordPressの可能性とスケール感を知る
事例紹介:海外ビジネスサイト
Sony Music(ソニー・ミュージック)
WordPress.org ShowCase より引用
TechCrunch(テッククランチ)
ソニー・ミュージックエンタテインメントは、ソニー・コーポレーション・オブ・アメリカ(日本のソニー株式会社の子会社が運営する米国の音楽会社)のWebサイト。
2005年6月11日に設立。新興企業の最新技術のニュースや情報サイト。
14
本テーマ WordPressの可能性とスケール感を知る
事例紹介:海外大学サイト
WordPress.org ShowCase より引用
ハーバード大学の公式新聞。教員の研究、管理スタッフ、学生、およびイベントを掲載している。
Harvard Gazette(ハーバードガゼット)
The Official Star Wars Blog
スターウォーズの公式ブログ。 今もなお更新されており、多くのファンを集めている。
海外エンタテインメントサイト
15
WordPress.org ShowCase より引用
海外のユニークなドットコム(.com)サイトを毎日紹介しているブログ。
百式(ひゃくしき)
本テーマ WordPressの可能性とスケール感を知る
事例紹介:パーソナルブログ
東京で近くの焼き鳥屋を探す【I Love Yakitori】
東京の焼き鳥を簡単に探せたり、焼き鳥レポートがある。焼き鳥のことしか掲載しない。
パーソナルサイト
16
1.自己紹介
2.本テーマ
3.最後に
>WordPressの可能性とスケール感を知る
>焼き鳥サイトのデモとサイト構成
>WordPress公式テーマの活用
>WordPress公式プラグインの活用
>WordPressのリデザイン(子テーマ)
アジェンダ
17
本テーマ 焼き鳥サイトのデモとサイト構成
焼き鳥サイトをデモで説明
http://yakitori-ya.net/
18
本テーマ 焼き鳥サイトのデモとサイト構成
焼き鳥サイトで使っているもの
★公式テーマ: Sparkling by Colorlib
★公式プラグイン:29個を使用。 Contact Form 7 AddQuicktag JP Markdown ・・・
★追加でコーディング トップページ(Bootstrap、Sass) 現在地取得[geolocation](JavaScript) 店舗検索[Hotpepper](PHP) 商品検索[楽天、Yahoo](PHP)
19
1.自己紹介
2.本テーマ
3.最後に
>WordPressの可能性とスケール感を知る
>焼き鳥サイトのデモとサイト構成
>WordPress公式テーマの活用
>WordPress公式プラグインの活用
>WordPressのリデザイン(子テーマ)
アジェンダ
2,044
20
本テーマ WordPress公式テーマの活用
テーマ(テンプレート): サイト、ブログのデザインを決める、ひな形のこと
WordPressテーマディレクトリ
登録されているテーマは
※数字は、15年10月現在
15年6月時点では、2001 のエントリ。 3ヶ月ぐらいで、43個のテーマが公開された。
21
本テーマ WordPress公式テーマの活用
テーマの作成 - 「テーマの開発基準」 - WordPress Codex 日本語版
公式テーマを使う理由1
・開発基準やガイドラインに沿って 制作されている。 ⇒ 同じ操作で使える。 ⇒ カスタマイズに必要なフック、 classが整備。
22
本テーマ WordPress公式テーマの活用
・簡単にアップデート (バージョンアップ)できる。
公式テーマを使う理由2
23
本テーマ WordPress公式テーマの活用
・一定の品質が確保されている。
テーマレビュー - WordPress Codex 日本語版
公式テーマを使う理由3
⇒公開される前にWordPressコミュニ ティのメンバー(テーマレビューア) に よってェックされている。
24
本テーマ WordPress公式テーマの活用
Sparkling by Colorlib
焼き鳥サイトで使っているテーマ
25
本テーマ WordPress公式テーマの活用
デザインに癖がなく、スッキリしている。
26
本テーマ WordPress公式テーマの活用
Sparklingは、Bootstrap v3.3.4をベース としたテーマ
※Bootstrapは、15年10月現在で v3.3.5 が最新
27
本テーマ WordPress公式テーマの活用
Font Awesome 4.3.0
アイコンフォントも標準搭載している。
28
本テーマ WordPress公式テーマの活用
テーマオプションがシンプル。
基本的なオプションのみで扱いやすい。
29
1.自己紹介
2.本テーマ
3.最後に
>WordPressの可能性とスケール感を知る
>焼き鳥サイトのデモとサイト構成
>WordPress公式テーマの活用
>WordPress公式プラグインの活用
>WordPressのリデザイン(子テーマ)
アジェンダ
30
プラグイン: WordPressの機能を拡張するためのプログラム群
WordPressプラグインディレクトリ
※数字は、15年10月現在
40,778
本テーマ WordPress公式プラグインの活用
15年6月時点では、38,125 のエントリだったので、 4ヶ月ぐらいで、2653個のプラグインが追加された。
登録されているプラグインは
31
本テーマ WordPress公式プラグインの活用
焼き鳥サイトで重要なプラグイン 5選
32
本テーマ WordPress公式プラグインの活用
焼き鳥サイトで重要なプラグイン 5選
非常に使いやすいSEOプラグイン。 推奨な設定をアラートやメッセージで教えてくれ
る。SEO初心者はこのプラグインからSEOを学ふことをおすすめします。
作成者: Joost de Valk さん
WordPress SEO by Yoast
【ポイント】 ・記事と検索結果用のタイトルを分離。 ・重複ページのnoindex化。 ・パンくずリスト。 ・SNS向けタイトルを個別設定。
33
本テーマ WordPress公式プラグインの活用
焼き鳥サイトで重要なプラグイン 5選
Simple GA Ranking
Google Analytics の解析データを活用して、人気ページをリストできる。
【ポイント】 ・サイトの速度が低下しにくい。 ⇒アクセス数の記録をサイト内(DB)で行う必要がない。
・ページ全体のランキングが作れる。 ⇒投稿タイプをまたぐことができる。
・フィルターが用意されているので、 サムネイル画像の設置など、拡張しやすい。
作成者: horike さん
34
本テーマ WordPress公式プラグインの活用
焼き鳥サイトで重要なプラグイン 5選
Smart Custom Fields
カスタムフィールド(項目と値の組み合わせ)をシンプルに設定できて、活用することができる。
【ポイント】 ・設定画面がシンプルで使いやすい! ・入力のタイプ(属性)が豊富 →テキスト、チェック、ラジオなど ・フィールド値の取得も簡単で使いやすい!
作成者: Takashi Kitajima さん
35
本テーマ WordPress公式プラグインの活用
焼き鳥サイトで重要なプラグイン 5選
サイトマップページを簡単に作成できる。サイトマップの階層指定や、豊富なデザインが選べるので重宝します。
PS Auto Sitemap
作成者: jim912さん
【ポイント】 ・コーディングなしで設置できる。 ・ページが増えたら自動で更新してくれる。 ・13種類のスタイルデザインがある。 (15年10月現在)
36
本テーマ WordPress公式プラグインの活用
焼き鳥サイトで重要なプラグイン 5選
aタグ、imgタグがリンク切れになったときに、メールで通知してくれる。 YouTube、Vimeoなど動画埋め込みのリンク切れもチェックしてくれる。
Broken Link Checker
作成者: ManageWP さん
【ポイント】 ・コーディングなしで、定期的にリンクチェックをしてくれる。 ・過去の結果をクリアして、再度、リンクチェックが行える。 ・検知したリンクを一括変更できる。
37
1.自己紹介
2.本テーマ
3.最後に
>WordPressの可能性とスケール感を知る
>焼き鳥サイトのデモとサイト構成
>WordPress公式テーマの活用
>WordPress公式プラグインの活用
>WordPressのリデザイン(子テーマ)
アジェンダ
38
本テーマ WordPressのリデザイン(子テーマ)
テーマを部分的にデザイン変更したい。
テーマに機能を追加したい。
配色を変えてバリエーション増やしたい。
テーマがバージョンアップしても変更を維持したい。
カスタマイズをしたくなったり、必要性がでてくる。
子テーマが便利。
39
本テーマ WordPressのリデザイン(子テーマ)
子テーマの仕組み
HTML
CSS sparkling (親テーマ)
PHP
JS
sparkling-child (子テーマ)
HTML
CSS
参考:子テーマ WordPress Codex
変更点を子テーマにまとめて、 親テーマを上書き、追加して 機能を変更する。
40
本テーマ WordPressのリデザイン(子テーマ)
子テーマ 親テーマへの変更点
style.css 親テーマのstyle.cssのあとに、適用される。 (子テーマのCSSで上書き。)
header.php footer.php post.php :
子テーマが優先。子テーマにheader.phpがあれば、親テーマのheader.phpは使われない。
functions.php 親テーマのfunctions.phpへ追加書きされるイメージで実行される。
子テーマが親テーマに加える変更点のまとめ
参考:子テーマ WordPress Codex
[functions.php]
// スクリプト読み込み時に実行
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
// 親テーマの style.css の読み込み。
wp_enqueue_style( 'parent-style',
get_template_directory_uri() . '/style.css' );
// 子テーマの style.css の読み込み。
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array('parent-style') );
} 41
本テーマ WordPressのリデザイン(子テーマ)
親・子テーマの style.css を有効にする。
functions.php に、親・子テーマの style.css 読み込みを記述する。
参考:子テーマ WordPress Codex
42
本テーマ WordPressのリデザイン(子テーマ)
子テーマでのカスタマイズが多くなると・・・
親テーマ sparkling
子テーマ sparkling-child
style.css style.css
header.php header.php
page.php page.php
content.php content.php
footer.php footer.php
functions.php functions.php
※オレンジの箇所が有効になっているテンプレート
ほとんどのテンプレートを子テーマが持つことになる。
43
本テーマ WordPressのリデザイン(子テーマ)
この状態で、WordPress本体と親テーマの バージョンアップがあると・・・
親テーマ sparkling
子テーマ sparkling-child
style.css style.css
header.php header.php
page.php page.php
content.php content.php
footer.php footer.php
functions.php functions.php
WordPress本体もバージョンアップされる!
※オレンジの箇所が有効になっているテンプレート
バージョンアップされる!
44
本テーマ WordPressのリデザイン(子テーマ)
この状態で、WordPress本体と親テーマの バージョンアップがあると・・・
親テーマ sparkling
子テーマ sparkling-child
style.css style.css
header.php header.php
page.php page.php
content.php content.php
footer.php footer.php
functions.php functions.php
WordPress本体もバージョンアップされる!
※オレンジの箇所が有効になっているテンプレート
バージョンアップされる!
子テーマの古いテンプレートが適用されて動かない・・・。
表示されない、エラーになる!動かない!
古いまま!
45
本テーマ WordPressのリデザイン(子テーマ)
子テーマは、style.css・functions.php のみで、
親テーマ sparkling
子テーマ sparkling-child
style.css style.css
header.php -
page.php -
content.php -
footer.php -
functions.php functions.php
自作プラグイン(My Plugin)
※オレンジの箇所が有効になっているテンプレート
functions.phpや自作プラグインから、add_filter・add_actionを使ってピンポイントで変更していく。
add_filter で必要な箇所で出力を変更。 add_action で必要な箇所でプログラムを実行。
フィルター フック
46
データ ベース
本テーマ WordPressのリデザイン(子テーマ)
add_filter は WordPressの入出力テキストを 途中で変更できる。
add_filter: 「テキストを受け取って、オリジナルの変更を加えて、出力する」というPHP関数を追加できる。
参考:関数リファレンス add filter WordPress Codex
本テーマ WordPressのリデザイン(子テーマ)
47
データ ベース
フィルター フックA
フィルター フックB
フィルター フックC
フィルターフックと add_filter
add_filter:フィルターフックC 「bodyタグにclass追加」
add_filter:フィルターフックB 「投稿本文を100文字で切り捨て」
add_filter:フィルターフックA 「投稿タイトルをH1タグで囲う」
フィルターフックでポイント(場所)を定義して、add_filterで その場所での変更点を追加する。
48
本テーマ WordPressのリデザイン(子テーマ)
標準で多数のフィルターフックが用意されている。
参考:プラグイン API/フィルターフック一覧 WordPress Codex
the_content 投稿記事の本文をブラウザに送る前に適用
the_title 投稿記事のタイトルをブラウザに送る前に適用
body_class HTML <body> 要素のクラスに適用
上記以外にもたくさん用意されている。
[子テーマのfunctions.php]
// 投稿の下に広告を2つ表示する。
add_filter('the_content','ads_add',100);
function ads_add($content){
$strhtml='';
$strhtml='広告用の HTML and JavaScript を書く';
// 本文の下に広告を出す。
return $content . $strhtml;
}
49
本テーマ WordPressのリデザイン(子テーマ)
例として、本文の下に広告を表示する。 the_content()
広告
50
1.自己紹介
2.本テーマ
3.最後に
>WordPressの可能性とスケール感を知る
>焼き鳥サイトのデモとサイト構成
>WordPress公式テーマの活用
>WordPress公式プラグインの活用
>WordPressのリデザイン(子テーマ)
アジェンダ
51
ここからは、今年のテーマ「More Publishing」について
52
最後に
WordPressには、
パブリッシングの民主化
Democratize Publishing
というミッションがあります。
53
最後に
パブリッシングの民主化 とは
貧富の差や国や世代を超えて発信(publish) できる環境をつくることで、全ての人が 場所やデバイスに縛られずに情報発信ができる世界を目指す。ということ
発信する、ということ|WordCamp Tokyo 2015 公式サイト
54
最後に
あなたが、WordPressを使って
情報発信してよい!っていうことです。
そして、WordPressはそれを支援しよう!
55
最後に
僕が作った焼き鳥サイトはその一例です。
56
最後に
ぜひ、多くの人がWordPressでサイト
を作り、自分の「なにか」を発信して
みてください(・∀・)
57
最後に
そして、勉強会や、WordBench、
さらに、WordCampで発表してみ
てください!
58
最後に きっと、よい変化が起こると思うので ぜひ、チャンレンジしてみてください(^0^)。
写真提供:WordPressもくもく勉強会 at コエド 第8回
59
WordPressコミュニティに参加して、
WordPress への参加・貢献|WordPress.org 日本語
WordPressを学び、色んな人と繋がってみよう!
最後に
WordBench東京 Facebookグループ
60
今後の問い合わせ先
何かございましたら、
ご連絡ください(・∀・)
Twitter: @yoshiii514
Facebook: Yoshinori.Koba
Mail: [email protected]
最後に
ご清聴ありがとうございました。
61