1. 2014.04.19

2. 本日のテーマ
● テーマ作成する前に知っておくべき WordPress の本質
● アクションフック・フィルターフックについて
● クライアントワークで使える設定、プラグイン、カスタマイズ
● ブラウザだけで WordPress の開発環境を構築
2

3. 俺の話を聞け、
5分だけでもいい！
3

4. KITE｜カイト
Web Designer / Programmer / Web Director / Graphic Designer / Art Director / Creative Director...
4

5. KITE｜カイト
Web Designer / Programmer / Web Director / Graphic Designer / Art Director / Creative Director...
4
いろいろやってます！

6. 5

7. SNS ＞ 名刺
6
最近思うこと

8. SNS
Facebook
!
!
Kaito Koga
https://www.facebook.com/kaito.koga.9
Twitter
!
!
KITE@ixkaito
https://twitter.com/ixkaito
7

9. SNS
Facebook
!
!
Kaito Koga
https://www.facebook.com/kaito.koga.9
Twitter
!
!
KITE@ixkaito
https://twitter.com/ixkaito
7
今すぐアクセス!!

10. テーマ作成する前に
知っておくべき
WordPress の本質
8

11. WordPress のイメージ図
9
データベース
WordPress
コアファイル
テーマ プラグイン

12. ➡ 喩えるなら、缶コーヒーの自動販売機
➡ 喩えるなら、挽きたてコーヒーを提供する喫茶店
静的サイトと動的サイトの違い
● 静的サイト
➡ 実体のあるファイルへの参照
● 動的サイト（WordPress）
➡ ユーザーのリクエストに応じてサーバーが表示結果を返す
10

13. WordPressはどのように
ユーザーのリクエストに
応じているのか？
11

14. ＝
WordPressはどのように
ユーザーのリクエストに
応じているのか？
11
あるページを表示しようとするとき、
どのテンプレートが使われるのか？

15. 12
どのページ？
フロントページ
個別投稿ページ
アーカイブページ
home.php
single.php
archive.php
index.php
・
・
・
テンプレート階層

16. 13
http://wpdocs.sourceforge.jp/テンプレート階層

17. アクションフック
フィルターフック
について
14

18. もう一度 WordPress のイメージ図
15
データベース
WordPress
コアファイル
テーマ プラグイン

19. 16
どのページ？
フロントページ
個別投稿ページ
アーカイブページ
home.php
single.php
archive.php
index.php
・
・
・
もう一度テンプレート階層

20. テーマ作成時は
WordPress のコアファイルを
一切弄る必要がない
17

21. 18
むしろ
WordPress のコアファイルを
絶対にカスタマイズするな！

22. WordPress 本体機能の
追加・削除は
どうするの？
19

23. プラグインAPI
● アクション（フック）
特定のポイントもしくは特定のイベント発生時に WordPress
のコアが起動させるフック
例：ログイン、投稿の公開、テーマの変更
● フィルター（フック）
データベースに追加する前やブラウザのスクリーンに送り出す
前にさまざまなタイプのテキストを改造するために
WordPress が起動させるフック
20

24. プラグインAPIのイメージ図
21
アクション／フィルター
WP
関数
WP
関数

25. プラグインAPIのイメージ図
21
アクション／フィルター
WP
関数
WP
関数
My
関数

26. プラグインAPIのイメージ図
21
アクション／フィルター
WP
関数
My
関数

27. 22
http://wpdocs.sourceforge.jp/プラグイン_API/アクションフック一覧

28. 23
http://wpdocs.sourceforge.jp/プラグイン_API/フィルターフック一覧

29. クライアントワークで
使える設定、プラグイン、
カスタマイズ
24

30. プラグイン
25

31. 26

32. 27

33. 28

34. 29

35. 30

36. 31

37. 32

38. 33

39. 34

40. 35

41. 36

42. 37

43. 38

44. 39

45. 40

46. 41

47. 42

48. 43

49. スニペット
44

50. サイトを見るときに
ツールバーを非表示する
add_filter('show_admin_bar', '__return_false');
45

51. クライアント確認用ユーザー：preview
$user = new WP_User( 'preview' );
$user->add_cap( 'read_private_posts'); // 非公開投稿の閲覧権限を追加
$user->add_cap( 'read_private_pages'); // 非公開固定ページの閲覧権限を追加
!
function preview_user_redirect() {
global $current_user;
get_currentuserinfo();
!
if($current_user->user_login === 'preview'){
$url = home_url();
header('Location: '.$url);
exit;
}
}
add_action( 'admin_init', 'preview_user_redirect' );
46
目的： 非公開記事・固定ページのクライアント確認
事前準備： クライアント確認用に「preview」ユーザーを作成
効果： 「preview」ユーザーでログイン後、
ダッシュボードを表示させず、サイトトップを表示
備考： 「preview」ユーザーを別の名前にしたい場合は、
new WP_User( 'preview' )と$current_user->user_login === 'preview' を適意変更

52. アドミンバーメニュー非表示
function remove_admin_bar_menus( $wp_admin_bar ) {
$wp_admin_bar->remove_node('wp-logo'); // WordPress ロゴ
$wp_admin_bar->remove_node('comments'); // コメント
$wp_admin_bar->remove_node('new-content'); // 新規
$wp_admin_bar->remove_node('new-post'); // 新規 - 投稿
$wp_admin_bar->remove_node('new-media'); // 新規 - メディア
$wp_admin_bar->remove_node('new-page'); // 新規 - 固定ページ
$wp_admin_bar->remove_node('new-user'); // 新規 - ユーザー
$wp_admin_bar->remove_node('search'); // 検索
$wp_admin_bar->remove_node('edit-profile'); // プロフィールを編集
$wp_admin_bar->remove_node('user-info'); // ユーザー情報
}
add_action( 'admin_bar_menu', 'remove_admin_bar_menu', 99 );
47

53. ダッシュボードウィジェット非表示
function remove_dashboard_widgets() {
global $wp_meta_boxes;
unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_right_now']); // 概要
unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_recent_comments']); // アクティビティ
unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_incoming_links']); // 被リンク
unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_plugins']); // プラグイン
unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_quick_press']); // クイック投稿
unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_recent_drafts']); // 最近の下書き
unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_primary']); // WordPressブログ
unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_secondary']); // WordPressフォーラム
}
add_action('wp_dashboard_setup', 'remove_dashboard_widgets');
48

54. サイドメニュー非表示
function remove_admin_side_menus () {
!
global $menu, $user_level;
!
$restricted = array(
__('ダッシュボード'),
__('投稿'),
__('メディア'),
__('固定ページ'),
__('コメント'),
__('外観'),
__('プラグイン'),
__('ユーザー'),
__('ツール'),
__('設定')
);
end ($menu);
while (prev($menu)){
$value = explode(' ',$menu[key($menu)][0]);
if(in_array($value[0] != NULL?$value[0]:"" , $restricted))
{unset($menu[key($menu)]);}
}
}
add_action('admin_menu', 'remove_admin_side_menus');
49

55. 投稿一覧画面で
他ユーザーの投稿を非表示
function exclude_others_posts( $wp_query ) {
if ( isset( $_REQUEST['post_type'] ) && post_type_exists( $_REQUEST['post_type'] ) ) {
$post_type = get_post_type_object( $_REQUEST['post_type'] );
$cap_type = $post_type->cap->edit_other_posts;
} else {
$cap_type = 'edit_others_posts';
}
!
if ( is_admin() && $wp_query->is_main_query() && ! $wp_query->get( 'author' ) && ! current_user_can( $cap_type ) ) {
$user = wp_get_current_user();
$wp_query->set( 'author', $user->ID );
}
}
add_action( 'pre_get_posts', 'exclude_others_posts' );
50

56. 投稿時タイトル必須
function require_title() {
?>
<script type="text/javascript">
jQuery(document).ready(function($){
if('post' == $('#post_type').val()){
$("#post").submit(function(e){
if('' == $('#title').val()) {
alert('タイトルを入力してください！');
$('#ajax-loading').css('visibility', 'hidden');
$('#publish').removeClass('button-primary-disabled');
$('#title').focus();
return false;
}
});
}
});
</script>
<?php
}
add_action( 'admin_head-post-new.php', 'require_title' );
51

57. img タグの
width と height 属性を削除
function remove_img_wh( $html ) {
$html = preg_replace( '/(width|height)="d*"s/', "", $html );
return $html;
}
add_filter( 'post_thumbnail_html', 'remove_img_wh', 10 );
add_filter( 'image_send_to_editor', 'remove_img_wh', 10 );
52

58. 投稿画面カテゴリー順序固定
function category_checked_notop( $args, $post_id = null ) {
$args['checked_ontop'] = false;
return $args;
}
add_action( 'wp_terms_checklist_args', 'category_checked_notop' );
53

59. サイトとビジュアルエディタの
スタイルを同期
add_editor_style('style.css'); // ビジュアルエディタのスタイルシートにテーマの style.css を追加
!
function visual_editor_style($initArray){
global $current_screen;
switch ($current_screen->post_type) {
// 投稿ページ
case 'post':
// ビジュアルエディタに事前準備と同じ class を追加
$initArray['body_class'] = 'post-content';
break;
// 固定ページ（投稿タイプごとに変更可能）
case 'page':
$initArray['body_class'] = 'post-content';
break;
}
!
return $initArray;
}
add_filter('tiny_mce_before_init', 'visual_editor_style');
54
目的： ビジュアルエディタをサイトと同じスタイルで表示
事前準備： テーマテンプレートでは、投稿されたコンテンツ部分（通常：the_content();）を特定の class で囲み、
スタイルシートではそちらにスタイルを指定する
例： .post-content h1{ font-size: 24px; color: #f00; }
.post-content p{ font-size: 12px; color: #999; }
メリット： editor-style.css 使用時と違い、style.css を編集すると、ビジュアルエディタにも反映される

60. おしまい
55