SlideShare une entreprise Scribd logo
1  sur  33
Télécharger pour lire hors ligne
初めて作る
WordPress オリジナルテーマ
@ PHPカンファレンス北海道

http://atnd.org/events/27353




                         #phpcondo | PHP Conference Hokkaido | 04.21.2012
本日の講師紹介!

       直子 @naokomc


       ひろまさ @hiromasa


       コモモ @komomoaichi


       ハム @h2ham

           #phpcondo | PHP Conference Hokkaido | 04.21.2012
Hands-on Rules


  ✴ 分からないことは遠慮せず質問!

  ✴ 周りの人をヘルプしつつ、楽しむ

  ✴ 手を動かしてみましょう

  ✴ 気づきをブログ等に書いてくれると嬉しいです



                 #phpcondo | PHP Conference Hokkaido | 04.21.2012
まず、環境チェック
WordPress がちゃんと動いているか確認しよう




          #phpcondo | PHP Conference Hokkaido | 04.21.2012
この画面が見えていますか?




#phpcondo | PHP Conference Hokkaido | 04.21.2012
デバッグモードを有効化

  _DEBUG を true にする
WP




            wp-config.php で

            define('WP_DEBUG', false);
            を見つけ、

            define('WP_DEBUG', true);
            に書き換える。

                      #phpcondo | PHP Conference Hokkaido | 04.21.2012
デバッグメッセージの例




#phpcondo | PHP Conference Hokkaido | 04.21.2012
テストデータのインポート
テスト投稿やコメントなどをデータベースに入れよう




          #phpcondo | PHP Conference Hokkaido | 04.21.2012
WordPress テストデータ日本語版
                  nuals.com/
http: //megumi-ma




                               #phpcondo | PHP Conference Hokkaido | 04.21.2012
テストテーマフォルダの作成
  新しいテーマのフォルダを作ろう




       #phpcondo | PHP Conference Hokkaido | 04.21.2012
Twenty Eleven のファイルをコピー

              index.php

              header.php

              footer.php

              sidebar.php
mytheme
              page.php

              functions.php

              comments.php

              style.css


          #phpcondo | PHP Conference Hokkaido | 04.21.2012
index.php, page.php                    ファイルの一部を削除
 <?php get_header(); ?>, <?php get_sidebar(); ?>, <?php
 get_footer(); ?> のみを書く

functions.php
 コードをすべて削除する

comments.php
 <?php // You can start editing here… の行まで残して削除

header.php
 そのまま

footer.php, sidebar.php, style.css

                         #phpcondo | PHP Conference Hokkaido | 04.21.2012
/*
                                                 style.css の編集
Theme Name: テストテーマ
Theme URI: http://wordpress.org/extend/themes/twentyeleven
Author: PHPCONDO
Author URI: http://wordpress.org/
Description: デモ用テーマ
Version: 1.0
License: GNU General Public License
License URI: license.txt
Template: twentyeleven
Tags: white
*/


                           #phpcondo | PHP Conference Hokkaido | 04.21.2012
</div><!-- #main -->                      footer.php の編集

   <footer id="colophon" role="contentinfo">
      <div id="site-generator">


      </div>
   </footer><!-- #colophon -->
</div><!-- #page -->


<?php wp_footer(); ?>


</body>
</html>

                          #phpcondo | PHP Conference Hokkaido | 04.21.2012
sidebar.php の編集



<div id="secondary" class="widget-area" role="complementary">
         <?php if ( ! dynamic_sidebar( 'sidebar-1' ) ) : ?>



         <?php endif; // end sidebar widget area ?>
</div><!-- #secondary .widget-area -->




                          #phpcondo | PHP Conference Hokkaido | 04.21.2012
投稿ループを作る
テスト投稿を表示してみよう




    #phpcondo | PHP Conference Hokkaido | 04.21.2012
投稿ループの表示例


                     一巡目




                     二巡目




#phpcondo | PHP Conference Hokkaido | 04.21.2012
WordPress ループの解説
  http://wpdocs.sourceforge.jp/The_Loop




#phpcondo | PHP Conference Hokkaido | 04.21.2012
ループを書いてみよう

<?php if ( have_posts() ) : ?>

 <?php while ( have_posts() ) : the_post(); ?>

   <?php the_content(); ?>

 <?php endwhile; else: ?>
   <p>投稿はありません。</p>
<?php endif; ?>




                           #phpcondo | PHP Conference Hokkaido | 04.21.2012
固定ページテンプレートを作る
固定ページ用にサイドバーのないレイアウトにする




         #phpcondo | PHP Conference Hokkaido | 04.21.2012
固定ページの例




#phpcondo | PHP Conference Hokkaido | 04.21.2012
テンプレート階層を利用
http://wpdocs.sourceforge.jp/テンプレート階層




    #phpcondo | PHP Conference Hokkaido | 04.21.2012
ウィジェットを利用可能にする
  サイドバーウィジェットを活用しよう




        #phpcondo | PHP Conference Hokkaido | 04.21.2012
サイドバーウィジェット例




#phpcondo | PHP Conference Hokkaido | 04.21.2012
<?php
                                                  functions.php に記述
  register_sidebar( array(

         'name' => __( 'Main Sidebar', 'twentyeleven' ),

         'id' => 'sidebar-1',

         'before_widget' => '<aside id="%1$s" class="widget %2$s">',

         'after_widget' => "</aside>",

         'before_title' => '<h3 class="widget-title">',

         'after_title' => '</h3>'

  ) );




                                    #phpcondo | PHP Conference Hokkaido | 04.21.2012
functions.phpで使えるスニペット
     テーマに機能を追加できます




         #phpcondo | PHP Conference Hokkaido | 04.21.2012
便利なテーマ機能の追加例




✴ ナビゲーションメニュー

✴ アイキャッチ画像対応

✴ カスタム背景対応




             #phpcondo | PHP Conference Hokkaido | 04.21.2012
カスタム背景

                            カスタム…何とか?



カスタムヘッダー




                               ナビゲーションメニュー




           #phpcondo | PHP Conference Hokkaido | 04.21.2012
関数リファレンス/add_theme_support
http://wpdocs.sourceforge.jp/関数リファレンス/add_theme_support




            #phpcondo | PHP Conference Hokkaido | 04.21.2012
テーマ機能の追加

function s.php に記述


  register_nav_menu( 'primary', __( 'Primary Menu',
  'twentyeleven' ) );

  add_theme_support( 'post-formats', array( 'aside', 'link',
  'gallery', 'status', 'quote', 'image' ) );

  add_custom_background();

  ※ 表示側のコードは Twenty Eleven の header.php を参照



                             #phpcondo | PHP Conference Hokkaido | 04.21.2012
テーマのテスト
できたテーマをチェックするためのツール紹介




        #phpcondo | PHP Conference Hokkaido | 04.21.2012
Theme-Check プラグイン




#phpcondo | PHP Conference Hokkaido | 04.21.2012
Theme-Check プラグイン




#phpcondo | PHP Conference Hokkaido | 04.21.2012

Contenu connexe

Plus de Naoko Takano

ブロックエディターで WordPress は この先どう変わる ?
ブロックエディターで  WordPress は この先どう変わる ?ブロックエディターで  WordPress は この先どう変わる ?
ブロックエディターで WordPress は この先どう変わる ?Naoko Takano
 
WordPress Polyglots Team Stats, September 2020
WordPress Polyglots Team Stats, September 2020WordPress Polyglots Team Stats, September 2020
WordPress Polyglots Team Stats, September 2020Naoko Takano
 
WordCamp Asia に行こう !
WordCamp Asia に行こう !WordCamp Asia に行こう !
WordCamp Asia に行こう !Naoko Takano
 
WordPress における コミュニティ翻訳の事例
WordPress における コミュニティ翻訳の事例WordPress における コミュニティ翻訳の事例
WordPress における コミュニティ翻訳の事例Naoko Takano
 
WordPress Community & You
WordPress Community & YouWordPress Community & You
WordPress Community & YouNaoko Takano
 
Introduction to WordPress Translation Day 4
Introduction to WordPress Translation Day 4Introduction to WordPress Translation Day 4
Introduction to WordPress Translation Day 4Naoko Takano
 
WordPress を知っていますか? 〜 みんながつくる、みんなのツール 〜
WordPress を知っていますか? 〜 みんながつくる、みんなのツール 〜WordPress を知っていますか? 〜 みんながつくる、みんなのツール 〜
WordPress を知っていますか? 〜 みんながつくる、みんなのツール 〜Naoko Takano
 
Jetpack のバックアップ「アクティビティログ」ベータ機能デモ
Jetpack のバックアップ「アクティビティログ」ベータ機能デモJetpack のバックアップ「アクティビティログ」ベータ機能デモ
Jetpack のバックアップ「アクティビティログ」ベータ機能デモNaoko Takano
 
WordPress Meetup
 チャプタープログラム参加ガイド
WordPress Meetup
 チャプタープログラム参加ガイドWordPress Meetup
 チャプタープログラム参加ガイド
WordPress Meetup
 チャプタープログラム参加ガイドNaoko Takano
 
15周年記念 WordPress でできること大全
15周年記念 WordPress でできること大全15周年記念 WordPress でできること大全
15周年記念 WordPress でできること大全Naoko Takano
 
Blogging for Your Art Career
Blogging for Your Art CareerBlogging for Your Art Career
Blogging for Your Art CareerNaoko Takano
 
分散型企業による開発者向けリソースのオープン化
分散型企業による開発者向けリソースのオープン化分散型企業による開発者向けリソースのオープン化
分散型企業による開発者向けリソースのオープン化Naoko Takano
 
コミュニティとベンダーによる
ハイブリッド翻訳の取り組み
コミュニティとベンダーによる
ハイブリッド翻訳の取り組みコミュニティとベンダーによる
ハイブリッド翻訳の取り組み
コミュニティとベンダーによる
ハイブリッド翻訳の取り組みNaoko Takano
 
How to Make Your Strings Translator Friendly
How to Make Your Strings Translator FriendlyHow to Make Your Strings Translator Friendly
How to Make Your Strings Translator FriendlyNaoko Takano
 
WordPress 4.7 と 今後の開発ロードマップ
WordPress 4.7 と 今後の開発ロードマップWordPress 4.7 と 今後の開発ロードマップ
WordPress 4.7 と 今後の開発ロードマップNaoko Takano
 
Ride the Lightning: Distributed Teamwork
Ride the Lightning: Distributed TeamworkRide the Lightning: Distributed Teamwork
Ride the Lightning: Distributed TeamworkNaoko Takano
 
Build Your Locale Style Guide
Build Your Locale Style GuideBuild Your Locale Style Guide
Build Your Locale Style GuideNaoko Takano
 
The Stories From the Japanese WordPress Community
The Stories From the Japanese WordPress CommunityThe Stories From the Japanese WordPress Community
The Stories From the Japanese WordPress CommunityNaoko Takano
 
Introduction to Translating WordPress in Japanese (WordPress 日本語翻訳の基礎)
Introduction to Translating WordPress in Japanese (WordPress 日本語翻訳の基礎)Introduction to Translating WordPress in Japanese (WordPress 日本語翻訳の基礎)
Introduction to Translating WordPress in Japanese (WordPress 日本語翻訳の基礎)Naoko Takano
 
Why WordPress became successful in Japan despite of the language barrier
Why WordPress became successful in Japan despite of the language barrierWhy WordPress became successful in Japan despite of the language barrier
Why WordPress became successful in Japan despite of the language barrierNaoko Takano
 

Plus de Naoko Takano (20)

ブロックエディターで WordPress は この先どう変わる ?
ブロックエディターで  WordPress は この先どう変わる ?ブロックエディターで  WordPress は この先どう変わる ?
ブロックエディターで WordPress は この先どう変わる ?
 
WordPress Polyglots Team Stats, September 2020
WordPress Polyglots Team Stats, September 2020WordPress Polyglots Team Stats, September 2020
WordPress Polyglots Team Stats, September 2020
 
WordCamp Asia に行こう !
WordCamp Asia に行こう !WordCamp Asia に行こう !
WordCamp Asia に行こう !
 
WordPress における コミュニティ翻訳の事例
WordPress における コミュニティ翻訳の事例WordPress における コミュニティ翻訳の事例
WordPress における コミュニティ翻訳の事例
 
WordPress Community & You
WordPress Community & YouWordPress Community & You
WordPress Community & You
 
Introduction to WordPress Translation Day 4
Introduction to WordPress Translation Day 4Introduction to WordPress Translation Day 4
Introduction to WordPress Translation Day 4
 
WordPress を知っていますか? 〜 みんながつくる、みんなのツール 〜
WordPress を知っていますか? 〜 みんながつくる、みんなのツール 〜WordPress を知っていますか? 〜 みんながつくる、みんなのツール 〜
WordPress を知っていますか? 〜 みんながつくる、みんなのツール 〜
 
Jetpack のバックアップ「アクティビティログ」ベータ機能デモ
Jetpack のバックアップ「アクティビティログ」ベータ機能デモJetpack のバックアップ「アクティビティログ」ベータ機能デモ
Jetpack のバックアップ「アクティビティログ」ベータ機能デモ
 
WordPress Meetup
 チャプタープログラム参加ガイド
WordPress Meetup
 チャプタープログラム参加ガイドWordPress Meetup
 チャプタープログラム参加ガイド
WordPress Meetup
 チャプタープログラム参加ガイド
 
15周年記念 WordPress でできること大全
15周年記念 WordPress でできること大全15周年記念 WordPress でできること大全
15周年記念 WordPress でできること大全
 
Blogging for Your Art Career
Blogging for Your Art CareerBlogging for Your Art Career
Blogging for Your Art Career
 
分散型企業による開発者向けリソースのオープン化
分散型企業による開発者向けリソースのオープン化分散型企業による開発者向けリソースのオープン化
分散型企業による開発者向けリソースのオープン化
 
コミュニティとベンダーによる
ハイブリッド翻訳の取り組み
コミュニティとベンダーによる
ハイブリッド翻訳の取り組みコミュニティとベンダーによる
ハイブリッド翻訳の取り組み
コミュニティとベンダーによる
ハイブリッド翻訳の取り組み
 
How to Make Your Strings Translator Friendly
How to Make Your Strings Translator FriendlyHow to Make Your Strings Translator Friendly
How to Make Your Strings Translator Friendly
 
WordPress 4.7 と 今後の開発ロードマップ
WordPress 4.7 と 今後の開発ロードマップWordPress 4.7 と 今後の開発ロードマップ
WordPress 4.7 と 今後の開発ロードマップ
 
Ride the Lightning: Distributed Teamwork
Ride the Lightning: Distributed TeamworkRide the Lightning: Distributed Teamwork
Ride the Lightning: Distributed Teamwork
 
Build Your Locale Style Guide
Build Your Locale Style GuideBuild Your Locale Style Guide
Build Your Locale Style Guide
 
The Stories From the Japanese WordPress Community
The Stories From the Japanese WordPress CommunityThe Stories From the Japanese WordPress Community
The Stories From the Japanese WordPress Community
 
Introduction to Translating WordPress in Japanese (WordPress 日本語翻訳の基礎)
Introduction to Translating WordPress in Japanese (WordPress 日本語翻訳の基礎)Introduction to Translating WordPress in Japanese (WordPress 日本語翻訳の基礎)
Introduction to Translating WordPress in Japanese (WordPress 日本語翻訳の基礎)
 
Why WordPress became successful in Japan despite of the language barrier
Why WordPress became successful in Japan despite of the language barrierWhy WordPress became successful in Japan despite of the language barrier
Why WordPress became successful in Japan despite of the language barrier
 

PHP Conference Hokkaido WordPress Workshop