« »

WordPress テーマの作成 トップページ作成 その1

WordPress入門


トップページを作成していきます。

 まずはトップページを作っていきます。
テーマ作成講座は、サンプルテーマを使って順番に
講座を進めていきますので、もしこのページから読み始めた人は、こちらの「テーマの作成準備」の記事から順番に読み進めてください。

それでは、始めていきます。

 

管理画面メニュー「外観」の「テーマ編集」を
選択してください。

右のテンプレートの中から「home.php」を
選択してください。

この「home.php」に記入したものが、トップページに表示されます。

使える記述は、htmlタグとWordPress用のタグです。cssは、style.cssから読み込みます。

それでは、作っていきましょう。

今回のWebサイトの構想です。3カラムのヘッダーとフッターのサイトです。

 今回、作るWebページは、右のように、
3カラム(3列)のサイトで、全ページにおいて
ヘッダー部分とフッター部分、左右サイドバーが
共通の内容のページを作ります。 

WordPressの場合、ヘッダー部分やフッター部分
など全ページに共通で同じ部分を作る場合、
別ファイルで保存しておきます。

 例えば、ヘッダー部分の記述は、header.phpに、フッター部分の記述は、footer.phpに保存しておきます。

このように別ファイルにそれぞれ書き込んでおき、その記述を使いたい箇所で
WordPress用のタグを使い読み出すのです。

 

 実際にやってみましょう。home.phpに以下の記述を記入(コピペ)してみてください。

※記述部分をダブルクリックすると記述が全て選択されます。右クリックで保存して貼り付けてください。

<?php get_header(); ?><!--  ヘッダー部分(上部分)呼び出し  -->

<!--  記事コンテンツ(中央部分)  -->
<!--  左サイドバー  -->
<!--  右サイドバー  -->

<?php get_footer(); ?><!--  フッター部分(下部分)呼び出し  -->

 ここで使っている<?php get_header(); ?>、<?php get_footer(); ?>は、
WordPress用タグです。

<?php get_header(); ?>が、header.phpの内容を呼び出し代入するタグ、
<?php get_footer(); ?>が、footer.phpの内容を呼び出し代入するタグとなります。

ひとまず、記入(コピペ)し終わったら、「ファイルを更新」ボタンを押します。
 

header.php、footer.phpの編集

 つづいて、header.php、footer.phpを編集していきます。

header.php
footer.php

home.phpに記入したように、ヘッダーとフッターの記述を読み込みますので
上のようにヘッダーとフッターでhtmlの記述をわけて作ります。
このような感じで記述を分けつつ作っていきます。

header.php
footer.php

 とりあえず、基本的なものをWordPress用タグを使いつつ埋めてみました。
header.php、footer.phpに記入(コピペ)しましょう。終わったら、「ファイルを更新」ボタンを押します。

 内容としては、WordPress用タグを使って管理画面での設定などで記入した値をそれぞれに
代入しています。WordPress用のタグがかなり出ていますが、全部覚えると大変ですので、
別に覚えなくて大丈夫です。

 項目を弄りたい箇所だけ実際のWebページのソースと見比べてみて、記述を移動したり
調整してみてください。<?php  ~ ; ?>で囲まれた部分がWordPress用のタグですので
移動する時は、コレをひとまとまりとして考えてください。 

 まだ基本的なものしか入れてませんので 実際のWebページを見ても
たいしたことは書いていません。これからどんどん追加していきます。

  次のWordPress テーマの作成 トップページ作成 その2の講座ではタイトル画像と
ナビゲーションバーを追加していきます。 

« »

この記事へのコメント

【コメントの投稿の仕方について】

   このサイトでは、「Disqus」と呼ばれるコメント機能を使っています。
  ツイッターやフェイスブックなどにアカウントをお持ちの方は、ログインすることで
  自分の各プロフィールでコメントすることが出来ます。
  なんのアカウントもない人もメールアドレスさえ入力すればコメントできます。
  (入力したメアドはコメント投稿には表示されません。)
  また、コメント欄には画像を張ることも出来ます。


ひと言コメントや、記事の質問や感想など お気軽にお書きください。
  なにか書いていただけると管理人が嬉しがります。