![/**
* 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()を
使います](https://image.slidesharecdn.com/wordpress-stepuptips-160928041617/75/wordpress-42-2048.jpg?cb=1666249101)
ノンプログラマーのためのWordPressテーマ作成ステップアップ術
•14 likes•81,911 views
Report
Share
Download to read offline
2016年9月17日に開催されたWordCamp Tokyo 2016でのセッションスライドです。
More Related Content
What's hot
What's hot(20)
Viewers also liked
Viewers also liked(18)
Similar to ノンプログラマーのためのWordPressテーマ作成ステップアップ術
Similar to ノンプログラマーのための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. すてきな テーマを 作ってください