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.

WordCamp Kyoto 2017「縁結びの聖地でWordPressと恋に落ちたテーマ制作者の話」

1,917 views

Published on

WordCamp Kyoto 2017 のスライドです。
https://2017.kyoto.wordcamp.org/

Published in: Technology
  • Be the first to comment

WordCamp Kyoto 2017「縁結びの聖地でWordPressと恋に落ちたテーマ制作者の話」

  1. 1. 縁結びの聖地で WordPressと 恋に落ちたテーマ制作者の話 リキッドデザイン株式会社 Created by Iwamoto, Tomita #wckyoto2017
  2. 2. 自己紹介
  3. 3. 自己紹介 富田幸博 鳥取県在住 趣味:海外旅行(特に台湾)やスノースポーツ。 金融系出身で現在は Web制作やマーケティング 関連業務を行っています。 WordBench 山陰(立上げ準備中!) https://twitter.com/wordbenchsanin
  4. 4. 山陰について 山陰PR動画 縁の道〜山陰〜 20日間で200万回再生 San'in, Japan 4K (Ultra HD) - 山陰 https://www.youtube.com/watch?v=f-Bgx6JK1Vw 山陰インバウンド機構制作
  5. 5. 縁結びの聖地 山陰について
  6. 6. 倉吉 in 2017 山陰について
  7. 7. リキッドデザインについて リキッドデザイン株式会社 設立:2016年 本社:鳥取県米子市 代表:岩本朗 https://lqd.jp/ Web制作、Webサービス、 マーケティング支援などを提供 SNS: https://twitter.com/lqd_jp https://www.facebook.com/lqdjp/
  8. 8. リキッドデザインについて https://lqd.jp/wp/ 公式テーマ「LIQUID」 https://wordpress.org/themes/liquid/ 公式プラグイン「LIQUID RWD Plus」 https://wordpress.org/plugins/liquid-rwd-plus/ 特長:レスポンシブ+PC/スマホ切替、Bootstrap4対応 プレミアムテーマ(有償 /GPL) コンテンツ分析機能付きオウンドメディアテーマ、 多言語対応コーポレートサイトテーマなど、 付加価値のあるテーマを提供
  9. 9. 本日のアジェンダ 1. 地方とWordPressについて 2. WordPress公式テーマについて 3. すぐに使えるテクニック集
  10. 10. 地方とWordPress について
  11. 11. 地方とWordPressについて 鳥取県、 どこにあるか存知ですか?
  12. 12. 地方とWordPressについて 鳥取県、 どこにあるか存知ですか? 島根   鳥取
  13. 13. 地方とWordPressについて 山陰地方の人口、 どのくらいかご存知ですか? 島根   鳥取
  14. 14. 地方とWordPressについて 山陰地方の人口、どのくらいかご存知ですか? 鳥取県:約57万人 ワースト1 島根県:約69万人 ワースト2 出典:2016年人口推計
  15. 15. 地方とWordPressについて 山陰地方の人口、どのくらいかご存知ですか? 市や区より人口が少ない! 鳥取県+島根県<京都市 鳥取県<岡山市 鳥取県<船橋市 鳥取県<足立区 出典:2016年人口推計
  16. 16. 地方とWordPressについて Web業界で働く人 中国地方の割合は どのくらいかご存知ですか?
  17. 17. 地方とWordPressについて Web業界で働く人、中国地方でどのくらいかご存知ですか? 関東 57.6% 出典:Web Designing Library Webデザイナー白書2014-15
  18. 18. 地方とWordPressについて Web業界で働く人、中国地方でどのくらいかご存知ですか? 関西 17.4% 出典:Web Designing Library Webデザイナー白書2014-15
  19. 19. 地方とWordPressについて Web業界で働く人、中国地方でどのくらいかご存知ですか? 中国地方 3% (鳥取、島根、広島、岡山、山口) 出典:Web Designing Library Webデザイナー白書2014-15
  20. 20. 地方とWordPressについて そんな、人口も少なく、 Web業界で働く人も少ない、 山陰地方でWebの仕事あるの?
  21. 21. 地方とWordPressについて そんなところでWebの仕事はあるの? あります。 そう、WordPressと ご縁があればね。
  22. 22. 地方とWordPressについて WordPressの御利益(メリット) ・テーマやプラグインをきっかけに全国から  制作案件の受注がある ・WordPressコミュニティに参加できる ・プレミアムテーマ(有償/GPL)が売れる
  23. 23. WordPressの御利益(メリット) LIQUID PRESS サイトのアクセス数 1年で着々と成長 地方とWordPressについて
  24. 24. 地方とWordPressについて WordPressの御利益(メリット) LIQUID PRESS プレミアムテーマのDL数 1位:CORPORATE 2位:MAGAZINE 3位:INSIGHT CORPORATEテーマは、多言語対応機能を備え ており、グローバルサイトなどの制作案件の相談 にもつながりやすいです。 導入事例: https://lqd.jp/wp/case.html
  25. 25. 地方とWordPressについて 山陰のような地方でも、WordPress とのご縁によって多くの人とつながり ビジネスを行うことができる。
  26. 26. 地方とWordPressについて ちなみに... 山陰もITに力を 入れています。 松江市では、IT企業を対象に 古民家風オフィスなどを おためし利用可能! 松江市 お試しサテライトオフィスモデル事業 募集中 http://www1.city.matsue.shimane.jp/jigyousha/sangyou/kigyou/otameshi.html
  27. 27. WordPress公式テーマ について
  28. 28. WordPress公式テーマについて WordPressデフォルト テーマの年表を作ってみる。
  29. 29. WordPress公式テーマについて 年表:2011年〜2013年 2010年 レスポンシブウェブデザイン (Responsive Web Design) という用語が新造。 2011年「Twenty Eleven」 WordPress3.2 デフォルトテーマ。 レスポンシブ対応、アイキャッチ 画像、投稿フォーマットに対応。 2012年「Twenty Twelve」 WordPress3.5 デフォルトテーマ。 非常にシンプルなデザイン。 2013年「Twenty Thirteen」 WordPress3.6 デフォルトテーマ。 幅広い投稿フォーマットに対応。 ヘッダー画像がフラットデザインに。 2013年 ・AppleがiOS7を発表。 ・フラットデザインブーム到来。 ・Bootstrap 3公開。 2011年 ・Bootstrap公開。 ・LINE 登場。 2012年 ・Bootstrap 2公開。 ・Windows8 登場。
  30. 30. WordPress公式テーマについて 年表:2014年〜2015年 2014年 ・様々なキュレーション  プラットフォームが始動。 2014年「Twenty Fourteen」 WordPress3.8 デフォルトテーマ。 大胆なレイアウト、マガジンスタイルのデ ザインに。 2014年「Twenty Fifteen」 WordPress4.1 デフォルトテーマ。 ミニマル。モバイル・ファーストでCSSの 単位がpxからemに変更に。 2015年「Twenty Sixteen」 WordPress4.4 デフォルトテーマ。 画面全体の額縁が特徴的。カスタマイズ メニューに「配色」を追加。 ・Googleがマテリアルデザインを発表。 ・日本のPCとスマホのネット利用者数が逆転。 ・HTML5が勧告。
  31. 31. WordPress公式テーマについて 年表:2016年〜現在 2016年 ・Google AMP 開始。 ・Google MFI(モバイルファーストインデックス)を発表。 2016年「Twenty Seventeen」 WordPress4.7 デフォルトテーマ。 現在最新版。フルスクリーンヘッダー画像、 フロントページの固定ページセクションなど、ビジネ スサイトでも使いやすいデザイン。 WordPress4.7の動画ヘッダー機能、編集ショート カット、追加CSS機能などを搭載。
  32. 32. WordPress公式テーマについて 公式テーマ「LIQUID」の 失敗事例集...
  33. 33. SNSシェアボタン SNSシェアボタンはプラグイン領域 です。 テーマでの実装は推奨されていません。 ショートコード ショートコードはプラグイン領域です。 テーマでの実装は推奨されていません。 公式テーマ「LIQUID」の失敗事例集 × テーマではなくプラグイン領域 WordPress公式テーマについて add_shortcode('sample', 'originalshortcode');
  34. 34. WordPress公式テーマについて 公式テーマ「LIQUID」の失敗事例集 × 関数名が被る テーマ名はもちろん、PHPの関数名もカブリ、ダメ、ゼッタイ。 他のプラグインとも被らないようにする必要があります。 function foo() {...} function liquid_corporate_foo() {...}
  35. 35. WordPress公式テーマについて 公式テーマ「LIQUID」の失敗事例集 × 外部ファイルの読込ミス 外部ファイルの読込をHTMLで書くことは推奨されていません。 functions.php で定義します。 <!-- header.php --> <link rel=”stylesheet” href=”'bootstrap.css” type='text/css”> // functions.php wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/css/bootstrap.css', array() );
  36. 36. WordPress公式テーマについて 公式テーマ「LIQUID」の失敗事例集 × スクリーンショット画像のミス スクリーンショットのアイキャッチ画像なども全てGPLである必要があります。 最終的に自分で撮影した写真にしましたが、 もっと良い感じの画像に変えたい・・・。
  37. 37. WordPress公式テーマについて 公式テーマ「LIQUID」の失敗事例集 × 文字列のエスケープ未対応 出力する文字列は、HTMLタグなどを無効化する必要があります。 XSSなどセキュリティの観点で重要な対策です。 <?php echo $text; ?> <?php esc_html( $text ) ?>
  38. 38. WordPress公式テーマについて 公式テーマ「LIQUID」の失敗事例集 × 国際化未対応 国際化対応として、翻訳可能文字列にする必要があります。 詳しくはこちら:https://wpdocs.osdn.jp/I18n_for_WordPress_Developers <?php echo 'text'; ?> <?php esc_html_e( 'text', 'liquid' ); ?>
  39. 39. WordPress公式テーマについて レビュワーさん、 ありがとうございましたmm
  40. 40. すぐに使える テクニック集
  41. 41. すぐに使えるテクニック集 ✔ アップデート可能なカスタマイズ方法 子テーマの作成 既存のテーマを変更する方法として、子テーマが推奨されています。 テーマを直接変更した場合、テーマをアップデートすると変更が失われますが、子テーマ を使用すればテーマの変更は保持されます。 詳しくはこちら:https://wpdocs.osdn.jp/子テーマ 親テーマ LIQUID アップデート可能 子テーマ LIQUID-child
  42. 42. すぐに使えるテクニック集 ✔ 子テーマで関数を上書きする方法 子テーマの関数 親テーマで、下記のような関数は、 子テーマで上書きすることが可能です。 // 親テーマ if ( ! function_exists( 'nav' ) ) { function nav() { ... } } 親テーマの関数が上書きできない場合、 子テーマで新たな関数を作成して利用す るのが手っ取り早いかも。 // 子テーマ function nav_child() { ... }
  43. 43. すぐに使えるテクニック集 ✔ SSLに対応する方法 テンプレートタグを使用していればテーマ側の対応は特に不要です。 必要であれば、SSL判定を行うことも可能です。 // ホームURL echo home_url(); // SSL判定 if( is_ssl() ) { // SSL }else{ // SSLでない }
  44. 44. すぐに使えるテクニック集 ✔ 参照するテンプレートを確認する方法 サイト上で参照されているphpが確認できます。 プラグイン:「Show Current Template」 https://ja.wordpress.org/plugins/show-current-template/
  45. 45. すぐに使えるテクニック集 ✔ PC/スマホ表示切替に対応する方法 レスポンシブテーマでユーザーがPC/スマホ表示切替可能。 プラグイン:「LIQUID RWD Plus」 https://ja.wordpress.org/plugins/liquid-rwd-plus/
  46. 46. すぐに使えるテクニック集 ✔ 固定ページでもタグを使用する方法 下記コードを追加すると、固定ページでもタグが使えるようになります。 固定ページを分類するのに便利です。 // functions.php function add_tag_to_page() { register_taxonomy_for_object_type('post_tag', 'page'); } add_action('init', 'add_tag_to_page');
  47. 47. すぐに使えるテクニック集 ✔ 特定の固定ページに要素を表示する 固定ページのスラッグで判定して処理を追加することができます。 特定の固定ページだけに要素を表示したい場合に便利です。 // page.php if( is_page('test') ){ // バナー }
  48. 48. すぐに使えるテクニック集 ✔ 特定の固定ページ専用テンプレート 固定ページのスラッグ名をサフィックスに追加したテンプレートを作成すると、 専用のテンプレートになります。 // page-test.php // スラッグ「test」の専用テンプレートです
  49. 49. すぐに使えるテクニック集 ✔ 古いIEに対応する方法 IEのバージョン判定をしてスクリプトを読み込むことができます。 WordPress 4.8で、IE8・IE9・IE10サポート終了!! // functions.php function scripts_styles() { wp_enqueue_script('html5shiv', get_template_directory_uri() . '/js/html5shiv.js', false); wp_script_add_data('html5shiv', 'conditional', 'lt IE 9'); } add_action( 'wp_enqueue_scripts', 'scripts_styles' );
  50. 50. すぐに使えるテクニック集 便利な情報は、 どんどん共有しましょう WordPress公式フォーラム https://ja.wordpress.org/support/
  51. 51. まとめ ・地方でもWordPressとのご縁によって、  多くの人とつながり、ビジネスができる ・Webのトレンドと共にWordPressテーマは  進化を続けている ・便利な情報はどんどん共有しましょう
  52. 52. Thank You

×