Upload
mignon-style
View
18.573
Download
3
Embed Size (px)
Citation preview
ノンプログラマーのためのWordPressテーマ作成ステップアップ術
みにょん すたいる Mignon Style
Webデザイナーみにょんすたいる Mignon Style
いまい みずえWordPress公式ディレクトリ テーマ「Chocolat」プラグイン「MS Custom Login」デベロッパー
WordPressスターターテーマ「_s」コントリビューターAdobe BracketsのWordPress用コードヒントも作ってます!
http://mignonstyle.com/@mignon_stylemignonxstyle
https://profiles.wordpress.org/mignonstyle
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( '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
コンテンツの表示もファイルをわけてます
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(); ?>
ループの中で表示する内容を記載
get_post_format()で画像や動画などの投稿フォーマットを
取得!
<?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' );?>
基本的なテンプレートファイルです
テーマを構成するテンプレートファイル
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', '<' ) ) { 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()を
使います
テンプレートファイルの種類と役割を覚えよう
テンプレート階層のルールを覚えよう
ファイルを読み込む方法を覚えよう
まとめ
スタイルとスクリプト
02
CSSやjQueryがうまく反映されない!
CSSやjQueryをヘッダーやフッターに直書きしていませんか?
スタイルシートの読み込み
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>
<head>内にCSSを直書きするのは非推奨です
bloginfo( 'stylesheet_url' )は非推奨です
bloginfo( 'url' )は非推奨です
スタイルシートの読み込み
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' );
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> <script src="<?php bloginfo( 'url' ); ?>/js/slider.js"> </script> <script src="<?php bloginfo( 'url' ); ?>/js/common.js"> </script></body>
<body>内にスクリプトを直書きするのは非推奨です
bloginfo( 'url' )は非推奨です
スクリプトの読み込み
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' );
スクリプトの読み込みは
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-pagenavi' );
// WordPressのjQueryを削除 wp_deregister_script( 'jquery' ); }add_action( 'wp_enqueue_scripts', 'theme_deregister_script' );
削除するCSSやスクリプトの
ハンドル名を指定
自作のスクリプトでjQueryを使用する場合
jQuery( function( $ ) { // コードを記述} );
WordPressのjQueryは
他のライブラリと$関数が衝突しないようになってます
カプセル化すると自作のスクリプトでも$が使えます
( function( $ ) { // コードを記述} ) ( jQuery );
まとめ
WordPressのデフォルトのスクリプトを使おう
スタイルとスクリプトの読み込みはwp_enqueue_scriptsフックを使おう
バリデーションとエスケープ
03
カスタマイザーにデータを入力したら表示がおかしくなった!
バリデーションとエスケープはしてますか?
バリデーション
// タイトルから無効な文字を除外するsanitize_title( );
// textfieldタグの値をサニタイズするsanitize_text_field( );
// '#'のついた16進数のカラー値を サニタイズするsanitize_hex_color( );
// '#'のついていない16進数の カラー値をサニタイズするsanitize_hex_color_no_hash( );
// メールアドレスから無効な文字を 除外するsanitize_email( );
入力されたデータが正しいものか確認する
カスタマイザーのサニタイズのときはCustomizer APIのコールバック関数を使用します
// HTMLタグをエスケープesc_html( );
// HTMLタグ属性をエスケープesc_attr( );
// URLを無害化するesc_url( );
// 数値を負ではない整数に変換するabsint( );
// textareaタグの値をエスケープesc_textarea( );
// 文字列をインライン JavaScript向けにエスケープesc_js( );
エスケープ
表示するデータを規則にそったものに置き換える
他にもいろいろあります!
// 特定のタグのみ許可する$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タグだけ許可する場合
バリデーションとエスケープしないと
データベースが壊れる可能性
表示がおかしくなる可能性
バリデーションとエスケープすると
入力されたデータが正しいものか確認する
表示するデータを規則にそったものに置き換える
表示するデータを規則にそったものに置き換える
値を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は選択
まとめ
プラグインテリトリー
テーマとライセンス
テンプレートファイルとテンプレート階層
スタイルとスクリプト
バリデーションとエスケープ
ポイントをおぼえて
すてきなテーマを
作ってください