愛があれば発信できる！WordPressで作る焼き鳥ポータルサイト～公式テーマ・プラグインと子テーマの活用～｜WordCamp Tokyo 2015
•
11 likes•9,918 views
WordCampTokyo 2015 でのセッションスライド 愛があれば発信できる！WordPressで作る焼き鳥ポータルサイト～公式テーマ・プラグインと子テーマの活用～ 今回お話した内容 ・WordPressの可能性とスケール感を知る ・焼き鳥サイトのデモとサイト構成 ・WordPress公式テーマの活用 ・WordPress公式プラグインの活用 ・WordPressのリデザイン（子テーマ） 自分が好きな焼き鳥をテーマとして、おすすめのプラグインやカスタムフィールドを活用しても店舗出力などを説明しています。 子テーマで効率的に修正するために、add_filter や add_action についてもふれました。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ◆制作業務 TickleCodeという屋号でJavaScript、WordPressでのWebサイト制作やSwiftでのアプリ開発、Ruby on RailsでのWebサービス開発などを行なう。 業務請負や受託制作を行いながら、自社ポータルサイト・Webサービスサイトの制作運営を行なう。 地域のポータルサイトや、旅行系サイト、不動産系サイトの制作運営は本人も興味が強いので、めっぽう強い。 ［運営サイト］ TickleCode： 技術的な情報を整理して掲載している http://ticklecode.com/ I Love Yakitori!： 焼き鳥が好きなので焼き鳥店の取材をしてWebサイトへ掲載している http://yakitori-ya.net/ ◆勉強会、コミュニティ オープンソースであるWordPressのコミュニティ・イベントの運営にも携わりながら、自らも勉強会やイベントを企画運営する。 WordPressもくもく倶楽部、Swiftビギナーズ倶楽部など、多数の勉強会・セミナーの開催を行い、自身もスピーカーや講師を行っている。 ［定期開催している勉強会］ Swiftビギナーズ倶楽部： 2014年11月より開催。SwiftでiOSアプリ開発を勉強するための会。 https://swift-beginners.doorkeeper.jp/ WordPressもくもく倶楽部： 2014年11月より開催。WordPressでの制作・運営を勉強するための会。 https://wp-moku.doorkeeper.jp/ WordPressコントリビュート倶楽部： 2015年12月より開催。WordPressコントリビュート（翻訳、プラグインなどの貢献活動）を勉強するための会。 https://wpmake.doorkeeper.jp/ Ruby / Ruby on Rails ビギナーズ勉強会： 2015年1月より開催。Ruby on Railsでの制作・運営を勉強するための会。 https://coedo-rails.doorkeeper.jp/
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (18)
Similar to 愛があれば発信できる！WordPressで作る焼き鳥ポータルサイト～公式テーマ・プラグインと子テーマの活用～｜WordCamp Tokyo 2015
Similar to 愛があれば発信できる！WordPressで作る焼き鳥ポータルサイト～公式テーマ・プラグインと子テーマの活用～｜WordCamp Tokyo 2015 (20)
More from Yoshinori Kobayashi
More from Yoshinori Kobayashi (20)
愛があれば発信できる！WordPressで作る焼き鳥ポータルサイト～公式テーマ・プラグインと子テーマの活用～｜WordCamp Tokyo 2015
- 1. WordCampTokyo2015 「More Publishing」15.10.31 愛があれば発信できる！ WordPressで作る焼き鳥ポータルサイト TickleCode. Yoshinori Kobayashi1 ～公式テーマ・プラグインと子テーマの活用～
- 5. もくもく会（自主勉強会） を運営メンバーやアドバイザ ーの方々とともに、定期開催 しています。 勉強会を開催しています)^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. 6 WordPressコミュニティでの活動１ WordBench東京 モデレーター （主催・運営） WordBench東京 2014年8月度 自己紹介 WordBench東京8月 「制作現場を爆速にす る妙技をシェアしあおう！！」勉強会 WordBench東京 2015年7月度 WordBench東京 7月『WordPressでのブロ グライティングとブログ運営』
- 7. 7 WordPressコミュニティでの活動２ WordCamp Tokyo 2013 Web制作班 へ参加！ わぷー動かしたり、メニューをニョッキ！ とさせたり。 WordCamp Tokyo 2014 セッション班へ参加！ 登壇者の調整、ステージ調整。 あとは懇親会班など。 https://tokyo.wordcamp.org/2013/ https://tokyo.wordcamp.org/2014/ 自己紹介
- 9. 9 本テーマ WordPressの可能性とスケール感を知る 2011年にWordPressのイベント「WordCamp」に 参加してみた！ 「WordCamp Tokyo 2011」 via flickr photo By TAKA@P.P.R.S WordCamp Tokyo 2011 で感じた「人」のパワー｜ja.naoko.cc
- 10. 10 本テーマ WordPressの可能性とスケール感を知る WordCamp はローカルコミュニティが運営する カジュアルなスタイルのカンファレンス！ 通算で 48ヵ国、505回 のWordCampが開催。 ※数値は、15年10月現在 About WordCamps | WordCamp Central
- 11. 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日時点。
- 13. 13 本テーマ WordPressの可能性とスケール感を知る 事例紹介：海外ビジネスサイト Sony Music（ソニー・ミュージック） WordPress.org ShowCase より引用 TechCrunch（テッククランチ） ソニー・ミュージックエンタテインメントは、ソ ニー・コーポレーション・オブ・アメリカ（日本 のソニー株式会社の子会社が運営する米国の音楽 会社）のWebサイト。 2005年6月11日に設立。新興企業の最新技術 のニュースや情報サイト。
- 14. 14 本テーマ WordPressの可能性とスケール感を知る 事例紹介：海外大学サイト WordPress.org ShowCase より引用 ハーバード大学の公式新聞。教員の研究、管 理スタッフ、学生、およびイベントを掲載し ている。 Harvard Gazette（ハーバードガゼット） The Official Star Wars Blog スターウォーズの公式ブログ。 今もなお更新されており、多くのファ ンを集めている。 海外エンタテインメントサイト
- 15. 15 WordPress.org ShowCase より引用 海外のユニークなドットコム（.com）サイ トを毎日紹介しているブログ。 百式（ひゃくしき） 本テーマ WordPressの可能性とスケール感を知る 事例紹介：パーソナルブログ 東京で近くの焼き鳥屋を探す 【I Love Yakitori】 東京の焼き鳥を簡単に探せたり、焼き鳥 レポートがある。焼き鳥のことしか掲載 しない。 パーソナルサイト
- 18. 18 本テーマ 焼き鳥サイトのデモとサイト構成 焼き鳥サイトで使っているもの ★公式テーマ： Sparkling by Colorlib ★公式プラグイン：29個を使用。 Contact Form 7 AddQuicktag JP Markdown ・・・ ★追加でコーディング トップページ（Bootstrap、Sass） 現在地取得[geolocation]（JavaScript） 店舗検索[Hotpepper]（PHP） 商品検索[楽天、Yahoo]（PHP）
- 21. 21 本テーマ WordPress公式テーマの活用 テーマの作成 - 「テーマの開発基準」 - WordPress Codex 日本語版 公式テーマを使う理由１ ・開発基準やガイドラインに沿って 制作されている。 ⇒ 同じ操作で使える。 ⇒ カスタマイズに必要なフック、 classが整備。
- 23. 23 本テーマ WordPress公式テーマの活用 ・一定の品質が確保されている。 テーマレビュー - WordPress Codex 日本語版 公式テーマを使う理由３ ⇒公開される前にWordPressコミュニ ティのメンバー（テーマレビューア） に よってェックされている。
- 24. 24 本テーマ WordPress公式テーマの活用 Sparkling by Colorlib 焼き鳥サイトで使っているテーマ
- 26. 26 本テーマ WordPress公式テーマの活用 Sparklingは、Bootstrap v3.3.4をベース としたテーマ ※Bootstrapは、15年10月現在で v3.3.5 が最新
- 27. 27 本テーマ WordPress公式テーマの活用 Font Awesome 4.3.0 アイコンフォントも標準搭載している。
- 32. 32 本テーマ WordPress公式プラグインの活用 焼き鳥サイトで重要なプラグイン ５選 非常に使いやすいSEOプラグイン。 推奨な設定をアラートやメッセージで教えてくれ る。SEO初心者はこのプラグインからSEOを 学ぶことをおすすめします。 作成者： Joost de Valk さん WordPress SEO by Yoast 【ポイント】 ・記事と検索結果用のタイトルを分離。 ・重複ページのnoindex化。 ・パンくずリスト。 ・SNS向けタイトルを個別設定。
- 33. 33 本テーマ WordPress公式プラグインの活用 焼き鳥サイトで重要なプラグイン ５選 Simple GA Ranking Google Analytics の解析データを活用して、 人気ページをリストできる。 【ポイント】 ・サイトの速度が低下しにくい。 ⇒アクセス数の記録をサイト内（DB）で行う必要がない。 ・ページ全体のランキングが作れる。 ⇒投稿タイプをまたぐことができる。 ・フィルターが用意されているので、 サムネイル画像の設置など、拡張しやすい。 作成者： horike さん
- 34. 34 本テーマ WordPress公式プラグインの活用 焼き鳥サイトで重要なプラグイン ５選 Smart Custom Fields カスタムフィールド（項目と値の組み合わ せ）をシンプルに設定できて、活用すること ができる。 【ポイント】 ・設定画面がシンプルで使いやすい！ ・入力のタイプ（属性）が豊富 →テキスト、チェック、ラジオなど ・フィールド値の取得も簡単で使いやすい！ 作成者： Takashi Kitajima さん
- 35. 35 本テーマ WordPress公式プラグインの活用 焼き鳥サイトで重要なプラグイン ５選 サイトマップページを簡単に作成できる。 サイトマップの階層指定や、豊富なデザイ ンが選べるので重宝します。 PS Auto Sitemap 作成者： jim912さん 【ポイント】 ・コーディングなしで設置できる。 ・ページが増えたら自動で更新してくれる。 ・１３種類のスタイルデザインがある。 （15年10月現在）
- 36. 36 本テーマ WordPress公式プラグインの活用 焼き鳥サイトで重要なプラグイン ５選 aタグ、imgタグがリンク切れになったときに、 メールで通知してくれる。 YouTube、Vimeoなど動画埋め込みのリンク切 れもチェックしてくれる。 Broken Link Checker 作成者： ManageWP さん 【ポイント】 ・コーディングなしで、定期的にリンクチェ ックをしてくれる。 ・過去の結果をクリアして、再度、リンクチ ェックが行える。 ・検知したリンクを一括変更できる。
- 39. 39 本テーマ WordPressのリデザイン（子テーマ） 子テーマの仕組み HTML CSS sparkling (親テーマ) PHP JS sparkling-child (子テーマ) HTML CSS 参考：子テーマ WordPress Codex 変更点を子テーマにまとめて、 親テーマを上書き、追加して 機能を変更する。
- 41. [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. 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. 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. 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. 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. フィルター フック 46 データ ベース 本テーマ WordPressのリデザイン（子テーマ） add_filter は WordPressの入出力テキストを 途中で変更できる。 add_filter： 「テキストを受け取って、オリジナルの変更を加えて、出 力する」というPHP関数を追加できる。 参考：関数リファレンス add filter WordPress Codex
- 48. 48 本テーマ WordPressのリデザイン（子テーマ） 標準で多数のフィルターフックが用意されている。 参考：プラグイン API/フィルターフック一覧 WordPress Codex the_content 投稿記事の本文をブラウザに送る前に適用 the_title 投稿記事のタイトルをブラウザに送る前に適用 body_class HTML <body> 要素のクラスに適用 上記以外にもたくさん用意されている。
- 49. [子テーマの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() 広告
- 53. 53 最後に パブリッシングの民主化 とは 貧富の差や国や世代を超えて発信(publish) できる環境をつくることで、全ての人が 場所やデバイスに縛られずに情報発信ができ る世界を目指す。ということ 発信する、ということ｜WordCamp Tokyo 2015 公式サイト
- 59. 59 WordPressコミュニティに参加して、 WordPress への参加・貢献｜WordPress.org 日本語 WordPressを学び、色んな人と繋がってみよう！ 最後に WordBench東京 Facebookグループ
- 60. 60 今後の問い合わせ先 何かございましたら、 ご連絡ください(・∀・) Twitter: @yoshiii514 Facebook: Yoshinori.Koba Mail: info@ticklecode.com 最後に