Embed Size (px)
Citation preview
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
!
!
KITE@ixkaito
https://twitter.com/ixkaito
7
SNSFacebook
!
!
Kaito Koga
https://www.facebook.com/kaito.koga.9
!
!
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
