WordBech Osaka No.28

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

最近思うこと

SNSFacebook

!

!

Kaito Koga

https://www.facebook.com/kaito.koga.9

Twitter

!

!

KITE@ixkaito

https://twitter.com/ixkaito

7

SNSFacebook

!

!

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