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

レスポンシブ対応ナビゲーションを簡単に付けられる「SlickNav」

この記事は約 1 分で読めます。 レスポンシブサイトで、PCとスマホではメニューの見せ方を変えたいもの。 画面の幅が狭くなった時はハンバーガーボタンと言われる三本線のボタンを表示をすることができる、j …

no image

記事内のメモ表示に便利!WordPressのプラグイン「WP-Note」を使ってみた♪

この記事は約 1 分で読めます。 記事の本文とは別に、ちょっとしたメモ的な文章を書くときに使うと便利なプラグイン「WP-Note」!! 記事の一部のテキストを特定のタグで囲むだけで、カンタンに「メモ」 …

no image

Creative Cloud デスクトップアプリケーションが何も表示しなくなったとき

この記事は約 1 分で読めます。 Adobe Creative Cloudを使用していて、ディスクトップから起動させようとすると、画面が真っ白になってしまいました。 それぞれ単体のソフト(Photos …

no image

Photoshopでレイアウト設計をする時に便利なエクステンション「GuideGuide」を試してみた

この記事は約 1 分で読めます。 日頃、WebページのデザインはPhotoshopを使っています。何か便利なツールないかなぁ~と思っていたところで知ったエクステンション。 Photoshopでレイアウ …

no image

パソコンでスマホやタブレットの表示を確認出来るGoogle Choromeデベロッパーツール

この記事は約 1 分で読めます。Webサイトを制作する時、コーディングしながら都度いろんなブラウザで表示確認をします。 レスポンシブサイトとなると、今まで以上に表示をいろいろ確認しながら・・・の作業に …