読者です 読者をやめる 読者になる 読者になる

おばちゃんのマンガレビュー 

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

wpテンプレート自作4 index.phpを編集 初心者向け編

さーて、素人がゼロからなるべく手抜きでwordpressのテーマを自作しようというこの企画、案外さくさくと進んでいます。やったね。

 これまでの流れはこちら。

素人がWPでテーマ自作 

 

初心者は既存のテーマをカスタマイズするのが無難と思われているけど、それだとテーマの構造をちゃんと理解する必要があるので実は結構ハードルが高いと思うのですよ。こちとら超初心者なんで、ヘッダー画像のサイズを変えるためだけに何時間もググったりするハメになります。テーマごとに構造が全然違うから参考にならなかったりね。

既存のテーマをカスタマイズするのは一見楽そうですが、結局はワードプレスの構造を勉強しつつそのテーマについて勉強しつつhtmlも復習しつつ新しいサイトデザインを考えるという同時進行になっていまいます。

 

だったらゼロから自分好みのテーマを作っちゃったほうが早道、ということで、前回まででテーマフォルダの中にテンプレートファイルができました。

f:id:obatyan1:20160329201217j:plain

今回はこいつら編集するはず、ですが、それってそんな必要かなと思ってます。

 

だってさ、すでにサイドバーとかヘッダーとか分割されているわけですよ。

「サイドバーに新しいメニューを追加したい」とか思ったら、これまでだったら全てのページを書き直さなくてはいけなかったのに、ワードプレステーマ化したらside.phpに書き込むだけで全ページ適応されちゃうわけですよ。20とか30とかのページを書き直してたのがたった1つの書き直しで済んでしまうらしいのです。まじか。

初心者がこれ以上何を望むのかと。

もういいじゃん超便利じゃん。これ以上高望みしたらバチが当たるよ・・・

というわけで。

サイト名変更やらパンくずリストやらナビゲーションバーやらトップ画像変更やら、難しいことはやめて、WPテーマとして最低限機能するだけの編集だけを行うことにします。

 

index.phpの編集

前回までで、index.phpはheaderやfooterなどに分割されましたがメインコンテンツ部分はまだhtmlのままでした。ここのメインコンテンツ部分にWPで編集した記事が載るようにします。

WPで作れる記事には固定ページと投稿ページなどいくつか種類がありますが、今回はブログではなく超絶シンプルなHPを作るため、とりあえず全て固定ページで作っておきます。ていうかぶっちゃけ投稿ページの存在意義が分かってないです。

現在のindex.phpはこんな状態。

 

<?php get_header(); ?>←ヘッダー表示の呪文

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

<!-- メイン開始 -->

↓ここからメインコンテンツ。まだhtml状態。
<div class="main">


<h2>『進化』する整体技法</h2>

↑ここにページタイトルを入れたい

 

↓ここからは普通の文章を表示させたい
<h3>リハビリと整体の融合</h3>
<p>
たたく、もむ、ほぐす、などの静的な手技に加え『生きて運動する身体』を想定した合理的な人体デザインを再生する整体技法です。<br>
疲れてくると、ストレッチなどのセルフケア

 ~~中略~~

 

メインコンテンツ終了
</div><!-- メイン終了 -->

<?php get_sidebar(); ?>←サイドメニュー表示の呪文

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


<?php get_footer(); ?>←フッター表示の呪文

</body>
</html>

 index.phpはトップページになります。サイトにアクセスしたら真っ先に見えるページです。今回は一般のHPと同じように、トップページはいつも同じ内容が表示されるようにします。

 

1 固定ページ作成

というわけで、まずは固定ページを作成します。

WPの管理ページにアクセスして、index.phpに書かれていたメインコンテンツ部分を記載します。

f:id:obatyan1:20160329214501j:plain

できあがったら、固定ページIDをコピー。

 

 追記:固定ページIDの場所を間違っていました。

正しいIDの調べ方はこちらを参考にしてみてください。

ワードプレスで記事や固定ページのIDを確認する方法 - キーワードノート

2 index.php作成

こんな風に変更します。

<?php get_header(); ?>

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

 

<!-- メイン開始 -->
<div class="main">

<?php
$page_id = xxx; //xxxに 固定ページIDを入力
$content = get_page($page_id);
echo $content->post_content;
?>

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

<?php get_sidebar(); ?>

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


<?php get_footer(); ?>

 

 </body>
</html>

 たぶんこんな感じで大丈夫(な気がする)

xxxの部分は、さきほどコピーした固定ページIDをペースト。

 

 

最後にこれらをアップロードします。 やりかたはこちら。 

obatyan1.hatenablog.com

 

 

htmlだった時にはめっちゃ長かったindex.phpがとてもすっきりしました。

これで「ヘッダー画像変えたいな」と思えばheader.phpを、「サイドメニューを変えたいな」と思ったらside.phpを一箇所変えれば一発で全てのページに反映されます。

 

 

これぞ超初心者のためのwpテーマ!

ナビゲーションバーとか検索窓とかコメント欄とか日付表示とかパンくずリストとかそういうのは必要だったら付け加えればいいじゃん。右も左も分からない初心者は、まずはこんな超絶シンプルなテーマを作ってみてからいろいろと付け加えれば楽ちん。

WPはもともとブログを作るためのものだから、HP作成のための情報が少なくて調べるのは大変ですが、やってみたらこんな簡単でした。

 

というわけで、次回はサイドメニューをカスタマイズして、めでたく自作WPテーマができあがりの予定です。

 

 

 関連記事

 

obatyan1.hatenablog.com

 

 

obatyan1.hatenablog.com

 

WPテーマ自作記事の一覧

obatyan1.hatenablog.com