WordPressのテーマを作っていこう【index.php編】

WordPress

さて、久々のWordPress記事です。

今回は肝心要のindex.php。

これがなければ話にならない。

昨日は油そばで今日はWordPress。

カオスですなぁ(;・∀・)w

前回の記事

WordPressのテーマを作っていこう【テーマディレクトリ編】 | naonotes.com(ナオノーツ)

index.htmlとindex.php

https://naonotes.com/

など、ブラウザのアドレス欄にドメイン名を入力すればウェブサイトにアクセスできる。

これは当たり前なんだけど、ドメイン名/ 以降に何も入力しないとindex.htmlやindex.phpに自動で接続するようになっている。

ただ省略されているだけで、必ずWebサイトを公開するサーバーにはこのファイルが絶対必要。

家の扉のような物。

扉が無きゃ入れないでしょ?

HTML文だけでウェブサイトを作る場合、扉のページにHTMLタグを打ち込みながら作っていく。

HTML文だけだと管理が煩雑

だが、HTML文でウェブサイトを作ると管理が大変。

メニューを作るのにもindex.html書き込み、abc.htmlにも書き込み・・・と、メニューバーのコードをいちいち全てのファイルに書き込まねばならない。

しかも、修正も一つ一つ直していく。

こんなやり方だと間違いやすいし、何より尋常じゃなくメンテナンスが非常に面倒くさい。

WordPressは分割管理

WordPressはこの問題を解決し、1コンテンツずつモジュール化されている。

サイドバーメニューはsidebar.php。

ヘッダーはheader.php。

フッターはfooter.php。

等々、分割管理でき、必要な時に必要なだけindex.phpに呼び出せる。

このブログで説明すると、上部メニューなどがheader.php。

sidebar.phpは右メニュー。

footer.phpはコピーライトが記述してある。

index.phpはそれらを呼び出したり記事を表示したり。

wordpress

こうやって画像で表現してみるとわかりやすいかな。

ソースコードを見てみよう

画像を見て理解したところで、サンプルとしてブログ主のindex.phpに記述してあるソースコードを見てみよう。

<?php get_header(); ?>

<div class=”content”>
  <p class=”title”>RECENT POSTS</p>
    <?php if(have_posts()): while(have_posts()): the_post(); ?>
      <?php get_template_part(‘content’); ?>
    <?php endwhile; endif; ?>
  <?php wp_pagenavi(); ?>
</div>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

たったこれだけ。

とはいえ、わかりにくいので分割してみてみよう。

上の画像と照らし合わせながら見るとわかりやすい。

まず、

<?php get_header(); ?>

でheader.phpを読み込み、

<?php if(have_posts()): while(have_posts()): the_post(); ?>
  <?php get_template_part(‘content’); ?>
<?php endwhile; endif; ?>

でループしながら記事を読み込み、

<?php get_sidebar(); ?>

でsidebar.phpを読み込み、

<?php get_footer(); ?>

でfooter.phpを読み込んでいる。

切り分けてみると分割管理されているのがわかるね。

ブラウザでソースを見てみよう

ブラウザでソースの表示をしてみると、ズラーッとHTML文が出てくるが、これはPHPが生成してくれている。

いちいち更新するたびにこの文を書き換えてられないけど、PHPを使うと自動でやってくれる。

上の短いソースコードがheader.phpなどを読み込み、この長いコードを生成してるというわけ。

自動化こそWordPressの真骨頂

画面に出力される文字はRECENT POSTの部分だけで、後はすべてPHPコード。

PHPがコードを読み込んで処理を行い、このブログを表示してくれている。

PHPが処理を行ってくれるおかげで、自分はただ記事を書くだけで更新すると最新記事を一番上に表示したりしてくれる、というわけ。

imotenもくじのページも、自分で書き加えるわけではなく、カテゴリに加えると勝手にもくじに追加されるようになっている。

追加で記事を書いたからと行って、いちいちHTMLコードを書き換える必要はない。

非常に管理が楽になった。

単純な作りのコード

ソースコードをぱっと見たときは、うわなにこれ?

って思うかもしれないが、分割してみるとそれほど難しくない。

見てわかるとおり、行数も少ないし非常に単純な作り。

複雑なコードはブログ主も組めないので、多分難しくならないと思うw

でも言い換えればそれほど難しくないコードを使ってもうちのブログ程度のものは作ることが出来る。

VPSの余った領域でブログを作ってみても面白いよ。

というわけで次回へ続く。

WordPressのテーマを作っていこう【index.php編】」への4件のフィードバック

  1. とーやま

    くずのはさん こんばんわ。

    ここで学ばせてもらったことが、
    すごく役にたちました。

    まだ、自分のVPSさくらのほうは、blogネタが思いつかずやってないのですが、

    知り合いのホームページを全くゼロからスタートアップしました。
    さくらレンタルサーバでしました。
    中身の文書も写真もすべてアップしました。
    これから、引き継ぎするところです。

    インストールするディレクトリをアドレスの一個下にすることで、
    ログインページ晒さないようにして、
    画像の場所もアドレス直下にするなど、

    既存のテーマを少しいじる、cssファイルとか、

    思うようにカスタマイズできました!

    ここで教えてもらえてとても
    よかったです。

    iPhoneからついっていって、wordpress まで挑戦しててよかったです。
    5年前ぐらいでしたね。

    ちなみに
    このページです。
    よろしければ、
    ご覧いただければ、嬉しいです。
    https://abenojretc.sakura.ne.jp

    返信
    1. 葛葉 キョウジ(管理人) 投稿作成者

      お久しぶりです!
      サイトまで作るとはすごいですね!
      GoogleMapもGoogleからAPIを取得するとサイトに地図を埋め込めますよ。
      オススメです。
      プラグインにAPIを打ち込めば表示されるようになるはずです。

      自分はiPhoneアプリを作って、企業に売るようになりましたw
      VPSにインストールしたPostgreSQLにアクセスしてデータを取得して、
      社内でのデータ共有や更新を行えるアプリを開発してます。
      ですが通信を行うと、通信速度などで求めた動作と全く違う結果になったりするので、
      非常に面倒です(;´Д`)
      暇な時間を作ってまたフィードバックしたいと思ってます。
      imotenで試行錯誤しながら触ったVPSですが、
      自分の仕事の内容まで変化させるものになりましたw

      とーやまさんも色々試していて素晴らしいですね!
      頑張ってください!

      返信
      1. 匿名

        くずのはさん

        メッセージありがとうございます。map埋め込みしました。いいですね。

         iphoneアプリ興味あります。xcodeですか?
        またお時間あるときに、更新してもらえるとうれしいです。楽しみにしています。
         おからだお大事に。北の大地の昨年の台風で、ポテチが消えるとか消えないとか。そちらは大丈夫ですか?

        返信
        1. 葛葉 キョウジ(管理人) 投稿作成者

          XCodeで開発してます。
          Objective-Cで開発してたんですが、そろそろSwiftに移ろうかと悩んでる最中です。
          自分用のマニュアルとしてブログを更新しようかちょっと悩んでますw

          こちらもポテチはすっかり無くなってますねw
          そんなに食べたいものなんですかね。ポテチって。

          返信

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)