Webの記録

WordPressでオリジナルテーマ作りにチャレンジ 2【切り分け編】

投稿日:2011年10月25日 更新日:

この記事は約 4 分で読めます。

カンプイメージ画像

WordPressのオリジナルテーマ作りをしています。

今回は、前回の【準備編】の続編です。

※(x)html+cssの知識がある事が前提で書いています。

前回までで、オリジナルのブログテーマのコーディングをしたものをローカルのWordpressで表示が出来る状態になりました。

今回はこれに少し手を加えて(header・footer・sidbarの3つのパーツに切り分けて)、index.phpの中を少しすっきりさせたいと思います。

他のページで共通に使われる部分を切り分けることで、ソースコードも見通しが良くなりますね!

 

オリジナルテーマの制作の流れ。

  1. html+cssで作ったサイトをWordpressへアップする
  2. WordPressへアップしたものをパーツテンプレートへ切り分け ←今回はココ。
  3. header・footerを作成
  4. index.phpで各ページのベースを作成
  5. sidebar.phpでサイドバーを作成
  6. single.phpで記事の個別ページを作成
  7. page.phpで固定ページを作成
  8. トップページを作ってみる

 

デフォルトの「twentyten」を見ると、たくさんのphpファイルがあります。
1つのページを複数のphpファイルで表示している事になります。
そんなワケで、私も簡単に今回は 「index.php」の中身を「header.php」「footer.php」「sidebar.php」の3つへ切り分けてみようと思います。

切り分けイメージ切り分けのイメージは、複数のページ同じように表示される部分を別のphpファイルへ移す感じになります。ブログの投稿部分がindex.phpになります。
※まだ私の作業が途中なので、もしかしたら後で修正を入れる可能性がありますが・・・。

作業1

ローカルに空の「header.php」「footer.php」「sidebar.php」を追加します。
中身の書き込みは作業2でしますので、名前だけ付けた真っ白状態の上記3つのphpファイルがあればOK。

作業2

WordPressの管理画面「外観」で、オリジナルテーマが有効化されている状態にしておきます。
「テーマ編集」画面で、右側に作業1で入れたphpファイル3つがあればOKです。

ここで「index.php」を開きます。
(x)htmlの最初からコンテンツの前までの部分を全てコピー(切り取り)ます。

その部分に、下記の1行を入力します。

<?php get_header() ;?>

入力出来たら「ファイルを更新」ボタンを押して保存させます。

この後「header.php」を開きます。
先程 「index.php」の最初からコンテンツの前までの部分を貼り付け、「ファイルを更新」ボタンを押して保存させます。

作業3

同様に「index.php」のside部分を切り取り、「sidebar.php」に貼り付け、「ファイルを更新」ボタンを押して保存させます。
「index.php」のside部分があった所に以下の1行を加えます。

<?php get_sidebar(); ?>


作業4

同様に「index.php」のfooter部分を切り取り、「footer.php」に貼り付け、「ファイルを更新」ボタンを押して保存させます。
「index.php」のside部分があった所に以下の1行を加えます。

<?php get_footer() ;?>

ここまでで、切り分ける前と同じようにブラウザに表示されていればOKです!


次回は、phpやテンプレートタグに置き換えていく作業をする予定です。
記事を表示させたりする為に、カテゴリの設定(「投稿」→「カテゴリー」画面で設定出来ます)や、記事の投稿を次回までに済ませておくことにします。

-Webの記録
-, ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

Facebookページに「お問い合せフォーム」を簡単設置♪

この記事は約 2 分で読めます。何気に始めたFacebookでは意外な人との繋がりが持てて、思ったより面白くて毎日開いて見てしまいます。 きっとそんな風に思っている方も多いのでしょう。 最近、Face …

ファイルアップロード・メール添付機能をWordPressお問い合わせプラグイン「Contact Form 7」でカンタン実現!

この記事は約 1 分で読めます。 WordPressでお問い合わせフォームを付けるときは、いつもプラグイン「Contact Form 7」を利用しています。 日本人の作者で、利用者が多く、更新頻度の高 …

no image

スマートフォン用サイトで、タップで電話をかけさせたい時

この記事は約 1 分で読めます。 スマートフォン用のサイトで、必要になったのでメモ。 ボタンをタップした時に電話をかけさせたい時の記述と、郵便番号などの数字を電話番号と間違えて勝手に電話番号のリンクが …

no image

画面のスクリーンショット(キャプチャー)をとる3つの方法+1

この記事は約 2 分で読めます。 Webサイトのスクリーンショット(キャプチャー)をとる時、画面に表示されている部分のみの場合や、Webサイト1ページ分全体などあります。 特にWebサイト1ページ全体 …

no image

無料Facebookアプリ「Pronto ContactForm」を試してみた♪

この記事は約 2 分で読めます。 最近、Facebook関連の便利なアプリをたくさん見掛けます。 Facebookページでお問い合せフォームが必要になった時に便利なアプリ「Pronto Contact …