ノンプログラマーのためのWordPressテーマ作成ステップアップ術
•
14 j'aime•81,964 vues
2016年9月17日に開催されたWordCamp Tokyo 2016でのセッションスライドです。
Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
En vedette (18)
Similaire à ノンプログラマーのためのWordPressテーマ作成ステップアップ術
Similaire à ノンプログラマーのためのWordPressテーマ作成ステップアップ術 (20)
ノンプログラマーのためのWordPressテーマ作成ステップアップ術
- 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
- 4. テーマ「 Chocolat 」 https://wordpress.org/themes/chocolat/
- 5. プラグイン「 MS Custom Login 」 https://wordpress.org/plugins/ms-custom-login/
- 6. WordPressスターターテーマ「 _s 」 http://underscores.me/
- 7. WordPressスターターテーマ「 _s 」 http://underscores.me/
- 10. 自社サイトの テーマを作ってます
- 13. 推 奨？
- 15. ちょっと 待ったあああ
- 16. 「よくわからないけど 」
- 17. 「ちゃんと動いてるから」
- 18. それで本当に 大丈夫ですか？
- 20. 大事なポイントを おさえて
- 24. WordPresssにすると
- 25. ページがたくさんあっても
- 26. 共通部分は部品にして読み込み
- 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
- 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(); ?>
- 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' ); ?>
- 37. テーマを構成するテンプレートファイル WordPress Codex 日本語版 http://wpdocs.sourceforge.jp/テーマの作成
- 38. 読み込まれるテンプレートファイルの順番 WordPress Codex 日本語版 https://wpdocs.osdn.jp/テンプレート階層
- 40. テンプレート階層の概観図
- 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()を 使います
- 44. スタイルと スクリプト 02
- 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>
- 49. bloginfo( 'stylesheet_url' )は非推奨です bloginfo( 'url' )は非推奨です
- 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' );
- 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>
- 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' );
- 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. 自作のスクリプトでjQueryを使用する場合 jQuery( function( $ ) { // コードを記述 } ); WordPressの jQueryは 他のライブラリと $関数が衝突しない ようになってます カプセル化すると 自作のスクリプトでも$が使えます ( function( $ ) { // コードを記述 } ) ( jQuery );
- 70. バリデーション // タイトルから無効な文字を除外する sanitize_title( ); // textfieldタグの値をサニタイズする sanitize_text_field( ); // '#'のついた16進数のカラー値を サニタイズする sanitize_hex_color( ); // '#'のついていない16進数の カラー値をサニタイズする sanitize_hex_color_no_hash( ); // メールアドレスから無効な文字を 除外する sanitize_email( ); 入力されたデータが正しいものか確認する カスタマイザーの サニタイズのときは Customizer APIの コールバック関数を 使用します
- 71. // HTMLタグをエスケープ esc_html( ); // HTMLタグ属性をエスケープ esc_attr( ); // URLを無害化する esc_url( ); // 数値を負ではない整数に変換する absint( ); // textareaタグの値をエスケープ esc_textarea( ); // 文字列をインライン JavaScript向けにエスケープ esc_js( ); エスケープ 表示するデータを規則にそったものに置き換える 他にも いろいろ あります！
- 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タグだけ許可する場合
- 74. データベースが 壊れる可能性
- 75. 表示が おかしくなる 可能性
- 76. バリデーションとエスケープすると
- 83. プラグイン テリトリー 04
- 88. テーマに機能が入っていると
- 89. テーマに 入れ忘れてる！
- 92. 修正が 終わらないよ∼
- 95. 共有ボタンの 仕様が変更に！
- 98. require()で 関数ファイルを読み込み functions.php theme-function.php require get_template_directory() . '/inc/theme-function.php'; テーマ固有の機能
- 101. テーマと ライセンス 05
- 102. WordPressは GPLっていうけど
- 103. GPLってなに？
- 104. テーマを作ったら 公開しないとダメなの？
- 105. 必ず無料にしないと いけないの？
- 109. 困ったなあ・・・
- 110. 使う人が自由に 使えるために
- 115. Chocolatの場合 GPL PHP
- 116. PHP CSS JS GPL
- 117. 100%GPL
- 118. GPLは ルール
- 119. 100%GPLは 選択
- 120. まとめ
- 122. ポイントを おぼえて
- 123. すてきな テーマを 作ってください