blogtitle
RSS Twitter
  • TOP
  • このブログについて
  • imotenもくじ
  • VPS拡張編
    • VPS機能拡張
    • セキュリティ対策
    • WordPress設定
  • ブログ主おすすめ
    • おすすめアプリ
    • おすすめ周辺機器
    • Xcode
    • ターミナルサービス設定
  • レシピ(料理)

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

Day:2012.8.31 0:05 Comments: 4

code WordPress

WordPress


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

今回は肝心要のindex.php。

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


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

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


前回の記事


WordPressのテーマを作っていこう【テーマディレクトリ編】 | くずのは探偵事務所



index.htmlとindex.php


http://limesheep5.sakura.ne.jp/wordpress/wordpress/

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

これは当たり前なんだけど、ドメイン名/ 以降に何も入力しないと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のテーマを作っていこう【header.php、footer.php編その1】
    • WordPressのテーマを作っていこう【テーマディレクトリ編】
    • 【blogger】なんとか移転のめどが付いた【wordpress】
    • TextExpanderを使おう
    • さくらのVPSにWordPressをインストールする【MySQLとPHP編】


« ブログテーマをさらに更新してみた 油そばを作ってみた »



Comments: 4

  1. とーやま より:
    2017年4月11日 8:08 PM

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

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

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

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

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

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

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

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

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

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

    返信
    • 葛葉 キョウジ(管理人) より:
      2017年4月12日 12:35 AM

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

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

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

      返信
      • 匿名 より:
        2017年4月14日 10:30 AM

        くずのはさん

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

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

        返信
        • 葛葉 キョウジ(管理人) より:
          2017年4月15日 11:15 AM

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

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

          返信
返信をキャンセルする。

email confirm*

post date*

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

  • お知らせ


    毎週日曜25時から25時30分までは定期サーバーメンテナンスタイムです。
    サーバーの再起動やアップデートを行いますので、ブログに接続出来なくなる場合があります。

  • About

    kyoji_kuzunoha HN:葛葉キョウジ
    Apple信者です。
    iPhoneを使いたくてSoftBankにMNPしたら、電波がクソ過ぎてトランシーバー並みに使えなかったので、なんとかdocomo回線で使おうと研究した結果、SIMフリーiPhoneにたどり着く。
    でも、docomoメールが使えないので色々調べたらimotenという神サーバーソフトがあることを知り、VPSと出会う。
    imotenのために仕方なく借りたVPSを色々いじっているうちにのめり込み、チューニングしまくってAirVideoサーバー、WebDAVサーバー、ミュージックストリーミングサーバーにセットアップして超快適な環境に。
    設定方法などを自分のメモとして書きためつつ、現在はXcodeを勉強中。
    ゲーム、ガジェット、料理が大好きな30オーバーのオッサンです。
    毎日ブログ更新してます。(日曜は休み)
  • 最近のコメント

    • 【お風呂で】ジップロック最強すぎワロタ【iPhone&iPad】 に お風呂でiPhoneを楽しむための簡単防水術 | おにぎりまとめ より
    • 【白黒】iPhoneの画面の色が反転してしまった時の対処法【ネガ】 に 山野邊弘次 より
    • 【白黒】iPhoneの画面の色が反転してしまった時の対処法【ネガ】 に 山野邊弘次 より
    • 【白黒】iPhoneの画面の色が反転してしまった時の対処法【ネガ】 に 山野邊弘次 より
    • いい蕎麦屋。悪い蕎麦屋。 に やまがた より
    • 【白黒】iPhoneの画面の色が反転してしまった時の対処法【ネガ】 に たけ より
    • 【白黒】iPhoneの画面の色が反転してしまった時の対処法【ネガ】 に 葛葉 キョウジ(管理人) より
    • 【白黒】iPhoneの画面の色が反転してしまった時の対処法【ネガ】 に 匿名 より
    • 【白黒】iPhoneの画面の色が反転してしまった時の対処法【ネガ】 に 匿名 より
    • 【白黒】iPhoneの画面の色が反転してしまった時の対処法【ネガ】 に 葛葉 キョウジ(管理人) より
  • 最近の投稿

    • 【内臓保護】酒量を思い切り減らしてみた【アル中予防】
    • 毎日豆乳を飲んでみた【1ヶ月目】
    • MacBookに対応しているMoshiのUSB-C充電ケーブルを買ってみた
    • MacBookにインストールしたアプリ
    • MacBook2016の使用感その1
    • 【Mac】ことえりのライブ変換を使ってみた【El Capitan】
    • ジャストシステムのポータブルバッテリーを買ってみた
    • 【MacBook】iPhoneのテザリングについて
    • MacBook2016とアクセサリを購入してみた
    • iPhone6PlusからiPhone6sに乗り換えてしばらく経った現在の使用感
  • 人気記事

    • 【imoten】SIMフリーiPhoneで、iモードメール@docomo.ne.jpを使ってみた。設定編【yahoo!版】 481件のコメント
    • 【Gmail】CentOS6.x(64bit)でimotenを設定して@docomo.ne.jpメールを使う【主にさくらインターネット編】 268件のコメント
    • imotenQ&A 184件のコメント
    • 【DTI】SIMフリーiPhoneでdocomo.ne.jpメールを送受信する方法【outlook.com編】 130件のコメント
    • 【Gmail】CentOS5.x(32bit)でimotenを設定して@docomo.ne.jpメールを使う【主にDTI編】 126件のコメント
    • 【iPhone】imotenの送信メールをSSLで暗号化する【docomoメール】 112件のコメント
    • 【MyCloud】さくらVPSをAirVideoサーバーにする【ストリーミング】 99件のコメント
    • docomo版iPhone5s(5c)用SIMについてちょこっと考察してみた 99件のコメント
    • 【imoten】SIMフリーiPhoneで、iモードメール@docomo.ne.jpを使ってみた。設定編【Gmail編】 97件のコメント
    • SPモードメールをiPhoneでプッシュさせる【docomo.ne.jp】 97件のコメント
  • アーカイブ

  • カテゴリー

    • amazon
    • android
    • Apple
      • AppStore
      • iPad
      • iPhone
      • Mac
    • AppleWatch
    • blog
      • WordPress
      • 移転作業ログ
    • code
    • docomo
    • Game
      • 100万人の信長の野望
      • 3DS・DS
      • PCgame
      • PlayStation
      • XBOX360
    • MVNO
    • News
    • SIM
    • VPS
      • imoten
        • DTI
        • imoten機能拡張
        • さくらVPS
        • はじめに
      • セキュリティ対策
      • 機能拡張
    • Windows
      • ターミナルサービス
    • Xcode
    • おすすめアプリ
    • おすすめ周辺機器
    • グルメ
      • レシピ
    • もっと評価されるべき
    • リモートデスクトップ
    • レビュー
    • 健康
      • ダイエット
      • ランニング
    • 動画
      • TAS
      • スーパープレイ
    • 周辺機器
    • 学習
      • 英語
    • 未分類
    • 雑談

Copyright © くずのは探偵事務所,All right reserved.