小川流！わかりやすいテーマの作り方
•
2 gostaram•304 visualizações
小川流！わかりやすいテーマの作り方 in SaCSS Special11 2017.05.27
Recomendados
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Semelhante a 小川流！わかりやすいテーマの作り方
Semelhante a 小川流！わかりやすいテーマの作り方 (20)
小川流！わかりやすいテーマの作り方
- 3. 小川 果純（おがわ かすみ） プライム・ストラテジー株式会社 Webエンジニア 約3年前にWordPressエンジニアとして入社。 PHPの“P”の字もわからない状態で入社し、入社半年後に WordPressのコアファイルを必死になって読み解く。 1年後には大型サイトをほぼ一人で構築。 その後、読売新聞「ヨミドクター」の設計や実装、他多数の大型サイトの構築に携わる。 カピバラ と ピザ と ポテチ が大好き！ 今回は、旭山動物園にカピバラを見に来ました！！ 2 自己紹介
- 6. １つのテンプレートの中に条件分岐がたくさん！ 5 わかりやすい/わかりづらいテーマって？ 59 if ( is_page( 'slug1' ) ) { 60 get_template_part( 'content1' ); 61 } elseif ( is_page( 'slug2' ) ) { 62 get_template_part( 'content2' ); 63 } elseif ( is_page( ' 'content1' slug3' ) ) { 64 get_template_part( 'content3' ); 65 } elseif ( is_page( 'slug4' ) || is_page( 'slug5' ) ) { 66 get_template_part( 'content4' ); 67 } else { 68 get_template_part( 'content5' ); 69 }
- 7. functions.phpが長い！ 6 わかりやすい/わかりづらいテーマって？ 01 <?php 02 // functions.php start 03 function my_theme_setting() { ・・・ 598 function my_theme_func() { 599 // code 600 } 601 add_action( 'after_setup_theme', 'my_theme_func' ); ・・・ 2574 } 2575 // functions.php end
- 9. 今回のわかりやすいテーマは以下のようなテーマとしてお話しします。 • どこに何が書いてあるのかわかるテーマ • 余計なプログラムが書かれていないテーマ • 仕様書がないものでも、ある程度憶測でメンテナンスできるテーマ • スパゲッティじゃないテーマ 8 わかりやすい/わかりづらいテーマって？ いらすとや
- 10. ！注意！ • ここで紹介する内容は『小川流』です。 誰もが、自分のわかりやすいテーマの作り方を持っています。 • 公式テーマに登録するには、その規約に沿った作り方をする必要が あります。 参照）テーマレビュー - WordPress Codex 日本語版 https://wpdocs.osdn.jp/%E3%83%86%E3%83%BC%E3%83%9E%E3%83%AC%E3%83%93%E3%83%A5%E3%83%BC • 知ってる知ってる！があります。 9 はじめに…
- 11. 今回は以下のようなサイトを作ると仮定し、説明していきます。 コーポレートサイト サイト構成 トップページ お知らせ一覧 お知らせ詳細ページ プロダクト一覧 プロダクト詳細ページ サイト内検索結果一覧 会社について（固定ページ） お問い合わせ（固定ページ） 404ページ 10 はじめに…
- 12. 構成 - トップページ 11 はじめに… ヘッダー フッター メインビジュアル サイド バー お知らせ 一覧へ→ タイトルタイトルタイトル 抜粋文抜粋文抜粋文抜粋文抜粋文… タイトルタイトルタイトル 抜粋文抜粋文抜粋文抜粋文抜粋文… プロダクト 一覧へ→ プロダクト名プロダクト名 抜粋文抜粋文抜粋文抜粋 抜粋文抜粋文抜粋文抜粋 抜粋文抜粋文抜粋文抜… プロダクト名プロダクト名 抜粋文抜粋文抜粋文抜粋 抜粋文抜粋文抜粋文抜粋 抜粋文抜粋文抜粋文抜… イメージ イメージ お問い合わせはこちら お気軽にお問い合わせください。 →お問い合わせ
- 14. 構成 - お知らせ詳細ページ 13 はじめに… ヘッダー フッター サイド バー お知らせタイトル Twitter facebook G+ テキストテキストテキストテキストテキスト テキストテキストテキストテキストテキスト テキストテキストテキストテキストテキスト テキストテキストテキストテキストテキスト テキストテキストテキストテキストテキスト テキストテキストテキストテキストテキスト シェアはこちらから Twitter facebook G+ お問い合わせはこちら →お問い合わせ SNSシェアボタン
- 16. 構成 - プロダクト詳細ページ 15 はじめに… ヘッダー フッター サイド バー プロダクト名 Twitter facebook G+ テキストテキストテキストテキストテキスト テキストテキストテキストテキストテキスト テキストテキストテキストテキストテキスト テキストテキストテキストテキストテキスト 発売日：2017-05-27 種別：タイプA 大きさ：1000 × 530 Twitter facebook G+ イメージ お問い合わせはこちら →お問い合わせ カスタムフィールドに プロダクトの情報を登録
- 22. 純粋にページテンプレートを割り当てると、こうなる。 • トップページ → front-page.php • お知らせ一覧 → home.php • お知らせ詳細ページ → single.php • プロダクト一覧 → archive-product.php • プロダクト詳細ページ → single-product.php • サイト内検索結果一覧 → search.php • 会社について（固定ページ） → page.php • お問い合わせ（固定ページ） → page-contact.php • 404ページ → 404.php • index.php → index.php 21 テンプレート分解 10 テンプレート
- 23. シンプルにわかりやすく、ページテンプレートを割り当てる。 • トップページ → front-page.php • お知らせ一覧 → home.php(archive.phpをインクルード) • お知らせ詳細ページ → single.php • プロダクト一覧 → archive.php • プロダクト詳細ページ → single.php • サイト内検索結果一覧 → search.php • 会社について（固定ページ） → page.php • お問い合わせ（固定ページ） → page.php • 404ページ → index.php 22 テンプレート分解 ６（＋１） テンプレート
- 24. テンプレート数を減らすポイントは３つ。 1. 「page-」と「single-」を極力増やさない ※「archive-」も極力増やさない 2. 別テンプレートをインクルードする 3. index.phpを404用テンプレートにする 23 テンプレート分解
- 25. 「single-」を増やさなくても実装が可能であるか、違いを確認する。 お知らせ詳細ページとプロダクト詳細ページの違いは大きく分けて２う。 1. プロダクトイメージ（アイキャッチ画像）が表示されるかどうか 2. プロダクトの項目（カスタムフィールド）を出力するかどうか 24 テンプレート分解 - 「page-」と「single-」を極力増やさない
- 26. 出力をそれぞれ条件分岐で対応し、出力の有無による見栄えの調整はCSSで。 これにより、single.phpで双方のページの管理が行えるようになった。 25 テンプレート分解 - 「page-」と「single-」を極力増やさない if ( has_post_thumbnail() ) { if ( $post->meta_key ) {
- 27. 「page-」を増やさなくても実装が可能であるか、違いを確認する。 会社についてとお問い合わせの違いは大きく分けて１つ。 1. サイドバーがあるかどうか 26 テンプレート分解 - 「page-」と「single-」を極力増やさない
- 28. 対応方法は場合によりけり。 1. 今後サイドバーなしの固定ページが頻繁に見込まれるようであれば、サイ ドバーを表示させないページテンプレートを作成してしまう。 2. サイドバーなしの表示が、今後もお問い合わせページのみであれば、 is_page()で条件分岐を書くのも可能。 ※2ページ以上になる場合は、１つのテンプレートに条件分岐がたくさんパ ターンにならないように注意 3. カスタムフィールドでフラグを持つ！ 27 テンプレート分解 - 「page-」と「single-」を極力増やさない
- 29. 「page-」と「single-」を極力増やさない まとめ ぱっと見、違う構造・テンプレートのように見えても、 よく見れば同じ構成はたくさん！ それを見極めて、不要なテンプレートファイル作成は行わないようにしよう！ ただし、無理に一緒にしようとすると、 条件分岐いっぱいになってしまうので注意！ 28 テンプレート分解 - 「page-」と「single-」を極力増やさない
- 31. ただし！ 30 テンプレート分解 - 別テンプレートをインクルードする テンプレート階層 - WordPress Codex 日本語版 https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E9%9A%8E%E5%B1%A4
- 32. home.phpの記述を、archive.phpのインクルードだけにする。 home.php それだけ！ 31 テンプレート分解 - 別テンプレートをインクルードする 01 <?php 02 // include archive.php 03 get_template_part( 'archive' );
- 33. 別テンプレートをインクルードする まとめ テンプレート階層が違っても、テンプレートの流用ができる！ get_template_part()は、パーツの読み込みだけでなく、 ページテンプレートの中身まるまる別テンプレートで使用したいときにも 大活躍！ 32 テンプレート分解 - 別テンプレートをインクルードする
- 34. 必ず配置しないといけないindex.phpは、該当するテンプレートファイルがな かった場合に読まれるデフォルトテンプレート。 33 テンプレート分解 - index.phpを404用テンプレートにする テンプレート階層 - WordPress Codex 日本語版 https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E9%9A%8E%E5%B1%A4
- 35. index.phpが読まれる時は、たいてい想定外のとき。 なので…index.phpは404にしてしまう！ 34 テンプレート分解 - index.phpを404用テンプレートにする 01 <?php 02 // 強制的に404ステータスに変更 03 $wp_query->is_404 = true; 04 status_header( 404 ); 05 nocache_headers(); 06 07 get_header(); ・・・
- 36. index.phpを404用テンプレートにする まとめ index.phpの用途が決まっていないときは、404.phpとして実装しよう！ 404.phpのテンプレートを作る必要がなくなるので、 テンプレート数が常に-1テンプレートになる！ 35 テンプレート分解 - index.phpを404用テンプレートにする
- 38. ヘッダー、フッター、サイドバーの他に、 各テンプレートに同じパーツが存在している。 • SNSシェアボタン • お問い合わせへの誘導 など… ヘッダーやフッターのように、 ソースは一元管理したい！ 37 パーツ分解
- 39. パーツテンプレートを作成して、それぞれのテンプレートで呼び出す。 …なんて、こんなこと普通ですよね。 38 パーツ分解 01 <?php 02 // include parts/sns.php 03 get_template_part( 'parts/sns' );
- 41. GLOBAL変数である$wp_queryを利用して、パーツ呼び出し時に出し 分けを行う。 1. functions.phpに$wp_queryに値を入れつつ、パーツテンプレー トを呼び出す関数を追加する。 40 パーツ分解 01 <?php 02 function custom_get_template_parts( $slug, $context = array(), $name = null ) { 03 global $wp_query; 04 $wp_query->query_vars = array_merge( $wp_query->query_vars, $context ); 05 get_template_part( '/parts/' . $slug, $name ); 06 }
- 42. GLOBAL変数である$wp_queryを利用して、パーツ呼び出し時に出し 分けを行う。 2. SNSシェアボタンのテンプレートパーツ側で、$wp_queryの値に よってタイトルを出しわけを行う。 41 パーツ分解 01 <?php 02 if ( ! defined( 'ABSPATH' ) ) return; 03 04 // $wp_queryに値がない場合のデフォルト設定 03 $title_flg = ( ! empty( $wp_query->query_vars['title_flg'] ) ) ? $wp_query- >query_vars['title_flg'] : false; 04 if ( $title_flg ) { 05 echo 'シェアはこちら'; 06 }
- 43. GLOBAL変数である$wp_queryを利用して、パーツ呼び出し時に出し 分けを行う。 3. SNSシェアボタンのテンプレートパーツを呼び出す。 42 パーツ分解 <?php custom_get_template_parts( 'sns', array( 'title_flg' => true ) ); ?>
- 46. functions.phpの記述はこんな感じ。 似通ったものはPHPファイルを分けてインクルードする！ 45 functions.php記述 01 <?php 02 if ( ! defined( 'ABSPATH' ) ) return; 03 04 define( 'MY_THEME_DIR', __DIR__ ); 05 06 // カスタム投稿とカスタムタクソノミー設定ファイル 07 require_once( MY_THEME_DIR . '/inc/register.php' ); 08 09 // フックポイントまとめファイル 10 require_once( MY_THEME_DIR . '/inc/hooks.php' ); 11 12 // 関数まとめファイル 13 require_once( MY_THEME_DIR . '/inc/utils.php' );
- 48. １つのディレクトリにまとめて、ループで一気にインクルードする。 47 functions.php記述 15 // ACF フィールド設定ファイル 16 if ( function_exists('acf_add_options_page') && function_exists('acf_add_local_field_group') ) : 17 foreach ( glob( trailingslashit( MY_THEME_DIR . '/inc/acf/' ) . '*.php' ) as $file ) { 18 require_once( $file ); 19 } 20 endif;
- 52. Sassの構造はこんな感じ。 • _reset.scss …normalize.css • _setting.scss …変数などの定義 • _mixin.scss …mixin • _common.scss …ヘッダーやフッター、bodyへの指定など • _site_style.scss …ぱんくず他、ビジュアルエディターでは 使用しない箇所の指定 • _edit_style.scss …ビジュアルエディターで使用する指定 • style.scss …フロント画面用CSS • editor-style.scss …ビジュアルエディター用CSS 51 CSS記述 - Sassで一気にCSSを作成する
- 53. style.scssはこんな感じ。 _site_style.scssの中で、_edit_style.scssを読み込んでいる。 52 CSS記述 - Sassで一気にCSSを作成する 01 @charset "UTF-8"; 02 @import "reset"; //normalize.css 03 @import "setting"; 04 @import "mixin"; 05 @import "common"; 06 @import "site_style"; 50 .edit-area { 51 @import "edit_style"; 53 }
- 54. editer-style.scssはこんな感じ。 53 CSS記述 - Sassで一気にCSSを作成する 01 @charset "UTF-8"; 02 @import "reset"; //normalize.css 03 @import "setting"; 04 @import "mixin"; 05 @import "common"; 06 #tinymce { 07 @import "edit_style"; 08 }
- 55. コンパイルしたstyle.cssとediter-style.cssを、それぞれ読み込むよう に、functions.phpに記述する。 54 CSS記述 - Sassで一気にCSSを作成する 30 function my_theme_setup() { 31 add_editor_style( get_template_directory_uri() . '/resources/css/editor-style.css' ); 32 } 33 add_action( 'after_setup_theme', 'my_theme_setup' ); 34 35 function my_theme_scripts() { 36 wp_enqueue_style( 'my_theme_style', get_stylesheet_directory_uri() . '/resources/css/style.css', array(), date_i18n('Ymd') );
- 57. フロント画面にもbody_class()を記述して、投稿タイプのクラスを出 力する。 56 CSS記述 - 投稿タイプごとに見栄えを変える <body <?php body_class(); ?>> single_post
- 58. あとは、 _edit_style.scssに記述するだけ。 57 CSS記述 - 投稿タイプごとに見栄えを変える 30 .single-post & , 31 .post-type-post & { 32 // 投稿タイプ「post」用スタイル 33 }
- 59. さいごに… 58