ノンプログラマーのための WordPressテーマ作成ステップアップ術 みにょん すたいる Mignon Style
Webデザイナー みにょんすたいる Mignon Style いまい みずえ WordPress公式ディレクトリ テーマ「Chocolat」 プラグイン「MS Custom Login」デベロッパー WordPressスターターテーマ「_s」コ...
WordPressは2013年7月から
テーマ「 Chocolat 」 https://wordpress.org/themes/chocolat/
プラグイン「 MS Custom Login 」 https://wordpress.org/plugins/ms-custom-login/
WordPressスターターテーマ「 _s 」 http://underscores.me/
WordPressスターターテーマ「 _s 」 http://underscores.me/
あなたは WordPressの テーマを作ったことが ありますか？
自分のブログの テーマを作ってます
自社サイトの テーマを作ってます
クライアントワークの テーマを作ってます
その作り方は 推奨されるテーマの 作り方ですか？
推 奨？
よくわからないけど ちゃんと動いてるから 大丈夫でしょ？
ちょっと 待ったあああ
「よくわからないけど 」
「ちゃんと動いてるから」
それで本当に 大丈夫ですか？
WordPressのコードには それぞれ意味があります
大事なポイントを おさえて
今よりちょっとだけ ステップアップ してみませんか？
テンプレートファイルと テンプレート階層 01
HTML+CSSで作成したサイトを
WordPresssにすると
ページがたくさんあっても
共通部分は部品にして読み込み
テンプレートファイルの 種類や使い方が よくわからない！
twentysixteenの テーマの構成を 見てみよう！
テーマに 必要なファイルは この3つ！
共通部分は ファイルを分けて 読み込みます
<?php get_header(); ?> <?php if ( have_posts() ) : ?> <?php while ( have_posts() ) : the_post(); get_template_part( 'templ...
コンテンツの 表示もファイルを わけてます
index.php <?php get_header(); ?> <?php if ( have_posts() ) : ?> <?php while ( have_posts() ) : the_post(); get_template_pa...
ループの中で表示する 内容を記載 get_post_format()で 画像や動画などの 投稿フォーマットを 取得！
<?php get_template_part(); ?> ヘッダー・サイドバー・フッター以外の テンプレートパーツを読み込む <?php // content.phpを読み込む get_template_part( 'content' ); ...
基本的な テンプレート ファイルです
テーマを構成するテンプレートファイル WordPress Codex 日本語版 http://wpdocs.sourceforge.jp/テーマの作成
読み込まれるテンプレートファイルの順番 WordPress Codex 日本語版 https://wpdocs.osdn.jp/テンプレート階層
該当するファイルが ないときはすべて index.phpを使用
テンプレート階層の概観図
関数ファイルは functions.phpから 読み込んでます
/** * Twenty Sixteen only works in WordPress 4.4 or later. */ if ( version_compare( $GLOBALS['wp_version'], '4.4-alpha', '...
テンプレートファイルの 種類と役割を覚えよう テンプレート階層の ルールを覚えよう ファイルを読み込む 方法を覚えよう まとめ
スタイルと スクリプト 02
CSSやjQueryが うまく反映されない！
CSSやjQueryを ヘッダーやフッターに 直書きしていませんか？
スタイルシートの読み込み header.php <head> <link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>"> <link rel="stylesheet...
<head>内にCSSを直書きするのは非推奨です
bloginfo( 'stylesheet_url' )は非推奨です bloginfo( 'url' )は非推奨です
スタイルシートの読み込み functions.php function themeslug_enqueue_style() { wp_enqueue_style( 'themeslug-style', get_stylesheet_uri() ...
CSSの読み込みは functions.phpに 記述します
wp_enqueue_scriptsフックを使う
get_stylesheet_uri()を使う get_template_directory_uri()を使う
wp_enqueue_style()でCSSを追加 ハンドル名で読み込む順番を指定 「 https: 」は省略
スクリプトの読み込み footer.php <body> <?php wp_footer(); ?> <script src="https://code.jquery.com/jquery-3.1.0.min.js"> </script> <s...
<body>内にスクリプトを直書きするのは非推奨です
bloginfo( 'url' )は非推奨です
スクリプトの読み込み functions.php function themeslug_enqueue_script() { wp_enqueue_script( 'themeslug-slider', get_template_directo...
スクリプトの 読み込みは functions.phpに 記述します
wp_enqueue_scriptsフックを使う
get_template_directory_uri()を使う
trueにするとwp_footerで出力される ハンドル名で 読み込む順番を指定 jQueryが先に 読み込まれる
WordPressのデフォルトスクリプト WordPressには jQueryやjQuery UI などのスクリプトが デフォルトで 入っています
WordPress本体やプラグインの CSSやスクリプトを削除する場合 function theme_deregister_script() { // プラグインで使用しているCSSを削除 wp_deregister_style( 'wp-pa...
自作のスクリプトでjQueryを使用する場合 jQuery( function( $ ) { // コードを記述 } ); WordPressの jQueryは 他のライブラリと $関数が衝突しない ようになってます カプセル化すると 自作のス...
まとめ WordPressのデフォルトの スクリプトを使おう スタイルとスクリプトの読み込みは wp_enqueue_scriptsフックを使おう
バリデーションと エスケープ 03
カスタマイザーに データを入力したら 表示がおかしくなった！
バリデーションと エスケープは してますか？
バリデーション // タイトルから無効な文字を除外する sanitize_title( ); // textfieldタグの値をサニタイズする sanitize_text_field( ); // '#'のついた16進数のカラー値を   サニタイズ...
// HTMLタグをエスケープ esc_html( ); // HTMLタグ属性をエスケープ esc_attr( ); // URLを無害化する esc_url( ); // 数値を負ではない整数に変換する absint( ); // text...
// 特定のタグのみ許可する $allowed_html = array( 'a' => array( 'href' => array(), 'title' => array() ), 'br' => array(), 'em' => arra...
バリデーションとエスケープしないと
データベースが 壊れる可能性
表示が おかしくなる 可能性
バリデーションとエスケープすると
入力されたデータが 正しいものか確認する
表示するデータを 規則にそったものに 置き換える
表示するデータを 規則にそったものに 置き換える 値を echoする タイミングで エスケープ します
WordPressの関数を 使わずにSQLで直接取得 すればいいんじゃない？
セキュリティ対策を 忘れずに！ SQLで 取得するときは セキュリティ対策されている WordPressの関数を 使うのがオススメです！
まとめ 入力されたデータは バリデーションしよう echoのときに エスケープしよう WordPressで用意された 関数を使おう
プラグイン テリトリー 04
サイトリニューアルしたら アクセス解析のコードが なくなっちゃった！
プラグインの機能を テーマに入れてませんか？
Analyticsのスクリプト SEOのオプション SNSの共有ボタンやリンク ショートコード カスタム投稿・カスタムタクソノミー
プラグイン テリトリー プラグイン テリトリー
テーマに機能が入っていると
テーマに 入れ忘れてる！
Analyticsが なくなってる！！
テーマに機能が入っていると 共有ボタンの 仕様が変更に！
修正が 終わらないよ∼
デザインは テーマ 機能は プラグイン
共有ボタンの 仕様が変更に！
プラグインを 差し替える だけで簡単！
汎用的な機能を プラグインにすれば メンテナンスも楽々!！
require()で 関数ファイルを読み込み functions.php theme-function.php require get_template_directory() . '/inc/theme-function.php'; テーマ固...
テーマ固有の機能を 追加したいときは PHPファイルにして 読み込みましょう
まとめ 見た目の設定は テーマで行おう サイトの機能や設定は プラグインで行おう
テーマと ライセンス 05
WordPressは GPLっていうけど
GPLってなに？
テーマを作ったら 公開しないとダメなの？
必ず無料にしないと いけないの？
利用者が自由にソフトウエアを 使えるように保証するライセンス GPLとは
GPLが保証する4つの自由 プログラムを実行する自由 プログラムを改変する自由 コピーを再配布する自由 プログラムを改良して配布する自由 0 3 2 1
とにかく ダメ！ 今よりいい プログラムに したらダメ！ 勝手に 改変したら ダメ！ えっちな サイトに 使ったら ダメ！ コピーして 配布したら ダメ！
困ったなあ・・・
使う人が自由に 使えるために
コピーレフト GPLのプログラムを改良したものを 再配布するときは必ずGPLに
GPLが 適用されるのは テーマを配布する ときです
WordPressの場合 WordPressが GPL
WordPressのコードを利用している テーマやプラグインのPHPファイルもGPL
Chocolatの場合 GPL PHP
PHP CSS JS GPL
100%GPL
GPLは ルール
100%GPLは 選択
まとめ
プラグインテリトリー テーマとライセンス テンプレートファイルと テンプレート階層 スタイルとスクリプト バリデーションとエスケープ
ポイントを おぼえて
すてきな テーマを 作ってください
ノンプログラマーのためのWordPressテーマ作成ステップアップ術
Upcoming SlideShare
Loading in …5
×

ノンプログラマーのためのWordPressテーマ作成ステップアップ術

2,484 views

Published on

2016年9月17日に開催されたWordCamp Tokyo 2016でのセッションスライドです。

Published in: Design
License: CC Attribution-NonCommercial-ShareAlike License
0 Comments
7 Likes
Statistics
Notes
no profile picture user

  • Be the first to comment

Show More
No Downloads
Views
Total views
2,484
On SlideShare
0
From Embeds
0
Number of Embeds
1,243
Actions
Shares
0
Downloads
4
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

ノンプログラマーのためのWordPressテーマ作成ステップアップ術

  1. 1. ノンプログラマーのための WordPressテーマ作成ステップアップ術 みにょん すたいる Mignon Style
  2. 2. Webデザイナー みにょんすたいる Mignon Style いまい みずえ WordPress公式ディレクトリ テーマ「Chocolat」 プラグイン「MS Custom Login」デベロッパー WordPressスターターテーマ「_s」コントリビューター Adobe BracketsのWordPress用コードヒントも作ってます！ http://mignonstyle.com/ @mignon_style mignonxstyle https://profiles.wordpress.org/mignonstyle
  3. 3. WordPressは2013年7月から
  4. 4. テーマ「 Chocolat 」 https://wordpress.org/themes/chocolat/
  5. 5. プラグイン「 MS Custom Login 」 https://wordpress.org/plugins/ms-custom-login/
  6. 6. WordPressスターターテーマ「 _s 」 http://underscores.me/
  7. 7. WordPressスターターテーマ「 _s 」 http://underscores.me/
  8. 8. あなたは WordPressの テーマを作ったことが ありますか？
  9. 9. 自分のブログの テーマを作ってます
  10. 10. 自社サイトの テーマを作ってます
  11. 11. クライアントワークの テーマを作ってます
  12. 12. その作り方は 推奨されるテーマの 作り方ですか？
  13. 13. 推 奨？
  14. 14. よくわからないけど ちゃんと動いてるから 大丈夫でしょ？
  15. 15. ちょっと 待ったあああ
  16. 16. 「よくわからないけど 」
  17. 17. 「ちゃんと動いてるから」
  18. 18. それで本当に 大丈夫ですか？
  19. 19. WordPressのコードには それぞれ意味があります
  20. 20. 大事なポイントを おさえて
  21. 21. 今よりちょっとだけ ステップアップ してみませんか？
  22. 22. テンプレートファイルと テンプレート階層 01
  23. 23. HTML+CSSで作成したサイトを
  24. 24. WordPresssにすると
  25. 25. ページがたくさんあっても
  26. 26. 共通部分は部品にして読み込み
  27. 27. テンプレートファイルの 種類や使い方が よくわからない！
  28. 28. twentysixteenの テーマの構成を 見てみよう！
  29. 29. テーマに 必要なファイルは この3つ！
  30. 30. 共通部分は ファイルを分けて 読み込みます
  31. 31. <?php get_header(); ?> <?php if ( have_posts() ) : ?> <?php while ( have_posts() ) : the_post(); get_template_part( 'template-parts/content', get_post_format() ); endwhile; the_posts_pagination( array( 'prev_text' => __( 'Previous page', 'twentysixteen' ), 'next_text' => __( 'Next page', 'twentysixteen' ), ) ); else : get_template_part( 'template-parts/content', 'none' ); endif; ?> <?php get_sidebar(); ?> <?php get_footer(); ?> header.phpを読み込み sidebar.phpを読み込み footer.phpを読み込み index.php
  32. 32. コンテンツの 表示もファイルを わけてます
  33. 33. index.php <?php get_header(); ?> <?php if ( have_posts() ) : ?> <?php while ( have_posts() ) : the_post(); get_template_part( 'template-parts/content', get_post_format() ); endwhile; the_posts_pagination( array( 'prev_text' => __( 'Previous page', 'twentysixteen' ), 'next_text' => __( 'Next page', 'twentysixteen' ), ) ); else : get_template_part( 'template-parts/content', 'none' ); endif; ?> <?php get_sidebar(); ?> <?php get_footer(); ?>
  34. 34. ループの中で表示する 内容を記載 get_post_format()で 画像や動画などの 投稿フォーマットを 取得！
  35. 35. <?php get_template_part(); ?> ヘッダー・サイドバー・フッター以外の テンプレートパーツを読み込む <?php // content.phpを読み込む get_template_part( 'content' ); // content-single.phpを読み込む get_template_part( 'content', 'single' ); // partials/content-page.phpを読み込む get_template_part( 'partials/content', 'page' ); ?>
  36. 36. 基本的な テンプレート ファイルです
  37. 37. テーマを構成するテンプレートファイル WordPress Codex 日本語版 http://wpdocs.sourceforge.jp/テーマの作成
  38. 38. 読み込まれるテンプレートファイルの順番 WordPress Codex 日本語版 https://wpdocs.osdn.jp/テンプレート階層
  39. 39. 該当するファイルが ないときはすべて index.phpを使用
  40. 40. テンプレート階層の概観図
  41. 41. 関数ファイルは functions.phpから 読み込んでます
  42. 42. /** * Twenty Sixteen only works in WordPress 4.4 or later. */ if ( version_compare( $GLOBALS['wp_version'], '4.4-alpha', '<' ) ) { require get_template_directory() . '/inc/back-compat.php'; } /** * Custom template tags for this theme. */ require get_template_directory() . '/inc/template-tags.php'; /** * Customizer additions. */ require get_template_directory() . '/inc/customizer.php'; require()で 関数ファイルを読み込み ファイルを1回だけ 読み込めばいいときは require_once()を 使います
  43. 43. テンプレートファイルの 種類と役割を覚えよう テンプレート階層の ルールを覚えよう ファイルを読み込む 方法を覚えよう まとめ
  44. 44. スタイルと スクリプト 02
  45. 45. CSSやjQueryが うまく反映されない！
  46. 46. CSSやjQueryを ヘッダーやフッターに 直書きしていませんか？
  47. 47. スタイルシートの読み込み header.php <head> <link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>"> <link rel="stylesheet" href="<?php bloginfo( 'url' ); ?>/css/common.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Quicksand"> <?php wp_head(); ?> </head>
  48. 48. <head>内にCSSを直書きするのは非推奨です
  49. 49. bloginfo( 'stylesheet_url' )は非推奨です bloginfo( 'url' )は非推奨です
  50. 50. スタイルシートの読み込み functions.php function themeslug_enqueue_style() { wp_enqueue_style( 'themeslug-style', get_stylesheet_uri() ); wp_enqueue_style( 'themeslug-common', get_template_directory_uri() . '/css/common.css', array( 'themeslug-style' ) ); wp_enqueue_style( 'themeslug-gfont', '//fonts.googleapis.com/css?family=Quicksand' ); } add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_style' );
  51. 51. CSSの読み込みは functions.phpに 記述します
  52. 52. wp_enqueue_scriptsフックを使う
  53. 53. get_stylesheet_uri()を使う get_template_directory_uri()を使う
  54. 54. wp_enqueue_style()でCSSを追加 ハンドル名で読み込む順番を指定 「 https: 」は省略
  55. 55. スクリプトの読み込み footer.php <body> <?php wp_footer(); ?> <script src="https://code.jquery.com/jquery-3.1.0.min.js"> </script> <script src="<?php bloginfo( 'url' ); ?>/js/slider.js"> </script> <script src="<?php bloginfo( 'url' ); ?>/js/common.js"> </script> </body>
  56. 56. <body>内にスクリプトを直書きするのは非推奨です
  57. 57. bloginfo( 'url' )は非推奨です
  58. 58. スクリプトの読み込み functions.php function themeslug_enqueue_script() { wp_enqueue_script( 'themeslug-slider', get_template_directory_uri() . '/js/slider.js', array( 'jquery' ), null, true ); wp_enqueue_script( 'themeslug-common', get_template_directory_uri() . '/js/common.js', array( 'jquery' ), null, true ); } add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_script' );
  59. 59. スクリプトの 読み込みは functions.phpに 記述します
  60. 60. wp_enqueue_scriptsフックを使う
  61. 61. get_template_directory_uri()を使う
  62. 62. trueにするとwp_footerで出力される ハンドル名で 読み込む順番を指定 jQueryが先に 読み込まれる
  63. 63. WordPressのデフォルトスクリプト WordPressには jQueryやjQuery UI などのスクリプトが デフォルトで 入っています
  64. 64. WordPress本体やプラグインの CSSやスクリプトを削除する場合 function theme_deregister_script() { // プラグインで使用しているCSSを削除 wp_deregister_style( 'wp-pagenavi' ); // WordPressのjQueryを削除 wp_deregister_script( 'jquery' ); } add_action( 'wp_enqueue_scripts', 'theme_deregister_script' ); 削除するCSSや スクリプトの ハンドル名を指定
  65. 65. 自作のスクリプトでjQueryを使用する場合 jQuery( function( $ ) { // コードを記述 } ); WordPressの jQueryは 他のライブラリと $関数が衝突しない ようになってます カプセル化すると 自作のスクリプトでも$が使えます ( function( $ ) { // コードを記述 } ) ( jQuery );
  66. 66. まとめ WordPressのデフォルトの スクリプトを使おう スタイルとスクリプトの読み込みは wp_enqueue_scriptsフックを使おう
  67. 67. バリデーションと エスケープ 03
  68. 68. カスタマイザーに データを入力したら 表示がおかしくなった！
  69. 69. バリデーションと エスケープは してますか？
  70. 70. バリデーション // タイトルから無効な文字を除外する sanitize_title( ); // textfieldタグの値をサニタイズする sanitize_text_field( ); // '#'のついた16進数のカラー値を   サニタイズする sanitize_hex_color( ); // '#'のついていない16進数の   カラー値をサニタイズする sanitize_hex_color_no_hash( ); // メールアドレスから無効な文字を   除外する sanitize_email( ); 入力されたデータが正しいものか確認する カスタマイザーの サニタイズのときは Customizer APIの コールバック関数を 使用します
  71. 71. // HTMLタグをエスケープ esc_html( ); // HTMLタグ属性をエスケープ esc_attr( ); // URLを無害化する esc_url( ); // 数値を負ではない整数に変換する absint( ); // textareaタグの値をエスケープ esc_textarea( ); // 文字列をインライン   JavaScript向けにエスケープ esc_js( ); エスケープ 表示するデータを規則にそったものに置き換える 他にも いろいろ あります！
  72. 72. // 特定のタグのみ許可する $allowed_html = array( 'a' => array( 'href' => array(), 'title' => array() ), 'br' => array(), 'em' => array(), ); wp_kses( $content, $allowed_html, $allowed_protocols ); // 投稿や固定ページで許可される   HTMLタグのみを使用する wp_kses_post( ); // コメントで許可されるHTMLタグ   HTMLタグのみを使用する wp_kses_data( ); エスケープ 指定したHTMLタグだけ許可する場合
  73. 73. バリデーションとエスケープしないと
  74. 74. データベースが 壊れる可能性
  75. 75. 表示が おかしくなる 可能性
  76. 76. バリデーションとエスケープすると
  77. 77. 入力されたデータが 正しいものか確認する
  78. 78. 表示するデータを 規則にそったものに 置き換える
  79. 79. 表示するデータを 規則にそったものに 置き換える 値を echoする タイミングで エスケープ します
  80. 80. WordPressの関数を 使わずにSQLで直接取得 すればいいんじゃない？
  81. 81. セキュリティ対策を 忘れずに！ SQLで 取得するときは セキュリティ対策されている WordPressの関数を 使うのがオススメです！
  82. 82. まとめ 入力されたデータは バリデーションしよう echoのときに エスケープしよう WordPressで用意された 関数を使おう
  83. 83. プラグイン テリトリー 04
  84. 84. サイトリニューアルしたら アクセス解析のコードが なくなっちゃった！
  85. 85. プラグインの機能を テーマに入れてませんか？
  86. 86. Analyticsのスクリプト SEOのオプション SNSの共有ボタンやリンク ショートコード カスタム投稿・カスタムタクソノミー
  87. 87. プラグイン テリトリー プラグイン テリトリー
  88. 88. テーマに機能が入っていると
  89. 89. テーマに 入れ忘れてる！
  90. 90. Analyticsが なくなってる！！
  91. 91. テーマに機能が入っていると 共有ボタンの 仕様が変更に！
  92. 92. 修正が 終わらないよ∼
  93. 93. デザインは テーマ 機能は プラグイン
  94. 94. 共有ボタンの 仕様が変更に！
  95. 95. プラグインを 差し替える だけで簡単！
  96. 96. 汎用的な機能を プラグインにすれば メンテナンスも楽々!！
  97. 97. require()で 関数ファイルを読み込み functions.php theme-function.php require get_template_directory() . '/inc/theme-function.php'; テーマ固有の機能
  98. 98. テーマ固有の機能を 追加したいときは PHPファイルにして 読み込みましょう
  99. 99. まとめ 見た目の設定は テーマで行おう サイトの機能や設定は プラグインで行おう
  100. 100. テーマと ライセンス 05
  101. 101. WordPressは GPLっていうけど
  102. 102. GPLってなに？
  103. 103. テーマを作ったら 公開しないとダメなの？
  104. 104. 必ず無料にしないと いけないの？
  105. 105. 利用者が自由にソフトウエアを 使えるように保証するライセンス GPLとは
  106. 106. GPLが保証する4つの自由 プログラムを実行する自由 プログラムを改変する自由 コピーを再配布する自由 プログラムを改良して配布する自由 0 3 2 1
  107. 107. とにかく ダメ！ 今よりいい プログラムに したらダメ！ 勝手に 改変したら ダメ！ えっちな サイトに 使ったら ダメ！ コピーして 配布したら ダメ！
  108. 108. 困ったなあ・・・
  109. 109. 使う人が自由に 使えるために
  110. 110. コピーレフト GPLのプログラムを改良したものを 再配布するときは必ずGPLに
  111. 111. GPLが 適用されるのは テーマを配布する ときです
  112. 112. WordPressの場合 WordPressが GPL
  113. 113. WordPressのコードを利用している テーマやプラグインのPHPファイルもGPL
  114. 114. Chocolatの場合 GPL PHP
  115. 115. PHP CSS JS GPL
  116. 116. 100%GPL
  117. 117. GPLは ルール
  118. 118. 100%GPLは 選択
  119. 119. まとめ
  120. 120. プラグインテリトリー テーマとライセンス テンプレートファイルと テンプレート階層 スタイルとスクリプト バリデーションとエスケープ
  121. 121. ポイントを おぼえて
  122. 122. すてきな テーマを 作ってください

×