WordPressのテーマを作っていこう【header.php、footer.php編その１】
Day:2012.9.18 0:05 Comments: 16
右から左にどんどん忘れていくできの悪いブログ主なので、忘れないうちにどんどん書いていきます。
今回はheader.phpとfooter.phpを作成。
まだまだこの辺は簡単です。
これまでの設定
コーダーでWordPressを読み込む
テーマディレクトリ編で作ったテーマフォルダを編集する。
WordPressのコード編集はコーダーを使った方が楽。
ブログ主はCoda2というコーダーを使っているが、無料のNetBeansでも十分使いやすいので、そちらをおすすめしておきます。
Coda 2 
カテゴリ: 開発ツール
価格: ￥6,500
コーダーをインストールし、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はブログの顔。
ブログタイトルを表示するだけでなく、どのページを開いても常に存在するので、ナビゲーションバーやRSS登録ボタンを設置したりと、サイト自体を使いやすくする役目も果たす。
なによりHTML宣言を行い、これはHTML文です！っていうことをブラウザに教える役目も果たす。
footer.phpは一見地味だが、コピーライトを表示したり、HTMLコードを閉じるという重要な処理を行うほか、他ナビゲーションの表示にも使える。
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。
ブラウザでソースコードを読み込んでみよう。
PHPコードは影も形も消え、代わりにHTMLコードに適切なコードが書き込まれている。
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文も自分で書き換えなければならない。
そういう手間を省き、ミスを減らす便利なシロモノってわけ。
ちょっとわかりにくいかな。
次回へ続く。
くずのはさん こんにちわ。
いつもありがとうございます。
ゲームは（すごろく系、テトリス系のみ）ほとんどしないのですが、
レビューおもしろいですね。
さて、
コーダの設定勉強になりました。
わたしの設定下では、
このようになりました。
coda2、netbeansとも
originaltheme(以下Aとします）より下のファイルが、
chmod ーR 766 A では、見えませんでした。
①chmod ーR 766 A
のあと、フォルダだけ
chmod 75５ 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 になります。
追加ファイルも同様です。
質問ですが、
１） chmod -R 766 A
でファイルの読みこみができなくて
chmod R 755でファイルが読み込めたのはなぜなのでしょうか。
２）chmod -R 766 A
で使えるようにするには、何かほかの設定が足りなかったのでしょうか。
３）コーダで新しいファイルをつくると、
rw-r–r– ユーザ名 wheel
になってしまいますが、
apacheにはできますか？
お時間あるときに教えていただいていいでしょうか。
所有権やアクセス権についてはCoda、NetBeansともに一切関係ありませんよ。
ディレクトリは作成したユーザーが所有権を持ちます。
所有権移転はchownです。
使い方はググってください。
パーミッションはroot、所有者、一般の順番です。
Linux パーミッションでググればわかると思います。
くずのはさん
こんにちわ。
いつもありがとうございます。
次期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にあったことが分かりました。
さすがにMMS対応していくんじゃないですか？
そのかわりi.docomo.ne.jpとか、アドレスが変わるような気もしますけど。
SBも大分回線補強してるので、流出対策してるんじゃないですかね。
~/var/www/html/
にWordPressを置いてもブラウザから見えないんじゃないですか？
/var/www/html/
以下に置かないとダメだと思うんですが。
あと、
/home/limesheep5/www/wordpress/wp-content/
にあるthemesディレクトリのパーミッションを777に変えるとテーマを読み書き変更可に出来ますけどね。
お世話になります。
ブログ大変勉強させていただきました。ありがとうございます。
WordPressのテーマbunnyを使っているのですが
サイトのタイトルがホームへリンクされておらず戻ることができません。
サイトのタイトルをホームにリンク付けするためにはどこをいじればいいのでしょうか。
教えていただけますと助かります。
多分ですが、
header.phpの35行目
を
“>
に書き換えればリンクが貼られると思います。
早速ご返信いただきありがとうございます！
35行目ですね
を
“>
試してみたところ”>という表記がタイトルに加わるだけでした。
色々と試してみたのですが、
id=”headline”
これを外して
<a href="” rel=”home”>
とすると、リンクはついたのですが。
id=”headline”
がタイトルを曲線に表記してくれる機能があり、できれば外したくありません。
id=”headline”を付けた状態でリンク化することはできませんでしょうか。
すいません、表記が消えてしまったので再度投稿させていただきました。
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"を付けた状態でリンク化することはできませんでしょうか。
コメントが化けてました。
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>
に変えるとリンクが貼られると思います。
キョウジさま
ご親切に教えていただき本当にありがとうございます。
早速試してみました。
ですが、サイトのタイトルにはリンクがなく、その下段あたりのサイト紹介文付近全域にリンクがつくようになりました。
曲線で表示されるサイトタイトルの文字にリンクを張ることはできませんでしょうか。
お忙しい中、申し訳ありません。
あ、aタグを閉じるの忘れてました。
35行目
<h1 class=”site-title” id=”headline”><a href=”<?php echo home_url(); ?>”><?php bloginfo( ‘name’ ); ?></a></h1>
こうかもしれません。
ありがとうございます。
aタグを閉じると、今度はリンクがなくなってしまいました。
やはりちょっとイケてない外観テーマのようです。
TOPへ戻るボタンを別途設置するというのも考えてみます。
お忙しいところ、本当にありがとうございます。
うーむ。そうですか。
テスト環境がないので、テーマのソースを見て推測でやってみたんですけど駄目でしたか。
すいません。
差し支えなければブログのURLを教えて頂ければ、ソースを見て判断することは出来るかもしれませんが。
キョウジさま
ありがとうございます。
ご連絡が遅くなり、申し訳ございません。
まだ、よろしいでしょうか。
このサイトなのですが、いかがでしょう。
新たにhtmlファイルを作成し、ソースをコピーしてみたらリンクがつきました。
なので、CSSでhrefが無効になってるんだと思います。
なので諦めた方がいいかもしれません。
返信が遅くなり誠に申し訳ございません。
やはりそうですよね。ちょっと他のテンプレートに変えることを検討します。
お忙しいところご丁寧に教えてくださり誠にありがとうございます。