2014.04.19
本日のテーマ
● テーマ作成する前に知っておくべき WordPress の本質
● アクションフック・フィルターフックについて
● クライアントワークで使える設定、プラグイン、カスタマイズ
● ブラウザだけで WordPress の開発環境を構築
2
俺の話を聞け、
5分だけでもいい!
3
KITE|カイト
Web Designer / Programmer / Web Director / Graphic Designer / Art Director / Creative Director...
4
KITE|カイト
Web Designer / Programmer / Web Director / Graphic Designer / Art Director / Creative Director...
4
いろいろやってます!
5
SNS > 名刺
6
最近思うこと
SNS
Facebook
!
!
Kaito Koga
https://www.facebook.com/kaito.koga.9
Twitter
!
!
KITE@ixkaito
https://twitter.com/ixkaito
7
SNS
Facebook
!
!
Kaito Koga
https://www.facebook.com/kaito.koga.9
Twitter
!
!
KITE@ixkaito
https://twitter.com/ixkaito
7
今すぐアクセス!!
テーマ作成する前に

知っておくべき
WordPress の本質
8
WordPress のイメージ図
9
データベース
WordPress

コアファイル
テーマ プラグイン
➡ 喩えるなら、缶コーヒーの自動販売機
➡ 喩えるなら、挽きたてコーヒーを提供する喫茶店
静的サイトと動的サイトの違い
● 静的サイト
➡ 実体のあるファイルへの参照
● 動的サイト(WordPress)
➡ ユーザーのリクエストに応じてサーバーが表示結果を返す
10
WordPressはどのように
ユーザーのリクエストに
応じているのか?
11
=
WordPressはどのように
ユーザーのリクエストに
応じているのか?
11
あるページを表示しようとするとき、
どのテンプレートが使われるのか?
12
どのページ?
フロントページ
個別投稿ページ
アーカイブページ
home.php
single.php
archive.php
index.php
・
・
・
テンプレート階層
13
http://wpdocs.sourceforge.jp/テンプレート階層
アクションフック

フィルターフック

について
14
もう一度 WordPress のイメージ図
15
データベース
WordPress

コアファイル
テーマ プラグイン
16
どのページ?
フロントページ
個別投稿ページ
アーカイブページ
home.php
single.php
archive.php
index.php
・
・
・
もう一度テンプレート階層
テーマ作成時は

WordPress のコアファイルを
一切弄る必要がない
17
18
むしろ
WordPress のコアファイルを
絶対にカスタマイズするな!
WordPress 本体機能の
追加・削除は
どうするの?
19
プラグインAPI
● アクション(フック)
特定のポイントもしくは特定のイベント発生時に WordPress
のコアが起動させるフック
例:ログイン、投稿の公開、テーマの変更
● フィルター(フック)
データベースに追加する前やブラウザのスクリーンに送り出す
前にさまざまなタイプのテキストを改造するために
WordPress が起動させるフック
20
プラグインAPIのイメージ図
21
アクション/フィルター
WP

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

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

関数
My
関数
22
http://wpdocs.sourceforge.jp/プラグイン_API/アクションフック一覧
23
http://wpdocs.sourceforge.jp/プラグイン_API/フィルターフック一覧
クライアントワークで
使える設定、プラグイン、
カスタマイズ
24
プラグイン
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
スニペット
44
サイトを見るときに

ツールバーを非表示する
add_filter('show_admin_bar',	 '__return_false');
45
クライアント確認用ユーザー: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' を適意変更
アドミンバーメニュー非表示
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
ダッシュボードウィジェット非表示
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
サイドメニュー非表示
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
投稿一覧画面で

他ユーザーの投稿を非表示
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
投稿時タイトル必須
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
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
投稿画面カテゴリー順序固定
function	 category_checked_notop(	 $args,	 $post_id	 =	 null	 )	 {

	  $args['checked_ontop']	 =	 false;

	  return	 $args;

}

add_action(	 'wp_terms_checklist_args',	 'category_checked_notop'	 );
53
サイトとビジュアルエディタの

スタイルを同期
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 を編集すると、ビジュアルエディタにも反映される
おしまい
55

WordBech Osaka No.28