愛があれば発信できる！WordPressで作る焼き鳥ポータルサイト～公式テーマ・プラグインと子テーマの活用～｜WordCamp...

WordCampTokyo2015 「More Publishing」15.10.31

愛があれば発信できる！

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

TickleCode.

Yoshinori Kobayashi 1

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

１．自己紹介

２．本テーマ

３．最後に

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

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

＞WordPress公式テーマの活用

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

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

アジェンダ

生まれは奈良県です

小林由憲（こばやしよしのり）

Twitter:

TickleCode ブログ:

@yoshiii514

基幹系業務システムエンジニアから、 Webコーディング、Webエンジニアへ

1995年～2011年の16年間 2011年～現在

スキル：

C言語、VisualBasic、SQLServer、ER図、DFD、在庫管理、簿記。

生産管理システム、販売・会計システムの PM、設計、プログラミング

スキル：

HTML、JavaScript、PHP、Ruby、WordPress、SEO、アクセス解析

ポータル・不動産系サイト、データビジュアルの、コーディング、プログラミング

自己紹介

もくもく会（自主勉強会）を運営メンバーやアドバイザーの方々とともに、定期開催しています。

勉強会を開催しています)^o^(

【CoEdo.rb】

Ruby / Ruby on Rails ビギナーズ勉強会

Swiftビギナーズ勉強会

WordPressもくもく勉強会

http://wp-moku.doorkeeper.jp/

https://swift-beginners.doorkeeper.jp/

https://coedo-rails.doorkeeper.jp/

自己紹介

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

WordBench東京モデレーター

（主催・運営）

WordBench東京 2014年8月度

自己紹介

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

WordBench東京 2015年7月度

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

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

WordCamp Tokyo 2013

Web制作班へ参加！

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

とさせたり。

WordCamp Tokyo 2014

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

あとは懇親会班など。

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

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

自己紹介

１．自己紹介

２．本テーマ

３．最後に

アジェンダ

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

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

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

WordCamp Tokyo 2011 で感じた「人」のパワー｜ja.naoko.cc

WordCamp はローカルコミュニティが運営するカジュアルなスタイルのカンファレンス！

通算で 48ヵ国、505回のWordCampが開催。 ※数値は、15年10月現在

About WordCamps | WordCamp Central

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日時点。

事例紹介：企業サイト

クックパッド株式会社

WordPress.org ショーケースより引用

コーポレイトサイトとしての利用。料理レシピサイト『クックパッド』の企画・運営。

さいたまスーパーアリーナ公式ホームページ。株式会社さいたまアリーナの運営するコンサート、スポーツイベント、見本市等に利用される多目的ホール。

さいたまスーパーアリーナ

事例紹介：海外ビジネスサイト

Sony Music（ソニー・ミュージック）

WordPress.org ShowCase より引用

TechCrunch（テッククランチ）

ソニー・ミュージックエンタテインメントは、ソニー・コーポレーション・オブ・アメリカ（日本のソニー株式会社の子会社が運営する米国の音楽会社）のWebサイト。

2005年6月11日に設立。新興企業の最新技術のニュースや情報サイト。

事例紹介：海外大学サイト

ハーバード大学の公式新聞。教員の研究、管理スタッフ、学生、およびイベントを掲載している。

Harvard Gazette（ハーバードガゼット）

The Official Star Wars Blog

スターウォーズの公式ブログ。今もなお更新されており、多くのファンを集めている。

海外エンタテインメントサイト

海外のユニークなドットコム（.com）サイトを毎日紹介しているブログ。

百式（ひゃくしき）

事例紹介：パーソナルブログ

東京で近くの焼き鳥屋を探す【I Love Yakitori】

東京の焼き鳥を簡単に探せたり、焼き鳥レポートがある。焼き鳥のことしか掲載しない。

パーソナルサイト

１．自己紹介

２．本テーマ

３．最後に

アジェンダ

本テーマ焼き鳥サイトのデモとサイト構成

焼き鳥サイトをデモで説明

http://yakitori-ya.net/

本テーマ焼き鳥サイトのデモとサイト構成

焼き鳥サイトで使っているもの

★公式テーマ： Sparkling by Colorlib

★公式プラグイン：29個を使用。 Contact Form 7 AddQuicktag JP Markdown ・・・

★追加でコーディングトップページ（Bootstrap、Sass）現在地取得[geolocation]（JavaScript）店舗検索[Hotpepper]（PHP）商品検索[楽天、Yahoo]（PHP）

１．自己紹介

２．本テーマ

３．最後に

アジェンダ

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

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

WordPressテーマディレクトリ

登録されているテーマは

※数字は、15年10月現在

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

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

公式テーマを使う理由１

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

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

公式テーマを使う理由２

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

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

公式テーマを使う理由３

⇒公開される前にWordPressコミュニティのメンバー（テーマレビューア）によってェックされている。

Sparkling by Colorlib

焼き鳥サイトで使っているテーマ

デザインに癖がなく、スッキリしている。

Sparklingは、Bootstrap v3.3.4をベースとしたテーマ

※Bootstrapは、15年10月現在で v3.3.5 が最新

Font Awesome 4.3.0

アイコンフォントも標準搭載している。

テーマオプションがシンプル。

基本的なオプションのみで扱いやすい。

１．自己紹介

２．本テーマ

３．最後に

アジェンダ

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

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

※数字は、15年10月現在

40,778

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

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

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

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

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

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

作成者： Joost de Valk さん

WordPress SEO by Yoast

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

Simple GA Ranking

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

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

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

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

作成者： horike さん

Smart Custom Fields

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

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

作成者： Takashi Kitajima さん

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

PS Auto Sitemap

作成者： jim912さん

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

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

Broken Link Checker

作成者： ManageWP さん

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

１．自己紹介

２．本テーマ

３．最後に

アジェンダ

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

テーマを部分的にデザイン変更したい。

テーマに機能を追加したい。

配色を変えてバリエーション増やしたい。

テーマがバージョンアップしても変更を維持したい。

カスタマイズをしたくなったり、必要性がでてくる。

子テーマが便利。

子テーマの仕組み

CSS sparkling (親テーマ)

sparkling-child (子テーマ)

参考：子テーマ WordPress Codex

変更点を子テーマにまとめて、親テーマを上書き、追加して機能を変更する。

子テーマ親テーマへの変更点

style.css 親テーマのstyle.cssのあとに、適用される。（子テーマのCSSで上書き。）

header.php footer.php post.php :

子テーマが優先。子テーマにheader.phpがあれば、親テーマのheader.phpは使われない。

functions.php 親テーマのfunctions.phpへ追加書きされるイメージで実行される。

子テーマが親テーマに加える変更点のまとめ

[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') );

親・子テーマの style.css を有効にする。

functions.php に、親・子テーマの style.css 読み込みを記述する。

子テーマでのカスタマイズが多くなると・・・

親テーマ 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本体と親テーマのバージョンアップがあると・・・

style.css style.css

page.php page.php

WordPress本体もバージョンアップされる!

バージョンアップされる！

この状態で、WordPress本体と親テーマのバージョンアップがあると・・・

style.css style.css

page.php page.php

WordPress本体もバージョンアップされる!

バージョンアップされる！

子テーマの古いテンプレートが適用されて動かない・・・。

表示されない、エラーになる！動かない！

古いまま！

子テーマは、style.css・functions.php のみで、

style.css style.css

header.php -

page.php -

content.php -

footer.php -

自作プラグイン（My Plugin）

functions.phpや自作プラグインから、add_filter・add_actionを使ってピンポイントで変更していく。

add_filter で必要な箇所で出力を変更。 add_action で必要な箇所でプログラムを実行。

フィルターフック

データベース

add_filter は WordPressの入出力テキストを途中で変更できる。

add_filter：「テキストを受け取って、オリジナルの変更を加えて、出力する」というPHP関数を追加できる。

参考：関数リファレンス add filter WordPress Codex

データベース

フィルターフックA

フィルターフックB

フィルターフックC

フィルターフックと add_filter

add_filter：フィルターフックC 「bodyタグにclass追加」

add_filter：フィルターフックB 「投稿本文を100文字で切り捨て」

add_filter：フィルターフックA 「投稿タイトルをH1タグで囲う」

フィルターフックでポイント（場所）を定義して、add_filterでその場所での変更点を追加する。

標準で多数のフィルターフックが用意されている。

参考：プラグイン 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;

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

１．自己紹介

２．本テーマ

３．最後に

アジェンダ

ここからは、今年のテーマ「More Publishing」について

最後に

WordPressには、

パブリッシングの民主化

Democratize Publishing

というミッションがあります。

最後に

パブリッシングの民主化とは

貧富の差や国や世代を超えて発信(publish) できる環境をつくることで、全ての人が場所やデバイスに縛られずに情報発信ができる世界を目指す。ということ

発信する、ということ｜WordCamp Tokyo 2015 公式サイト

最後に

あなたが、WordPressを使って

情報発信してよい！っていうことです。

そして、WordPressはそれを支援しよう！

最後に

僕が作った焼き鳥サイトはその一例です。

最後に

ぜひ、多くの人がWordPressでサイト

を作り、自分の「なにか」を発信して

みてください(・∀・)

最後に

そして、勉強会や、WordBench、

さらに、WordCampで発表してみ

てください！

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

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

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

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

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

最後に

WordBench東京 Facebookグループ

今後の問い合わせ先

何かございましたら、

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

Twitter: @yoshiii514

Facebook: Yoshinori.Koba

Mail: info@ticklecode.com

最後に

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

愛があれば発信できる！WordPressで作る焼き鳥ポータルサイト～公式テーマ・プラグインと子テーマの活用～｜WordCamp...

Internet

11 word pressカスタマイズ（テーマ編）

ZEHビルダー・ポータルサイト・マニュアル‚‚くじ 1 ZEHポータルサイトに利用にあたって P.3 本マニュアルの留意事項・ZEHビルダー・ポータルサイトについて

a-blog cms Training Camp 2014 Autumn「来年作るべきCMSのテーマとは？」

コミュニティマニュアル - event.shoeisha.jp · Developers Summit 2014(デブサミ2014) 今回のテーマは「Story」ですデブサミ第1章（2003～2012）は共感を大きなテーマにおいて開催してましたが、

働き方・休み方改善ポータルサイト · 2020. 12. 11. · Created Date: 9/3/2020 5:07:45 PM

から学ぶテーマ別日本語』の解答route.main.jp/giai-trungcap.pdf · 『中級ちゅうきゅうから学まなぶテーマ別べつ日本語』の解答かいとう

船井脱ポータルサイト18nov@表13OL - FUNAISOKENCreated Date 12/13/2018 2:02:36 PM Title 船井脱ポータルサイト18nov@表13OL

WordPress2.9 管理マニュアル · ・プラグイン・テーマブログのテーマ（デザイン）の変更を行います ... ・テーマの追加公式サイトで配布されているテーマをインストールします

ハローウッズでは四季を通して生きものをテーマに …...生きもの好きあつまれ！・6/23（土）、24（日）、 30（土）、7/1（日）ホタル観賞ガイドウォーク

テーマ別Git tips

スマートフォン向けテーマ「Tablet Gallery」と縦組みのテーマのご紹介」

カスタマイズ型総合ポータルサイト電脳空間（ at21 ）

JA長野県グループ「農」のポータルサイトいいJAん!信州...JA長野県グループ「農」のポータルサイトいいJAん!信州

パネルディスカッション · パネルディスカッション＜テーマに即した2つの話題提供＞矢部氏（コーディネーター）では、改めまして、きょうのパネルディスカッションのテーマ

目次 - 働き方・休み方改善ポータルサイト · 2019-04-05 · 働き方・休み方改善に取り組んでいるが、十分な効果が感じられないという

Negicco 「賢くキレイに生きる」をテーマに今、注 …「毎日を賢くキレイに生きるライフスタイルを」の様子をレポートします! コフレディア×Negicco

研究テーマ：「IT 利活用と法律」 · 2020-05-03 · テーマ研究チーム 1 【テーマ研究報告書】研究テーマ：「it利活用と法律」～民法改正がit契約に及ぼす影響と対応すべき内容の考察～

ストレスと上手につきあおうリラクセーションのす …働く人のメンタルヘルス・ポータルサイト Copyright©Ministry of Health,Labour and Welfare,

テーマ設定型技術公募）2016/06/30 · 3.戦略的ｲﾉﾍﾞｰｼｮﾝ創造ﾌﾟﾛｸﾞﾗﾑ（SIP）概要 4.テーマ設定型の公募テーマ 5.テーマ設定型の実施状況

UMACAR PRESENTS 図書館ポータルサイト構想