SlideShare a Scribd company logo
ゼロからつくるWordPressテーマ#9

     ループ関数と投稿記事




         http://hitsuji.me
目次

 1. 今回の内容
 2. 投稿表示の仕組み
     1.    サイトアクセスから表示まで
     2.    サイト生成のフロー
     3.    クエリ作成
     4.    テンプレート実行
     5.    フローチャートにまとめ
     6.    コードにする
 3. 今回のまとめ&次回予告

ゼロからつくる WordPress テーマ #9   http://hitsuji.me   2
1. 今回の内容

       記事を表示する仕組みを理解する
                                                         コレ




   <?php if(have_posts()): while(have_posts()): the_post(); ?>
      <h2><a href="<?php the_permalink(); ?>">
              <?php the_title(); ?></a></h2>
   <?php the_content(); ?>
   <?php endwhile; endif; ?>




ゼロからつくる WordPress テーマ #9     http://hitsuji.me                   3
2-1. サイトアクセスから表示まで(連載:第4回より)

                                      functions.php
          WordPress初期化
                                                      テーマで利用する機能を
      (functions.phpを読み込み)                            追加, 定義, 設定する関数が記述


                                        index.phpなど      テンプレートフォルダ

         テンプレート選択
(テンプレート階層に従って選ばれる)



                                        読み込まれたfunctions.phpに記述された
              サイト生成                     設定内容を反映した形で、
                                        選択されたテンプレートを解釈して
                                        htmlコードが生成させる。


                           今回はこの詳細を考えます

ゼロからつくる WordPress テーマ #9     http://hitsuji.me                            4
2-2. サイト生成のフロー


                  サイト生成



                                                サイト表示する投稿を
                    クエリ作成
                                                リストアップする
                                                 WordPressが自動的に
                                                 やってくれる



                                                リストアップした投稿を
                 テンプレート実行
                                                順次表示する
                                                 テンプレートファイルに
                                                 自分でコードを書く



ゼロからつくる WordPress テーマ #9    http://hitsuji.me                     5
2-3. クエリ作成(WordPressが自動的にやってくれる)

    サイトURLから表示すべき記事の種類を決めて、
    ダッシュボード表示設定から表示する投稿数を決めて、ストック


             サイトURLから
     表示すべき記事の種類を判断

 投稿ページ / カテゴリページ / タグページ or…に合わせて
 ストックする記事の種類を決める




                 記事#1
                                           ダッシュボード表示設定から
                 記事#2
                                               表示する投稿数を決定
                 記事#3



ゼロからつくる WordPress テーマ #9   http://hitsuji.me                6
2-4. テンプレート実行(テンプレートにコードを書く)

ループ内で、投稿を1つずつ取り出して、WP関数でその投稿のタイトルや
記事内容を出力する

         ループ内の処理

                the_post()
                                              the_permalink ()

                                              取り出した投稿のURLを出力

                             投稿#1
      投稿#2                                          the_title ()

      投稿#3             記事を1つ取り出す               取り出した投稿のタイトルを出力

                                                the_content()

                                              取り出した投稿の記事を出力




ゼロからつくる WordPress テーマ #9        http://hitsuji.me                  7
2-5. テンプレート実行(前ページ)のフローチャート

                                                   NO
                            投稿がある?

                                  YES
                                                   NO
                            投稿がある?
                                YES
                           投稿を1つ取り出す

                            投稿のURLを出力

                           投稿のタイトルを出力

                           投稿の記事本文を出力


                                   END

ゼロからつくる WordPress テーマ #9       http://hitsuji.me        8
2-6. テンプレート実行をコードで記述


                      NO
     1 投稿がある?
            YES
                      NO
     2 投稿がある?                       1                    2              3
        YES                <?php if(have_posts()): while(have_posts()): the_post(); ?>
                                                     4
 3 投稿を1つ取り出す                   <h2><a href="<?php the_permalink(); ?>">
                                                5
  4 投稿のURLを出力                            <?php the_title(); ?></a></h2>
                                  6
                           <?php the_content(); ?>
5 投稿のタイトルを出力
                           <?php endwhile; endif; ?>

6 投稿の記事本文を出力


            END



ゼロからつくる WordPress テーマ #9          http://hitsuji.me                                      9
3. 今回のまとめ&次回予告

 今回のまとめ
       サイトにアクセスすると、WordPressが自動
        的にクエリを作成する
       the_post()関数で、クエリの1つの投稿が
        ロードされる。
       the_title()やthe_content()関数で、ロード
        された投稿のタイトルや記事本文を出力する。

 次回予告
       次回も引き続き、クエリと投稿記事表示につ
         いて紹介します。

ゼロからつくる WordPress テーマ #9   http://hitsuji.me   10

More Related Content

PDF
ゼロからつくるWord pressテーマ第7回
Hitsuji
 
PDF
ゼロからつくるWord pressテーマ第5回
Hitsuji
 
PDF
ゼロからつくるWord pressテーマ第6回
Hitsuji
 
PDF
ゼロからつくるWord pressテーマ第5回 後編
Hitsuji
 
PDF
ゼロからつくるWord pressテーマ第8回
Hitsuji
 
PDF
ゼロからつくるWordPressテーマ第4回
Hitsuji
 
PDF
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
Takashi Uemura
 
PDF
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~
hokori matu
 
ゼロからつくるWord pressテーマ第7回
Hitsuji
 
ゼロからつくるWord pressテーマ第5回
Hitsuji
 
ゼロからつくるWord pressテーマ第6回
Hitsuji
 
ゼロからつくるWord pressテーマ第5回 後編
Hitsuji
 
ゼロからつくるWord pressテーマ第8回
Hitsuji
 
ゼロからつくるWordPressテーマ第4回
Hitsuji
 
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
Takashi Uemura
 
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~
hokori matu
 

What's hot (20)

PDF
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
Chieko Aihara
 
PDF
WordPress 3.2の新機能& 新デフォルトテーマ Twenty Eleven 大解剖!
hokori matu
 
PDF
WordPressでオリジナルサイトを作るための最初の一歩的なカスタマイズテクニック
Takashi Uemura
 
PDF
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
Takashi Uemura
 
PDF
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
Takashi Uemura
 
PDF
WordPressテーマ作成
Takami Kazuya
 
PPTX
Word press34
BREN
 
PDF
Wordpressで自分好みのテーマを作る
Takashi Uemura
 
PDF
101210 supreme web adobe seminar Nagoya
tamotsu toyoda
 
PDF
What's new! TwentyThirteen + WordPress3.6
Takashi Uemura
 
PDF
WordPress実践 導入からカスタマイズまで
Takashi Uemura
 
PDF
WordBeachDeathMarchWorkshop
takashi ono
 
PDF
Wp html5
regret raym
 
PDF
WordPress初心者からの脱出! カスタムなんとかをちゃんと理解する
Takashi Uemura
 
PDF
第2回こけむさズword press部
Yuki Suzuki
 
KEY
ブログの枠を超える?ためのWordPressカスタマイズ入門
muracchi
 
PDF
WordPressとjQuery
Seto Takahiro
 
PDF
これからのpre_get_postsの話をしよう
Hishikawa Takuro
 
PDF
WordBeach @kurudrive
Hidekazu Ishikawa
 
PDF
concrete5デザインカスタマイズに必要なPHPの知識
Hishikawa Takuro
 
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
Chieko Aihara
 
WordPress 3.2の新機能& 新デフォルトテーマ Twenty Eleven 大解剖!
hokori matu
 
WordPressでオリジナルサイトを作るための最初の一歩的なカスタマイズテクニック
Takashi Uemura
 
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
Takashi Uemura
 
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
Takashi Uemura
 
WordPressテーマ作成
Takami Kazuya
 
Word press34
BREN
 
Wordpressで自分好みのテーマを作る
Takashi Uemura
 
101210 supreme web adobe seminar Nagoya
tamotsu toyoda
 
What's new! TwentyThirteen + WordPress3.6
Takashi Uemura
 
WordPress実践 導入からカスタマイズまで
Takashi Uemura
 
WordBeachDeathMarchWorkshop
takashi ono
 
Wp html5
regret raym
 
WordPress初心者からの脱出! カスタムなんとかをちゃんと理解する
Takashi Uemura
 
第2回こけむさズword press部
Yuki Suzuki
 
ブログの枠を超える?ためのWordPressカスタマイズ入門
muracchi
 
WordPressとjQuery
Seto Takahiro
 
これからのpre_get_postsの話をしよう
Hishikawa Takuro
 
WordBeach @kurudrive
Hidekazu Ishikawa
 
concrete5デザインカスタマイズに必要なPHPの知識
Hishikawa Takuro
 
Ad

Similar to ゼロからつくるWord pressテーマ第9回 (20)

PDF
中級者のためのWordPress講座[第2回]WordPressテーマをカスタマイズしてみよう!
switch3000
 
PDF
中級者のためのWordPress講座[第6回]WordPressをマルチサイト化(複数ブログ化)してみよう!
switch3000
 
PDF
WordPressで投稿記事情報の取得方法
regret raym
 
PPT
いちばん簡単なconcrete5テーマ
Hideki MACHIDA
 
PDF
Wordpressスマートフォンテーマ作成
Yoshie Nakayama
 
PDF
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
rie05
 
KEY
WordPressプラグイン作成入門
Yuji Nojima
 
PPTX
WordPressのテンプレートタグを理解する
Yoshinori Kobayashi
 
PDF
WordPress公式テーマ登録のための5ステップ
Mignon Style
 
PPT
WordPressのCSSを 理解しよう!
BREN
 
PDF
【Wordpress】LightBox風jQueryを使ってポップアップ上でカスタムフィールドを出力。
Kazuki Akiyama
 
PDF
Word press 3.5RC2 - パーフェクト functions.php -
BREN
 
PDF
MovableTypeとWordPressの比較
Hirofumi Nakahashi
 
PPT
Php+Word Press
Hideo Kashioka
 
PPTX
WebAppDev勉強会 #4
Kohei Noda
 
PDF
WordPress基礎講座6 テーマの作成実習
Akinori Kawamitsu
 
PDF
Theme review-guidelines wckobe2013
hiratatsuya
 
PDF
WordPressで作るポートフォリオサイト
Takuma Nishiyama
 
PDF
WordPress テーマ作成&PHP超入門
Michinari Odajima
 
中級者のためのWordPress講座[第2回]WordPressテーマをカスタマイズしてみよう!
switch3000
 
中級者のためのWordPress講座[第6回]WordPressをマルチサイト化(複数ブログ化)してみよう!
switch3000
 
WordPressで投稿記事情報の取得方法
regret raym
 
いちばん簡単なconcrete5テーマ
Hideki MACHIDA
 
Wordpressスマートフォンテーマ作成
Yoshie Nakayama
 
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
rie05
 
WordPressプラグイン作成入門
Yuji Nojima
 
WordPressのテンプレートタグを理解する
Yoshinori Kobayashi
 
WordPress公式テーマ登録のための5ステップ
Mignon Style
 
WordPressのCSSを 理解しよう!
BREN
 
【Wordpress】LightBox風jQueryを使ってポップアップ上でカスタムフィールドを出力。
Kazuki Akiyama
 
Word press 3.5RC2 - パーフェクト functions.php -
BREN
 
MovableTypeとWordPressの比較
Hirofumi Nakahashi
 
Php+Word Press
Hideo Kashioka
 
WebAppDev勉強会 #4
Kohei Noda
 
WordPress基礎講座6 テーマの作成実習
Akinori Kawamitsu
 
Theme review-guidelines wckobe2013
hiratatsuya
 
WordPressで作るポートフォリオサイト
Takuma Nishiyama
 
WordPress テーマ作成&PHP超入門
Michinari Odajima
 
Ad

Recently uploaded (8)

PDF
20250730_QiitaBash_LT登壇資料_PDC_Kurashina.pdf
pdckurashina
 
PDF
【学会聴講報告】CVPR2025からみるVision最先端トレンド / CVPR2025 report
Sony - Neural Network Libraries
 
PPTX
2025_7_25_吉祥寺_設計ナイト_ADR運用におけるデータ利活用の考え方.pptx
ssuserfcafd1
 
PDF
MahiroYoshida_セリフに着目したキャラクタロール推定に関する基礎検討_sigcc12th2025
Matsushita Laboratory
 
PDF
20250726_Devinで変えるエンプラシステム開発の未来
Masaki Yamakawa
 
PPTX
baserCMS『カスタムコンテンツ』徹底活用術〜あなただけの管理画面を自由自在に〜
Ryuji Egashira
 
PDF
20250729_Devin-for-Enterprise
Masaki Yamakawa
 
PDF
TaketoFujikawa_ComicComputing12th_inKumamoto
Matsushita Laboratory
 
20250730_QiitaBash_LT登壇資料_PDC_Kurashina.pdf
pdckurashina
 
【学会聴講報告】CVPR2025からみるVision最先端トレンド / CVPR2025 report
Sony - Neural Network Libraries
 
2025_7_25_吉祥寺_設計ナイト_ADR運用におけるデータ利活用の考え方.pptx
ssuserfcafd1
 
MahiroYoshida_セリフに着目したキャラクタロール推定に関する基礎検討_sigcc12th2025
Matsushita Laboratory
 
20250726_Devinで変えるエンプラシステム開発の未来
Masaki Yamakawa
 
baserCMS『カスタムコンテンツ』徹底活用術〜あなただけの管理画面を自由自在に〜
Ryuji Egashira
 
20250729_Devin-for-Enterprise
Masaki Yamakawa
 
TaketoFujikawa_ComicComputing12th_inKumamoto
Matsushita Laboratory
 

ゼロからつくるWord pressテーマ第9回

  • 1. ゼロからつくるWordPressテーマ#9 ループ関数と投稿記事 http://hitsuji.me
  • 2. 目次 1. 今回の内容 2. 投稿表示の仕組み 1. サイトアクセスから表示まで 2. サイト生成のフロー 3. クエリ作成 4. テンプレート実行 5. フローチャートにまとめ 6. コードにする 3. 今回のまとめ&次回予告 ゼロからつくる WordPress テーマ #9 http://hitsuji.me 2
  • 3. 1. 今回の内容 記事を表示する仕組みを理解する コレ <?php if(have_posts()): while(have_posts()): the_post(); ?> <h2><a href="<?php the_permalink(); ?>"> <?php the_title(); ?></a></h2> <?php the_content(); ?> <?php endwhile; endif; ?> ゼロからつくる WordPress テーマ #9 http://hitsuji.me 3
  • 4. 2-1. サイトアクセスから表示まで(連載:第4回より) functions.php WordPress初期化 テーマで利用する機能を (functions.phpを読み込み) 追加, 定義, 設定する関数が記述 index.phpなど テンプレートフォルダ テンプレート選択 (テンプレート階層に従って選ばれる) 読み込まれたfunctions.phpに記述された サイト生成 設定内容を反映した形で、 選択されたテンプレートを解釈して htmlコードが生成させる。 今回はこの詳細を考えます ゼロからつくる WordPress テーマ #9 http://hitsuji.me 4
  • 5. 2-2. サイト生成のフロー サイト生成 サイト表示する投稿を クエリ作成 リストアップする WordPressが自動的に やってくれる リストアップした投稿を テンプレート実行 順次表示する テンプレートファイルに 自分でコードを書く ゼロからつくる WordPress テーマ #9 http://hitsuji.me 5
  • 6. 2-3. クエリ作成(WordPressが自動的にやってくれる) サイトURLから表示すべき記事の種類を決めて、 ダッシュボード表示設定から表示する投稿数を決めて、ストック サイトURLから 表示すべき記事の種類を判断 投稿ページ / カテゴリページ / タグページ or…に合わせて ストックする記事の種類を決める 記事#1 ダッシュボード表示設定から 記事#2 表示する投稿数を決定 記事#3 ゼロからつくる WordPress テーマ #9 http://hitsuji.me 6
  • 7. 2-4. テンプレート実行(テンプレートにコードを書く) ループ内で、投稿を1つずつ取り出して、WP関数でその投稿のタイトルや 記事内容を出力する ループ内の処理 the_post() the_permalink () 取り出した投稿のURLを出力 投稿#1 投稿#2 the_title () 投稿#3 記事を1つ取り出す 取り出した投稿のタイトルを出力 the_content() 取り出した投稿の記事を出力 ゼロからつくる WordPress テーマ #9 http://hitsuji.me 7
  • 8. 2-5. テンプレート実行(前ページ)のフローチャート NO 投稿がある? YES NO 投稿がある? YES 投稿を1つ取り出す 投稿のURLを出力 投稿のタイトルを出力 投稿の記事本文を出力 END ゼロからつくる WordPress テーマ #9 http://hitsuji.me 8
  • 9. 2-6. テンプレート実行をコードで記述 NO 1 投稿がある? YES NO 2 投稿がある? 1 2 3 YES <?php if(have_posts()): while(have_posts()): the_post(); ?> 4 3 投稿を1つ取り出す <h2><a href="<?php the_permalink(); ?>"> 5 4 投稿のURLを出力 <?php the_title(); ?></a></h2> 6 <?php the_content(); ?> 5 投稿のタイトルを出力 <?php endwhile; endif; ?> 6 投稿の記事本文を出力 END ゼロからつくる WordPress テーマ #9 http://hitsuji.me 9
  • 10. 3. 今回のまとめ&次回予告 今回のまとめ  サイトにアクセスすると、WordPressが自動 的にクエリを作成する  the_post()関数で、クエリの1つの投稿が ロードされる。  the_title()やthe_content()関数で、ロード された投稿のタイトルや記事本文を出力する。 次回予告  次回も引き続き、クエリと投稿記事表示につ いて紹介します。 ゼロからつくる WordPress テーマ #9 http://hitsuji.me 10