WordCamp Kyoto 2017「縁結びの聖地でWordPressと恋に落ちたテーマ制作者の話」
Report
Share
•2 likes•3,804 views
WordCamp Kyoto 2017「縁結びの聖地でWordPressと恋に落ちたテーマ制作者の話」
•2 likes•3,804 views
Report
Share
Download to read offline
WordCamp Kyoto 2017 のスライドです。 https://2017.kyoto.wordcamp.org/
More Related Content
What's hot
What's hot(20)
Similar to WordCamp Kyoto 2017「縁結びの聖地でWordPressと恋に落ちたテーマ制作者の話」
Similar to WordCamp Kyoto 2017「縁結びの聖地でWordPressと恋に落ちたテーマ制作者の話」(20)
Recently uploaded
Recently uploaded(7)
WordCamp Kyoto 2017「縁結びの聖地でWordPressと恋に落ちたテーマ制作者の話」
- 1. 縁結びの聖地で WordPressと 恋に落ちたテーマ制作者の話 リキッドデザイン株式会社 Created by Iwamoto, Tomita #wckyoto2017
- 2. 自己紹介
- 4. 山陰について 山陰PR動画 縁の道〜山陰〜 20日間で200万回再生 San'in, Japan 4K (Ultra HD) - 山陰 https://www.youtube.com/watch?v=f-Bgx6JK1Vw 山陰インバウンド機構制作
- 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. 本日のアジェンダ 1. 地方とWordPressについて 2. WordPress公式テーマについて 3. すぐに使えるテクニック集
- 15. 地方とWordPressについて 山陰地方の人口、どのくらいかご存知ですか？ 市や区より人口が少ない！ 鳥取県+島根県＜京都市 鳥取県＜岡山市 鳥取県＜船橋市 鳥取県＜足立区 出典：2016年人口推計
- 17. 地方とWordPressについて Web業界で働く人、中国地方でどのくらいかご存知ですか？ 関東 57.6% 出典：Web Designing Library Webデザイナー白書2014-15
- 18. 地方とWordPressについて Web業界で働く人、中国地方でどのくらいかご存知ですか？ 関西 17.4% 出典：Web Designing Library Webデザイナー白書2014-15
- 19. 地方とWordPressについて Web業界で働く人、中国地方でどのくらいかご存知ですか？ 中国地方 3% （鳥取、島根、広島、岡山、山口） 出典：Web Designing Library Webデザイナー白書2014-15
- 24. 地方とWordPressについて WordPressの御利益（メリット） LIQUID PRESS プレミアムテーマのDL数 1位：CORPORATE 2位：MAGAZINE 3位：INSIGHT CORPORATEテーマは、多言語対応機能を備え ており、グローバルサイトなどの制作案件の相談 にもつながりやすいです。 導入事例: https://lqd.jp/wp/case.html
- 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. 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. WordPress公式テーマについて 年表：2016年〜現在 2016年 ・Google AMP 開始。 ・Google MFI（モバイルファーストインデックス）を発表。 2016年「Twenty Seventeen」 WordPress4.7 デフォルトテーマ。 現在最新版。フルスクリーンヘッダー画像、 フロントページの固定ページセクションなど、ビジネ スサイトでも使いやすいデザイン。 WordPress4.7の動画ヘッダー機能、編集ショート カット、追加CSS機能などを搭載。
- 34. WordPress公式テーマについて 公式テーマ「LIQUID」の失敗事例集 × 関数名が被る テーマ名はもちろん、PHPの関数名もカブリ、ダメ、ゼッタイ。 他のプラグインとも被らないようにする必要があります。 function foo() {...} function liquid_corporate_foo() {...}
- 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() );
- 37. WordPress公式テーマについて 公式テーマ「LIQUID」の失敗事例集 × 文字列のエスケープ未対応 出力する文字列は、HTMLタグなどを無効化する必要があります。 XSSなどセキュリティの観点で重要な対策です。 <?php echo $text; ?> <?php esc_html( $text ) ?>
- 38. WordPress公式テーマについて 公式テーマ「LIQUID」の失敗事例集 × 国際化未対応 国際化対応として、翻訳可能文字列にする必要があります。 詳しくはこちら：https://wpdocs.osdn.jp/I18n_for_WordPress_Developers <?php echo 'text'; ?> <?php esc_html_e( 'text', 'liquid' ); ?>
- 40. すぐに使える テクニック集
- 42. すぐに使えるテクニック集 ✔ 子テーマで関数を上書きする方法 子テーマの関数 親テーマで、下記のような関数は、 子テーマで上書きすることが可能です。 // 親テーマ if ( ! function_exists( 'nav' ) ) { function nav() { ... } } 親テーマの関数が上書きできない場合、 子テーマで新たな関数を作成して利用す るのが手っ取り早いかも。 // 子テーマ function nav_child() { ... }
- 43. すぐに使えるテクニック集 ✔ SSLに対応する方法 テンプレートタグを使用していればテーマ側の対応は特に不要です。 必要であれば、SSL判定を行うことも可能です。 // ホームURL echo home_url(); // SSL判定 if( is_ssl() ) { // SSL }else{ // SSLでない }
- 44. すぐに使えるテクニック集 ✔ 参照するテンプレートを確認する方法 サイト上で参照されているphpが確認できます。 プラグイン：「Show Current Template」 https://ja.wordpress.org/plugins/show-current-template/
- 45. すぐに使えるテクニック集 ✔ PC/スマホ表示切替に対応する方法 レスポンシブテーマでユーザーがPC/スマホ表示切替可能。 プラグイン：「LIQUID RWD Plus」 https://ja.wordpress.org/plugins/liquid-rwd-plus/
- 46. すぐに使えるテクニック集 ✔ 固定ページでもタグを使用する方法 下記コードを追加すると、固定ページでもタグが使えるようになります。 固定ページを分類するのに便利です。 // functions.php function add_tag_to_page() { register_taxonomy_for_object_type('post_tag', 'page'); } add_action('init', 'add_tag_to_page');
- 47. すぐに使えるテクニック集 ✔ 特定の固定ページに要素を表示する 固定ページのスラッグで判定して処理を追加することができます。 特定の固定ページだけに要素を表示したい場合に便利です。 // page.php if( is_page('test') ){ // バナー }
- 48. すぐに使えるテクニック集 ✔ 特定の固定ページ専用テンプレート 固定ページのスラッグ名をサフィックスに追加したテンプレートを作成すると、 専用のテンプレートになります。 // page-test.php // スラッグ「test」の専用テンプレートです
- 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' );
- 51. まとめ ・地方でもWordPressとのご縁によって、 多くの人とつながり、ビジネスができる ・Webのトレンドと共にWordPressテーマは 進化を続けている ・便利な情報はどんどん共有しましょう
- 52. Thank You