© wordbonch.org
落とし穴に落ちないためのWordPress基礎知識
WordBench宮崎
ver.1.0.0【WordBench宮崎第10回勉強会】
© wordbonch.org
自己紹介
1
中山 佳重(なかやま よしえ)
株式会社アラタナ
マーケティンググループ
制作チーム
コーディング・JavaScript
© wordbonch.org
今日話すWordPressについて
2
Ver.
4.3
「サイトアイコン」機能追加 強固なパスワード提案
以下ページより抜粋
https://ja.wordpress.org/2015/08/19/billie/
カスタマイザーにメニュー編集機能
© wordbonch.org 3
今日話すWordPressについて
世界中のボランティア開発者のコミュニティ活動が活発なので、バージョンアップが頻繁
以下ページより抜粋
https://ja.wordpress.org/releases/#latest
バージョン リリース日
4.3 2015-08-19
4.2.4 2015-08-06
4.2.3 2015-07-28
4.2.2 2015-05-08
4.2.1 2015-04-28
早いときで1ヶ月スパン
© wordbonch.org 4
今日話すWordPressについて
和製のわぷーが海外で人気!!
詳しくは...「わぷーアーカイブ」 http://jawordpressorg.github.io/wapuu/
© wordbonch.org
本日のお題
5
サイト構築で
最低でもここは守ってほしい
基礎知識
運営時に困らないように
© wordbonch.org
落とし穴 その1
6
落とし穴 その1
© wordbonch.org
落とし穴 その1
7
外注先にWordPressサイト
構築を依頼。納品されてきた
サイトのテンプレートの
ソースを見ると…
例えばのシチュエーション
© wordbonch.org
落とし穴 その1
8
<?php get_header(); ?>
<main id=" main" class="site-main">
<?php if ( is_home() &&! is_front_page()) : ?>
<header>
<h1 class="page-title screen-reader-text"><?php single_post_title(); ?></h1>
</header >
<?php endif; ?>
<?php
// るーぷ
while( have_posts()) : the_post();
get_template_part( 'content', get_post_format() );
endwhile ; endif; ?>
</main >
<?php get_footer(); ?>
• インデントが揃っていない
• コメントが適当
• すべての行がくっついている
© wordbonch.org
落とし穴 その1
9
ソースが汚い・・・。
(´・ω・`)
© wordbonch.org
落とし穴 その1
10
WordPressに
コーディング規約があるの
知っていますか?!?
http://wpdocs.osdn.jp/WordPress_コーディング基準
http://codex.wordpress.org/WordPress_Coding_Standards
※英語版の方が最新
© wordbonch.org
落とし穴 その1
11
コーディング規約の利点
書き方が統一され、他の人がコードを触るときも
コードが見やすくなり、カスタマイズしやすくなる。
=難解なコードの時よりも、コードの内容を把握しやすくなり、
熟読したあとカスタマイズできるので、
変なバグを発生しにくくなる。
コードを読む時間も短縮される。
=保守性が良い。(メンテナンス性UP)
© wordbonch.org
落とし穴 その1
12
WordPressコーディング規約の例
• インデントはタブで、縦位置の調整はスペースで行う。
• インデントの位置はきちんと合わせる。
<?php if ( is_home() && ! is_front_page() ) : ?>
[ tab ]<header>
[ tab ] [ tab ]<h1 class="page-title screen-reader-text"><?php single_post_title(); ?></h1>
[ tab ]</header>
<?php endif; ?>
© wordbonch.org
落とし穴 その1
13
WordPress命名規則の例
ファイル名は小文字で単語と単語をハイフンでつなぐ
my-template-name.php
© wordbonch.org
落とし穴 その2
14
落とし穴 その2
© wordbonch.org
落とし穴 その2
15
引き続き
外注先から納品されたソースを
見ていると、一部分にこんな記述が。
© wordbonch.org
落とし穴 その2
16
エスケープされていない!?
ガーー∑(゚д゚lll)ーーン
echo get_bloginfo( 'description', 'display' );
© wordbonch.org
落とし穴 その2
17
エスケープとは
要するに、
<script></script>
特殊文字に変えて、スクリプトなどが発動しないように無害化する。
&lt;script&gt;&lt;/script&gt;
© wordbonch.org
落とし穴 その2
18
WordPressのエスケープ
詳しくは...
http://wpdocs.osdn.jp/Data_Validation
<h4><?php echo esc_html( $title ); ?></h4>
HTMLのエスケープ esc_html()
<ul class="<?php echo esc_attr( $stored_class ); ?>">
HTML属性のエスケープ esc_attr()
© wordbonch.org
落とし穴 その2
19
WordPressのエスケープ
<a href=“<?php echo esc_url( $url ); ?>”>HOME</a>
URLのエスケープ esc_url()
※他に、textareaやjavascriptに値を渡したい時用のエスケープ関数があります。
詳しくは...
http://wpdocs.osdn.jp/Data_Validation
© wordbonch.org
落とし穴 その3
20
落とし穴 その3
© wordbonch.org
落とし穴 その3
21
外注先から納品物の説明を
受けている時、
こんなフレーズを言われる
© wordbonch.org
落とし穴 その3
22
Σ(lll・ω・) 】
絶っ対にWordPressを
アップデートしないで
くださいね!!!!!
崩れるんで!
© wordbonch.org
落とし穴 その3
23
WordPress
アップデートしないでくださいって
どういうことですか?
© wordbonch.org
落とし穴 その3
24
アップデートしないでくださいって
どういうことですか!?!?
お願いというか、脅し…
© wordbonch.org
落とし穴 その3
25
なぜアップデートが必要か?
1. セキュリティの向上(脆弱性の修正)
2.機能追加
© wordbonch.org
落とし穴 その3
26
アップデートしても大丈夫なように①
直接テーマ(twenty fifteenなど)を触らない。
テーマを新規作成する。
更新時に、上書きされてしまいます!
※「小テーマで作れば、アップデートできる!」という話もあり
ますが、親テーマが無いと動かないという依存性がある点、
また、セキュリティ面を考えると、親テーマのセキュリティが担
保されているべき(公式テーマでは、最新のものしかセキュリテ
ィは担保されていません)であるため、
依存しない独自のテーマを作成したほうが望ましいです。
© wordbonch.org
落とし穴 その3
27
アップデートしても大丈夫なように②
ディレクトリ構造を理解する。
© wordbonch.org
WordPressの基本階層は以下のとおりです。大きく3つのフォルダがあります。
WordPressの基本構造を理解(主要ディレクトリ)
28
/wp-admin/
管理画面で使用するファイルあれこれがある。基本触らない。
/wp-content/
基本、このフォルダの中をさわりましょう。
/wp-include/
WP全体で使用するJSやCSS、コアファイルがある。これも基本触らない。
/
ルート直下は、ログイン関連やRSS関連、コメント、トラックバック、メール送受信用の
ファイルなどなど
※これまでのWordBench宮崎勉強会のスライドより抜粋。
© wordbonch.org
wp-contentフォルダのさらに中のお話。
WordPressの基本構造を理解(wp-contentフォルダ)
29
/wp-content/
/wp-content/language/
言語パック
/wp-content/plugin/
インストールしたプラグインが保存されている場所
/wp-content/themes/
各種テーマのテンプレートが保存されている場所
/wp-content/upgrade/
バージョンアップ時に使用。
/wp-content/upload/
管理画面からアップロードしたメディアファイルが保存されている場所。
年→月でいい感じに保存されています。
※これまでのWordBench宮崎勉強会のスライドより抜粋。
© wordbonch.org
落とし穴 その4
30
落とし穴 その4
© wordbonch.org
落とし穴 その4
31
引き続き、できあがったサイトで
検索してみたら、あれ?…
検索
© wordbonch.org
落とし穴 その4
32
検索してもなにも結果が
出るどころか真っ白に!
ヽ(゚Д゚三。Д。)ノ アワワワワ
© wordbonch.org
落とし穴 その4
33
テーマのテンプレート構造を把握する
こうならないためには…
© wordbonch.org
WordPressテーマを新規作成
34
該当ページ 優先度
TOPページ
index.php
home.php
月別ページ
archive.php
date.php
カテゴリーページ category.php category-id.php category-slug.php
タグページ tag.php tag-id.php tag-slug.php
タクソノミーページ taxonomy.php taxonomy-tax.php taxonomy-tax-term.php
投稿タイプページ archive-posttype.php
ユーザーページ author.php author-id.php author-nicename.php
メディアページ
single.php
attachment.php MIME_type.php
記事ページ single-posttype.php
固定ページ page.php page-id.php page-slug.php custom.php
検索結果ページ search.php
404ページ 404.php
低 高
第3回 WordPressテーマ作成 (p.17〜18)参照
https://www.slideshare.net/miiitaka/word-press-32692859
© wordbonch.org
落とし穴 その5
35
落とし穴 その5
ラスト!
© wordbonch.org
落とし穴 その5
36
さらに、
管理画面を見ていたら…
© wordbonch.org
落とし穴 その5
37
何か、あやしいプラグインが多数…(・×・;)
※すべて架空のもの(フィクション)です。
© wordbonch.org
落とし穴 その5
38
そのプラグイン大丈夫?
プラグインはとてつもない数で、ピンからキリまであります。
プラグインは以下の基準を参考に選びましょう。
(すべて当てはまる必要はありません。
• 作っている人が明確(WordPressコアコミッターの方は確実です。)
• アップデートが頻繁(更新が止まっていないか)
• 有名なもの(みんなが知っている、よくブログ等で紹介されている)
• ダウンロード数が多い
• 作者とコンタクトがとれるかどうか
© wordbonch.org
落とし穴 その5
39
日本発の人気プラグイン
Contact Form 7
© wordbonch.org
落とし穴 その5
40
テーマも同様です!
WordPressテーマをWebで検索すると、たくさんのテーマが出てきます。
WordPressをちゃんとわかっている人、信頼できる人が作ったテーマを選びましょう。
© wordbonch.org
まとめ
41
まとめ
© wordbonch.org
まとめ
42
以上、5つの落とし穴(の対策)でした。
1. コーディング規約を守りましょう
2. 適宜、エスケープしましょう。
3. アップデートできるように構築しましょう。
4. テーマのテンプレート構造を把握しましょう。
5. プラグインは安全なものを選びましょう
© wordbonch.org
まとめ
43
WordPressをもっと知りたい!
とりあえずなにか作ってみたい!
そんな人は…
© wordbonch.org
まとめ
44
ぜひ、WordBench宮崎へ!
次回は10月です。
WordBench宮崎(facebookグループ)をチェック!
https://www.facebook.com/groups/374276069274606/
© wordbonch.org
おわり
45
ご清聴ありがとうございました。

落とし穴に落ちないためのWordPress基礎知識