おばちゃんのつれづれ 主にマンガとweb

おばちゃんがライフハックや日常を書きます

初心者がwordpressテーマ自作3 phpを分割するぞ!

さて、前回までで、テーマフォルダを作って、アップロードして、cssを適応させて、文字化けしちゃったのを直しました。

今回はphpの分解とやらにチャレンジです。

どうやら、普通のhtmlではぺらっと一枚だった内容を、wordpressではいくつものphpに分けて記載する方式のようです。

 

とりあえず今こんな感じ。しれっと身バレしてますがまぁ気にしない。

f:id:obatyan1:20160329192110j:plain

 

ここまでの流れはこちら↓からご覧ください 

obatyan1.hatenablog.com

 

phpを分割する

というわけで、今回themeフォルダの中身が増えます。

現状がこちら↓

f:id:obatyan1:20160329192538j:plain

この中のindex.phpを分裂させていきます。

 

1 分割の予定を立てる

今回のサイトはこんなデザインなので

f:id:obatyan1:20160329194340j:plain

ヘッダー(header.php) コンテンツ(content.php)サイドバー(sidebar.php) フッター(footer.php)の5つに分割することになります。

追記:headerとかsidebarとかの名前は超重要でした。適当につけずに、ちゃんとこの名前にしておいてください。

 

2 白紙のphpを増殖

予定が決まったら、themeフォルダの中にphpを増やしましょう。

右クリック→新規作成→テキスト で新規作成して名前を変更します。

f:id:obatyan1:20160329193355j:plain

 

3 増殖開始!

新規作成したphpに書き込みしていきます。

 

やりかたは2ステップ。

 

まず、index.phpからheader.phpにヘッダー部分をコピペ。

追記:ここで余計な<dib>や</div>タグなどをコピペしてしまうと表示されません!このあたり詳しくは余力があったら記事にしますが、とりあえず今後エラーがあったらこの段階でコピペの位置を間違えた可能性が高いです。

 

f:id:obatyan1:20160329195249j:plain

紐付け

index.phpにはこの呪文をコピペ。

<?php get_header(); ?>

header』部分はさっき自分で作ったフォルダ名になります。

f:id:obatyan1:20160329195420j:plain

 

こんな風にコンテンツやサイドメニューなども 

コピペ→紐付け していきます。

紐付けする呪文はフォルダ名に応じて変わります。

今回の例だとこんな感じ。

 

サイドバー1

<?php get_sidebar(); ?>

フッター

<?php get_footer(); ?>

 

 

できたー。

今回content.phpも作ったのですが、どうやらメインコンテンツ部分はindex.phpに残しておいていいようなので削除しました。

 

現在、themeフォルダ内はこんな感じ。

追記:下の画像でなside1.phpになっていますが、本当はsidebar.phpという名前にしないと上手く動きませんでした。

f:id:obatyan1:20160329201217j:plain

 

index.phpはこんな感じ。

赤文字にしたところが変わった部分です。

<?php get_header(); ?>

<!-- メインとサイドバーを囲むラッパー開始 -->
<div class="wrapper">
<!-- メイン開始 -->
<div class="main">

 

 ~~メインコンテンツ部分中略~~

 

</div><!-- メイン終了 -->

</div><!-- メインとサイドバーを囲むラッパー終了 -->


<?php get_sidebar(); ?>
<?php get_footer(); ?>

</body>
</html>

 

そしたらこいつを改めてアップロードします。アップロードの方法はこちらに記載しました。

 

 

obatyan1.hatenablog.com

 

 

 

 

ブラウザ上の見た目は全然変わってませんがソース部分がだいぶすっきりしました。

 

 

 

 

 

関連記事

 

obatyan1.hatenablog.com

 

 

obatyan1.hatenablog.com

 

 

obatyan1.hatenablog.com

 

 

このカテゴリの記事一覧

obatyan1.hatenablog.com