Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Launch a Web Service in 3 Days
Using WordPress	

WordPress を使って3日で作るウェブサービス	

Case : 失恋.jp
“失恋” means heartbreak in English
ABOUT ME	

自己紹介
KITE	

カイト
Web Designer, Programmer,Web Director, Graphic Designer,Art Director, Creative Director…
SNS	

ソーシャルネットワークアカウント
Kaito Koga	

https://www.facebook.com/kaito.koga.9
Facebook Twitter
KITE@ixkaito	

https://twitter....
http://失恋.jp/ (http://heartbreak.jp/)
TODAY’STHEME	

本日のテーマ
The Impulse	

開発のきっかけ	

Why WordPress?	

WordPress を選んだ理由	

Plugins and Customization	

プラグイン、カスタマイズ
THE IMPULSE	

きっかけ
Access http://heartbreak.jp!	

「失恋.jp」に書いてあります。	

Today, let me talk about more details.	

今日はもう少し詳しくお話...
http://www.lifehacker.jp/
http://www.roomie.jp/2013/05/77444/
Need a web service for heartbreak!	

失恋を癒やすウェブサービスを作ろう!
Post	

投稿機能	

Comment	

コメント機能
FUNCTIONS	

必要機能
Post	

投稿機能	

Comment	

コメント機能
FUNCTIONS	

必要機能
It’s WordPress!	

WordPress じゃん!
Simple	

シンプル	

Responsive	

レスポンシブ
DESIGN	

デザイン
Simple	

シンプル	

Responsive	

レスポンシブ
DESIGN	

デザイン
It’sTwentyTwelve!	

TwentyTwelve じゃん!
• Membership:

Anyone can register

だれでもユーザー登録できるようにする	

• New User Default Role:

Author

新規ユーザーの権限を「投稿者」にする
SETTINGS	

設定
PLUGINS	

プラグイン
http://wordpress.org/plugins/login-lockdown/
http://wordpress.org/plugins/crazy-bone/
http://wordpress.org/plugins/advanced-custom-fields/
DEFAULT LOGIN PAGE	

デフォルトログイン画面
LOGIN PAGE OF HEARTBREAK.JP	

失恋.jpのログイン画面
DEFAULT EDITOR	

デフォルト投稿画面
EDITOR OF HEARTBREAK.JP	

失恋.jpの投稿画面
DEFAULT PROFILE	

デフォルトプロフィール画面
PROFILE OF HEARTBREAK.JP	

失恋.jpのプロフィール画面
Add Admin Style Sheet	

管理画面用スタイルシートを追加
function kite_admin_style(){
echo '<link rel="stylesheet" type="text/css" href="'....
Change the URL andTitle Attribution of Login Header	

ログイン画面のロゴのリンク先と title 属性を変更
function kite_login_headerurl(){
return ...
function shitsuren_admin_color() {
return 'light';
}
add_filter( 'get_user_option_admin_color', 'shitsuren_admin_color' );...
Remove Admin Bar Menus	

アドミンバーのメニューを削除
function kite_remove_admin_bar_menus($wp_admin_bar){
if(!current_user_can('level_1...
Remove Side Menus of Dashboard	

管理画面のサイドメニューを削除
function kite_remove_admin_side_menus(){
if(!current_user_can('level_10')...
Die Admin Menus	

管理ページアクセス禁止
function kite_die_admin_menu(){
if(!current_user_can('level_10')){
wp_die( 'このページにアクセスするための十...
Hide Help Button of Dashboard	

管理画面のヘルプを消す
function kite_hide_help(){
if(!current_user_can('level_10')){
echo '<style typ...
Dashboard Redirect	

管理画面リダイレクト
function kite_dashboard_redirect(){
if(!current_user_can('level_10')){
$admin_urls = array...
Exclude Others’ Posts in Dashboard	

管理画面投稿一覧で他人の投稿を表示しない
function kite_exclude_other_posts($wp_query){
if (isset($_REQUES...
Remove Post Columns in Dashboard	

管理画面投稿一覧の項目を削除
function kite_custom_posts_columns ($columns) {
// unset($columns['cb'])...
RequireTitle	

投稿タイトルを必須にする
function kite_require_title() {
?>
<script type="text/javascript">
jQuery(document).ready(func...
Remove Items of Profile	

プロフィール画面の項目を削除
function kite_hide_richeditor_checkbox() {
global $wp_rich_edit_exists;
if(!curren...
Remove Items of Profile (continued)	

プロフィール画面の項目を削除(つづき)
function kite_hide_profile_item() {
if(!current_user_can('level_1...
Only Search Posts	

検索を投稿のみに限定する
function kite_search($query) {
if ($query->is_search) {
$query->set('post_type', 'post');...
Require Comment Author	

コメントの名前を必須にする
function kite_require_comment_author($commentdata){
if ('' === trim($commentdata['c...
Remove Email and Website of Comment Form	

コメントのメールアドレス、ウェブサイト項目を削除
function kite_remove_comment_form_fields($args){
$args...
Add Comment Notes	

コメントの注意書き
function kite_comment_form($args){
$args['comment_field'] = '<p class="comment-form-comment"...
Thank you for your attention.	

ご清聴ありがとうございました。
Launch a Web Service in 3 Days Using WordPress
Upcoming SlideShare
Loading in …5
×

Launch a Web Service in 3 Days Using WordPress

71,071 views

Published on

Published in: Internet, Technology, Sports
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Launch a Web Service in 3 Days Using WordPress

  1. 1. Launch a Web Service in 3 Days Using WordPress WordPress を使って3日で作るウェブサービス Case : 失恋.jp “失恋” means heartbreak in English
  2. 2. ABOUT ME 自己紹介 KITE カイト Web Designer, Programmer,Web Director, Graphic Designer,Art Director, Creative Director…
  3. 3. SNS ソーシャルネットワークアカウント Kaito Koga https://www.facebook.com/kaito.koga.9 Facebook Twitter KITE@ixkaito https://twitter.com/ixkaito
  4. 4. http://失恋.jp/ (http://heartbreak.jp/)
  5. 5. TODAY’STHEME 本日のテーマ The Impulse 開発のきっかけ Why WordPress? WordPress を選んだ理由 Plugins and Customization プラグイン、カスタマイズ
  6. 6. THE IMPULSE きっかけ Access http://heartbreak.jp! 「失恋.jp」に書いてあります。 Today, let me talk about more details. 今日はもう少し詳しくお話しましょう。
  7. 7. http://www.lifehacker.jp/
  8. 8. http://www.roomie.jp/2013/05/77444/
  9. 9. Need a web service for heartbreak! 失恋を癒やすウェブサービスを作ろう!
  10. 10. Post 投稿機能 Comment コメント機能 FUNCTIONS 必要機能
  11. 11. Post 投稿機能 Comment コメント機能 FUNCTIONS 必要機能 It’s WordPress! WordPress じゃん!
  12. 12. Simple シンプル Responsive レスポンシブ DESIGN デザイン
  13. 13. Simple シンプル Responsive レスポンシブ DESIGN デザイン It’sTwentyTwelve! TwentyTwelve じゃん!
  14. 14. • Membership:
 Anyone can register
 だれでもユーザー登録できるようにする • New User Default Role:
 Author
 新規ユーザーの権限を「投稿者」にする SETTINGS 設定
  15. 15. PLUGINS プラグイン
  16. 16. http://wordpress.org/plugins/login-lockdown/
  17. 17. http://wordpress.org/plugins/crazy-bone/
  18. 18. http://wordpress.org/plugins/advanced-custom-fields/
  19. 19. DEFAULT LOGIN PAGE デフォルトログイン画面
  20. 20. LOGIN PAGE OF HEARTBREAK.JP 失恋.jpのログイン画面
  21. 21. DEFAULT EDITOR デフォルト投稿画面
  22. 22. EDITOR OF HEARTBREAK.JP 失恋.jpの投稿画面
  23. 23. DEFAULT PROFILE デフォルトプロフィール画面
  24. 24. PROFILE OF HEARTBREAK.JP 失恋.jpのプロフィール画面
  25. 25. Add Admin Style Sheet 管理画面用スタイルシートを追加 function kite_admin_style(){ echo '<link rel="stylesheet" type="text/css" href="'.get_template_directory_uri().'/css/ admin.css" />'."n"; } add_action('login_head', 'kite_admin_style', 99); add_action('admin_head', 'kite_admin_style', 99);
  26. 26. Change the URL andTitle Attribution of Login Header ログイン画面のロゴのリンク先と title 属性を変更 function kite_login_headerurl(){ return get_home_url(); } add_filter('login_headerurl', 'kite_login_headerurl'); ! function kite_login_headertitle(){ return '失恋.jp'; } add_filter('login_headertitle', 'kite_login_headertitle');
  27. 27. function shitsuren_admin_color() { return 'light'; } add_filter( 'get_user_option_admin_color', 'shitsuren_admin_color' ); remove_filter( 'admin_color_scheme_picker', 'admin_color_scheme_picker' ); Disable Admin Color Scheme 管理画面の配色を固定
  28. 28. Remove Admin Bar Menus アドミンバーのメニューを削除 function kite_remove_admin_bar_menus($wp_admin_bar){ if(!current_user_can('level_10')){ $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', 'kite_remove_admin_bar_menus', 99);
  29. 29. Remove Side Menus of Dashboard 管理画面のサイドメニューを削除 function kite_remove_admin_side_menus(){ if(!current_user_can('level_10')){ remove_menu_page('index.php'); // ダッシュボード // remove_menu_page('edit.php'); // 投稿 remove_menu_page('upload.php'); // メディア remove_menu_page('link-manager.php'); // リンク remove_menu_page('edit.php?post_type=page'); // 固定ページ remove_menu_page('edit-comments.php'); // コメント remove_menu_page('themes.php'); // 概観 remove_menu_page('plugins.php'); // プラグイン remove_menu_page('users.php'); // ユーザー remove_menu_page('tools.php'); // ツール remove_menu_page('options-general.php'); // 設定 } } add_action('admin_menu', 'kite_remove_admin_side_menus');
  30. 30. Die Admin Menus 管理ページアクセス禁止 function kite_die_admin_menu(){ if(!current_user_can('level_10')){ wp_die( 'このページにアクセスするための十分なアクセス権がありません。' ); } } add_action('admin_head-upload.php', 'kite_die_admin_menu'); // メディア add_action('admin_head-media-new.php', 'kite_die_admin_menu'); // メディア - 新規追加 add_action('admin_head-edit-comments.php', 'kite_die_admin_menu'); // コメント add_action('admin_head-tools.php', 'kite_dashboard_redirect'); // ツール
  31. 31. Hide Help Button of Dashboard 管理画面のヘルプを消す function kite_hide_help(){ if(!current_user_can('level_10')){ echo '<style type="text/css">#contextual-help-link-wrap{display:none;}</style>'; } } add_action('admin_head', 'kite_hide_help'); add_action('admin_print_styles', 'kite_hide_help', 21);
  32. 32. Dashboard Redirect 管理画面リダイレクト function kite_dashboard_redirect(){ if(!current_user_can('level_10')){ $admin_urls = array('index', 'upload', 'media-new', 'edit-comments', 'tools', 'admin'); foreach ($admin_urls as $url){ if(get_home_url().$_SERVER['SCRIPT_NAME'] === admin_url($url.'.php')){ wp_redirect(admin_url( 'edit.php' )); exit(); } } } } add_action('init', 'kite_dashboard_redirect');
  33. 33. Exclude Others’ Posts in Dashboard 管理画面投稿一覧で他人の投稿を表示しない function kite_exclude_other_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_typ)){ $user = wp_get_current_user(); $wp_query->set('author', $user->ID); } } add_action('pre_get_posts', 'kite_exclude_other_posts');
  34. 34. Remove Post Columns in Dashboard 管理画面投稿一覧の項目を削除 function kite_custom_posts_columns ($columns) { // unset($columns['cb']); // チェックボックス // unset($columns['title']); // タイトル // unset($columns['author']); // 作成者 unset($columns['categories']); // カテゴリー unset($columns['tags']); // タグ、カスタムフィールド // unset($columns['comments']); // コメント // unset($columns['date']); // 日付 return $columns; } add_filter('manage_posts_columns', 'kite_custom_posts_columns');
  35. 35. RequireTitle 投稿タイトルを必須にする function kite_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', 'kite_require_title');
  36. 36. Remove Items of Profile プロフィール画面の項目を削除 function kite_hide_richeditor_checkbox() { global $wp_rich_edit_exists; if(!current_user_can('level_10') && defined('IS_PROFILE_PAGE') && IS_PROFILE_PAGE){ $wp_rich_edit_exists = false; } } add_action('admin_head', 'kite_hide_richeditor_checkbox');
  37. 37. Remove Items of Profile (continued) プロフィール画面の項目を削除(つづき) function kite_hide_profile_item() { if(!current_user_can('level_10')){ ?> <script type="text/javascript"> tftn = "table.form-table:nth-of-type"; jQuery(document).ready(function($) { $("div#profile-page h3").css("display", "none"); // h3 タイトル $(tftn + "(1)").css("display", "none"); // 個人設定ブロック $(tftn + "(2) tr:nth-child(2)").css("display", "none"); // 姓 $(tftn + "(2) tr:nth-child(3)").css("display", "none"); // 名 // $(tftn + "(2) tr:nth-child(4)").css("display", "none"); // ニックネーム // $(tftn + "(2) tr:nth-child(5)").css("display", "none"); // ブログ上の表示名 $(tftn + "(3) tr:nth-child(2)").css("display", "none"); // ウェブサイト $(tftn + "(4) tr:nth-child(1)").css("display", "none"); // プロフィール情報 ! var label = $(tftn + "(2) tr:nth-child(5) > th > label").text(); // ブログ上の表示名 label = label.replace('ブログ上の', ''); $(tftn + "(2) tr:nth-child(5) > th > label").text(label); }); </script> <?php } } add_action('show_user_profile', 'kite_hide_profile_item');
  38. 38. Only Search Posts 検索を投稿のみに限定する function kite_search($query) { if ($query->is_search) { $query->set('post_type', 'post'); } return $query; } add_filter('pre_get_posts','kite_search');
  39. 39. Require Comment Author コメントの名前を必須にする function kite_require_comment_author($commentdata){ if ('' === trim($commentdata['comment_author'])) wp_die('名前を入力して下さい。'); return $commentdata; } add_filter('preprocess_comment', 'kite_require_comment_author', 1);
  40. 40. Remove Email and Website of Comment Form コメントのメールアドレス、ウェブサイト項目を削除 function kite_remove_comment_form_fields($args){ $args['email'] = ''; $args['url'] = ''; return $args; } add_filter('comment_form_default_fields', 'kite_remove_comment_form_fields');
  41. 41. Add Comment Notes コメントの注意書き function kite_comment_form($args){ $args['comment_field'] = '<p class="comment-form-comment"><label for="comment">メ ッセージ</label><textarea id="comment" name="comment" cols="45" rows="8" aria- required="true"></textarea></p>'; $args['title_reply'] = 'メッセージを残す'; $args['cancel_reply_link'] = 'メッセージをキャンセル'; $args['comment_notes_before'] = '<span class="comment-note">失恋した本人やその相手を 否定する内容、<br />他の方が不快に思うような内容は絶対に投稿しないようお願いします。<br />必ず事前 に<a href="'.get_home_url('', 'about').'">「失恋.jp について」</a>をお読みください。</span>'; $args['comment_notes_after'] = ''; $args['label_submit'] = 'メッセージを送信'; return $args; } add_filter('comment_form_defaults', 'kite_comment_form');
  42. 42. Thank you for your attention. ご清聴ありがとうございました。

×