WordBech Osaka No.28

1,356 views

Published on

Published in: Engineering
1 Comment
4 Likes
Statistics
Notes
No Downloads
Views
Total views
1,356
On SlideShare
0
From Embeds
0
Number of Embeds
38
Actions
Shares
0
Downloads
9
Comments
1
Likes
4
Embeds 0
No embeds

No notes for slide

WordBech Osaka No.28

  1. 1. 2014.04.19
  2. 2. 本日のテーマ ● テーマ作成する前に知っておくべき WordPress の本質 ● アクションフック・フィルターフックについて ● クライアントワークで使える設定、プラグイン、カスタマイズ ● ブラウザだけで WordPress の開発環境を構築 2
  3. 3. 俺の話を聞け、 5分だけでもいい! 3
  4. 4. KITE|カイト Web Designer / Programmer / Web Director / Graphic Designer / Art Director / Creative Director... 4
  5. 5. KITE|カイト Web Designer / Programmer / Web Director / Graphic Designer / Art Director / Creative Director... 4 いろいろやってます!
  6. 6. 5
  7. 7. SNS > 名刺 6 最近思うこと
  8. 8. SNS Facebook ! ! Kaito Koga https://www.facebook.com/kaito.koga.9 Twitter ! ! KITE@ixkaito https://twitter.com/ixkaito 7
  9. 9. SNS Facebook ! ! Kaito Koga https://www.facebook.com/kaito.koga.9 Twitter ! ! KITE@ixkaito https://twitter.com/ixkaito 7 今すぐアクセス!!
  10. 10. テーマ作成する前に
 知っておくべき WordPress の本質 8
  11. 11. WordPress のイメージ図 9 データベース WordPress
 コアファイル テーマ プラグイン
  12. 12. ➡ 喩えるなら、缶コーヒーの自動販売機 ➡ 喩えるなら、挽きたてコーヒーを提供する喫茶店 静的サイトと動的サイトの違い ● 静的サイト ➡ 実体のあるファイルへの参照 ● 動的サイト(WordPress) ➡ ユーザーのリクエストに応じてサーバーが表示結果を返す 10
  13. 13. WordPressはどのように ユーザーのリクエストに 応じているのか? 11
  14. 14. = WordPressはどのように ユーザーのリクエストに 応じているのか? 11 あるページを表示しようとするとき、 どのテンプレートが使われるのか?
  15. 15. 12 どのページ? フロントページ 個別投稿ページ アーカイブページ home.php single.php archive.php index.php ・ ・ ・ テンプレート階層
  16. 16. 13 http://wpdocs.sourceforge.jp/テンプレート階層
  17. 17. アクションフック
 フィルターフック
 について 14
  18. 18. もう一度 WordPress のイメージ図 15 データベース WordPress
 コアファイル テーマ プラグイン
  19. 19. 16 どのページ? フロントページ 個別投稿ページ アーカイブページ home.php single.php archive.php index.php ・ ・ ・ もう一度テンプレート階層
  20. 20. テーマ作成時は
 WordPress のコアファイルを 一切弄る必要がない 17
  21. 21. 18 むしろ WordPress のコアファイルを 絶対にカスタマイズするな!
  22. 22. WordPress 本体機能の 追加・削除は どうするの? 19
  23. 23. プラグインAPI ● アクション(フック) 特定のポイントもしくは特定のイベント発生時に WordPress のコアが起動させるフック 例:ログイン、投稿の公開、テーマの変更 ● フィルター(フック) データベースに追加する前やブラウザのスクリーンに送り出す 前にさまざまなタイプのテキストを改造するために WordPress が起動させるフック 20
  24. 24. プラグインAPIのイメージ図 21 アクション/フィルター WP
 関数 WP 関数
  25. 25. プラグインAPIのイメージ図 21 アクション/フィルター WP
 関数 WP 関数 My 関数
  26. 26. プラグインAPIのイメージ図 21 アクション/フィルター WP
 関数 My 関数
  27. 27. 22 http://wpdocs.sourceforge.jp/プラグイン_API/アクションフック一覧
  28. 28. 23 http://wpdocs.sourceforge.jp/プラグイン_API/フィルターフック一覧
  29. 29. クライアントワークで 使える設定、プラグイン、 カスタマイズ 24
  30. 30. プラグイン 25
  31. 31. 26
  32. 32. 27
  33. 33. 28
  34. 34. 29
  35. 35. 30
  36. 36. 31
  37. 37. 32
  38. 38. 33
  39. 39. 34
  40. 40. 35
  41. 41. 36
  42. 42. 37
  43. 43. 38
  44. 44. 39
  45. 45. 40
  46. 46. 41
  47. 47. 42
  48. 48. 43
  49. 49. スニペット 44
  50. 50. サイトを見るときに
 ツールバーを非表示する add_filter('show_admin_bar', '__return_false'); 45
  51. 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. 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. 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. 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. 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. 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. 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. 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. 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. 60. おしまい 55

×