Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

7,841 views

Published on

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/

Published in: Internet

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

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

×