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

WordPressのテーマを作っていこう【header.php、footer.php編その1】

Day:2012.9.18 0:05 Comments: 16

WordPress

WordPress


右から左にどんどん忘れていくできの悪いブログ主なので、忘れないうちにどんどん書いていきます。

今回はheader.phpとfooter.phpを作成。

まだまだこの辺は簡単です。


これまでの設定


WordPress設定 | くずのは探偵事務所


コーダーでWordPressを読み込む


テーマディレクトリ編で作ったテーマフォルダを編集する。


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


WordPressのコード編集はコーダーを使った方が楽。

ブログ主はCoda2というコーダーを使っているが、無料のNetBeansでも十分使いやすいので、そちらをおすすめしておきます。


Coda 2 App
カテゴリ: 開発ツール
価格: ¥6,500


【NetBeans】WordPressのコードを打つ前にコーダーを決める。その2 | くずのは探偵事務所


コーダーをインストールし、SFTP接続でWordPressディレクトリへ接続。

Coda2の場合はSFTP接続すればいいだけなので割愛。

NetBeansの場合はファイル→新規プロジェクト→カテゴリはPHPを選択し、プロジェクトはリモートサーバーからのPHPアプリケーションを選択。

後はウィザードに従ってVPSサーバーに接続しよう。

この辺のを詳しくやると先に進まないのでググってください。

設定サイトはいくらでもあるので。

WordPressのテーマが入っているパスは

/home/limesheep5/www/wordpress/wp-content/themes/

の中にあるので、一気にここを読み込んでしまった方が楽。



index.phpにコードを記入


index.phpを開いたら、コードを記入する。

コピペせず、必ず自分で記入しよう。

コードは書かないと覚えない。


index.php


<?php get_header(); ?>

<?php get_footer(); ?>


とりあえずこれだけ。

記入したら保存しよう。

このコードを記入することで、http://マイドメイン/wordpressへアクセスしたとき、ヘッダーとフッターが読み込まれる。

URLを開いてみよう。

ただ真っ白なファイルが読み込まれるはず。

当然header.phpやfooter.phpには何も記述されていないので、何も読み込まれない。

ソースを表示しても何も記述されていない。

なので、まずheader.phpにコードを記述していこう。



header.phpとfooter.php


header.phpはブログの顔。


header


ブログタイトルを表示するだけでなく、どのページを開いても常に存在するので、ナビゲーションバーやRSS登録ボタンを設置したりと、サイト自体を使いやすくする役目も果たす。

なによりHTML宣言を行い、これはHTML文です!っていうことをブラウザに教える役目も果たす。


footer.phpは一見地味だが、コピーライトを表示したり、HTMLコードを閉じるという重要な処理を行うほか、他ナビゲーションの表示にも使える。


header


header.phpとfooter.phpはindex.phpに次ぐ重要なファイル。



コードを記述する


それではheader.phpとfooter.phpにhtmlコードとPHPコードを記入していこう。

え?PHPだけじゃないのって?

PHPはHTMLコードを自動生成するプログラム。

なのでHTMLコードの中にPHPプログラムを埋め込み処理させている、というイメージをしてほしい。

HTMLコードの中にあるPHPプログラムをサーバーが処理してHTMLコードに変換し、ブラウザに表示する。

なので、ブラウザ上でコードの表示を行ってもPHPのコードは一切表示されないというわけ。

なんだかさっぱりわからない?

書いてるうちにわかるよ。


header.php


<!DOCTYPE html>
<html>
<head>

<meta charset=”<?php bloginfo (‘charset’) ; ?>” />
<title><?php bloginfo(‘name’); ?></title>

</head>

<body>


footer.php


</body>
</html>



青の部分がHTMLコード、赤の部分がPHPコードになる。

書いたら保存してブラウザで開いてみよう。

開いてみると、タブにブログタイトルが読み込まれている。

今回のブログタイトルはTestServer。


header


ブラウザでソースコードを読み込んでみよう。

PHPコードは影も形も消え、代わりにHTMLコードに適切なコードが書き込まれている。


header


PHPコードは<?php ○○ ; ?>と、<?php ; ?>に囲まれた部分、○○の部分がPHPコードになる。

それ以外はHTMLコード。

<?php bloginfo (‘charset’) ; ?>でPHPサーバーに文字コードを要求し、UTF-8という解答を受け取ってそれを表示し、<?php bloginfo(‘name’); ?>でブログタイトルをPHPサーバーに要求し、TestServerという返答を受け取ってそれを表示している。

bloginfo()というコードはWordPressの様々な設定情報を出力してくれる非常に便利なコード。

()の中にパラメータを記入することで情報を返してくれる。

charsetで文字コード、nameでブログタイトル。

他にもtemplate_urlでブログテーマまでのパス、rss2_urlでRSS2.0フィードのURLなど様々。

使用頻度は高い。



おさらい


ブラウザで

http://マイドメイン/wordpress/

にアクセスすると、まずindex.phpが読み込まれる。


index.phpに記述された

<?php get_header(); ?>

がheader.phpを、

<?php get_footer(); ?>

が、footer.phpを読み込む。


header.phpとfooter.phpに記述されたHTMLコードとPHPコード、


(header.php)
<!DOCTYPE html>
<html>

<head>
<meta charset=”<?php bloginfo (‘charset’) ; ?>” />
<title><?php bloginfo(‘name’); ?></title>
</head>

<body>


(footer.php)
</body>
</html>


がindex.phpに読み込まれ、さらに

<?php bloginfo (‘charset’) ; ?>

と、

<?php bloginfo(‘name’); ?>

が、サーバー上の文字コードとブログタイトルをそれぞれ取得し、HTMLコードへはき出す。


結果、

<!DOCTYPE html>
<html>

<head>
<meta charset=”UTF-8″ />
<title>TestServer</title>
</head>

<body>
</body>
</html>

というコードが生成され、ブラウザで読み込めるようになった。



直接の書き換えを極力省くPHP


HTML文すべてを記述するのと違い、文字コードやブログタイトルを変更しても、PHPがそのときの設定を返すので自動で更新される。

HTML文のみの場合は文字コードやブログタイトルを更新したら、HTML文も自分で書き換えなければならない。

そういう手間を省き、ミスを減らす便利なシロモノってわけ。


ちょっとわかりにくいかな。


次回へ続く。


関連記事


    • WordPressのテーマを作っていこう【index.php編】
    • さくらのVPSにWordPressをインストールする【MySQLとPHP編】
    • 【NetBeans】WordPressのコードを打つ前にコーダーを決める。その2
    • 【Coda2】WordPressのコードを打つ前にコーダーを決める。その1
    • coda2.0.2でWordPressコードをカラーリングする


« 【SoftBank】何なのこの会社【マジキチ】 テラリウムが素敵すぎる。 »



Comments: 16

  1. とーやま より:
    2013年2月19日 4:14 PM

    くずのはさん こんにちわ。

    いつもありがとうございます。

    ゲームは(すごろく系、テトリス系のみ)ほとんどしないのですが、
    レビューおもしろいですね。

    さて、
    コーダの設定勉強になりました。

    わたしの設定下では、
    このようになりました。

    coda2、netbeansとも
    originaltheme(以下Aとします)より下のファイルが、
    chmod ーR 766 A では、見えませんでした。

    ①chmod ーR 766 A
    のあと、フォルダだけ

    chmod 755 A

    一時ファイルを作らないに
    と指定すると、
    下のファイルリストが見えて、
    アップロードできました。

    netbeansは、デフォルトで
    一時ファイル new***、old***を
    つくるので、それを外さないと
    permisswion error
    になります。

    coda2は、デフォルトでパッシブモードなので、new***、old***を作りませんでした。

    ②または、chmod -R 757 A
    でも
    ファイルリストを見て、アップロードできました。

    ③chmod -R 757 A
    にすると 、

    一時ファイルを作るモードだと、
    新しく作成されて、(766 apache,apacheが変更されてしまいます。)
    ls -l
    確認すると、
    rw-r–r–  ユーザ名 wheel になります。
    追加ファイルも同様です。

    質問ですが、
    1) chmod -R 766 A
    でファイルの読みこみができなくて
    chmod R 755でファイルが読み込めたのはなぜなのでしょうか。

    2)chmod -R 766 A
    で使えるようにするには、何かほかの設定が足りなかったのでしょうか。

    3)コーダで新しいファイルをつくると、
    rw-r–r–  ユーザ名 wheel
    になってしまいますが、
    apacheにはできますか?

    お時間あるときに教えていただいていいでしょうか。

    返信
    • 葛葉 キョウジ(管理人) より:
      2013年2月19日 7:48 PM

      所有権やアクセス権についてはCoda、NetBeansともに一切関係ありませんよ。
      ディレクトリは作成したユーザーが所有権を持ちます。
      所有権移転はchownです。
      使い方はググってください。
      パーミッションはroot、所有者、一般の順番です。
      Linux パーミッションでググればわかると思います。

      返信
  2. とーやま より:
    2013年2月22日 12:14 PM

    くずのはさん
    こんにちわ。

    いつもありがとうございます。

    次期iphone、docomoから出たらいいですね。
    それでも、imotenの良さを知ってしまったから、spモードメールではなく、
    imotenは使っていくんでしょうね。
    逆にもし、これまでにdocomoからiphoneが出ていたら、ソフバンユーザーの人が、ロック解除したとして
    ここまで使いこなすかなーと思います。

    さて教えていただきありがとうございました。
    勉強になりました。

    ①chown -Rした後に新たに作ったファイルはログインした作成者になるということがわかりました。
    ②wheelのユーザーでログイン、
    netbeansなどのsftp接続では、suコマンドでrootになっていない。一般状態ですよね。wordpressのフォルダはroot/varにある。一般ユーザーで6=r+W、フォルダは見えてもファイルが見えないということなんですね。ディレクトリのみ755でないと読めないとういうことか、USERを作る時か証明書関係で何かミスっているのかなと思います。
    ③ chmod -R 766で
    読み込むには、以下の場所にWORDPRESSをおくとできました。home/user名/home/limesheep5/www/wordpress

    ④ターミナルでrootログインして作っていたので
    WORDRESSは、
    /var/www/htlm・・・・
    それはroot/varにあったことが分かりました。

    返信
    • 葛葉 キョウジ(管理人) より:
      2013年2月22日 2:30 PM

      さすがにMMS対応していくんじゃないですか?
      そのかわりi.docomo.ne.jpとか、アドレスが変わるような気もしますけど。
      SBも大分回線補強してるので、流出対策してるんじゃないですかね。

      ~/var/www/html/
      にWordPressを置いてもブラウザから見えないんじゃないですか?
      /var/www/html/
      以下に置かないとダメだと思うんですが。
      あと、
      /home/limesheep5/www/wordpress/wp-content/
      にあるthemesディレクトリのパーミッションを777に変えるとテーマを読み書き変更可に出来ますけどね。

      返信
  3. うさぎぱん より:
    2015年11月11日 4:14 PM

    お世話になります。
    ブログ大変勉強させていただきました。ありがとうございます。

    WordPressのテーマbunnyを使っているのですが

    サイトのタイトルがホームへリンクされておらず戻ることができません。

    サイトのタイトルをホームにリンク付けするためにはどこをいじればいいのでしょうか。

    教えていただけますと助かります。

    返信
    • 葛葉 キョウジ(管理人) より:
      2015年11月11日 5:05 PM

      多分ですが、
      header.phpの35行目

      を

      “>

      に書き換えればリンクが貼られると思います。

      返信
  4. うさぎぱん より:
    2015年11月11日 5:22 PM

    早速ご返信いただきありがとうございます!

    35行目ですね

    を

    “>

    試してみたところ”>という表記がタイトルに加わるだけでした。

    色々と試してみたのですが、

    id=”headline”

    これを外して

    <a href="” rel=”home”>

    とすると、リンクはついたのですが。

    id=”headline”

    がタイトルを曲線に表記してくれる機能があり、できれば外したくありません。

    id=”headline”を付けた状態でリンク化することはできませんでしょうか。

    返信
  5. うさぎぱん より:
    2015年11月11日 5:24 PM

    すいません、表記が消えてしまったので再度投稿させていただきました。

    35行目
    h1 class=”site-title” id=”headline” ? php bloginfo(‘name’); ? /h1

    を

    h1 class=”site-title” id=”headline”>”>という表記がタイトルに加わるだけでした。

    色々と試してみたのですが、

    id=”headline”

    これを外して

    h1 class=”site-title”>a href=”” rel=”home”><?php bloginfo( 'name' ); ? /a /h1

    とすると、リンクはついたのですが。

    id="headline"

    がタイトルを曲線に表記してくれる機能があり、できれば外したくありません。

    id="headline"を付けた状態でリンク化することはできませんでしょうか。

    返信
    • 葛葉 キョウジ(管理人) より:
      2015年11月11日 6:33 PM

      コメントが化けてました。
      htmlタグをコメントするとそれが適用されておかしくなるんですよね。
      <h1 class=”site-title” id=”headline”><?php bloginfo( ‘name’ ); ?></h1>

      を

      <h1 class=”site-title” id=”headline”><a href=”<?php echo home_url(); ?>”><?php bloginfo( ‘name’ ); ?></h1>

      に変えるとリンクが貼られると思います。

      返信
      • うさぎぱん より:
        2015年11月12日 12:59 PM

        キョウジさま

        ご親切に教えていただき本当にありがとうございます。

        早速試してみました。

        ですが、サイトのタイトルにはリンクがなく、その下段あたりのサイト紹介文付近全域にリンクがつくようになりました。

        曲線で表示されるサイトタイトルの文字にリンクを張ることはできませんでしょうか。

        お忙しい中、申し訳ありません。

        返信
        • 葛葉 キョウジ(管理人) より:
          2015年11月12日 3:12 PM

          あ、aタグを閉じるの忘れてました。
          35行目
          <h1 class=”site-title” id=”headline”><a href=”<?php echo home_url(); ?>”><?php bloginfo( ‘name’ ); ?></a></h1>

          こうかもしれません。

          返信
          • うさぎぱん より:
            2015年11月13日 5:10 PM

            ありがとうございます。
            aタグを閉じると、今度はリンクがなくなってしまいました。
            やはりちょっとイケてない外観テーマのようです。

            TOPへ戻るボタンを別途設置するというのも考えてみます。

            お忙しいところ、本当にありがとうございます。

          • 葛葉 キョウジ(管理人) より:
            2015年11月13日 8:55 PM

            うーむ。そうですか。
            テスト環境がないので、テーマのソースを見て推測でやってみたんですけど駄目でしたか。
            すいません。
            差し支えなければブログのURLを教えて頂ければ、ソースを見て判断することは出来るかもしれませんが。

  6. うさぎぱん より:
    2015年11月18日 4:37 PM

    キョウジさま
    ありがとうございます。
    ご連絡が遅くなり、申し訳ございません。
    まだ、よろしいでしょうか。
    このサイトなのですが、いかがでしょう。

    返信
    • 葛葉 キョウジ(管理人) より:
      2015年11月19日 11:42 AM

      新たにhtmlファイルを作成し、ソースをコピーしてみたらリンクがつきました。
      なので、CSSでhrefが無効になってるんだと思います。
      なので諦めた方がいいかもしれません。

      返信
      • うさぎぱん より:
        2015年12月14日 4:25 PM

        返信が遅くなり誠に申し訳ございません。
        やはりそうですよね。ちょっと他のテンプレートに変えることを検討します。

        お忙しいところご丁寧に教えてくださり誠にありがとうございます。

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

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.