WordCampTokyo2015 「More Publishing」15.10.31

愛があれば発信できる！

WordPressで作る焼き鳥ポータルサイト

TickleCode.

Yoshinori Kobayashi 1

～公式テーマ・プラグインと子テーマの活用～

2

１．自己紹介

２．本テーマ

３．最後に

＞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コミュニティでの活動１

WordBench東京 モデレーター

（主催・運営）

WordBench東京 2014年8月度

自己紹介

WordBench東京8月 「制作現場を爆速にする妙技をシェアしあおう！！」勉強会

WordBench東京 2015年7月度

WordBench東京 7月『WordPressでのブログライティングとブログ運営』

7

WordPressコミュニティでの活動２

WordCamp Tokyo 2013

Web制作班 へ参加！

わぷー動かしたり、メニューをニョッキ！

とさせたり。

WordCamp Tokyo 2014

セッション班へ参加！ 登壇者の調整、ステージ調整。

あとは懇親会班など。

https://tokyo.wordcamp.org/2013/

https://tokyo.wordcamp.org/2014/

自己紹介

8

１．自己紹介

２．本テーマ

３．最後に

＞WordPressの可能性とスケール感を知る

＞焼き鳥サイトのデモとサイト構成

＞WordPress公式テーマの活用

＞WordPress公式プラグインの活用

＞WordPressのリデザイン（子テーマ）

アジェンダ

9

本テーマ WordPressの可能性とスケール感を知る

2011年にWordPressのイベント「WordCamp」に 参加してみた！

「WordCamp Tokyo 2011」 via flickr photo By TAKA@P.P.R.S

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

１．自己紹介

２．本テーマ

３．最後に

＞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

１．自己紹介

２．本テーマ

３．最後に

＞WordPressの可能性とスケール感を知る

＞焼き鳥サイトのデモとサイト構成

＞WordPress公式テーマの活用

＞WordPress公式プラグインの活用

＞WordPressのリデザイン（子テーマ）

アジェンダ

2,044

20

本テーマ WordPress公式テーマの活用

テーマ（テンプレート）： サイト、ブログのデザインを決める、ひな形のこと

WordPressテーマディレクトリ

登録されているテーマは

※数字は、15年10月現在

15年6月時点では、2001 のエントリ。 3ヶ月ぐらいで、43個のテーマが公開された。

21

本テーマ WordPress公式テーマの活用

テーマの作成 - 「テーマの開発基準」 - WordPress Codex 日本語版

公式テーマを使う理由１

・開発基準やガイドラインに沿って 制作されている。 ⇒ 同じ操作で使える。 ⇒ カスタマイズに必要なフック、 classが整備。

22

本テーマ WordPress公式テーマの活用

・簡単にアップデート （バージョンアップ）できる。

公式テーマを使う理由２

23

本テーマ WordPress公式テーマの活用

・一定の品質が確保されている。

テーマレビュー - WordPress Codex 日本語版

公式テーマを使う理由３

⇒公開される前に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

１．自己紹介

２．本テーマ

３．最後に

＞WordPressの可能性とスケール感を知る

＞焼き鳥サイトのデモとサイト構成

＞WordPress公式テーマの活用

＞WordPress公式プラグインの活用

＞WordPressのリデザイン（子テーマ）

アジェンダ

30

プラグイン： WordPressの機能を拡張するためのプログラム群

WordPressプラグインディレクトリ

※数字は、15年10月現在

40,778

本テーマ WordPress公式プラグインの活用

15年6月時点では、38,125 のエントリだったので、 4ヶ月ぐらいで、2653個のプラグインが追加された。

登録されているプラグインは

31

本テーマ WordPress公式プラグインの活用

焼き鳥サイトで重要なプラグイン ５選

32

本テーマ WordPress公式プラグインの活用

焼き鳥サイトで重要なプラグイン ５選

非常に使いやすいSEOプラグイン。 推奨な設定をアラートやメッセージで教えてくれ

る。SEO初心者はこのプラグインからSEOを学ふことをおすすめします。

作成者： Joost de Valk さん

WordPress SEO by Yoast

【ポイント】 ・記事と検索結果用のタイトルを分離。 ・重複ページのnoindex化。 ・パンくずリスト。 ・SNS向けタイトルを個別設定。

33

本テーマ WordPress公式プラグインの活用

焼き鳥サイトで重要なプラグイン ５選

Simple GA Ranking

Google Analytics の解析データを活用して、人気ページをリストできる。

【ポイント】 ・サイトの速度が低下しにくい。 ⇒アクセス数の記録をサイト内（DB）で行う必要がない。

・ページ全体のランキングが作れる。 ⇒投稿タイプをまたぐことができる。

・フィルターが用意されているので、 サムネイル画像の設置など、拡張しやすい。

作成者： horike さん

34

本テーマ WordPress公式プラグインの活用

焼き鳥サイトで重要なプラグイン ５選

Smart Custom Fields

カスタムフィールド（項目と値の組み合わせ）をシンプルに設定できて、活用することができる。

【ポイント】 ・設定画面がシンプルで使いやすい！ ・入力のタイプ（属性）が豊富 →テキスト、チェック、ラジオなど ・フィールド値の取得も簡単で使いやすい！

作成者： Takashi Kitajima さん

35

本テーマ WordPress公式プラグインの活用

焼き鳥サイトで重要なプラグイン ５選

サイトマップページを簡単に作成できる。サイトマップの階層指定や、豊富なデザインが選べるので重宝します。

PS Auto Sitemap

作成者： jim912さん

【ポイント】 ・コーディングなしで設置できる。 ・ページが増えたら自動で更新してくれる。 ・１３種類のスタイルデザインがある。 （15年10月現在）

36

本テーマ WordPress公式プラグインの活用

焼き鳥サイトで重要なプラグイン ５選

aタグ、imgタグがリンク切れになったときに、メールで通知してくれる。 YouTube、Vimeoなど動画埋め込みのリンク切れもチェックしてくれる。

Broken Link Checker

作成者： ManageWP さん

【ポイント】 ・コーディングなしで、定期的にリンクチェックをしてくれる。 ・過去の結果をクリアして、再度、リンクチェックが行える。 ・検知したリンクを一括変更できる。

37

１．自己紹介

２．本テーマ

３．最後に

＞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]

// 投稿の下に広告を２つ表示する。

add_filter('the_content','ads_add',100);

function ads_add($content){

$strhtml='';

$strhtml='広告用の HTML and JavaScript を書く';

// 本文の下に広告を出す。

return $content . $strhtml;

}

49

本テーマ WordPressのリデザイン（子テーマ）

例として、本文の下に広告を表示する。 the_content()

広告

50

１．自己紹介

２．本テーマ

３．最後に

＞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

最後に きっと、よい変化が起こると思うので ぜひ、チャンレンジしてみてください（＾０＾）。

写真提供：WordPressもくもく勉強会 at コエド 第８回

59

WordPressコミュニティに参加して、

WordPress への参加・貢献｜WordPress.org 日本語

WordPressを学び、色んな人と繋がってみよう！

最後に

WordBench東京 Facebookグループ

60

今後の問い合わせ先

何かございましたら、

ご連絡ください(・∀・)

Twitter: @yoshiii514

Facebook: Yoshinori.Koba

Mail: info@ticklecode.com

最後に

ご清聴ありがとうございました。

61