123

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

Embed Size (px)

Citation preview

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

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

みにょん すたいる Mignon Style

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

Webデザイナーみにょんすたいる Mignon Style

いまい みずえWordPress公式ディレクトリ テーマ「Chocolat」プラグイン「MS Custom Login」デベロッパー

WordPressスターターテーマ「_s」コントリビューターAdobe BracketsのWordPress用コードヒントも作ってます!

http://mignonstyle.com/@mignon_stylemignonxstyle

https://profiles.wordpress.org/mignonstyle

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

WordPressは2013年7月から

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

テーマ「 Chocolat 」 https://wordpress.org/themes/chocolat/

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

プラグイン「 MS Custom Login 」 https://wordpress.org/plugins/ms-custom-login/

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

WordPressスターターテーマ「 _s 」 http://underscores.me/

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

WordPressスターターテーマ「 _s 」 http://underscores.me/

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

あなたはWordPressの

テーマを作ったことがありますか?

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

自分のブログのテーマを作ってます

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

自社サイトのテーマを作ってます

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

クライアントワークのテーマを作ってます

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

その作り方は推奨されるテーマの作り方ですか?

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

推奨?

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

よくわからないけどちゃんと動いてるから大丈夫でしょ?

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

ちょっと待ったあああ

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

「よくわからないけど」

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

「ちゃんと動いてるから」

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

それで本当に 大丈夫ですか?

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

WordPressのコードにはそれぞれ意味があります

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

大事なポイントをおさえて

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

今よりちょっとだけステップアップ してみませんか?

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

テンプレートファイルとテンプレート階層

01

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

HTML+CSSで作成したサイトを

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

WordPresssにすると

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

ページがたくさんあっても

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

共通部分は部品にして読み込み

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

テンプレートファイルの種類や使い方がよくわからない!

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

twentysixteenのテーマの構成を見てみよう!

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

テーマに必要なファイルはこの3つ!

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

共通部分はファイルを分けて読み込みます

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

<?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

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

コンテンツの表示もファイルをわけてます

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

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(); ?>

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

ループの中で表示する内容を記載

get_post_format()で画像や動画などの投稿フォーマットを

取得!

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

<?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' );?>

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

基本的なテンプレートファイルです

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

テーマを構成するテンプレートファイル

WordPress Codex 日本語版 http://wpdocs.sourceforge.jp/テーマの作成

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

読み込まれるテンプレートファイルの順番

WordPress Codex 日本語版 https://wpdocs.osdn.jp/テンプレート階層

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

該当するファイルがないときはすべてindex.phpを使用

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

テンプレート階層の概観図

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

関数ファイルはfunctions.phpから読み込んでます

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

/** * 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()を

使います

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

テンプレートファイルの種類と役割を覚えよう

テンプレート階層のルールを覚えよう

ファイルを読み込む方法を覚えよう

まとめ

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

スタイルとスクリプト

02

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

CSSやjQueryがうまく反映されない!

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

CSSやjQueryをヘッダーやフッターに直書きしていませんか?

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

スタイルシートの読み込み

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>

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

<head>内にCSSを直書きするのは非推奨です

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

bloginfo( 'stylesheet_url' )は非推奨です

bloginfo( 'url' )は非推奨です

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

スタイルシートの読み込み

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' );

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

CSSの読み込みはfunctions.phpに記述します

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

wp_enqueue_scriptsフックを使う

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

get_stylesheet_uri()を使う

get_template_directory_uri()を使う

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

wp_enqueue_style()でCSSを追加

ハンドル名で読み込む順番を指定

「 https:」は省略

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

スクリプトの読み込み

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>

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

<body>内にスクリプトを直書きするのは非推奨です

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

bloginfo( 'url' )は非推奨です

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

スクリプトの読み込み

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' );

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

スクリプトの読み込みは

functions.phpに記述します

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

wp_enqueue_scriptsフックを使う

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

get_template_directory_uri()を使う

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

trueにするとwp_footerで出力される

ハンドル名で読み込む順番を指定

jQueryが先に読み込まれる

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

WordPressのデフォルトスクリプト

WordPressにはjQueryやjQuery UIなどのスクリプトがデフォルトで入っています

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

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やスクリプトの

ハンドル名を指定

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

自作のスクリプトでjQueryを使用する場合

jQuery( function( $ ) { // コードを記述} );

WordPressのjQueryは

他のライブラリと$関数が衝突しないようになってます

カプセル化すると自作のスクリプトでも$が使えます

( function( $ ) { // コードを記述} ) ( jQuery );

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

まとめ

WordPressのデフォルトのスクリプトを使おう

スタイルとスクリプトの読み込みはwp_enqueue_scriptsフックを使おう

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

バリデーションとエスケープ

03

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

カスタマイザーにデータを入力したら表示がおかしくなった!

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

バリデーションとエスケープはしてますか?

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

バリデーション

// タイトルから無効な文字を除外するsanitize_title( );

// textfieldタグの値をサニタイズするsanitize_text_field( );

// '#'のついた16進数のカラー値を  サニタイズするsanitize_hex_color( );

// '#'のついていない16進数の  カラー値をサニタイズするsanitize_hex_color_no_hash( );

// メールアドレスから無効な文字を  除外するsanitize_email( );

入力されたデータが正しいものか確認する

カスタマイザーのサニタイズのときはCustomizer APIのコールバック関数を使用します

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

// HTMLタグをエスケープesc_html( );

// HTMLタグ属性をエスケープesc_attr( );

// URLを無害化するesc_url( );

// 数値を負ではない整数に変換するabsint( );

// textareaタグの値をエスケープesc_textarea( );

// 文字列をインライン  JavaScript向けにエスケープesc_js( );

エスケープ

表示するデータを規則にそったものに置き換える

他にもいろいろあります!

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

// 特定のタグのみ許可する$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タグだけ許可する場合

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

バリデーションとエスケープしないと

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

データベースが壊れる可能性

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

表示がおかしくなる可能性

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

バリデーションとエスケープすると

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

入力されたデータが正しいものか確認する

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

表示するデータを規則にそったものに置き換える

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

表示するデータを規則にそったものに置き換える

値をechoするタイミングでエスケープします

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

WordPressの関数を使わずにSQLで直接取得すればいいんじゃない?

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

セキュリティ対策を忘れずに!

SQLで取得するときは

セキュリティ対策されているWordPressの関数を使うのがオススメです!

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

まとめ

入力されたデータはバリデーションしよう

echoのときにエスケープしよう

WordPressで用意された関数を使おう

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

プラグインテリトリー

04

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

サイトリニューアルしたらアクセス解析のコードがなくなっちゃった!

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

プラグインの機能をテーマに入れてませんか?

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

Analyticsのスクリプト

SEOのオプション

SNSの共有ボタンやリンク

ショートコード

カスタム投稿・カスタムタクソノミー

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

プラグイン テリトリープラグイン テリトリー

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

テーマに機能が入っていると

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

テーマに入れ忘れてる!

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

Analyticsが なくなってる!!

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

テーマに機能が入っていると

共有ボタンの仕様が変更に!

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

修正が終わらないよ~

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

デザインはテーマ

機能はプラグイン

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

共有ボタンの仕様が変更に!

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

プラグインを差し替えるだけで簡単!

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

汎用的な機能をプラグインにすればメンテナンスも楽々!!

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

require()で関数ファイルを読み込み

functions.php theme-function.php

require get_template_directory() . '/inc/theme-function.php';

テーマ固有の機能

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

テーマ固有の機能を追加したいときはPHPファイルにして読み込みましょう

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

まとめ

見た目の設定はテーマで行おう

サイトの機能や設定はプラグインで行おう

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

テーマとライセンス

05

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

WordPressはGPLっていうけど

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

GPLってなに?

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

テーマを作ったら公開しないとダメなの?

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

必ず無料にしないといけないの?

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

利用者が自由にソフトウエアを使えるように保証するライセンス

GPLとは

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

GPLが保証する4つの自由

プログラムを実行する自由プログラムを改変する自由コピーを再配布する自由プログラムを改良して配布する自由

0

3

2

1

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

とにかくダメ!

今よりいいプログラムにしたらダメ!

勝手に改変したらダメ!

えっちなサイトに使ったらダメ!

コピーして配布したらダメ!

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

困ったなあ・・・

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

使う人が自由に使えるために

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

コピーレフト

GPLのプログラムを改良したものを再配布するときは必ずGPLに

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

GPLが適用されるのはテーマを配布する

ときです

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

WordPressの場合

WordPressがGPL

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

WordPressのコードを利用しているテーマやプラグインのPHPファイルもGPL

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

Chocolatの場合

GPL

PHP

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

PHP CSS JS

GPL

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

100%GPL

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

GPLはルール

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

100%GPLは選択

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

まとめ

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

プラグインテリトリー

テーマとライセンス

テンプレートファイルとテンプレート階層

スタイルとスクリプト

バリデーションとエスケープ

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

ポイントをおぼえて

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

すてきなテーマを

作ってください