株式会社コミュニティコム星野邦敏 330-0802 埼玉県さいたま市大宮区宮町 1-5 銀座ビル7 階 URL: http://www.communitycom.jp/ E-MAIL: mail@communitycom.jp 1
星野邦敏 ( ほしのくにとし ) Twitter : @khoshino Facebook : 星野邦敏 (Kunitoshi Hoshino) 株式会社コミュニティコムという会社で 自社運営サイトやアプリ 他企業様向けサイトも作っています オープンソースの活動をしたり IT 系の勉強会を主催したり 地域の活動をしたり WordPressをCMSとしてWEBサイトを作ることが増えています 2
WordPressで作る WordPressのイベントである WordCamp や WordBench にスタッフやスピーカーとして参加 3
WordPress 日本語サイトの イベントカレンダー を更新する係 ココ 4
公式ディレクトリにプラグインを登録したり Japan Tenki プラグイン 全国 142 地域の天気を自動表示 Hello Wapuu プラグイン ブログ更新を応援 5
WordPress に関して 書籍や雑誌で執筆をしたり 2012 年 1 月に出版 web creators 特別号 Webサイト制作最新トレンドの傾向と対策 2012 年 2 月に出版 Web Designing 2012 年 3 月号 2012 年 3 月に出版 速習デザイン WordPress 6
WordPress に関して 書籍や雑誌で執筆をしたり 今も執筆中です 2012 年 7 月に出版 web creators 特別号スマートフォン ソーシャルメディア WordPress 7
WordPressで作る最近の関心事は コワーキングスペースを作ることです コワーキングスペース7F 埼玉県さいたま市大宮駅東口徒歩 1 分 65 坪 215 平米 http://office7f.com/ 2012 年 12 月 1 日 ( 土 ) 本格オープン 8
こういうことありませんか? コワーキングスペース開いたらしいけど ホームページまだ? そろそろプレスリリースを出したいんだけど 9
そういう時に便利なツール! WordPress Bootstrap 10
Bootstrap って? Twitterでお馴染みのTwitter 社が Apacheライセンスで提供されているCSSフレームワーク http://twitter.github.com/bootstrap/ 11
コワーキングスペース 7F のサイトも http://office7f.com/ 12
何が出来るの? Rresponsive スマートフォン対応 13
何が出来るの? grid system スマートフォン対応の際に便利 80px ごとで 12 カラム 14
何が出来るの? Icon glyphs アイコン 15
何が出来るの? Carousel 写真のスライダー 16
WordPressで作る 何が出来るの? その他にも Tab タブがそれっぽく Form フォームもそれっぽく Dropdown ドロップダウンメニューがそれっぽく 17
どう使うの? http://twitter.github.com/bootstrap/ から bootstrap.zip をダウンロードして解凍すると コレしか入っていない どう使うの? 18
どう使うの? <link href="<?php echo get_template_directory_uri();?>/css/bootstrap.css" rel="stylesheet"> <link href="<?php echo get_template_directory_uri();?>/css/bootstrapresponsive.css" rel="stylesheet > まずは header.phpで 読み込もう! レスポンシブ ウェブ デザインにしたい場合は bootstrap-responsive.cssも! 19
WordPressで作る どう使うの? <div class="row-fluid"> <div class="span4">...</div> <div class="span8">...</div> </div> 例えば レスポンシブ ウェブ デザインにしたい場合は class= row-fluid で あとは span span! 20
どう使うの? Icon glyphs アイコン <i class= icon-glass ></i> とか HTML で書くと表示される 21
どう使うの? 要は CSSフレームワークで 決められたHTMLタグを書くと それっぽくなる タグは 以下のURLを見てみましょう! http://twitter.github.com/bootstrap/ 22
WordPress と連携 <?php if (have_posts()) : query_posts('post_type=pan-pan-pan&posts_per_page=5&order=desc');?> <?php while (have_posts()) : the_post();?> <li> <?php $attachment_img = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full' ); list( $src, $width, $height ) = $attachment_img;?> <img src="<?php echo $src;?>" alt="" /> <div class="slide-caption n hidden-phone"> <h3><?php the_title();?></h3> <p><?php the_content();?></p> </div> </li> <?php endwhile;?> <?php else :?> <?php endif;?> <?php wp_reset_query();?> HTML タグ WordPress タグにして運用する 23
WordPress と連携 例えば トップページのスライド画像は カスタム投稿タイプ運用 24
まとめ コワーキングスペース公式サイトを WordPressとBootstrapを組み合わせると 短時間で それっぽいWebサイトが作れる HTMLベースからWordPressにする知識は必要 Bootstrap ベースの WordPress テーマもある 25
最後に とはいえ どんなに作っても コンテンツが重要 コンテンツファースト の時代 ということで 更新 頑張ります! 26
最後に コワーキングスペース公式サイトを WordPressで作る ということで コワーキングスペース7Fを 今後ともよろしくお願い致します http://office7f.com/ 27
WordPressで作る今後のお問い合わせなど 何かありましたら Twitter: @khoshino Mail: mail@communitycom.jp URL: http://www.communitycom.jp/ http://wp3.jp/ などに ご連絡ください ありがとうございました! 株式会社コミュニティコム星野邦敏 28