前回ではheader.phpの作成に続き、footer.phpの作成方法をご紹介いたしました。header.phpの作成編はこちらfooter.phpの作成編はこちら今回は、今まで作成したファイルを連結するテンプレートタグを使ってTOPページを表示させるとろこまでをご紹介したいと思います。まとめテンプレートタグとはWordPressでは、何かを呼び出したり出力したりする際に、テンプレートタグを使用します。これによってヘッダーやフッター、サイドバーやその他にも様々なものを呼び出したり出力させてたりする事が出来ます。代表的なテンプレートタグここでは、数多くあるテンプレートタグの中でもよく使われているテンプレートタグについて見ていきましょう。サイトのパーツを呼び出すテンプレートタグインクルードタグとも呼ばれていて、サイトのテンプレートファイルを呼び出すタグ。header.phpを呼び出すテンプレートタグ。footer.phpを呼び出すテンプレートタグ。sidebar.phpを呼び出すテンプレートタグ。検索フォームを呼び出すたテンプレートタグ。get_template_part()でもテンプレートファイルを呼び出せます。テーマ内にあるstyle.cssのパスを出力するテンプレートタグ。追加するcssファイルを読み込む場合に使用するテンプレートタグ。画像パスを出力する時やjsなどの外部ファイルのパスを出力する時に使用するテンプレートタグ。非推奨のテンプレートタグのあるので使用には注意しましょう代表的でよく使用するテンプレートタグをご紹介させて頂きましたが、WordPressのテンプレートタグにはバージョンアップなどに伴い、現在では非推奨となっているテンプレートタグもあります。非推奨のタグを使用すると、予期せぬエラーや場合によってはセキュリティにも良くない場合がありますので、極力推奨されているテンプレートタグの使用を心がけましょう。今回はテンプレートタグを使用して、TOPページの表示する事を目的とした記事になるので、テンプレートタグ自体のご紹介は機会があれば次回以降にご紹介していきたいと思います。作成したindex.phpにテンプレートタグを入れて、ヘッダーとフッターを呼び出そうさて、テンプレートタグについて、簡単にご紹介させて頂いたのですが、このテンプレートタグを使って、TOPページを表示させる方法をご紹介していきます。index.phpにヘッダーとフッターを呼び出すテンプレートタグを入れます以前に作成したindex.phpには現在、ヘッダーとフッターがない状態かと思います。このindex.phpにテンプレートタグを入れてヘッダーとフッターを以下のように追加して呼び出します。ここに、TOPページに表示するメインコンテンツになるコードがはいります。footer.phpを呼び出すテンプレートタグ上のコードの」ように、index.phpにヘッダーとフッターを呼び出すテンプレートタグを追加すると、上書き保存をします。header.phpにファイルをつなぐテンプレートタグを入れます続いて、header.phpの方にもテンプレートタグを追加していきましょう。style.cssのパスを出力するテンプレートタグを入れますWordPressでは、通常のHTMLで作成したファイルの読込のパスではスタイルシートを読み込めなかったり、画像を読み込めなかったりします。以下のようにスタイルシートやその他の外部ファイルのパスを読み込めるようにテンプレートタグを使ってパスを書き換えます。修正後のパスwp_headタグをヘッダーに追加しますheadタグの閉じタグの直前に、wp_headというテンプレートタグを追加します。このタグはWordPressのテーマ作成をする際に必ず必要で、無いとWordPressが上手く動かなくなる場合がありますので、必ず入れるようにしましょう。ヘッドタグの閉じタグの直前に追加します</head>フッターと、TOPページのメインコンテンツにも必要なテンプレートタグを入れましょう上のようにテンプレートタグを追加したら、フッターやTOPページのメインコンテンツにあたる画像パスやリンクパスにも、テンプレートタグを入れていきます。修正後のパスフッターにもヘッダーと同様にwp_footerタグを追加しますheader.phpの時と同様に、footer.phpにも、wp_footerというテンプレートタグをボディタグの締めタグの直前に追加します。ボディタグの閉じタグの直前に追加します</body></html>ここまでが出来ましたら、サーバーに一度アップロードして上手く表示が出来ているかを確認してみましょうここまでの作業を終えましたら、次は一度、サーバーにファイルをアップロードして、ちゃんと表示されているかを確認しましょう。作成したファイルは、WordPressのthemesディレクトリとう、テーマを格納しているフォルダがありますので、そこに、今回作成したテーマをアップロードします。サイトの名前など任意の名前のフォルダを作成し、今まで作成したサイトのファイル一式を入れて以下のディレクトリへアップロードします。ドメイン名/wp/wp-content/themes/今回作成したフォルダ名/※環境によりパスが変わりますので、詳細は各自で確認して下さい。アップロード後、サイトが問題なく表示されていれば今回は無事作業が成功した事になります。不具合があれば、もう一度パスは間違えていないか、タグの記述に間違いは無いかしっかりと確認し、ミスがあれば修正して再度アップロードして表示されるようにしましょう。まとめ今回はWordPressで作成したファイルで、TOPページを表示させるために、テンプレートタグをご紹介し、TOPページを表示させる方法もご紹介しましたが、いかがだったでしょうか?まずは、ここまでがファーストステップと捉えて、次回以降も、ポイントを押さえてご紹介していければと思います。BASEの中の人2013年よりWEB制作会社に入社し、デザイン・コーディングからディレクションと幅広く従事。WEB制作に関する事から趣味に関するや生活に役立つ知識などを発信するWEBサイトです。HTMLやWordPress、Photoshop、WEBデザインと、WEB制作に関するあらゆる事を発信していきます。