--- title: "Gifu WordPress Meetup #14で「公式テーマTwentyNineteenから読み解くテーマ制作のお作法」という内容で登壇してきました" canonical_url: "https://olein-design.com/blog/gifu-wordpress-meetup-14-talk-about-wordpress-theme" language: "ja" date_published: "2019-09-15T09:29:53+09:00" date_modified: "2019-09-15T09:29:53+09:00" content_type: "post" author: "久野晃司" taxonomies: category: - "WordPress" - "WordPress Meetup" --- # Gifu WordPress Meetup #14で「公式テーマTwentyNineteenから読み解くテーマ制作のお作法」という内容で登壇してきました 2019年9月7日（土）、みんなの森 ぎふメディアコスモス おどるスタジオにて開催されましたGifu WordPress Meetup #14に参加し、「公式テーマTwentyNineteenから読み解くテーマ制作のお作法」という内容で登壇してきました。 ![](https://olein-design.com/wp-content/uploads/2019/09/IMG_0513-1024x682.jpg)photo by Keita Yoshikawa ![](https://olein-design.com/wp-content/uploads/2019/09/IMG_0506-1024x682.jpg)photo by Keita Yoshikawa ![](https://olein-design.com/wp-content/uploads/2019/09/IMG_0517-1024x682.jpg)photo by Keita Yoshikawa ## スライド https://speakerdeck.com/oleindesign/twentynineteenkaradu-mijie-kutemazuo-cheng-shi-falseozuo-fa ## 登壇内容概要 アジェンダは以下の通りです。 - テーマ開発の環境について - 今日の話の理解・活用に必要な知識 - TwentyNineteenの内部ファイル - functions.phpを読み解く - body_class() - post_class() - テーマを作るにあたっての理想的な考え方 ### テーマ開発の環境について テーマを作る際にあると便利な情報を紹介しました。といっても、言い出すとキリがないので初歩的ではありますが、 - [Show Current Template](https://ja.wordpress.org/plugins/show-current-template/](https://ja.wordpress.org/plugins/show-current-template/) プラグイン - [テーマユニットテスト](https://wpdocs.osdn.jp/テーマユニットテスト](https://wpdocs.osdn.jp/テーマユニットテスト)データの利用 ### 必要な知識 まぁ、あえて言うのもあれなんですが、WordPressテーマ開発にはこのような知識があると捗ります。 - HTML - CSS - JavaScript - PHP ただし、全てを完璧にしておく必要など毛頭なく、**わからないことをちゃんと調べるというアクション**がとても大事です。 ググると色々な情報に遭遇するとは思いますが、基本的なスタイルとしては「公式（もしくはそれに近い）リファレンスを参照する」ということを意識すると良いです。 確かに公式に近いリファレンスやドキュメントの言い回しって堅苦しいので、わかりにくさ倍増なのは気持ちわかります。 しかし、そこに少しでも慣れ、調べた結果、誰かに質問するのとそうでないのとでは、全く理解度が違ってきます。 ですので、以下のドキュメントをそれぞれ紹介します。 [埋め込みコンテンツ](https://developer.mozilla.org/ja/docs/Web/HTML) [埋め込みコンテンツ](https://developer.mozilla.org/ja/docs/Web/CSS) [埋め込みコンテンツ](https://developer.mozilla.org/ja/docs/Web/JavaScript) [埋め込みコンテンツ](https://www.php.net/manual/ja/) [埋め込みコンテンツ](https://wpdocs.osdn.jp) ### TwentyNineteenの内部ファイル一覧 まぁ、こんなにファイルがあるんですよーってことで紹介しました。僕も全部読んだ訳ではありません。 ``` ├ classes/ ├ fonts/ ├ inc/ ├ js/ ├ sass/ ├ template-parts/ ├ 404.php ├ archive.php ├ comments.php ├ footer.php ├ functions.php ##これこれ ├ header.php ├ image.php ├ index.php ├ package.json ├ package-lock.json ├ page.php ├ postcss.config.js ├ print.scss ├ print.css ├ readme.txt ├ screenshot.png ├ search.php ├ single.php ├ style.scss ├ style.css ├ style-editor.scss ├ style-editor.css ├ style-editor-customizer.scss ├ style-editor-customizer.css ├ style-rtl.css ``` ### functions.php この一覧の中から主に`functions.php` を掘り下げていきます。 [埋め込みコンテンツ](https://github.com/WordPress/twentynineteen/blob/master/functions.php) 以下、ざっとお話した項目を紹介します。 #### if ( ! function_exists() ) とりあえずこの関数の説明をしました。受託制作などではそのテーマだけで完結することしか想定されないことがほとんどですが、子テーマでカスタマイズされる可能性があるばいには、こちらの関数の利用方法は知っておく必要があります。 #### 自動フィードリンク ``` add_theme_support( 'automatic-feed-links' ); ``` #### タイトルタグ設定 ``` add_theme_support( 'title-tag' ); ``` #### サムネイル設定 ``` add_theme_support( 'post-thumbnails' ); ``` #### カスタムメニュー設定 ``` register_nav_menus( array( 'menu-1' => __( 'Primary', 'twentynineteen' ), 'footer' => __( 'Footer Menu', 'twentynineteen' ), 'social' => __( 'Social Links Menu', 'twentynineteen' ), ) ); ``` #### HTML5使用許可設定 ``` add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption', ) ); ``` #### Gutenbergデフォルトスタイル適応設定 ``` add_theme_support( 'wp-block-styles' ); ``` #### Gutenberg幅広・全幅ボタン表示設定 ``` add_theme_support( 'align-wide' ); ``` #### エディタースタイル設定・読み込み ``` add_theme_support( 'editor-styles' ); add_editor_style( 'style-editor.css' ); ``` #### Gutenbergフォントサイズ設定 ``` add_theme_support( 'editor-font-sizes', array( array( 'name' => __( 'Small', 'twentynineteen' ), 'shortName' => __( 'S', 'twentynineteen' ), 'size' => 19.5, 'slug' => 'small', ), ... ) ); ``` #### Gutenbergカラーパレット設定 ``` add_theme_support( 'editor-color-palette', array( array( 'name' => __( 'Dark Gray', 'twentynineteen' ), 'slug' => 'dark-gray', 'color' => '#111', ), ... ) ); ``` #### iframeレスポンシブ対応設定 ``` add_theme_support( 'responsive-embeds' ); ``` #### コンテンツ幅設定 ``` $GLOBALS['content_width'] = apply_filters( 'twentynineteen_content_width', 640 ); ``` #### スクリプト読み込み設定 ``` function twentynineteen_scripts() { wp_enqueue_style( 'twentynineteen-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) ); wp_style_add_data( 'twentynineteen-style', 'rtl', 'replace' ); if ( has_nav_menu( 'menu-1' ) ) { wp_enqueue_script( 'twentynineteen-priority-menu', get_theme_file_uri( '/js/priority-menu.js' ), array(), '1.1', true ); wp_enqueue_script( 'twentynineteen-touch-navigation', get_theme_file_uri( '/js/touch-keyboard-navigation.js' ), array(), '1.1', true ); } wp_enqueue_style( 'twentynineteen-print-style', get_template_directory_uri() . '/print.css', array(), wp_get_theme()->get( 'Version' ), 'print' ); if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) { wp_enqueue_script( 'comment-reply' ); } } add_action( 'wp_enqueue_scripts', 'twentynineteen_scripts' ); ``` #### body_class() ``` > ``` [埋め込みコンテンツ](https://developer.wordpress.org/reference/functions/body_class/) #### post_class() ```
> ``` [埋め込みコンテンツ](https://developer.wordpress.org/reference/functions/post_class/) ### テーマを作るにあたっての理想的な考え方 #### 受託でWPテーマを作る際の流れ 個人的なテーマ開発の大まかな流れを紹介しました。 1. GitHubリポジトリ作成（受託はprivate） 2. テストサーバーで環境を用意 （利用するとわかっているものは全て設定して、All in one WP Migrationでローカルへ） 3. ローカル開発環境用意 - local by flywheel - 常用アセット準備（常用mixinなど） - 各コンパイル設定（prepros/npm） 4. 構築開始（モバイルファースト/FLOCSS） #### 責任を持った制作 WordPressをWordPressとして利用するためには、責任を持った設計が必要 - **テーマテリトリーとプラグインテリトリーへの理解** - **フルマークアップ（前述）でページを構築してしまうことのリスク** - クライアントが**末長くWordPressを利用できる環境をできる限り用意する**責任 ## まとめ このような流れのお話を1時間ほどでさせていただきました。参加者のみなさんからは、基本的なテーマの作り方が知れてよかったという感想もいただき、頑張って資料を作って良かったです。 次回以降も登壇頑張っていこうと思います。