活用術から上級テクニックまで、WordPressの裏技完全マスター
•
9 likes•13,178 views
マイナビさんのCreator’s Carrer Lounge（CCL）にて、たにぐちまことさんと一緒に、WordPressに関する講演をした時の星野邦敏のスライド資料です。 #cclweb 【vol.1】 活用術から上級テクニックまで、WordPressの裏技完全マスター | Creator’s Carrer Lounge | CCL http://ccl-web.jp/study/01/ 2013年10月16日に講演しています。
More Related Content
Similar to 活用術から上級テクニックまで、WordPressの裏技完全マスター
Similar to 活用術から上級テクニックまで、WordPressの裏技完全マスター (20)
More from Kunitoshi Hoshino
More from Kunitoshi Hoshino (17)
活用術から上級テクニックまで、WordPressの裏技完全マスター
- 1. 活用術から上級テクニックまで、 WordPressの裏技完全マスター 株式会社コミュニティコム 星野 邦敏 〒330-0802 埼玉県さいたま市大宮区宮町1-5 銀座ビル7階 URL： http://www.communitycom.jp/ E-MAIL： mail@communitycom.jp 1
- 4. WordPressの裏技完全マスター 自己紹介 星野 邦敏(ほしの くにとし) Twitter ： @khoshino Facebook : 星野邦敏（Kunitoshi Hoshino） 株式会社コミュニティコムという会社で、 自社運営サイトやアプリ、他企業様向けサイトも作っています。 オープンソースの活動をしたり、IT系の勉強会を主催したり、 地域の活動をしたり。 WordPressをCMSとしてWEBサイトを作ることが増えています。 4
- 8. WordPressの裏技完全マスター 自己紹介 WordPressに関して、書籍や雑誌で執筆をしたり。 2012年1月に出版 2012年2月に出版 2012年3月に出版 web creators特別号 Webサイト制作 最新トレンドの傾向と対策 Web Designing 2012年3月号 速習デザインWordPress 8
- 9. WordPressの裏技完全マスター 自己紹介 WordPressに関して、書籍や雑誌で執筆をしたり。 2012年7月に出版 2013年1月に出版 2013年2月に出版 web creators特別号 スマートフォン・ソーシャル メディア・WordPress WordPressプラグイン & WebAPI活用ガイドブック プロが選ぶ WordPress 優良プラグイン事典 9
- 11. WordPressの裏技完全マスター 自己紹介 コワーキングスペース「7F」の運営。 埼玉県さいたま市 大宮駅東口徒歩１分 65坪、215平米。 http://office7f.com/ 11
- 14. WordPressの裏技完全マスター サイト事例や概要 ブログとしても カイ士伝 BOOK・OFFスタッフブログ クックパッド開発者ブログ （「WordPress を使ったサイト – WordPress Codex 日本語版」より引用） http://wpdocs.sourceforge.jp/%E5%88%A9%E7%94%A8%E8%80%85:Nao/WordPress_%E3% 14 82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E3%82%B5%E3%82%A4%E3%83%88
- 15. WordPressの裏技完全マスター サイト事例や概要 マガジンサイトとしても TechCrunch Japan ロイター通信 美的.com （「WordPress を使ったサイト – WordPress Codex 日本語版」より引用） http://wpdocs.sourceforge.jp/%E5%88%A9%E7%94%A8%E8%80%85:Nao/WordPress_%E3% 15 82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E3%82%B5%E3%82%A4%E3%83%88
- 17. WordPressの裏技完全マスター サイト事例や概要 施設のサイトとしても 渋谷公会堂 東急プラザ 表参道原宿 さいたまスーパーアリーナ （「WordPress を使ったサイト – WordPress Codex 日本語版」より引用） http://wpdocs.sourceforge.jp/%E5%88%A9%E7%94%A8%E8%80%85:Nao/WordPress_%E3% 17 82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E3%82%B5%E3%82%A4%E3%83%88
- 24. WordPressの裏技完全マスター サイト事例や概要 海外のサイトとしても Nikon フォルクスワーゲン PEPSI （ペプシ）のブログ （「WordPress を使ったサイト – WordPress Codex 日本語版」より引用） http://wpdocs.sourceforge.jp/%E5%88%A9%E7%94%A8%E8%80%85:Nao/WordPress_%E3% 24 82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E3%82%B5%E3%82%A4%E3%83%88
- 25. WordPressの裏技完全マスター サイト事例や概要 震災の時にはスピーディな情報公開に貢献 助けあいジャパン prayforjapan.jp 小出裕章 (京大助教) 非公式まとめ （「WordPress を使ったサイト – WordPress Codex 日本語版」より引用） http://wpdocs.sourceforge.jp/%E5%88%A9%E7%94%A8%E8%80%85:Nao/WordPress_%E3% 25 82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E3%82%B5%E3%82%A4%E3%83%88
- 26. WordPressの裏技完全マスター サイト事例や概要 谷口さん事例Tips Baseball LAB ベースボールラボ | データスタジアム http://www.baseball-lab.jp/darvish/general 26
- 33. WordPressの裏技完全マスター WordPressのTips 「Twenty Eleven」 ファイル構成 colors / images / inc / js / languages / 404.php archive.php author.php category.php comments.php editor-style.css editor-style-rtl.css content.php content-aside.php content-featured.php content-gallery.php content-image.php content-intro.php content-link.php content-page.php content-quote.php content-single.php content-status.php footer.php functions.php header.php image.php index.php license.txt page.php readme.txt rtl.css screenshot.png search.php searchform.php showcase.php sidebar.php sidebar-footer.php sidebar-page.php single.php style.css 33 tag.php
- 34. WordPressの裏技完全マスター WordPressのTips 「Twenty Ten」 ファイル構成 images / languages / 404.php archive.php attachment.php author.php category.php comments.php editor-style.css editor-style-rtl.css footer.php functions.php header.php index.php license.txt loop.php loop-attachment.php loop-page.php loop-single.php onecolumn-page.php page.php rtl.css screenshot.png search.php sidebar.php sidebar-footer.php single.php style.css tag.php 34
- 36. WordPressの裏技完全マスター WordPressのTips style.css style.cssの始めに以下を書くと、テーマとして認識されます。 /* Theme Name: 自分のテーマ名 Theme URI: テーマのホームサイトのURL Description: テーマの説明 Author: 作者である自分の名前 Author URI: 作者である自分のサイトのURL Version: バージョン（任意） Tags: タグ（任意） */ 36
- 41. WordPressの裏技完全マスター WordPressのTips WordPress独自の仕様に基づく方法 header.php → <?php get_header(); ?> sidebar.php → <?php get_sidebar(); ?> footer.php → <?php get_footer(); ?> これらのファイルは、ファイル名が決まっている。 sidebar-2.php → <?php get_sidebar(2); ?> 等はできる。 41
- 44. WordPressの裏技完全マスター WordPressのTips 分割したファイルを読み込む （「Twenty Ten」 loop-page.phpで解説） <?php get_header(); ?> <div id="container"> <div id="content" role="main"> <?php get_template_part( ‘loop’, ‘index’ ); ?> </div><!-- #content --> </div><!-- #container --> <?php get_sidebar(); ?> <?php get_footer(); ?> 44
- 45. WordPressの裏技完全マスター WordPressのTips （３）さらに、ファイルを分割する header.php、sidebar.php、footer.php だけでなく、共通部分のファイルを分割したい場合。 （ⅰ）WordPressが用意しているget_template_part関数を使う <?php get_template_part( ‘nav’ ); ?> → nav.phpファイルを読み込む。 <?php get_template_part( ‘nav’, ‘2’ ); ?> → nav-2.phpファイルを読み込む。無い場合、nav.phpファイルを読み込む。 （ⅱ）PHPのinclude関数を使う <?php include( TEMPLATEPATH . '/nav.php' ); ?> （TEMPLATEPATH は、テンプレートディレクトリへの絶対パスの定数） 45
- 46. WordPressの裏技完全マスター WordPressのTips 分割したファイルを読み込む （「Twenty Ten」 loop-page.phpで解説） <?php get_header(); ?> <div id="container"> <div id="content" role="main"> <?php get_template_part( ‘loop’, ‘index’ ); ?> </div><!-- #content --> </div><!-- #container --> <?php get_sidebar(); ?> <?php get_footer(); ?> 46
- 48. WordPressの裏技完全マスター WordPressのTips 参考サイト A List Apart 日本語サイト http://all-web.org/ala/ 48
- 61. WordPressの裏技完全マスター WordPressのTips （方法１） CSS3のメディアクエリ（Media Queries）を 使ってテーマで対応 WordPress3.2からの 新デフォルトテーマ 「Twenty Eleven」テーマは、 Media Queriesに対応した テーマですので、 このテーマをベースに カスタマイズすることもできます。 61
- 62. WordPressの裏技完全マスター WordPressのTips （方法１） CSS3のメディアクエリ（Media Queries）を 使ってテーマで対応 header.php meta情報として、viewportを設定する。 <meta name="viewport" content="width=device-width" /> Viewportとは？ 一言で言うと、 表示領域のこと。 62
- 63. WordPressの裏技完全マスター WordPressのTips （方法１） CSS3のメディアクエリ（Media Queries）を 使ってテーマで対応 viewportの属性 device-width → デバイスの幅（ピクセル値）に応じる。 width → 可視領域の幅（ピクセル値）。 （デフォルトは、980px。） 例： Appleのサイトはviewport固定。iPhoneでの見え方 → <meta name="viewport" content="width=1024" /> 63
- 64. WordPressの裏技完全マスター WordPressのTips （方法１） CSS3のメディアクエリ（Media Queries）を 使ってテーマで対応 style.css →横幅に応じて自動対応させている。 /* =Responsive Structure ----------------------------------------------- */ @media (max-width: 800px) { ・・・・・ } @media (max-width: 650px) { ・・・・・ } @media (max-width: 450px) { ・・・・・ } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) { ・・・・・ } 64
- 65. WordPressの裏技完全マスター WordPressのTips （方法１） CSS3のメディアクエリ（Media Queries）を 使ってテーマで対応 style.css →横幅に応じて自動対応させている。 「ブレークポイント」 /* =Responsive Structure ----------------------------------------------- */ ビューエリアの最大幅 @media (max-width: 800px) { 横幅800pxより小さい場合に適用 ・・・・・ } @media (max-width: 650px) { 横幅650pxより小さい場合に適用 ・・・・・ } @media (max-width: 450px) { 横幅450pxより小さい場合に適用 ・・・・・ } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) { ・・・・・ ビューエリアが320px～480pxの場合に適用 } 65 （iPhone3G/3GSを意識している）
- 66. WordPressの裏技完全マスター WordPressのTips （方法１） CSS3のメディアクエリ（Media Queries）を 使ってテーマで対応 Media Queriesの属性 @media (max-width: 800px) →画面サイズの最大幅。 800pxより小さい場合に、「{}」内に書かれているスタイルシートを適用。 @media (min-width: 800px) →画面サイズの最小幅。 800pxより大きい場合に、「{}」内に書かれているスタイルシートを適用。 @media (max-device-width 800px) @media (min-device-width 800px) →デバイスサイズの幅で適用。 66
- 67. WordPressの裏技完全マスター WordPressのTips （方法１） CSS3のメディアクエリ（Media Queries）を 使ってテーマで対応 レスポンシブ・ウェブデザイン（Media Queries）に対応した WordPressのテーマは、たくさん登録されています。 Whiteboard Hatch PageLines 67
- 68. WordPressの裏技完全マスター WordPressのTips （方法１） CSS3のメディアクエリ（Media Queries）を 使ってテーマで対応 レスポンシブ・ウェブデザイン（Media Queries）に対応した WordPressのテーマは、たくさん登録されています。 Response Responsive BizVektor （日本人作成） 68
- 70. WordPressの裏技完全マスター WordPressのTips ユーザーエージェントで振り分けて、PC・スマートフォン・ （方法２） ガラケー、それぞれのサイトを作る ユーザーエージェント（User agent）って？ ユーザーエージェント (User agent、略称UA）とは、 利用者があるプロトコルに基づいてデータを利用する際に 用いるソフトウェアまたはハードウェアを指す。 「利用者エージェント」とも言う。 （Wikipediaより） 70
- 71. WordPressの裏技完全マスター WordPressのTips ユーザーエージェントで振り分けて、PC・スマートフォン・ （方法２） ガラケー、それぞれのサイトを作る ユーザーエージェント（User agent）って？ どの端末から訪れたか、端末のヘッダー情報から分かるということ。 （逆に、ユーザーエージェントの偽装もできる。） 例： iOS5.1.1 Mozilla/5.0 (iPhone; CPU iPhone OS 5_1_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9B206 Safari/7534.48.3 Galaxy S III SC-06D Android 4.0.4 Mozilla/5.0 (Linux; U; Android 4.0.4; ja-jp; SC-06D Build/IMM76D) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30 71
- 75. WordPressの裏技完全マスター WordPressのTips WordPressのコアファイルの条件分岐を前提に、 パソコン用コンテンツと、スマートフォン用コンテツを 振り分けることも出来ます。 WordPressテーマに <?php if (wp_is_mobile()) :?> スマートフォン用コンテンツ <?php else: ?> パソコン用コンテンツ <?php endif; ?> ※WordPressのバージョン3.4以上が必須です。 75
- 78. WordPressの裏技完全マスター WordPressのTips 各種バナー広告など、可変サイズに対応できない。 PCサイト用バナーと、スマートフォンサイト用バナーを 切り替えます。 <?php if (wp_is_mobile()) :?> スマートフォン用バナーコード <?php else: ?> パソコン用バナーコード <?php endif; ?> 78
- 87. WordPressの裏技完全マスター WordPressのTips カスタム投稿タイプの例： functions.php function univ7f_post_type() { register_post_type( 'topslides', array( 'labels' => array( 'name' => 'トップスライド', 'singular_name' => 'topslides', ), 'public' => true, 'supports' => array('title','editor','author','thumbnail','excerpt') ) ); } add_action( 'init', 'univ7f_post_type' ); 87
- 88. WordPressの裏技完全マスター WordPressのTips home.php <div id="mainslider" class="flexslider"> <ul class="slides"> <?php $loop = new WP_Query( array( 'post_type' => 'topslides', 'posts_per_page' => 4 ) ); ?> <?php $i = 1; ?> <?php while ( $loop->have_posts() ) : $loop->the_post(); ?> <?php $thumbnail_id = get_post_thumbnail_id($post->ID); $image = wp_get_attachment_image_src( $thumbnail_id, array( 1170, 425 ) ); $src = $image[0]; //url $width = $image[1]; //横幅 $height = $image[2]; //高さ ?> <li data-thumb="<?php echo $src ; ?>"> <?php if ( get_post_meta($post->ID,'topurl',true) ): ?><a href="<?php echo get_post_meta($post->ID,'topurl',true); ?>"><?php endif; ?><img src="<?php echo $src ; ?>" /><?php if ( get_post_meta($post->ID,'topurl',true) ): ?></a><?php endif; ?> <div class="flex-caption<?php if($i == 1): ?> primary<?php elseif($i == 2): ?> warning<?php elseif($i == 3): ?> success<?php elseif($i == 4): ?> danger<?php endif; ?>"> <h2><?php the_title(); ?></h2> <h4><?php the_content(); ?></h4> </div> </li> <?php $i++; ?> <?php endwhile; ?> </ul> 88 </div>
- 89. WordPressの裏技完全マスター WordPressのTips カスタム投稿を出すだけならシンプル <?php $loop = new WP_Query( array( 'post_type' => ' topslides', 'posts_per_page' => 5 ) ); ?> <?php while ( $loop->have_posts() ) : $loop->the_post(); ?> <h2 class="entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <div class="entry-content"> <?php the_content(); ?> </div> <?php endwhile; ?> 89
- 100. WordPressの裏技完全マスター WordPressテーマを作ってみよう！ ウィジェットエリア設定例： functions.php register_sidebar( array( 'id' => 'sidebar-1', 'name' => '共通サイドバー', 'description' => '共通サイドバー', 'before_widget' => '<div class="widget">', 'after_widget' => '</div>', 'before_title' => '<h4 class="heading-success"><span class="btn btnlarge btn-success"><i class="m-icon-big-swapdown m-iconwhite"></i></span> ', 'after_title' => '</h4>', ) ); 100
- 101. WordPressの裏技完全マスター WordPressテーマを作ってみよう！ ウィジェットエリア設定例： sidebar.php <?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?> <?php dynamic_sidebar( 'sidebar-1' ); ?> <?php endif; ?> 101
- 103. WordPressの裏技完全マスター 最後に 今後のお問い合わせなど 何かありましたら、 Twitter： @khoshino Mail： mail@communitycom.jp URL： http://www.communitycom.jp/ http://wp3.jp/ などに、ご連絡ください。 ありがとうございました！ 株式会社コミュニティコム 星野 邦敏 103